폼 관련 리팩토링 (#503)

* chore: hook form devtools 개발 의존성 설치 * refactor: 크루 생성 페이지 리팩토링 * refactor: 게스트 모집 페이지 리팩토링
Java-and-Script · Jan 13, 2024 · d9cb7ef · d9cb7ef
1 parent af2254a
commit d9cb7ef
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 46 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -30,24 +30,25 @@
     "react-draggable-bottom-sheet": "^1.14.0",
     "react-error-boundary": "^4.0.11",
     "react-hook-form": "^7.47.0",
-    "react-kakao-maps-sdk": "^1.1.24",
     "react-hot-toast": "^2.4.1",
+    "react-kakao-maps-sdk": "^1.1.24",
     "react-router-dom": "^6.17.0",
     "sockjs-client": "^1.6.1",
     "stompjs": "^2.3.3",
     "zustand": "^4.4.6"
   },
   "devDependencies": {
-    "@types/daum-postcode": "^2.0.2",
-    "@types/sockjs-client": "^1.5.4",
-    "@types/stompjs": "^2.3.8",
     "@tanstack/react-query-devtools": "^5.1.0",
+    "@hookform/devtools": "^4.3.1",
     "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@trivago/prettier-plugin-sort-imports": "^4.2.1",
+    "@types/daum-postcode": "^2.0.2",
     "@types/event-source-polyfill": "^1.0.4",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
+    "@types/sockjs-client": "^1.5.4",
+    "@types/stompjs": "^2.3.8",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.3",

diff --git a/src/pages/CreateCrewPage/CreateCrewPage.tsx b/src/pages/CreateCrewPage/CreateCrewPage.tsx
@@ -1,5 +1,7 @@
 import { FormProvider } from 'react-hook-form';
 
+import { DevTool } from '@hookform/devtools';
+
 import { MAX_MEMBER_COUNT_LIST } from '@pages/CreateCrewPage/constants/createCrewOptions';
 import { CREATE_CREW_STRINGS } from '@pages/CreateCrewPage/constants/createCrewOptions';
 
@@ -43,7 +45,6 @@ export const CreateCrewPage = () => {
   } = useCreateCrewPage();
 
   const {
-    maxMemberCount,
     selectedLocation,
     selectedLocations,
     isOpenMaxMemberCountModal,
@@ -78,7 +79,6 @@ export const CreateCrewPage = () => {
               isContainModal={true}
               isModalOpen={isOpenMaxMemberCountModal}
               closeModal={toggleMaxMemberCountModal}
-              value={maxMemberCount}
               onClick={toggleMaxMemberCountModal}
             >
               <VirtualScroll
@@ -144,6 +144,7 @@ export const CreateCrewPage = () => {
             <StyledEmptyContainer />
           </StyledCreateForm>
         </FormProvider>
+        <DevTool control={methods.control} />
       </PageWrapper>
     </PageLayout>
   );

diff --git a/src/pages/CreateCrewPage/hooks/useCreateCrewPage.ts b/src/pages/CreateCrewPage/hooks/useCreateCrewPage.ts
@@ -32,9 +32,8 @@ export const useCreateCrewPage = () => {
   const { mutate } = useCrewMutation();
 
   const methods = useForm();
-  const { handleSubmit } = methods;
+  const { handleSubmit, setValue } = methods;
 
-  const [maxMemberCount, setMaxMemberCount] = useState<string>('');
   const [selectedLocation, setSelectedLocation] = useState<string[]>();
   const [isOpenMaxMemberCountModal, setIsOpenMaxMemberCountModal] =
     useState(false);
@@ -58,12 +57,12 @@ export const useCreateCrewPage = () => {
   };
 
   const handleMaxMemberCount = (maxMemberCount: string) => {
-    isOpenMaxMemberCountModal || setMaxMemberCount(maxMemberCount);
+    isOpenMaxMemberCountModal || setValue('maxMemberCount', maxMemberCount);
   };
 
   const onSubmit = handleSubmit((data: FieldValues) => {
     const addressDepth2 = selectedLocation![0];
-    const { name, content } = data;
+    const { name, content, maxMemberCount } = data;
     const crewData: PostCrewRequest = {
       name,
       content,
@@ -92,7 +91,6 @@ export const useCreateCrewPage = () => {
 
   return {
     state: {
-      maxMemberCount,
       selectedLocation,
       selectedLocations,
       isOpenMaxMemberCountModal,

diff --git a/src/pages/CreateGamePage/CreateGamePage.tsx b/src/pages/CreateGamePage/CreateGamePage.tsx
@@ -1,5 +1,7 @@
 import { FormProvider } from 'react-hook-form';
 
+import { DevTool } from '@hookform/devtools';
+
 import {
   CREATE_GAME_STRINGS,
   MAX_MEMBER_COUNT_LIST,
@@ -43,7 +45,7 @@ export const CreateGamePage = () => {
     toggleMatchDateModal,
     toggleStartTimeModal,
     togglePlayTimeModal,
-    setPlayDate,
+    handlePlayDate,
     setPositions,
     handleMaxMemberCount,
     handlePlayStartTimeHours,
@@ -54,12 +56,6 @@ export const CreateGamePage = () => {
   const { entryRef, showHeaderTitle } = useHeaderTitle<HTMLDivElement>();
 
   const {
-    maxMemberCount,
-    playDate,
-    playStartTimeHours,
-    playStartTimeMinutes,
-    playTimeMinutes,
-    mainAddress,
     isGuestCountModalOpen,
     isMatchDateModalOpen,
     isStartTimeModalOpen,
@@ -85,7 +81,6 @@ export const CreateGamePage = () => {
               isContainModal={true}
               name="maxMemberCount"
               onClick={toggleGuestCountModal}
-              value={maxMemberCount}
               isModalOpen={isGuestCountModalOpen}
               closeModal={toggleGuestCountModal}
               register={methods.register}
@@ -102,20 +97,18 @@ export const CreateGamePage = () => {
               isContainModal={true}
               name="playDate"
               onClick={toggleMatchDateModal}
-              value={playDate}
               isModalOpen={isMatchDateModalOpen}
               closeModal={toggleMatchDateModal}
               register={methods.register}
             >
-              <CalendarComponent setDate={setPlayDate} />
+              <CalendarComponent setDate={handlePlayDate} />
             </ConditionalFormInput>
             <ConditionalFormInput
               label={CREATE_GAME_STRINGS.START_TIME}
               readOnly={true}
               isContainModal={true}
               name="playStartTime"
               onClick={toggleStartTimeModal}
-              value={`${playStartTimeHours}:${playStartTimeMinutes}`}
               isModalOpen={isStartTimeModalOpen}
               closeModal={toggleStartTimeModal}
               register={methods.register}
@@ -140,7 +133,6 @@ export const CreateGamePage = () => {
               isContainModal={true}
               name="playTimeMinutes"
               onClick={togglePlayTimeModal}
-              value={playTimeMinutes}
               isModalOpen={isPlayTimeModalOpen}
               closeModal={togglePlayTimeModal}
               register={methods.register}
@@ -163,7 +155,6 @@ export const CreateGamePage = () => {
               readOnly={true}
               name="mainAddress"
               onClick={handleAddressSelect}
-              value={mainAddress}
               register={methods.register}
             />
             <ConditionalFormInput
@@ -201,6 +192,7 @@ export const CreateGamePage = () => {
             <StyledEmptyContainer />
           </StyledCreateForm>
         </FormProvider>
+        <DevTool control={methods.control} />
       </PageWrapper>
     </PageLayout>
   );

diff --git a/src/pages/CreateGamePage/hooks/useCreateGamePage.ts b/src/pages/CreateGamePage/hooks/useCreateGamePage.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { FieldValues, useForm } from 'react-hook-form';
 import toast from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
@@ -29,15 +29,9 @@ export const useCreateGamePage = () => {
   const navigate = useNavigate();
 
   const methods = useForm();
-  const { handleSubmit } = methods;
-
-  const [maxMemberCount, setMaxMemberCount] = useState<string>('');
-  const [playDate, setPlayDate] = useState<string>('');
-  const [playStartTimeHours, setPlayStartTimeHours] = useState<string>('');
-  const [playStartTimeMinutes, setPlayStartTimeMinutes] = useState<string>('');
-  const [playTimeMinutes, setPlayTimeMinutes] = useState<string>('');
+  const { handleSubmit, setValue, getValues } = methods;
   const [positions, setPositions] = useState<Position[]>([]);
-  const [mainAddress, setMainAddress] = useState<string>('');
+
   const [isGuestCountModalOpen, setIsGuestCountModalOpen] =
     useState<boolean>(false);
   const [isMatchDateModalOpen, setIsMatchDateModalOpen] =
@@ -48,25 +42,30 @@ export const useCreateGamePage = () => {
     useState<boolean>(false);
 
   const handleMaxMemberCount = (maxMemberCount: string) => {
-    isGuestCountModalOpen || setMaxMemberCount(maxMemberCount);
+    isGuestCountModalOpen || setValue('maxMemberCount', maxMemberCount);
   };
 
   const handlePlayStartTimeHours = (playStartTimeHours: string) => {
-    isStartTimeModalOpen || setPlayStartTimeHours(playStartTimeHours);
+    isStartTimeModalOpen || setValue('playStartTimeHours', playStartTimeHours);
   };
 
   const handlePlayStartTimeMinutes = (playStartTimeMinutes: string) => {
-    isStartTimeModalOpen || setPlayStartTimeMinutes(playStartTimeMinutes);
+    isStartTimeModalOpen ||
+      setValue('playStartTimeMinutes', playStartTimeMinutes);
   };
 
   const handlePlayTimeMinutes = (playTimeMinutes: string) => {
-    isPlayTimeModalOpen || setPlayTimeMinutes(playTimeMinutes);
+    isPlayTimeModalOpen || setValue('playTimeMinutes', playTimeMinutes);
+  };
+
+  const handlePlayDate = (playDate: string) => {
+    setValue('playDate', playDate);
   };
 
   const handleAddressSelect = () => {
     new daum.Postcode({
       oncomplete: ({ address }: { address: string }) => {
-        setMainAddress(address);
+        setValue('mainAddress', address);
       },
     }).open();
   };
@@ -87,8 +86,28 @@ export const useCreateGamePage = () => {
     setIsPlayTimeModalOpen((prev) => !prev);
   };
 
+  useEffect(() => {
+    isStartTimeModalOpen ||
+      setValue(
+        'playStartTime',
+        `${getValues('playStartTimeHours')}:${getValues(
+          'playStartTimeMinutes'
+        )}`
+      );
+  }, [getValues, setValue, isStartTimeModalOpen]);
+
   const onSubmit = handleSubmit((data: FieldValues) => {
-    const { detailAddress, cost, content } = data;
+    const {
+      detailAddress,
+      cost,
+      content,
+      maxMemberCount,
+      playDate,
+      playStartTimeHours,
+      playStartTimeMinutes,
+      mainAddress,
+      playTimeMinutes,
+    } = data;
     const gameData: PostGameRequest = {
       maxMemberCount: parseInt(maxMemberCount),
       playDate,
@@ -123,12 +142,6 @@ export const useCreateGamePage = () => {
 
   return {
     state: {
-      maxMemberCount,
-      playDate,
-      playStartTimeHours,
-      playStartTimeMinutes,
-      playTimeMinutes,
-      mainAddress,
       isGuestCountModalOpen,
       isMatchDateModalOpen,
       isStartTimeModalOpen,
@@ -141,11 +154,11 @@ export const useCreateGamePage = () => {
     toggleMatchDateModal,
     toggleStartTimeModal,
     togglePlayTimeModal,
-    setPlayDate,
     setPositions,
     handleMaxMemberCount,
     handlePlayStartTimeHours,
     handlePlayStartTimeMinutes,
     handlePlayTimeMinutes,
+    handlePlayDate,
   };
 };