1. SwitchBasic

SwitchBasic 컴포넌트는 사용자가 토글할 수 있는 기본적인 스위치 UI 요소입니다. 다양한 크기 옵션과 색상 스타일을 제공하며, 클릭 시 상태가 전환됩니다. 이 컴포넌트는 props를 통해 크기와 색상을 커스터마이징할 수 있습니다.

1.1. Import

import SwitchBasic from '@components/Switch/SwitchBasic';

1.2. Usage

기본 사용 예제는 아래와 같습니다:


import SwitchBasic from '@components/Switch/SwitchBasic';

function Example() {
  return (
    <>
      <SwitchBasic />
    </>
  );
}

export default Example;

1.3. Switch Sizes

SwitchBasic 컴포넌트는 다양한 크기 옵션을 제공합니다. 기본적으로 3가지 크기에서 작동하는 스위치를 사용할 수 있습니다:

Small: 작은 크기의 스위치
Medium: 중간 크기의 스위치 (기본값)
Large: 큰 크기의 스위치


import SwitchBasic from '@components/Switch/SwitchBasic';

function Example() {
  return (
    <>
      <SwitchBasic size="small" />
      <SwitchBasic size="medium" />
      <SwitchBasic size="large" />
    </>
  );
}

export default Example;

1.4. Props

SwitchBasic 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`size`	스위치의 크기를 지정합니다. "small", "medium", "large" 중 하나를 선택할 수 있습니다.	`'small' \| 'medium' \| 'large'`	`'medium'`
`onColor`	스위치가 켜졌을 때의 배경색을 지정합니다.	`string`	`'bg-Basic'`
`offColor`	스위치가 꺼졌을 때의 배경색을 지정합니다.	`string`	`'bg-[#9E9E9E] dark:bg-[#333742]'`

1.5. Full Example


// SwitchBasic.tsx
import { useState } from "react";

// 크기 타입 정의
type SizeType = "small" | "medium" | "large";

interface SwitchBasicProps {
  size?: SizeType;
  onColor?: string;
  offColor?: string;
}

const SwitchBasic = ({
  size = "medium",
  onColor = "bg-Basic",
  offColor = "bg-[#9E9E9E] dark:bg-[#333742]",
}: SwitchBasicProps) => {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  // 크기별 스타일을 설정합니다.
  const sizeClasses: Record<
    SizeType,
    {
      width: string;
      height: string;
      circleSize: string;
      translateDistance: string;
    }
  > = {
    small: {
      width: "w-14",
      height: "h-7",
      circleSize: "h-5 w-5",
      translateDistance: "translate-x-7",
    },
    medium: {
      width: "w-20",
      height: "h-10",
      circleSize: "h-7 w-7",
      translateDistance: "translate-x-11",
    },
    large: {
      width: "w-36",
      height: "h-16",
      circleSize: "h-12 w-12",
      translateDistance: "translate-x-20",
    },
  };

  const currentSize = sizeClasses[size];

  return (
    <div className="flex items-center justify-center space-x-12">
      <div
        onClick={toggleSwitch}
        className={`flex ${currentSize.height} ${currentSize.width} cursor-pointer items-center rounded-full p-1 ${isOn ? onColor : offColor}`}
      >
        <div
          className={`transform rounded-full bg-white shadow-lg duration-700 ease-in-out ${currentSize.circleSize} ${isOn ? currentSize.translateDistance : ""}`}
        />
      </div>
    </div>
  );
};

export default SwitchBasic;

2. SwitchHorizental

SwitchHorizental 컴포넌트는 수직 방향으로 토글할 수 있는 스위치 UI 요소입니다. 클릭 시 스위치의 상태가 위아래로 전환되며, 다양한 크기로 제공됩니다.

2.1. Import

import SwitchHorizental from '@components/Switch/SwitchHorizental';

2.2. Usage

기본 사용 예제는 아래와 같습니다:


import SwitchHorizental from '@components/Switch/SwitchHorizental';

function Example() {
  return <SwitchHorizental />;
}

export default Example;

2.3. Switch Sizes

SwitchHorizental 컴포넌트는 다양한 크기로 제공됩니다. 아래 예시에서는 세 가지 크기의 수직 스위치를 보여줍니다:

