Merge pull request #70 from capstone-maru/fix/profile-api

fix: features form
capstone-maru · Apr 30, 2024 · c635c0a · c635c0a
2 parents 981d17a + 5e174b0
commit c635c0a
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 53 deletions.
diff --git 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 }) {
             </styles.miniCardList>
           </styles.miniCardKeywordsContainer>
         </styles.miniCard>
-        <UserInputSection
-          gender={userData?.gender}
-          birthYear={userData?.birthYear}
-          location={card.data?.data.location}
-          features={features}
-          isMySelf={isMySelf}
-          type={type}
-          mbti={initialMbti}
-          major={initialMajor}
-          budget={initialBudget}
-          onVitalChange={handleFeatureChange}
-          onOptionChange={handleOptionClick}
-          onLocationChange={setLocation}
-          onMateAgeChange={setMateAge}
-          onMbtiChange={setMbti}
-          onMajorChange={setMajor}
-          onBudgetChange={setBudget}
-        />
+        {type === 'myCard' ? (
+          <UserInputSection
+            gender={userData?.gender}
+            birthYear={userData?.birthYear}
+            location={card.data?.data.location}
+            features={features}
+            isMySelf={isMySelf}
+            type="myCard"
+            mbti={initialMbti}
+            major={initialMajor}
+            budget={initialBudget}
+            onVitalChange={handleFeatureChange}
+            onOptionChange={handleOptionClick}
+            onLocationChange={setLocation}
+            onMateAgeChange={setMateAge}
+            onMbtiChange={setMbti}
+            onMajorChange={setMajor}
+            onBudgetChange={setBudget}
+          />
+        ) : (
+          <UserInputSection
+            gender={userData?.gender}
+            birthYear={userData?.birthYear}
+            location={card.data?.data.location}
+            features={features}
+            isMySelf={isMySelf}
+            type="mateCard"
+            mbti={initialMbti}
+            major={initialMajor}
+            budget={initialBudget}
+            onVitalChange={handleFeatureChange}
+            onOptionChange={handleOptionClick}
+            onLocationChange={setLocation}
+            onMateAgeChange={setMateAge}
+            onMbtiChange={setMbti}
+            onMajorChange={setMajor}
+            onBudgetChange={setBudget}
+          />
+        )}
       </styles.cardContainer>
     </styles.pageContainer>
   );

diff --git 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<string, boolean>;
 
@@ -239,6 +240,7 @@ const useSelectedState = (): [
   const [selectedState, setSelectedState] = useState<SelectedState>({
     smoking: undefined,
     room: undefined,
+    mateAge: undefined,
   });
   const [selectedOptions, setSelectedOptions] = useState<SelectedOptions>({});
 
@@ -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
@@ -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
@@ -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
@@ -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<number>(0);