refactor : 토글 컴포넌트 스타일 분리 (#455)

prgrms-web-devcourse-final-project · Dec 30, 2024 · e0187cf · e0187cf
1 parent 660fc24
commit e0187cf
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 48 deletions.
diff --git a/src/components/Common/Toggle/Toggle.stories.tsx b/src/components/Common/Toggle/Toggle.stories.tsx
diff --git a/src/components/Common/Toggle/Toggle.tsx b/src/components/Common/Toggle/Toggle.tsx
@@ -1,40 +1,106 @@
+import { match } from 'ts-pattern';
+import { ToggleVariant } from './constants';
+
 export type ToggleProps = {
+    /** 현재 토글의 상태 */
     isChecked: boolean;
+    /** 토글의 상태를 변경하는 함수 */
     onToggle: () => void;
+    /** 왼쪽 레이블 텍스트 */
     leftLabel: string;
+    /** 오른쪽 레이블 텍스트 */
     rightLabel: string;
+    /** 토글의 스타일을 결정 ("main | "diary") */
+    variant: ToggleVariant;
 };
 
 export const Toggle = ({
     isChecked,
     onToggle,
     leftLabel,
-    rightLabel
+    rightLabel,
+    variant
 }: ToggleProps) => {
-    return (
-        <div className="relative flex items-center w-fit h-[30px] bg-[#F7FBFE] rounded-full border border-[rgba(34,184,239,0.13)] z-[1]">
+    const handleToggle = (onToggle: () => void) => {
+        onToggle();
+    };
+
+    /** 메인페이지에 사용되는 토글 스타일 입니다. */
+    const mainVariantToggleStyle = (
+        <div className="relative flex items-center w-fit h-[30px] bg-[rgba(255,255,255,0.5)] rounded-full cursor-pointer shadow-inner">
             <div
-                onClick={onToggle}
-                className={`absolute w-1/2 left-0 h-[30px] bg-[rgb(34,184,239)] rounded-full cursor-pointer transition-all duration-200 ease-in-out ${
+                onClick={() => {
+                    handleToggle(onToggle);
+                }}
+                className={`absolute w-1/2 left-0 h-[30px] bg-white rounded-full cursor-pointer transition-all duration-200 ease-in-out ${
                     isChecked ? 'translate-x-full' : 'translate-x-0'
                 }`}
             />
             <div
-                onClick={onToggle}
+                onClick={() => {
+                    handleToggle(onToggle);
+                }}
+                className={`px-4 text-body1 w-1/2 transform ${
+                    isChecked
+                        ? 'text-[rgba(92,92,92,0.3)]'
+                        : 'text-sample-black'
+                }`}
+            >
+                {leftLabel}
+            </div>
+            <div
+                onClick={() => {
+                    handleToggle(onToggle);
+                }}
+                className={`px-4 text-body1 w-1/2 transform ${
+                    isChecked
+                        ? 'text-sample-black'
+                        : 'text-[rgba(92,92,92,0.3)]'
+                }`}
+            >
+                {rightLabel}
+            </div>
+        </div>
+    );
+
+    /** 일기작성페이지에 사용되는 토글 스타일 입니다. */
+    const createDiaryToggleStyle = (
+        <div className="relative flex items-center w-fit h-[30px] bg-[#323131] rounded-full z-[1]">
+            <div
+                onClick={() => {
+                    handleToggle(onToggle);
+                }}
+                className={`absolute w-1/2 left-0 h-[30px] bg-white rounded-full cursor-pointer transition-all duration-200 ease-in-out ${
+                    isChecked ? 'translate-x-full' : 'translate-x-0'
+                }`}
+            />
+            <div
+                onClick={() => {
+                    handleToggle(onToggle);
+                }}
                 className={`px-4 text-sm w-1/2 transform ${
-                    isChecked ? 'text-gray-400' : 'text-white'
+                    isChecked ? 'text-white' : 'text-sample-black'
                 }`}
             >
                 {leftLabel}
             </div>
             <div
-                onClick={onToggle}
+                onClick={() => {
+                    handleToggle(onToggle);
+                }}
                 className={`px-4 text-sm w-1/2 transform ${
-                    isChecked ? 'text-white' : 'text-gray-400'
+                    isChecked ? 'text-sample-black' : 'text-white'
                 }`}
             >
                 {rightLabel}
             </div>
         </div>
     );
+
+    const toggle = match(variant)
+        .with(ToggleVariant.Main, () => mainVariantToggleStyle)
+        .with(ToggleVariant.Diary, () => createDiaryToggleStyle)
+        .run();
+
+    return toggle;
 };
diff --git a/src/components/Common/Toggle/constants.ts b/src/components/Common/Toggle/constants.ts
@@ -0,0 +1,4 @@
+export enum ToggleVariant {
+    Main = 'main',
+    Diary = 'diary'
+}
diff --git a/src/components/SelectItemPage/SelectSlider/SelectSlider.tsx b/src/components/SelectItemPage/SelectSlider/SelectSlider.tsx
@@ -4,6 +4,7 @@ import React, { useMemo, useState } from 'react';
 import SkyTheme from '@/asset/letter1/letter1.svg?react';
 import HaertTheme from '@/asset/letter2/letter2.svg?react';
 import FlowerTheme from '@/asset/letter3/letter3.svg?react';
+import { ToggleVariant } from '@/components/Common/Toggle/constants';
 
 type SelectSliderProps = {
     font: string;
@@ -58,6 +59,7 @@ export const SelectSlider = ({
                     onToggle={() => setIsFont(!isFont)}
                     leftLabel="편지지"
                     rightLabel="글씨체"
+                    variant={ToggleVariant.Diary}
                 />
             </div>
         </>

diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx
@@ -13,6 +13,7 @@ import { getToken, firebaseMessaging, onMessage } from '@/util/firebase';
 import { postToken } from '@/service/nofication/postToken';
 import { useToastStore } from '@/hooks';
 import { Loading } from '@/components/Common/Loading/Loading';
+import { ToggleVariant } from '@/components/Common/Toggle/constants';
 
 export type ReplyLetter = {
     type: 'MAP' | 'KEYWORD';
@@ -135,6 +136,7 @@ export const HomePage = () => {
                     }}
                     leftLabel="추천"
                     rightLabel="답장"
+                    variant={ToggleVariant.Main}
                 />
 
                 <div>