Small: 작은 크기의 수직 스위치
Medium: 중간 크기의 수직 스위치 (기본값)
Large: 큰 크기의 수직 스위치


import SwitchHorizental from '@components/Switch/SwitchHorizental';

function Example() {
  return (
    <>
      <SwitchHorizental size="small" />
      <SwitchHorizental size="medium" />
      <SwitchHorizental size="large" />
    </>
  );
}

export default Example;

2.4. Props

SwitchHorizental 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`size`	스위치의 크기를 설정합니다 ("small", "medium", "large").	`"small" \| "medium" \| "large"`	`"medium"`
`onColor`	스위치가 켜졌을 때의 배경 색상입니다.	`string`	`"bg-Basic"`
`offColor`	스위치가 꺼졌을 때의 배경 색상입니다.	`string`	`"bg-[#9E9E9E] dark:bg-[#333742]"`

2.5. Full Example


// SwitchHorizental.tsx
import { useState } from "react";

// 크기 타입 정의
type SizeType = "small" | "medium" | "large";

interface SwitchHorizentalProps {
  size?: SizeType;
  onColor?: string;
  offColor?: string;
}

const SwitchHorizental = ({
  size = "medium",
  onColor = "bg-Basic",
  offColor = "bg-[#9E9E9E] dark:bg-[#333742]",
}: SwitchHorizentalProps) => {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  // 크기별 스타일을 설정합니다.
  const sizeClasses: Record<
    SizeType,
    {
      width: string;
      height: string;
      circleSize: string;
      translateDistance: string;
      initialOffset: string;
    }
  > = {
    small: {
      width: "w-7",
      height: "h-16",
      circleSize: "h-5 w-5",
      translateDistance: "translate-y-5",
      initialOffset: "-translate-y-4",
    },
    medium: {
      width: "w-9",
      height: "h-24",
      circleSize: "h-8 w-8",
      translateDistance: "translate-y-7",
      initialOffset: "-translate-y-7",
    },
    large: {
      width: "w-12",
      height: "h-32",
      circleSize: "h-10 w-10",
      translateDistance: "translate-y-10",
      initialOffset: "-translate-y-10",
    },
  };

  const currentSize = sizeClasses[size];

  return (
    <div className="flex items-center justify-center space-x-12">
      <div
        onClick={toggleSwitch}
        className={`flex ${currentSize.height} ${currentSize.width} cursor-pointer items-center justify-center rounded-full p-1 ${isOn ? onColor : offColor}`}
      >
        <div
          className={`transform rounded-full bg-white shadow-lg duration-700 ease-in-out ${currentSize.circleSize} ${isOn ? currentSize.translateDistance : currentSize.initialOffset}`}
        />
      </div>
    </div>
  );
};

export default SwitchHorizental;

// Example.tsx
import SwitchHorizental from '@components/Switch/SwitchHorizental';

function Example() {
  return (
    <div>
      <SwitchHorizental size="medium" onColor="bg-blue-500" offColor="bg-gray-300" />
      <SwitchHorizental size="large" onColor="bg-green-500" offColor="bg-red-500" />
      <SwitchHorizental size="small" onColor="bg-yellow-500" offColor="bg-purple-500" />
    </div>
  );
}

export default Example;

3. SwitchLong

SwitchLong 컴포넌트는 넓은 영역에서 토글할 수 있는 스위치 UI 요소입니다. 스위치의 길이에 따라 다양한 크기로 제공되며, 클릭 시 스위치의 상태가 좌우로 전환됩니다.

3.1. Import

import SwitchLong from '@components/Switch/SwitchLong';

3.2. Usage

기본 사용 예제는 아래와 같습니다:


import SwitchLong from '@components/Switch/SwitchLong';

function Example() {
  return <SwitchLong />;
}

export default Example;

3.3. Switch Sizes

SwitchLong 컴포넌트는 다양한 길이와 크기로 제공됩니다. 아래 예시에서는 세 가지 크기의 긴 스위치를 보여줍니다:

Small: 짧은 길이의 스위치
Medium: 중간 길이의 스위치 (기본값)
Large: 긴 길이의 스위치


import SwitchLong from '@components/Switch/SwitchLong';

function Example() {
  return (
    <>
      <SwitchLong size="small" />
      <SwitchLong size="medium" />
      <SwitchLong size="large" />
    </>
  );
}

