[FE] roomInfoStore의 구조변경을 수행한다. (#809)

woowacourse-teams · Oct 17, 2024 · 69396f5 · 69396f5
1 parent 876ed95
commit 69396f5
Show file tree

Hide file tree

Showing 35 changed files with 455 additions and 556 deletions.
diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
@@ -22,7 +22,7 @@
     "eqeqeq": "error",
     "dot-notation": "warn",
     "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": ["error"],
+    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "_" }],
     "unused-imports/no-unused-imports": "error",
     "unused-imports/no-unused-vars": [
       "warn",

diff --git a/frontend/playwright-report/index.html b/frontend/playwright-report/index.html
diff --git a/frontend/src/apis/checklist.ts b/frontend/src/apis/checklist.ts
@@ -1,7 +1,8 @@
 import fetcher from '@/apis/fetcher';
 import { BASE_URL, ENDPOINT } from '@/apis/url';
+import { roomInfoApiMapper } from '@/store/roomInfoStore';
 import { ChecklistInfo, ChecklistPostForm, ChecklistSelectedQuestions } from '@/types/checklist';
-import { mapObjNullToUndefined, mapObjUndefinedToNull } from '@/utils/typeFunctions';
+import { mapObjNullToUndefined } from '@/utils/typeFunctions';
 
 export const getChecklistQuestions = async () => {
   const response = await fetcher.get({ url: BASE_URL + ENDPOINT.CHECKLIST_QUESTION });
@@ -28,16 +29,17 @@ export const getChecklists = async () => {
 };
 
 export const postChecklist = async (checklist: ChecklistPostForm) => {
-  checklist.room.structure = checklist.room.structure === 'NONE' ? undefined : checklist.room.structure;
-  checklist.room = mapObjUndefinedToNull(checklist.room);
-  const response = await fetcher.post({ url: BASE_URL + ENDPOINT.CHECKLISTS_V1, body: checklist });
+  const room = roomInfoApiMapper(checklist.room);
+  const response = await fetcher.post({
+    url: BASE_URL + ENDPOINT.CHECKLISTS_V1,
+    body: { ...checklist, room },
+  });
   return response;
 };
 
 export const putChecklist = async (id: number, checklist: ChecklistPostForm) => {
-  checklist.room.structure = checklist.room.structure === 'NONE' ? undefined : checklist.room.structure;
-  checklist.room = mapObjUndefinedToNull(checklist.room);
-  const response = await fetcher.put({ url: BASE_URL + ENDPOINT.CHECKLIST_ID(id), body: checklist });
+  const room = roomInfoApiMapper(checklist.room);
+  const response = await fetcher.put({ url: BASE_URL + ENDPOINT.CHECKLIST_ID(id), body: { ...checklist, room } });
   return response;
 };
 

diff --git a/frontend/src/apis/fetcher.ts b/frontend/src/apis/fetcher.ts
@@ -30,7 +30,7 @@ const request = async ({ url, method, body, headers = {} }: RequestProps) => {
 };
 
 const handleError = async (response: Response, { url, method, body, headers = {} }: RequestProps) => {
-  const responseString = await response.text();
+  const responseString = await response.clone().text();
   const errorMessage = JSON.parse(responseString).message;
 
   if (response.status === 401 && errorMessage === API_ERROR_MESSAGE.REISSUE_TOKEN_NEED) {

diff --git a/frontend/src/components/NewChecklist/MemoModal/MemoModal.tsx b/frontend/src/components/NewChecklist/MemoModal/MemoModal.tsx
@@ -1,12 +1,11 @@
 import styled from '@emotion/styled';
 import { useRef } from 'react';
-import { useStore } from 'zustand';
 
 import Button from '@/components/_common/Button/Button';
 import Modal from '@/components/_common/Modal/Modal';
 import Textarea from '@/components/_common/Textarea/Textarea';
 import useInput from '@/hooks/useInput';
-import checklistRoomInfoStore from '@/store/checklistRoomInfoStore';
+import useRoomInfoValidated from '@/hooks/useRoomInfoValidated';
 import { flexCenter, title3 } from '@/styles/common';
 import theme from '@/styles/theme';
 
@@ -17,9 +16,8 @@ interface Props {
 
 const MemoModal = ({ isModalOpen, modalClose }: Props) => {
   const intervalRef = useRef<number | undefined>(undefined);
-  const checklistRoomInfoActions = useStore(checklistRoomInfoStore, state => state.actions);
-  const memo = useStore(checklistRoomInfoStore, state => state.value.memo);
-  const { value: memoValue, onChange } = useInput<string>(memo || '');
+  const memo = useRoomInfoValidated('memo');
+  const { value: memoValue, onChange } = useInput<string>(memo.rawValue || '');
 
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     onChange(e);
@@ -33,7 +31,7 @@ const MemoModal = ({ isModalOpen, modalClose }: Props) => {
   };
 
   const handleSubmit = (addModalClose: boolean) => {
-    checklistRoomInfoActions.set('memo', memoValue);
+    memo.set(memoValue);
     if (addModalClose) modalClose();
   };
 

diff --git a/frontend/src/components/NewChecklist/NewChecklistContent.tsx b/frontend/src/components/NewChecklist/NewChecklistContent.tsx
@@ -6,8 +6,10 @@ import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import NewChecklistInfoTemplate from '@/components/NewChecklist/NewChecklistInfoTemplate';
 import NewChecklistTemplate from '@/components/NewChecklist/NewChecklistTemplate';
 import OptionChecklistTemplate from '@/components/NewChecklist/Option/OptionChecklistTemplate';
+import useInitialChecklist from '@/hooks/useInitialChecklist';
 
 const NewChecklistContent = () => {
+  useInitialChecklist();
   const { currentTabId } = useTabContext();
 
   return (

diff --git a/frontend/src/components/NewChecklist/NewChecklistTemplate.tsx b/frontend/src/components/NewChecklist/NewChecklistTemplate.tsx
@@ -3,14 +3,12 @@ import styled from '@emotion/styled';
 import Layout from '@/components/_common/layout/Layout';
 import { useTabContext } from '@/components/_common/Tabs/TabContext';
 import ChecklistQuestionItem from '@/components/NewChecklist/ChecklistQuestion/ChecklistQuestion';
-import useInitialChecklist from '@/hooks/useInitialChecklist';
 import useChecklistStore from '@/store/useChecklistStore';
 import { flexColumn } from '@/styles/common';
 import theme from '@/styles/theme';
 import { ChecklistQuestion } from '@/types/checklist';
 
 const NewChecklistTemplate = () => {
-  useInitialChecklist(); // 체크리스트 질문 가져오기 및 준비
   const { currentTabId } = useTabContext();
   const checklistActions = useChecklistStore(store => store.actions);
 

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/DepositAndRent.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/DepositAndRent.tsx
@@ -1,36 +1,31 @@
-import { useStore } from 'zustand';
-
 import FormField from '@/components/_common/FormField/FormField';
 import FormStyled from '@/components/NewChecklist/NewRoomInfoForm/styled';
-import checklistRoomInfoStore from '@/store/checklistRoomInfoStore';
+import useRoomInfoValidated from '@/hooks/useRoomInfoValidated';
 
 const DepositAndRent = () => {
-  const actions = useStore(checklistRoomInfoStore, state => state.actions);
-  const deposit = useStore(checklistRoomInfoStore, state => state.rawValue.deposit);
-  const rent = useStore(checklistRoomInfoStore, state => state.rawValue.rent);
-  const errorMessageDeposit = useStore(checklistRoomInfoStore, state => state.errorMessage.deposit);
-  const errorMessageRent = useStore(checklistRoomInfoStore, state => state.errorMessage.rent);
+  const deposit = useRoomInfoValidated('deposit');
+  const rent = useRoomInfoValidated('rent');
 
-  const errorMessage = errorMessageDeposit || errorMessageRent;
+  const errorMessage = deposit.errorMessage || rent.errorMessage;
 
   return (
     <FormField>
       <FormField.Label label="보증금 / 월세 (만원)" />
       <FormStyled.FieldBox>
         <FormField.Input
           width="medium"
-          onChange={actions.onChange}
+          onChange={deposit.onChange}
           name="deposit"
-          value={deposit}
+          value={deposit.rawValue}
           aria-label="보증금"
         />
         <FormStyled.FlexLabel label=" / " />
         <FormField.Input
           width="medium"
           placeholder=""
-          onChange={actions.onChange}
+          onChange={rent.onChange}
           name="rent"
-          value={rent}
+          value={rent.rawValue}
           aria-label="월세"
         />
       </FormStyled.FieldBox>

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/IncludedMaintenances.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/IncludedMaintenances.tsx
@@ -6,25 +6,24 @@ import FlexBox from '@/components/_common/FlexBox/FlexBox';
 import FormField from '@/components/_common/FormField/FormField';
 import FormStyled from '@/components/NewChecklist/NewRoomInfoForm/styled';
 import { IncludedMaintenancesData } from '@/constants/roomInfo';
-import checklistRoomInfoStore from '@/store/checklistRoomInfoStore';
+import roomInfoStore from '@/store/roomInfoStore';
 
 const IncludedMaintenances = () => {
-  const actions = useStore(checklistRoomInfoStore, state => state.actions);
-  const includedMaintenances = useStore(checklistRoomInfoStore, state => state.value.includedMaintenances);
+  // TODO : nonValidated 에서 관리해야함. 일단은 놔뒀음.
 
-  const handleCheckIncluded = (id: number) => !!includedMaintenances?.includes(id);
+  const includedMaintenances = useStore(roomInfoStore, state => state.includedMaintenances).rawValue;
+  const actions = useStore(roomInfoStore, state => state.actions);
 
-  const handleToggleButton = useCallback(
-    (value: number) => {
-      const isIncluded = handleCheckIncluded(value);
-
-      const updatedValue = isIncluded
-        ? includedMaintenances?.filter(id => id !== value)
-        : [...(includedMaintenances || []), value];
+  const isIncluded = useCallback((id: number) => includedMaintenances.includes(id), [includedMaintenances]);
 
-      actions.set('includedMaintenances', updatedValue);
+  const handleToggleButton = useCallback(
+    (clickedId: number) => {
+      const updatedValue = isIncluded(clickedId)
+        ? includedMaintenances.filter(id => id !== clickedId)
+        : [...(includedMaintenances || []), clickedId];
+      actions.set({ includedMaintenances: { rawValue: updatedValue, errorMessage: '' } });
     },
-    [includedMaintenances, actions],
+    [includedMaintenances, actions, isIncluded],
   );
 
   return (
@@ -37,7 +36,7 @@ const IncludedMaintenances = () => {
             label={displayName}
             name={displayName}
             size="button"
-            isSelected={handleCheckIncluded(id)}
+            isSelected={isIncluded(id)}
             onClick={() => handleToggleButton(id)}
           />
         ))}

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/MaintenanceFee.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/MaintenanceFee.tsx
@@ -1,14 +1,10 @@
-import { useStore } from 'zustand';
-
 import FormField from '@/components/_common/FormField/FormField';
 import Input from '@/components/_common/Input/Input';
 import FormStyled from '@/components/NewChecklist/NewRoomInfoForm/styled';
-import checklistRoomInfoStore from '@/store/checklistRoomInfoStore';
+import useRoomInfoValidated from '@/hooks/useRoomInfoValidated';
 
 const MaintenanceFee = () => {
-  const actions = useStore(checklistRoomInfoStore, state => state.actions);
-  const maintenanceFee = useStore(checklistRoomInfoStore, state => state.rawValue.maintenanceFee);
-  const errorMessage = useStore(checklistRoomInfoStore, state => state.errorMessage.maintenanceFee);
+  const maintenanceFee = useRoomInfoValidated('maintenanceFee');
 
   return (
     <FormField>
@@ -17,14 +13,14 @@ const MaintenanceFee = () => {
         <Input
           width="medium"
           placeholder=""
-          onChange={actions.onChange}
+          onChange={maintenanceFee.onChange}
           name="maintenanceFee"
-          value={maintenanceFee}
+          value={maintenanceFee.rawValue}
           id="maintenanceFee"
         />
         <FormStyled.FlexLabel label="만원"></FormStyled.FlexLabel>
       </FormStyled.FieldBox>
-      <FormField.ErrorMessage value={errorMessage} />
+      <FormField.ErrorMessage value={maintenanceFee.errorMessage} />
     </FormField>
   );
 };

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/OccupancyMonth.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/OccupancyMonth.tsx
@@ -1,39 +1,31 @@
-import { useStore } from 'zustand';
-
 import Dropdown from '@/components/_common/Dropdown/Dropdown';
 import FlexBox from '@/components/_common/FlexBox/FlexBox';
 import FormField from '@/components/_common/FormField/FormField';
 import FormStyled from '@/components/NewChecklist/NewRoomInfoForm/styled';
 import { roomOccupancyPeriods } from '@/constants/roomInfo';
-import checklistRoomInfoStore from '@/store/checklistRoomInfoStore';
+import useRoomInfoValidated from '@/hooks/useRoomInfoValidated';
 
 const OccupancyMonth = () => {
-  const actions = useStore(checklistRoomInfoStore, state => state.actions);
-  const occupancyMonth = useStore(checklistRoomInfoStore, state => state.rawValue.occupancyMonth);
-  const occupancyPeriod = useStore(checklistRoomInfoStore, state => state.rawValue.occupancyPeriod);
-
-  const errorMessageOccupancyMonth = useStore(checklistRoomInfoStore, state => state.errorMessage.occupancyMonth);
-  const errorMessageOccupancyPeriod = useStore(checklistRoomInfoStore, state => state.errorMessage.occupancyPeriod);
-  const errorMessage = errorMessageOccupancyMonth || errorMessageOccupancyPeriod;
+  const occupancyMonth = useRoomInfoValidated('occupancyMonth');
+  const occupancyPeriod = useRoomInfoValidated('occupancyPeriod');
+  const errorMessage = occupancyMonth.errorMessage || occupancyPeriod.errorMessage;
 
   return (
     <FlexBox.Vertical gap="1.5rem">
       <FormField.Label label="입주 가능일" htmlFor="occupancyMonth" />
       <FormStyled.FieldBox>
         <FormField.Input
           width="medium"
-          onChange={actions.onChange}
+          onChange={occupancyMonth.onChange}
           name="occupancyMonth"
-          value={occupancyMonth}
+          value={occupancyMonth.rawValue}
           id="occupancyMonth"
         />
         <FormStyled.FlexLabel label="월  " />
         <Dropdown
-          initialValue={occupancyPeriod}
+          initialValue={occupancyPeriod.rawValue}
           options={roomOccupancyPeriods.map(value => ({ value }))}
-          onSelectSetter={(level: string) => {
-            actions.set('occupancyPeriod', level);
-          }}
+          onSelectSetter={(level: string) => occupancyPeriod.set(level)}
         />
       </FormStyled.FieldBox>
       <FormField.ErrorMessage value={errorMessage} />

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RealEstate.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RealEstate.tsx
@@ -1,12 +1,8 @@
-import { useStore } from 'zustand';
-
 import FormField from '@/components/_common/FormField/FormField';
-import checklistRoomInfoStore from '@/store/checklistRoomInfoStore';
+import useRoomInfoValidated from '@/hooks/useRoomInfoValidated';
 
 const RealEstate = () => {
-  const actions = useStore(checklistRoomInfoStore, state => state.actions);
-  const realEstate = useStore(checklistRoomInfoStore, state => state.rawValue.realEstate);
-  const errorMessage = useStore(checklistRoomInfoStore, state => state.errorMessage.realEstate);
+  const realEstate = useRoomInfoValidated('realEstate');
 
   return (
     <FormField>
@@ -15,12 +11,12 @@ const RealEstate = () => {
         placeholder=""
         width="full"
         type={'string'}
-        onChange={actions.onChange}
+        onChange={realEstate.onChange}
         name={'realEstate'}
-        value={realEstate}
+        value={realEstate.rawValue}
         id="realEstate"
       />
-      <FormField.ErrorMessage value={errorMessage} />
+      <FormField.ErrorMessage value={realEstate.errorMessage} />
     </FormField>
   );
 };

diff --git a/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomContractTerm.tsx b/frontend/src/components/NewChecklist/NewRoomInfoForm/RoomContractTerm.tsx
@@ -1,15 +1,12 @@
 import styled from '@emotion/styled';
-import { useStore } from 'zustand';
 
 import FormField from '@/components/_common/FormField/FormField';
 import Input from '@/components/_common/Input/Input';
 import FormStyled from '@/components/NewChecklist/NewRoomInfoForm/styled';
-import checklistRoomInfoStore from '@/store/checklistRoomInfoStore';
+import useRoomInfoValidated from '@/hooks/useRoomInfoValidated';
 
 const RoomContractTerm = () => {
-  const actions = useStore(checklistRoomInfoStore, state => state.actions);
-  const contractTerm = useStore(checklistRoomInfoStore, state => state.rawValue.contractTerm);
-  const errorMessage = useStore(checklistRoomInfoStore, state => state.errorMessage.contractTerm);
+  const contractTerm = useRoomInfoValidated('contractTerm');
 
   return (
     <FormField>
@@ -18,14 +15,14 @@ const RoomContractTerm = () => {
         <Input
           width="medium"
           placeholder=""
-          onChange={actions.onChange}
+          onChange={contractTerm.onChange}
           name="contractTerm"
-          value={contractTerm}
+          value={contractTerm.rawValue}
           id="contractTerm"
         />
         <FormStyled.FlexLabel label="개월"></FormStyled.FlexLabel>
       </S.FieldBox>
-      <FormField.ErrorMessage value={errorMessage} />
+      <FormField.ErrorMessage value={contractTerm.errorMessage} />
     </FormField>
   );
 };