diff --git a/src/pages/form/ideal_partner/IdealPartnerStepMeta.tsx b/src/pages/form/ideal_partner/IdealPartnerStepMeta.tsx index 6e3f3e2..257749f 100644 --- a/src/pages/form/ideal_partner/IdealPartnerStepMeta.tsx +++ b/src/pages/form/ideal_partner/IdealPartnerStepMeta.tsx @@ -93,4 +93,4 @@ export const IdealPartnerStepMeta: Record> = { form: , canGoNext: (state) => Boolean(state.toMatchMaker), }, -}; +} as const; diff --git a/src/pages/form/my_profile/MyProfileStepMeta.tsx b/src/pages/form/my_profile/MyProfileStepMeta.tsx index b3cd568..4b5d4f1 100644 --- a/src/pages/form/my_profile/MyProfileStepMeta.tsx +++ b/src/pages/form/my_profile/MyProfileStepMeta.tsx @@ -98,4 +98,4 @@ export const MyProfileStepMeta: Record> = { form: <>, canGoNext: () => true, }, -}; +} as const; diff --git a/src/processes/shortcut/Shortcut.module.css b/src/processes/shortcut/Shortcut.module.css new file mode 100644 index 0000000..16633c8 --- /dev/null +++ b/src/processes/shortcut/Shortcut.module.css @@ -0,0 +1,28 @@ +.FloatingButton { + outline: none; + border: none; + height: 48px; + width: 48px; + border-radius: 50%; + background-color: var(--color-neutral-20); + + position: absolute; + right: 20px; + bottom: 16px; + + cursor: pointer; +} + +.Header { + display: flex; + width: 100%; +} + +.CloseButton { + margin-left: auto; +} + +.MenuButton { + font-size: 16px; + font-weight: 500; +} \ No newline at end of file diff --git a/src/processes/shortcut/Shortcut.stories.ts b/src/processes/shortcut/Shortcut.stories.ts new file mode 100644 index 0000000..6e11a5a --- /dev/null +++ b/src/processes/shortcut/Shortcut.stories.ts @@ -0,0 +1,13 @@ +import { Meta, StoryObj } from '@storybook/react'; +import { Shortcut } from 'src/processes/shortcut/Shortcut'; + +const meta: Meta = { + component: Shortcut, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/src/processes/shortcut/Shortcut.tsx b/src/processes/shortcut/Shortcut.tsx new file mode 100644 index 0000000..ad28902 --- /dev/null +++ b/src/processes/shortcut/Shortcut.tsx @@ -0,0 +1,151 @@ +import { ArrowLeft, ArrowRight, Close, List } from 'src/shared/ui/icons'; +import styles from './Shortcut.module.css'; +import { Sheet } from 'react-modal-sheet'; +import { useState } from 'react'; +import { Button } from 'src/shared/ui/Button/Button'; +import { MyProfileStepMeta } from 'src/pages/form/my_profile/MyProfileStepMeta'; +import { IdealPartnerStepMeta } from 'src/pages/form/ideal_partner/IdealPartnerStepMeta'; +import { useProfileFirstName } from 'src/entities/profile/lib/useProfileFirstName'; + +export const Shortcut = () => { + const [open, setOpen] = useState(true); + const [selectedKey, setSelectedKey] = useState< + | { + section: 'PROFILE'; + key: keyof typeof MyProfileStepMeta; + } + | { + section: 'IDEAL_PARTNER'; + key: keyof typeof IdealPartnerStepMeta; + } + | null + >(null); + + const onClose = () => setOpen(false); + + const selectedStep = + selectedKey && + (selectedKey.section === 'PROFILE' ? MyProfileStepMeta[selectedKey.key] : IdealPartnerStepMeta[selectedKey.key]); + const name = useProfileFirstName(); + + const onSelectProfile = (key: keyof typeof MyProfileStepMeta) => { + setSelectedKey({ section: 'PROFILE', key }); + }; + + const onSelectIdealPartner = (key: keyof typeof IdealPartnerStepMeta) => { + setSelectedKey({ section: 'IDEAL_PARTNER', key }); + }; + + return ( + <> + + + + + {selectedKey && ( + + )} + + + + {selectedKey === null && ( + <> +

수정하고 싶은 항목을 선택해주세요.

+

선택 시 해당 항목으로 이동합니다.

+

내 정보

+ onSelectProfile('PERSONAL_INFO')} + /> + onSelectProfile('MY_IMAGE')} /> + onSelectProfile('MBTI')} /> + onSelectProfile('JOB')} /> + onSelectProfile('LOCATION')} /> + onSelectProfile('RELIGION')} /> + onSelectProfile('HOBBY')} /> + onSelectProfile('SMOKE_ALCOHOL')} + /> + onSelectIdealPartner('INTRODUCE')} /> + onSelectIdealPartner('MORE_QUESTION')} /> +

이상형 정보

+ onSelectIdealPartner('AGE')} /> + onSelectIdealPartner('HEIGHT_STYLE')} + /> + onSelectIdealPartner('LOCATION')} + /> + onSelectIdealPartner('HOBBY')} /> + onSelectIdealPartner('RELIGION')} /> + onSelectIdealPartner('DRINKING')} + /> + onSelectIdealPartner('SMOKING')} + /> + onSelectIdealPartner('TO_MATCHER')} + /> + + )} + {selectedKey !== null && selectedStep && ( + <> + {selectedStep.title({ name })} + {selectedStep.description?.()} + {selectedStep.form} + + + )} +
+
+ +
+ + ); +}; + +const MenuButton = ({ text, disabled, onClick }: { text: string; disabled: boolean; onClick: () => void }) => { + return ( + + ); +};