export default Example;

3.4. Props

SwitchLong 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`size`	스위치의 크기를 설정합니다 ("small", "medium", "large").	`"small" \| "medium" \| "large"`	`"medium"`
`onColor`	스위치가 켜졌을 때의 배경 색상입니다.	`string`	`"bg-Basic"`
`offColor`	스위치가 꺼졌을 때의 배경 색상입니다.	`string`	`"bg-[#9E9E9E] dark:bg-[#333742]"`

3.5. Full Example


// SwitchLong.tsx
import { useState } from "react";

// 크기 타입 정의
type SizeType = "small" | "medium" | "large";

interface SwitchLongProps {
  size?: SizeType;
  onColor?: string;
  offColor?: string;
}

const SwitchLong = ({
  size = "medium",
  onColor = "bg-Basic",
  offColor = "bg-[#9E9E9E] dark:bg-[#333742]",
}: SwitchLongProps) => {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  // 크기별 스타일을 설정합니다.
  const sizeClasses: Record<
    SizeType,
    {
      width: string;
      height: string;
      circleSize: string;
      translateDistance: string;
    }
  > = {
    small: {
      width: "w-24",
      height: "h-7",
      circleSize: "h-5 w-12",
      translateDistance: "translate-x-10",
    },
    medium: {
      width: "w-36",
      height: "h-9",
      circleSize: "h-7 w-16",
      translateDistance: "translate-x-16",
    },
    large: {
      width: "w-64",
      height: "h-16",
      circleSize: "h-12 w-28",
      translateDistance: "translate-x-32",
    },
  };

  const currentSize = sizeClasses[size];

  return (
    <div className="flex flex-col items-center space-y-6">
      <div
        onClick={toggleSwitch}
        className={`flex ${currentSize.height} ${currentSize.width} cursor-pointer items-center rounded-full p-1 ${isOn ? onColor : offColor}`}
      >
        <div
          className={`transform rounded-full bg-white shadow-lg duration-700 ease-in-out ${currentSize.circleSize} ${isOn ? currentSize.translateDistance : ""}`}
        />
      </div>
    </div>
  );
};

export default SwitchLong;

// Example.tsx
import SwitchLong from '@components/Switch/SwitchLong';

function Example() {
  return (
    <div>
      <SwitchLong size="medium" onColor="bg-blue-500" offColor="bg-gray-300" />
      <SwitchLong size="large" onColor="bg-green-500" offColor="bg-red-500" />
      <SwitchLong size="small" onColor="bg-yellow-500" offColor="bg-purple-500" />
    </div>
  );
}

export default Example;

4. SwitchRound

SwitchRound 컴포넌트는 둥근 디자인의 토글 스위치입니다. 클릭 시 상태가 전환되며, 상태에 따라 스위치의 위치와 색상이 변경됩니다.

4.1. Import

import SwitchRound from '@components/Switch/SwitchRound';

4.2. Usage

기본 사용 예제는 아래와 같습니다:


import SwitchRound from '@components/Switch/SwitchRound';

function Example() {
  return <SwitchRound />;
}

export default Example;

4.3. Switch Examples

SwitchRound 컴포넌트는 두 가지 방식으로 상태를 전환하는 스위치를 제공합니다:

첫 번째 스위치: 클릭 시 오른쪽으로 이동하여 상태가 전환되며, 스위치가 켜집니다.
두 번째 스위치: 클릭 시 왼쪽으로 이동하여 상태가 전환되며, 스위치가 꺼집니다.


import SwitchRound from '@components/Switch/SwitchRound';

function Example() {
  return (
    <>
      <SwitchRound />
    </>
  );
}

export default Example;

4.4. Props

SwitchRound 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`isOn`	스위치의 현재 상태를 나타냅니다 (켜짐 또는 꺼짐).	`boolean`	`false`
`toggleSwitch`	스위치를 토글하는 함수입니다.	`() => void`	`-`

4.5. Full Example


// SwitchRound.tsx
import { useState } from "react";

