From e0187cfb52b1f8588beb36d97df0df41f43950fc Mon Sep 17 00:00:00 2001 From: kangminguu <131148077+kangminguu@users.noreply.github.com> Date: Tue, 31 Dec 2024 03:31:15 +0900 Subject: [PATCH] =?UTF-8?q?refactor=20:=20=ED=86=A0=EA=B8=80=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC=20(#455)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Common/Toggle/Toggle.stories.tsx | 39 --------- src/components/Common/Toggle/Toggle.tsx | 84 +++++++++++++++++-- src/components/Common/Toggle/constants.ts | 4 + .../SelectSlider/SelectSlider.tsx | 2 + src/pages/Home/HomePage.tsx | 2 + 5 files changed, 83 insertions(+), 48 deletions(-) delete mode 100644 src/components/Common/Toggle/Toggle.stories.tsx create mode 100644 src/components/Common/Toggle/constants.ts diff --git a/src/components/Common/Toggle/Toggle.stories.tsx b/src/components/Common/Toggle/Toggle.stories.tsx deleted file mode 100644 index 3fd4d96a..00000000 --- a/src/components/Common/Toggle/Toggle.stories.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/react'; -import { Toggle } from './Toggle'; - -const meta: Meta = { - component: Toggle, - title: 'atoms/Toggle', - tags: ['autodocs'], - argTypes: { - onToggle: { action: 'toggled' }, - leftLabel: { - control: 'text', - defaultValue: '전체' - }, - rightLabel: { - control: 'text', - defaultValue: '답장' - } - } -}; - -export default meta; - -type Story = StoryObj; - -export const Default: Story = { - args: { - isChecked: false, - leftLabel: '전체', - rightLabel: '답장' - } -}; - -export const Checked: Story = { - args: { - isChecked: true, - leftLabel: '편지지', - rightLabel: '글씨체' - } -}; diff --git a/src/components/Common/Toggle/Toggle.tsx b/src/components/Common/Toggle/Toggle.tsx index 9161e3a0..b2872f51 100644 --- 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 ( -
+ const handleToggle = (onToggle: () => void) => { + onToggle(); + }; + + /** 메인페이지에 사용되는 토글 스타일 입니다. */ + const mainVariantToggleStyle = ( +
{ + 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' }`} />
{ + handleToggle(onToggle); + }} + className={`px-4 text-body1 w-1/2 transform ${ + isChecked + ? 'text-[rgba(92,92,92,0.3)]' + : 'text-sample-black' + }`} + > + {leftLabel} +
+
{ + handleToggle(onToggle); + }} + className={`px-4 text-body1 w-1/2 transform ${ + isChecked + ? 'text-sample-black' + : 'text-[rgba(92,92,92,0.3)]' + }`} + > + {rightLabel} +
+
+ ); + + /** 일기작성페이지에 사용되는 토글 스타일 입니다. */ + const createDiaryToggleStyle = ( +
+
{ + 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' + }`} + /> +
{ + handleToggle(onToggle); + }} className={`px-4 text-sm w-1/2 transform ${ - isChecked ? 'text-gray-400' : 'text-white' + isChecked ? 'text-white' : 'text-sample-black' }`} > {leftLabel}
{ + handleToggle(onToggle); + }} className={`px-4 text-sm w-1/2 transform ${ - isChecked ? 'text-white' : 'text-gray-400' + isChecked ? 'text-sample-black' : 'text-white' }`} > {rightLabel}
); + + 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 new file mode 100644 index 00000000..d7879988 --- /dev/null +++ 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 index 2dda681c..6a93e6b9 100644 --- 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} />
diff --git a/src/pages/Home/HomePage.tsx b/src/pages/Home/HomePage.tsx index b22690f6..32fe90ee 100644 --- 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} />