From 5e174b0767e8c824ad7bdb0b32a5889fa59eb830 Mon Sep 17 00:00:00 2001 From: he2e2 Date: Mon, 29 Apr 2024 23:46:13 +0900 Subject: [PATCH] fix: features form --- src/app/pages/setting-page.tsx | 89 +++++++++++++++++---------- src/app/pages/user-input-page.tsx | 37 ++++++----- src/components/UserInputSection.tsx | 2 +- src/components/card/OptionSection.tsx | 11 ++-- src/components/card/VitalSection.tsx | 6 +- 5 files changed, 92 insertions(+), 53 deletions(-) diff --git a/src/app/pages/setting-page.tsx b/src/app/pages/setting-page.tsx index 46fe6c2..846c130 100644 --- a/src/app/pages/setting-page.tsx +++ b/src/app/pages/setting-page.tsx @@ -188,8 +188,8 @@ export function SettingPage({ cardId }: { cardId: number }) { if (features !== null) { setSelectedState({ ...selectedState, - smoking: features[0], - room: features[1], + smoking: features[0].split(':')[1], + room: features[1].split(':')[1], }); } } @@ -206,10 +206,14 @@ export function SettingPage({ cardId }: { cardId: number }) { if (isMySelf) { if (features !== null) { const initialOptions: SelectedOptions = {}; - features.slice(2).forEach(option => { + const optionsString = features[3].split(':')[1]; + const budgetIdx = optionsString.indexOf('['); + const budget = optionsString.slice(budgetIdx); + setInitialBudget(budget.slice(1, -1)); + + const options = optionsString.slice(0, budgetIdx).split(','); + options.forEach(option => { if ( - !option.includes(',') && - !option.includes('±') && !option.includes('E') && !option.includes('I') && !majorArray.includes(option) @@ -220,7 +224,6 @@ export function SettingPage({ cardId }: { cardId: number }) { if (option.includes('E') || option.includes('I')) setInitialMbti(option); if (majorArray.includes(option)) setInitialMajor(option); - if (option.includes(',')) setInitialBudget(option); }); setSelectedOptions(initialOptions); } @@ -269,16 +272,19 @@ export function SettingPage({ cardId }: { cardId: number }) { const array = Object.keys(selectedOptions).filter( key => selectedOptions[key] && key !== '전공' && key !== '엠비티아이', ); + const options = [ + ...array, + ...(mbti != null ? [mbti] : []), + ...(major != null ? [major] : []), + ...(budget != null ? [budget] : []), + ].filter(Boolean); const location = locationInput ?? ''; const myFeatures = [ - selectedState.smoking, - selectedState.room, - mateAge !== '' ? mateAge : undefined, - ...array, - ...(mbti !== null && mbti !== undefined ? [mbti] : []), - ...(major !== null && major !== undefined ? [major] : []), - budget, + `smoking:${selectedState.smoking}`, + `room:${selectedState.room}`, + `mateAge:${mateAge !== '' ? mateAge : undefined}`, + `options:${options.join(',')}`, ]; mutate({ location, features: myFeatures }); @@ -379,24 +385,45 @@ export function SettingPage({ cardId }: { cardId: number }) { - + {type === 'myCard' ? ( + + ) : ( + + )} ); diff --git a/src/app/pages/user-input-page.tsx b/src/app/pages/user-input-page.tsx index 29d05d2..0a98451 100644 --- a/src/app/pages/user-input-page.tsx +++ b/src/app/pages/user-input-page.tsx @@ -227,6 +227,7 @@ interface UserProps { interface SelectedState { smoking: string | undefined; room: string | undefined; + mateAge: string | undefined; } type SelectedOptions = Record; @@ -239,6 +240,7 @@ const useSelectedState = (): [ const [selectedState, setSelectedState] = useState({ smoking: undefined, room: undefined, + mateAge: undefined, }); const [selectedOptions, setSelectedOptions] = useState({}); @@ -315,25 +317,32 @@ export function UserInputPage() { key => selectedMateOptions[key] && key !== '전공' && key !== '엠비티아이', ); + const myOptionsString = [ + ...myOptions, + ...(mbti != null ? [mbti] : []), + ...(major != null ? [major] : []), + ...(budget != null ? [budget] : []), + ].filter(Boolean); + const mateOptionsString = [ + ...mateOptions, + ...(mateMbti != null ? [mateMbti] : []), + ...(mateMajor != null ? [mateMajor] : []), + ...(mateBudget != null ? [mateBudget] : []), + ].filter(Boolean); + const location = locationInput ?? ''; const myFeatures = [ - selectedState.smoking, - selectedState.room, - mateAge, - ...myOptions, - ...(mbti !== null && mbti !== undefined ? [mbti] : []), - ...(major !== null && major !== undefined ? [major] : []), - budget, + `smoking:${selectedState.smoking}`, + `room:${selectedState.room}`, + `mateAge:${mateAge !== '' ? mateAge : undefined}`, + `options:${myOptionsString.join(',')}`, ]; const mateFeatures = [ - selectedMateState.smoking, - selectedMateState.room, - mateAge, - ...mateOptions, - ...(mateMbti !== null && mateMbti !== undefined ? [mateMbti] : []), - ...(mateMajor !== null && mateMajor !== undefined ? [mateMajor] : []), - mateBudget, + `smoking:${selectedMateState.smoking}`, + `room:${selectedMateState.room}`, + `mateAge:${mateAge !== '' ? mateAge : undefined}`, + `options:${mateOptionsString.join(',')}`, ]; try { diff --git a/src/components/UserInputSection.tsx b/src/components/UserInputSection.tsx index f6322c0..2f5b1b1 100644 --- a/src/components/UserInputSection.tsx +++ b/src/components/UserInputSection.tsx @@ -37,7 +37,7 @@ interface UserInputProps { budget: string | undefined; features: string[] | null; isMySelf: boolean; - type: string; + type: 'myCard' | 'mateCard'; onVitalChange: ( optionName: keyof SelectedState, item: string | number, diff --git a/src/components/card/OptionSection.tsx b/src/components/card/OptionSection.tsx index 0b0fcf9..bfe9f61 100644 --- a/src/components/card/OptionSection.tsx +++ b/src/components/card/OptionSection.tsx @@ -198,10 +198,12 @@ export function OptionSection({ useEffect(() => { if (optionFeatures !== null) { const initialOptions: SelectedOptions = {}; - optionFeatures.slice(2).forEach(option => { + const optionsString = optionFeatures[3].split(':')[1]; + const budgetIdx = optionsString.indexOf('['); + + const options = optionsString.slice(0, budgetIdx).split(','); + options.forEach(option => { if ( - !option.includes(',') && - !option.includes('±') && !option.includes('E') && !option.includes('I') && !majorArray.includes(option) @@ -251,6 +253,7 @@ export function OptionSection({ const [initialMin, setInitialMin] = useState(0); const [initialMax, setInitialMax] = useState(355); + useEffect(() => { if (budget !== undefined) { const [min, max] = budget.split(',').map(Number); @@ -298,7 +301,7 @@ export function OptionSection({ }, [selectedMajor]); useEffect(() => { - const budgetString = `${budgetMin},${budgetMax}`; + const budgetString = `[${budgetMin},${budgetMax}]`; onBudgetChange(budgetString); }, [budgetMin, budgetMax]); diff --git a/src/components/card/VitalSection.tsx b/src/components/card/VitalSection.tsx index 8710ff6..905c7ef 100644 --- a/src/components/card/VitalSection.tsx +++ b/src/components/card/VitalSection.tsx @@ -247,8 +247,8 @@ export function VitalSection({ useEffect(() => { setSelectedState({ ...selectedState, - smoking: vitalFeatures?.[0], - room: vitalFeatures?.[1], + smoking: vitalFeatures?.[0].split(':')[1], + room: vitalFeatures?.[1].split(':')[1], }); }, [vitalFeatures]); @@ -285,7 +285,7 @@ export function VitalSection({ const [initialAge, setInitialAge] = useState(0); useEffect(() => { if (vitalFeatures !== null) - setInitialAge(Number(vitalFeatures?.[2].slice(1))); + setInitialAge(Number(vitalFeatures?.[2].split(':')[1].slice(1))); }, [vitalFeatures?.[2]]); const [ageValue, setAgeValue] = useState(0);