const SwitchRound = () => {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };
  
  return (
    <div>
      <div
        onClick={toggleSwitch}
        className="relative h-3 w-32 cursor-pointer rounded-full bg-[#DDDDDD] dark:bg-[#333742]"
      >
        <div
          className={`absolute top-1/2 h-8 w-8 -translate-y-1/2 transform rounded-full shadow-lg duration-700 ease-in-out ${isOn ? "translate-x-24 bg-Basic" : "bg-[#BCBCBC]"}`}
        />
      </div>
      <br />
      <div
        onClick={toggleSwitch}
        className="relative h-3 w-32 cursor-pointer rounded-full bg-[#DDDDDD] dark:bg-[#333742]"
      >
        <div
          className={`absolute top-1/2 h-8 w-8 -translate-y-1/2 transform rounded-full shadow-lg duration-700 ease-in-out ${!isOn ? "translate-x-24 bg-Basic" : "bg-[#BCBCBC]"}`}
        />
      </div>
    </div>
  );
};

export default SwitchRound;

// Example.tsx
import SwitchRound from '@components/Switch/SwitchRound';

function Example() {
  return (
    <div>
      <SwitchRound />
    </div>
  );
}

export default Example;

5. SwitchLabeled

SwitchLabeled 컴포넌트는 상태를 시각적으로 표시하는 레이블이 포함된 토글 스위치입니다. 사용자가 스위치를 클릭하면 상태가 전환되며, "ON"과 "OFF" 레이블이 상태에 따라 표시됩니다.

5.1. Import

import SwitchLabeled from '@components/Switch/SwitchLabeled';

5.2. Usage

기본 사용 예제는 아래와 같습니다:

OFF


import SwitchLabeled from '@components/Switch/SwitchLabeled';

function Example() {
  return <SwitchLabeled />;
}

export default Example;

5.3. Switch Examples

SwitchLabeled 컴포넌트는 상태에 따라 "ON"과 "OFF" 레이블이 표시되는 스위치를 제공합니다. 아래는 두 가지 예시입니다:

첫 번째 스위치: 클릭 시 오른쪽으로 이동하며 "ON" 레이블이 표시됩니다.
두 번째 스위치: 클릭 시 왼쪽으로 이동하며 "OFF" 레이블이 표시됩니다.

OFF


import SwitchLabeled from '@components/Switch/SwitchLabeled';

function Example() {
  return (
    <>
      <SwitchLabeled />
    </>
  );
}

export default Example;

5.4. Props

SwitchLabeled 컴포넌트는 아래와 같은 Props를 가집니다:

Prop	Description	Type	Default
`isOn`	스위치의 현재 상태를 나타냅니다 (켜짐 또는 꺼짐).	`boolean`	`false`
`toggleSwitch`	스위치를 토글하는 함수입니다.	`() => void`	`-`

5.5. Full Example


// SwitchLabeled.tsx
import { useState } from "react";

const SwitchLabeled = () => {
  const [isOn, setIsOn] = useState(false);

  const toggleSwitch = () => {
    setIsOn(!isOn);
  };

  return (
    <div>
      <div
        onClick={toggleSwitch}
        className="relative flex h-14 w-24 cursor-pointer items-center justify-between rounded-xl bg-[#DDDDDD] px-1 dark:bg-[#333742]"
      >
        <p
          className={`flex h-12 w-12 transform items-center justify-center rounded-xl text-center text-2xl font-bold text-white shadow-lg duration-700 ease-in-out ${isOn ? "translate-x-10 bg-Basic" : "bg-[#302f2f]"}`}
        >
          {isOn ? "ON" : "OFF"}
        </p>
      </div>
      <br />
      <div
        onClick={toggleSwitch}
        className="relative flex h-14 w-24 cursor-pointer items-center justify-between rounded-xl bg-[#DDDDDD] px-1 dark:bg-[#333742]"
      >
        <p
          className={`flex h-12 w-12 transform items-center justify-center rounded-xl text-center text-2xl font-bold text-white shadow-lg duration-700 ease-in-out ${!isOn ? "translate-x-10 bg-Basic" : "bg-[#302f2f]"}`}
        >
          {isOn ? "OFF" : "ON"}
        </p>
      </div>
    </div>
  );
};

export default SwitchLabeled;

// Example.tsx
import SwitchLabeled from '@components/Switch/SwitchLabeled';

function Example() {
  return (
    <div>
      <SwitchLabeled />
    </div>
  );
}

export default Example;