diff --git a/src/entities/ideal_partner/model/idealPartnerStore.ts b/src/entities/ideal_partner/model/idealPartnerStore.ts index 366b17f..08de03a 100644 --- a/src/entities/ideal_partner/model/idealPartnerStore.ts +++ b/src/entities/ideal_partner/model/idealPartnerStore.ts @@ -11,8 +11,8 @@ export const REQUIRED_OPTION_MAX_COUNT = 3; export type IdealPartner = { ageRange?: { - min: number; - max: number; + min?: number; + max?: number; }; heightRange?: { min: number; @@ -40,6 +40,7 @@ export type IdealPartner = { }; type Action = { + toggleAge: (on: boolean) => void; setMinAge: (value: number) => void; setMaxAge: (value: number) => void; setMinHeight: (value: number) => void; @@ -61,10 +62,8 @@ type Action = { const createStoreHook = (initialState?: IdealPartner) => create((set, get) => ({ - ageRange: { - min: 20, - max: 30, - }, + ageRange: undefined, + toggleAge: (on: boolean) => set({ ageRange: on ? { max: undefined, min: undefined } : undefined }), setMinAge: (min) => set({ ageRange: { max: 30, ...get().ageRange, min } }), setMaxAge: (max) => set({ ageRange: { min: 20, ...get().ageRange, max } }), heightRange: { diff --git a/src/processes/ideal_partner/AgeForm/AgeForm.module.css b/src/processes/ideal_partner/AgeForm/AgeForm.module.css index 99ce49b..f6681e9 100644 --- a/src/processes/ideal_partner/AgeForm/AgeForm.module.css +++ b/src/processes/ideal_partner/AgeForm/AgeForm.module.css @@ -1,3 +1,26 @@ .Container { height: 100%; +} + +.AgeDetailWrapper { + margin-left: 32px; + margin-right: 20px; + display: flex; + flex-direction: column; + gap: 8px; + + & small { + color: var(--color-neutral-600); + } +} + +.AgeInputWrapper { + display: flex; + gap: 8px; + justify-content: stretch; + align-items: center; + + & input { + width: 100% + } } \ No newline at end of file diff --git a/src/processes/ideal_partner/AgeForm/AgeForm.tsx b/src/processes/ideal_partner/AgeForm/AgeForm.tsx index 7379eed..601b954 100644 --- a/src/processes/ideal_partner/AgeForm/AgeForm.tsx +++ b/src/processes/ideal_partner/AgeForm/AgeForm.tsx @@ -1,39 +1,51 @@ import styles from './AgeForm.module.css'; import { useIdealPartnerStore } from 'src/entities/ideal_partner/model/idealPartnerStore'; -import { RangeSlider } from 'src/shared/ui/RangeSlider/RangeSlider'; -import { useProfileAge } from 'src/entities/profile/lib/useProfileAge'; - -const AGE_GAP = 20; -const ADULT_AGE = 19; -const MIN_AGE = 15; +import { Radio } from 'src/shared/ui/Radio/Radio'; +import { Input } from 'src/shared/ui/Input/Input'; +import { ChangeEvent } from 'react'; export const AgeForm = () => { - const age = useProfileAge(); - const { min, max } = useIdealPartnerStore((state) => state.ageRange); + const idealPartnerAge = useIdealPartnerStore((state) => state.ageRange); + const { min, max } = idealPartnerAge ?? { min: undefined, max: undefined }; - const minAge = Math.max(age >= ADULT_AGE ? Math.max(ADULT_AGE, age - AGE_GAP) : age - AGE_GAP, MIN_AGE); - const maxAge = age <= ADULT_AGE ? Math.min(age + AGE_GAP, ADULT_AGE) : age + AGE_GAP; + const toggleAge = useIdealPartnerStore((state) => state.toggleAge); + const onChangeRadio = (type: boolean) => toggleAge(type); const setMin = useIdealPartnerStore((state) => state.setMinAge); const setMax = useIdealPartnerStore((state) => state.setMaxAge); - const onChange = ([min, max]: [number, number]) => { - setMin(min); - setMax(max); + const onChangeMin = (e: ChangeEvent) => { + if (!isNaN(Number(e.target.value))) { + setMin(Number(e.target.value)); + } + }; + + const onChangeMax = (e: ChangeEvent) => { + if (!isNaN(Number(e.target.value))) { + setMax(Number(e.target.value)); + } }; return (
- +
+ onChangeRadio(false)} + /> + onChangeRadio(true)} /> + {idealPartnerAge && ( +
+ 선호하는 연령대를 입력해주세요 +
+ 세} value={min} onChange={onChangeMin} /> + - + 세} value={max} onChange={onChangeMax} /> +
+
+ )} +
); }; diff --git a/src/shared/ui/Input/Input.module.css b/src/shared/ui/Input/Input.module.css index 33e057b..04f9db7 100644 --- a/src/shared/ui/Input/Input.module.css +++ b/src/shared/ui/Input/Input.module.css @@ -31,4 +31,7 @@ font-size: 16px; line-height: 16px; color: var(--color-neutral-900); + + display: flex; + align-items: center; } \ No newline at end of file