Toggle 컴포넌트를 정리 및 스토리북에 등록

src/components/Common/Toggle/Toggle.styled.ts

@@ -0,0 +1,57 @@
+import { css } from '@emotion/react';
+
+import { Theme } from '@/styles/Theme.ts';
+
+export interface ToggleStyling {
+  $variant: 'primary' | 'secondary';
+}
+
+export const getSwitchStyling = (
+  isEnabled: boolean,
+  variant: Required<ToggleStyling>['$variant'],
+) => {
+  const style = {
+    primary: css({
+      display: 'inline-flex',
+      height: '24px',
+      width: '44px',
+      cursor: 'pointer',
+      borderRadius: Theme.borderRadius.large,
+      borderWidth: '2px',
+      borderColor: 'transparent',
+      position: 'relative',
+
+      backgroundColor: isEnabled ? Theme.color.brown : Theme.color.white800,
+      transition: 'background-color 200ms ease-in-out',
+    }),
+    secondary: css({
+      display: 'inline-flex',
+      height: '24px',
+      width: '44px',
+      cursor: 'pointer',
+      borderRadius: Theme.borderRadius.large,
+      borderWidth: '2px',
+      borderColor: 'transparent',
+      position: 'relative',
+
+      backgroundColor: isEnabled ? Theme.color.green : Theme.color.black200,
+      transition: 'background-color 200ms ease-in-out',
+    }),
+  };
+  return style[variant];
+};
+
+export const getKnobStyling = (isEnabled: boolean) =>
+  css({
+    display: 'inline-block',
+    height: '20px',
+    width: '20px',
+    borderRadius: '9999px',
+    backgroundColor: 'white',
+    boxShadow: '0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)',
+    pointerEvents: 'none',
+    transition: 'transform 200ms ease-in-out',
+
+    transform: isEnabled ? 'translateX(20px)' : 'translateX(0)',
+    ring: '0',
+  });

src/components/Common/Toggle/Toggle.tsx

@@ -0,0 +1,38 @@
+import { Switch } from '@headlessui/react';
+
+import {
+  getKnobStyling,
+  getSwitchStyling,
+  ToggleStyling,
+} from './Toggle.styled';
+
+export interface ToggleProps {
+  /** 현재 활성화 상태를 나타냅니다. */
+  isEnabled: boolean;
+  /** 활성화 상태를 변경하는 함수입니다. 현재 상태를 반전시켜 활성화 또는 비활성화합니다. */
+  toggleHandler: React.Dispatch<React.SetStateAction<boolean>>;
+  /**
+   * Toggle 스타일 옵션
+   *
+   * @@default: 'primary'
+   */
+  styles?: ToggleStyling;
+}
+
+function Toggle({
+  isEnabled,
+  toggleHandler,
+  styles = { $variant: 'primary' },
+}: ToggleProps) {
+  return (
+    <Switch
+      checked={isEnabled}
+      onChange={toggleHandler}
+      css={[getSwitchStyling(isEnabled, styles.$variant)]}
+    >
+      <span aria-hidden="true" css={getKnobStyling(isEnabled)} />
+    </Switch>
+  );
+}
+
+export default Toggle;

src/components/schedule/ScheduleItems.tsx

@@ -10,17 +10,17 @@ import Plus from '@/assets/icons/plus.svg';
 import RepeatIcon from '@/assets/icons/repeat.svg';
 import LabelIcon from '@/assets/icons/tag.svg';
 import DescriptionIcon from '@/assets/icons/textAlignLeft.svg';
-import UsersIcon   from '@/assets/icons/users.svg';
+import UsersIcon from '@/assets/icons/users.svg';
 import {
   InputDefault,
   InputTitle,
   InputTextArea,
-}                  from '@/components/Common/InputText';
+} from '@/components/Common/InputText';
 import LabelButton from '@/components/Common/LabelButton';
-import ListBox     from '@/components/Common/ListBox';
-import Toggle      from '@/components/Common/Toggle';
+import ListBox from '@/components/Common/ListBox';
+import Toggle from '@/components/Common/Toggle/Toggle';
 import CreateLabel from '@/components/label/CreateLabel';
-import useDateStore        from '@/stores/DateStore';
+import useDateStore from '@/stores/DateStore';
 import { LabelColorsType } from '@/styles/colorThemes.ts';
 
 type ChangeProps = {
@@ -108,8 +108,8 @@ function Time({ states, handleChange, setStates }: ChangeProps & SetProps) {
         <S.BetweenDiv>
           <span>하루 종일</span>
           <Toggle
-            enabled={states.isAllDay}
-            setEnabled={handleAllday as Dispatch<SetStateAction<boolean>>}
+            isEnabled={states.isAllDay}
+            toggleHandler={handleAllday as Dispatch<SetStateAction<boolean>>}
           />
         </S.BetweenDiv>
         <div className="flex items-center w-4/5 justify-around">
@@ -375,8 +375,8 @@ function Repeat({ states, handleChange, setStates }: ChangeProps & SetProps) {
         <S.BetweenDiv>
           <span>반복</span>
           <Toggle
-            enabled={states.isRepetition}
-            setEnabled={setRepetition as Dispatch<SetStateAction<boolean>>}
+            isEnabled={states.isRepetition}
+            toggleHandler={setRepetition as Dispatch<SetStateAction<boolean>>}
           />
         </S.BetweenDiv>
         {states.isRepetition ? (

src/stories/Common/Toggle.stories.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Toggle, { ToggleProps } from '@/components/Common/Toggle/Toggle.tsx';
+
+const meta: Meta<typeof Toggle> = {
+  title: 'Common/Toggle',
+  component: Toggle,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const ToggleStory = (args: ToggleProps) => {
+  const [isEnabled, setIsEnabled] = useState<boolean>(true);
+
+  return (
+    <Toggle
+      {...args}
+      isEnabled={isEnabled}
+      toggleHandler={() => setIsEnabled((prev) => !prev)}
+    />
+  );
+};
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    styles: { $variant: 'primary' },
+  },
+  render: (args) => <ToggleStory {...args} />,
+};
+
+export const Secondary: Story = {
+  args: {
+    styles: { $variant: 'secondary' },
+  },
+  render: (args) => <ToggleStory {...args} />,
+};