chore : 토글 컴포넌트 수정 완료 (#136)

prgrms-web-devcourse-final-project · Nov 29, 2024 · 83070f9 · 83070f9
1 parent 599e521
commit 83070f9
Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/src/components/Common/Toggle/Toggle.stories.tsx b/src/components/Common/Toggle/Toggle.stories.tsx
@@ -6,7 +6,15 @@ const meta: Meta<typeof Toggle> = {
     title: 'atoms/Toggle',
     tags: ['autodocs'],
     argTypes: {
-        onToggle: { action: 'toggled' }
+        onToggle: { action: 'toggled' },
+        leftLabel: {
+            control: 'text',
+            defaultValue: '전체'
+        },
+        rightLabel: {
+            control: 'text',
+            defaultValue: '답장'
+        }
     }
 };
 
@@ -16,12 +24,16 @@ type Story = StoryObj<typeof Toggle>;
 
 export const Default: Story = {
     args: {
-        isChecked: false
+        isChecked: false,
+        leftLabel: '전체',
+        rightLabel: '답장'
     }
 };
 
 export const Checked: Story = {
     args: {
-        isChecked: true
+        isChecked: true,
+        leftLabel: '편지지',
+        rightLabel: '글씨체'
     }
 };
diff --git a/src/components/Common/Toggle/Toggle.tsx b/src/components/Common/Toggle/Toggle.tsx
@@ -1,34 +1,41 @@
 export type ToggleProps = {
     isChecked: boolean;
     onToggle: () => void;
+    leftLabel: string;
+    rightLabel: string;
 };
 
-export const Toggle = ({ isChecked, onToggle }: ToggleProps) => {
+export const Toggle = ({
+    isChecked,
+    onToggle,
+    leftLabel,
+    rightLabel
+}: ToggleProps) => {
     return (
-        <div className="relative flex items-center justify-between w-[160px] h-[30px] bg-gray-200 rounded-full p-1">
+        <div className="relative flex items-center justify-between w-[140px] h-[30px] bg-gray-200 rounded-full p-1">
             <div
                 onClick={onToggle}
                 className={`absolute w-[78px] h-[30px] bg-gray-100 rounded-full cursor-pointer transition-all duration-200 ease-in-out ${
-                    isChecked ? 'translate-x-[78px]' : 'translate-x-0'
+                    isChecked ? 'translate-x-[60px]' : '-translate-x-2'
                 }`}
             />
             <div
                 onClick={onToggle}
-                className={`absolute left-2 font-bold text-sm transform -translate-y-1/2 ${
+                className={`absolute left-5 font-bold text-sm transform -translate-y-1/2 ${
                     isChecked ? 'text-gray-400' : 'text-black'
                 }`}
                 style={{ top: '50%' }}
             >
-                편지지
+                {leftLabel}
             </div>
             <div
                 onClick={onToggle}
-                className={`absolute right-2 font-bold text-sm transform -translate-y-1/2 ${
+                className={`absolute right-5 font-bold text-sm transform -translate-y-1/2 ${
                     isChecked ? 'text-black' : 'text-gray-400'
                 }`}
                 style={{ top: '50%' }}
             >
-                글씨체
+                {rightLabel}
             </div>
         </div>
     );