From d9cb7efaaec60bea6ecca0d57e60c609c5906804 Mon Sep 17 00:00:00 2001 From: Minjae Kim Date: Sat, 13 Jan 2024 15:36:12 +0900 Subject: [PATCH] =?UTF-8?q?=ED=8F=BC=20=EA=B4=80=EB=A0=A8=20=EB=A6=AC?= =?UTF-8?q?=ED=8C=A9=ED=86=A0=EB=A7=81=20(#503)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: hook form devtools 개발 의존성 설치 * refactor: 크루 생성 페이지 리팩토링 * refactor: 게스트 모집 페이지 리팩토링 --- package-lock.json | 65 +++++++++++++++++++ package.json | 9 +-- src/pages/CreateCrewPage/CreateCrewPage.tsx | 5 +- .../CreateCrewPage/hooks/useCreateCrewPage.ts | 8 +-- src/pages/CreateGamePage/CreateGamePage.tsx | 18 ++--- .../CreateGamePage/hooks/useCreateGamePage.ts | 57 +++++++++------- 6 files changed, 116 insertions(+), 46 deletions(-) diff --git a/package-lock.json b/package-lock.json index 82a5974..c8b3990 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "zustand": "^4.4.6" }, "devDependencies": { + "@hookform/devtools": "^4.3.1", "@tanstack/react-query-devtools": "^5.1.0", "@testing-library/jest-dom": "^6.1.4", "@testing-library/react": "^14.0.0", @@ -1364,6 +1365,35 @@ "node": ">=14" } }, + "node_modules/@hookform/devtools": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/@hookform/devtools/-/devtools-4.3.1.tgz", + "integrity": "sha512-CrWxEoHQZaOXJZVQ8KBgOuAa8p2LI8M0DAN5GTRTmdCieRwFVjVDEmuTAVazWVRRkpEQSgSt3KYp7VmmqXdEnw==", + "dev": true, + "dependencies": { + "@emotion/react": "^11.1.5", + "@emotion/styled": "^11.3.0", + "@types/lodash": "^4.14.168", + "little-state-machine": "^4.1.0", + "lodash": "^4.17.21", + "react-simple-animate": "^3.3.12", + "use-deep-compare-effect": "^1.8.1", + "uuid": "^8.3.2" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, + "node_modules/@hookform/devtools/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "dev": true, + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", @@ -7219,6 +7249,15 @@ "node": ">=18.0.0" } }, + "node_modules/little-state-machine": { + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/little-state-machine/-/little-state-machine-4.8.0.tgz", + "integrity": "sha512-xfi5+iDxTLhu0hbnNubUs+qoQQqxhtEZeObP5ELjUlHnl74bbasY7mOonsGQrAouyrbag3ebNLSse5xX1T7buQ==", + "dev": true, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/local-pkg": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz", @@ -8748,6 +8787,15 @@ "react-dom": ">=16.8" } }, + "node_modules/react-simple-animate": { + "version": "3.5.2", + "resolved": "https://registry.npmjs.org/react-simple-animate/-/react-simple-animate-3.5.2.tgz", + "integrity": "sha512-xLE65euP920QMTOmv5haPlml+hmOPDkbIr5WeF7ADIXWBYt5kW/vwpNfWg8EKMab8aeDxIZ6QjffVh8v2dUyhg==", + "dev": true, + "peerDependencies": { + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/readable-stream": { "version": "3.6.2", "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz", @@ -10077,6 +10125,23 @@ } } }, + "node_modules/use-deep-compare-effect": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/use-deep-compare-effect/-/use-deep-compare-effect-1.8.1.tgz", + "integrity": "sha512-kbeNVZ9Zkc0RFGpfMN3MNfaKNvcLNyxOAAd9O4CBZ+kCBXXscn9s/4I+8ytUER4RDpEYs5+O6Rs4PqiZ+rHr5Q==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "dequal": "^2.0.2" + }, + "engines": { + "node": ">=10", + "npm": ">=6" + }, + "peerDependencies": { + "react": ">=16.13" + } + }, "node_modules/use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", diff --git a/package.json b/package.json index 77394d2..fd721d2 100644 --- 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 index efc7db9..557d9ee 100644 --- 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} > { + ); diff --git a/src/pages/CreateCrewPage/hooks/useCreateCrewPage.ts b/src/pages/CreateCrewPage/hooks/useCreateCrewPage.ts index 12f703f..88f0de8 100644 --- 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(''); const [selectedLocation, setSelectedLocation] = useState(); 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 index a5d7e48..53f5490 100644 --- 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(); 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,12 +97,11 @@ export const CreateGamePage = () => { isContainModal={true} name="playDate" onClick={toggleMatchDateModal} - value={playDate} isModalOpen={isMatchDateModalOpen} closeModal={toggleMatchDateModal} register={methods.register} > - + { 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} /> { + ); diff --git a/src/pages/CreateGamePage/hooks/useCreateGamePage.ts b/src/pages/CreateGamePage/hooks/useCreateGamePage.ts index ec865fd..186d44e 100644 --- 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(''); - const [playDate, setPlayDate] = useState(''); - const [playStartTimeHours, setPlayStartTimeHours] = useState(''); - const [playStartTimeMinutes, setPlayStartTimeMinutes] = useState(''); - const [playTimeMinutes, setPlayTimeMinutes] = useState(''); + const { handleSubmit, setValue, getValues } = methods; const [positions, setPositions] = useState([]); - const [mainAddress, setMainAddress] = useState(''); + const [isGuestCountModalOpen, setIsGuestCountModalOpen] = useState(false); const [isMatchDateModalOpen, setIsMatchDateModalOpen] = @@ -48,25 +42,30 @@ export const useCreateGamePage = () => { useState(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, }; };