fix: Fix the error that prevented additional options from being saved (kookmin-sw#75)

Author: cjeongmin

src/app/pages/writing-post-page.tsx

@@ -605,6 +605,14 @@ export function WritingPostPage() {
           });
         }, []);
 
+        console.log(selectedExtraOptions, {
+          canPark: selectedExtraOptions.canPark ?? false,
+          hasAirConditioner: selectedExtraOptions.hasAirConditioner ?? false,
+          hasRefrigerator: selectedExtraOptions.hasRefrigerator ?? false,
+          hasWasher: selectedExtraOptions.hasWasher ?? false,
+          hasTerrace: selectedExtraOptions.hasTerrace ?? false,
+        });
+
         mutate(
           {
             imageFilesData: uploadedImages,
@@ -891,12 +899,12 @@ export function WritingPostPage() {
           </styles.optionRow>
           <styles.option>추가 옵션</styles.option>
           <styles.optionRow>
-            {Object.keys(AdditionalInfoTypeValue).map(option => (
+            {Object.entries(AdditionalInfoTypeValue).map(([option, value]) => (
               <styles.optionButtonContainer key={option}>
                 <styles.customCheckBox
-                  $isSelected={isExtraOptionSelected(option)}
+                  $isSelected={isExtraOptionSelected(value)}
                   onClick={() => {
-                    handleExtraOptionClick(option);
+                    handleExtraOptionClick(value);
                   }}
                 />
                 <span>{option}</span>

src/entities/shared-posts-filter/shared-posts-filter.type.ts

@@ -1,10 +1,15 @@
+import { type SelectedExtraOptions } from '@/features/shared';
+
 export type AdditionalInfoType =
   | '주차가능'
   | '에어컨'
   | '냉장고'
   | '세탁기'
   | '베란다/테라스';
-export const AdditionalInfoTypeValue: Record<AdditionalInfoType, string> = {
+export const AdditionalInfoTypeValue: Record<
+  AdditionalInfoType,
+  keyof SelectedExtraOptions
+> = {
   주차가능: 'canPark',
   에어컨: 'hasAirConditioner',
   냉장고: 'hasRefrigerator',

src/features/shared/shared.hook.ts

@@ -17,6 +17,7 @@ import {
 import { sharedPostPropState } from './shared.atom';
 import { type GetSharedPostDTO } from './shared.dto';
 import {
+  type SelectedExtraOptions,
   type CreateSharedPostProps,
   type GetSharedPostsProps,
   type SelectedOptions,
@@ -136,11 +137,11 @@ export const useSharedPostProps = () => {
         restRoomCount,
       },
       selectedExtraOptions: {
-        주차가능: data.roomInfo.extraOption.canPark,
-        에어컨: data.roomInfo.extraOption.hasAirConditioner,
-        냉장고: data.roomInfo.extraOption.hasRefrigerator,
-        세탁기: data.roomInfo.extraOption.hasWasher,
-        '베란다/테라스': data.roomInfo.extraOption.hasTerrace,
+        canPark: data.roomInfo.extraOption.canPark,
+        hasAirConditioner: data.roomInfo.extraOption.hasAirConditioner,
+        hasRefrigerator: data.roomInfo.extraOption.hasRefrigerator,
+        hasWasher: data.roomInfo.extraOption.hasWasher,
+        hasTerrace: data.roomInfo.extraOption.hasTerrace,
       },
     });
   };
@@ -149,7 +150,6 @@ export const useSharedPostProps = () => {
     optionName: keyof SelectedOptions,
     item: string,
   ) => {
-    console.log(state.selectedOptions, optionName, item);
     setState(prev => ({
       ...prev,
       selectedOptions: {
@@ -159,22 +159,24 @@ export const useSharedPostProps = () => {
     }));
   };
 
-  const handleExtraOptionClick = (option: string) => {
-    console.log(state.selectedExtraOptions, option);
-    setState(prev => ({
-      ...prev,
-      selectedExtraOptions: {
-        ...prev.selectedExtraOptions,
-        [option]: !prev.selectedExtraOptions[option],
-      },
-    }));
+  const handleExtraOptionClick = (option: keyof SelectedExtraOptions) => {
+    setState(prev => {
+      const value = prev.selectedExtraOptions[option] ?? false;
+      return {
+        ...prev,
+        selectedExtraOptions: {
+          ...prev.selectedExtraOptions,
+          [option]: !value,
+        },
+      };
+    });
   };
 
   const isOptionSelected = (optionName: keyof SelectedOptions, item: string) =>
     state.selectedOptions[optionName] === item;
 
-  const isExtraOptionSelected = (item: string) =>
-    state.selectedExtraOptions[item];
+  const isExtraOptionSelected = (item: keyof SelectedExtraOptions) =>
+    state.selectedExtraOptions[item] === true;
 
   return {
     ...state,

src/features/shared/shared.type.ts

@@ -29,7 +29,13 @@ export interface SelectedOptions {
   floorType?: string;
 }
 
-export type SelectedExtraOptions = Record<string, boolean>;
+export interface SelectedExtraOptions {
+  canPark?: boolean;
+  hasAirConditioner?: boolean;
+  hasRefrigerator?: boolean;
+  hasTerrace?: boolean;
+  hasWasher?: boolean;
+}
 
 export interface ImageFile {
   url: string;