From f9731852b0b95590bba36d53ef65bed96a898876 Mon Sep 17 00:00:00 2001 From: semnil5202 Date: Mon, 16 Dec 2024 00:12:06 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EB=B6=88=EA=B0=80=ED=95=9C=20=EC=9D=B4=EC=8A=88=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Login/Agreement.tsx | 8 ++-- src/pages/ProfileEdit/ProfileEdit.page.tsx | 30 ++++++++++---- .../ProfileEdit/ProfileEditMatch.page.tsx | 28 ++++++++----- src/pages/SignUp/SignUp.page.tsx | 34 +++++++++++----- src/pages/SignUp/SignUpMatch.page.tsx | 31 +++++++++----- src/pages/SignUp/utils/manageQueryString.ts | 40 +++++++------------ 6 files changed, 106 insertions(+), 65 deletions(-) diff --git a/src/pages/Login/Agreement.tsx b/src/pages/Login/Agreement.tsx index 66dca65a..588d9638 100644 --- a/src/pages/Login/Agreement.tsx +++ b/src/pages/Login/Agreement.tsx @@ -1,13 +1,13 @@ import styled from '@emotion/styled'; import { BottomSheet, + Box, Button, - Spacer, - Text, - PNGAgreementBackground, Flex, - Box, ImageView, + PNGAgreementBackground, + Spacer, + Text, } from 'concept-be-design-system'; import { useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; diff --git a/src/pages/ProfileEdit/ProfileEdit.page.tsx b/src/pages/ProfileEdit/ProfileEdit.page.tsx index eb871fcb..c9fae8d3 100644 --- a/src/pages/ProfileEdit/ProfileEdit.page.tsx +++ b/src/pages/ProfileEdit/ProfileEdit.page.tsx @@ -25,25 +25,40 @@ import Back from '../../layouts/Back.tsx'; import useCheckDuplicateNickname from '../SignUp/hooks/useCheckDuplicateNickname.ts'; import useDefaultProfileImage from '../SignUp/hooks/useDefaultProfileImage.ts'; import useSetDetailSkills from '../SignUp/hooks/useSetDetailSkills.ts'; -import { generateQueryString } from '../SignUp/utils/manageQueryString.ts'; +import { getSessionData, setSessionData } from '../SignUp/utils/manageQueryString.ts'; import useProfileEditQuery from './hooks/useProfileEditQuery.ts'; import { DropdownValue, FieldValue } from './types'; +interface QueryStringProps { + nickname: string; + mainSkillId: number; + skills: { + skillId: number; + level: string; + }[]; + profileImageUrl: string | null; + livingPlaceId: number; + workingPlace: string; + introduction: string; +} + const ProfileEdit = () => { + const prevInputtedData = getSessionData('profileEditData') as QueryStringProps; + const navigate = useNavigate(); const openAlert = useAlert(); const { mainSkills, detailSkills, skillLevels, regions, my } = useProfileEditQuery(); const { fieldValue, fieldErrorValue, setFieldErrorValue, onChangeField } = useField({ - nickname: my.nickname ?? '', - company: my.workingPlace ?? '', - intro: my.introduction ?? '', + nickname: prevInputtedData.nickname ?? my.nickname ?? '', + company: prevInputtedData.workingPlace ?? my.workingPlace ?? '', + intro: prevInputtedData.introduction ?? my.introduction ?? '', }); const { dropdownValue, onResetDropdown, onClickDropdown } = useDropdown({ - mainSkill: my.mainSkill ?? '', + mainSkill: mainSkills.find(({ id }) => id === prevInputtedData.mainSkillId)?.name ?? my.mainSkill ?? '', skillDepthOne: '', skillDepthTwo: '', skillDepthThree: '', - region: my.livingPlace ?? '', + region: regions.find((place) => place.id === prevInputtedData.livingPlaceId)?.name ?? my.livingPlace ?? '', }); const { skillDepthOneId, selectedSkillDepths, onDeleteSkill } = useSetDetailSkills({ initialValue: my.skills, @@ -89,7 +104,8 @@ const ProfileEdit = () => { if (!dropdownValue.mainSkill) return openAlert({ content: '대표 스킬은 필수 값입니다.' }); if (selectedSkillDepths.length === 0) return openAlert({ content: '세부 스킬은 최소 한 개 이상 선택해주세요.' }); - navigate(`/profile-edit-match?${generateQueryString(formData)}`); + setSessionData('profileEditData', formData); + navigate('/profile-edit-match'); }; return ( diff --git a/src/pages/ProfileEdit/ProfileEditMatch.page.tsx b/src/pages/ProfileEdit/ProfileEditMatch.page.tsx index 9357bc6d..122b1f05 100644 --- a/src/pages/ProfileEdit/ProfileEditMatch.page.tsx +++ b/src/pages/ProfileEdit/ProfileEditMatch.page.tsx @@ -23,7 +23,7 @@ import { SVGBellCircle } from '../SignUp/assets/SVGBellCircle'; import { useUpdateNotificationSettings } from '../SignUp/hooks/useUpdateNotificationSettings'; import { WORKING_PLACE_MAP } from '../SignUp/SignUpMatch.page'; import { WorkingPlaceType } from '../SignUp/types'; -import { parseQueryString } from '../SignUp/utils/manageQueryString'; +import { clearSessionData, getSessionData } from '../SignUp/utils/manageQueryString'; import { Sheet_Left, Sheet_leftItem, @@ -48,6 +48,7 @@ interface QueryStringProps { workingPlace: string; introduction: string; } + interface CheckboxValue { goal: CheckboxOption[]; } @@ -59,11 +60,13 @@ interface CheckboxOption { } export default function ProfileEditMatchPage() { + const prevInputtedData = getSessionData('profileEditData'); + const openAlert = useAlert(); const userId = getUserId(); const [isOpenBranchBottomSheet, setIsOpenBranchBottomSheet] = useState(false); - const [prevFormData, _] = useState(parseQueryString); + const [prevFormData, _] = useState(prevInputtedData as QueryStringProps); const my = useMemberInfoQuery(userId); const { branches, purposes, cooperationWays } = useWritingInfoQuery(); @@ -112,13 +115,20 @@ export default function ProfileEditMatchPage() { }, { onSuccess: () => { - patchNotificationSettings({ - purposeIds: selectedCheckboxId.goal, - branchIds: selectedBranchResponses.map((item) => item.id), - cooperationWay: WORKING_PLACE_MAP[ - selectedRadioName.cooperationWays as keyof typeof WORKING_PLACE_MAP - ] as WorkingPlaceType, - }); + patchNotificationSettings( + { + purposeIds: selectedCheckboxId.goal, + branchIds: selectedBranchResponses.map((item) => item.id), + cooperationWay: WORKING_PLACE_MAP[ + selectedRadioName.cooperationWays as keyof typeof WORKING_PLACE_MAP + ] as WorkingPlaceType, + }, + { + onSuccess: () => { + clearSessionData('profileEditData'); + }, + }, + ); }, }, ); diff --git a/src/pages/SignUp/SignUp.page.tsx b/src/pages/SignUp/SignUp.page.tsx index 29f5afd8..c8cefff9 100644 --- a/src/pages/SignUp/SignUp.page.tsx +++ b/src/pages/SignUp/SignUp.page.tsx @@ -26,26 +26,42 @@ import useCheckDuplicateNickname from './hooks/useCheckDuplicateNickname.ts'; import useDefaultProfileImage from './hooks/useDefaultProfileImage.ts'; import useSetDetailSkills from './hooks/useSetDetailSkills.ts'; import useSignUpQuery from './hooks/useSignUpQuery.ts'; +import useValidateUserInfo from './hooks/useValidateUserInfo.ts'; import { DropdownValue, FieldValue } from './types'; -import { generateQueryString } from './utils/manageQueryString.ts'; +import { getSessionData, setSessionData } from './utils/manageQueryString.ts'; + +interface QueryStringProps { + nickname: string; + mainSkillId: number; + skills: { + skillId: number; + level: string; + }[]; + joinPurposes: number[]; + livingPlaceId: number; + workingPlace: string; + introduction: string; +} const SignUpPage = () => { + const prevInputtedData = getSessionData('signUpData') as QueryStringProps; + const navigate = useNavigate(); const openAlert = useAlert(); const { state: memberInfo }: { state: OauthMemberInfo | null } = useLocation(); const { mainSkills, detailSkills, skillLevels, regions } = useSignUpQuery(); const { fieldValue, fieldErrorValue, setFieldErrorValue, onChangeField } = useField({ - nickname: '', - company: '', - intro: '', + nickname: prevInputtedData.nickname ?? '', + company: prevInputtedData.workingPlace ?? '', + intro: prevInputtedData.introduction ?? '', }); const { dropdownValue, onResetDropdown, onClickDropdown } = useDropdown({ - mainSkill: '', + mainSkill: mainSkills.find(({ id }) => id === prevInputtedData.mainSkillId)?.name ?? '', skillDepthOne: '', skillDepthTwo: '', skillDepthThree: '', - region: '', + region: regions.find((place) => place.id === prevInputtedData.livingPlaceId)?.name ?? '', }); const { skillDepthOneId, selectedSkillDepths, onDeleteSkill } = useSetDetailSkills({ mainSkills, @@ -71,8 +87,7 @@ const SignUpPage = () => { oauthServerType: memberInfo?.oauthServerType || '', }; - // TODO: QA 이후 복원 - // useValidateUserInfo(memberInfo); + useValidateUserInfo(memberInfo); useCheckDuplicateNickname({ nickname: fieldValue.nickname, setFieldErrorValue }); const validateInput = () => { @@ -95,7 +110,8 @@ const SignUpPage = () => { if (!dropdownValue.mainSkill) return openAlert({ content: '대표 스킬은 필수 값입니다.' }); if (selectedSkillDepths.length === 0) return openAlert({ content: '세부 스킬은 최소 한 개 이상 선택해주세요.' }); - navigate(`/sign-up-match?${generateQueryString(formData)}`); + setSessionData('signUpData', formData); + navigate('/sign-up-match', { state: memberInfo }); }; return ( diff --git a/src/pages/SignUp/SignUpMatch.page.tsx b/src/pages/SignUp/SignUpMatch.page.tsx index 50c253ce..77827e35 100644 --- a/src/pages/SignUp/SignUpMatch.page.tsx +++ b/src/pages/SignUp/SignUpMatch.page.tsx @@ -32,8 +32,9 @@ import { get2DepthCountsBy1DepthBranches } from '../Write/utils/get2DepthCountBy import { SVGBellCircle } from './assets/SVGBellCircle'; import { useNotificationSettingsMutation } from './hooks/useNotificationSettingsMutation'; import useSignUpMutation from './hooks/useSignUpMutation'; +import useValidateUserInfo from './hooks/useValidateUserInfo'; import { WorkingPlaceType } from './types'; -import { parseQueryString } from './utils/manageQueryString'; +import { clearSessionData, getSessionData } from './utils/manageQueryString'; interface QueryStringProps { nickname: string; @@ -65,11 +66,13 @@ export const WORKING_PLACE_MAP = { } as const; const SignUpMatchPage = () => { + const prevInputtedData = getSessionData('signUpData'); + const openAlert = useAlert(); const { state: memberInfo }: { state: OauthMemberInfo | null } = useLocation(); const [isOpenBranchBottomSheet, setIsOpenBranchBottomSheet] = useState(false); - const [prevFormData, _] = useState(parseQueryString); + const [prevFormData, _] = useState(prevInputtedData as QueryStringProps); const { branches, purposes, cooperationWays } = useWritingInfoQuery(); @@ -89,8 +92,7 @@ const SignUpMatchPage = () => { const branchBottomSheetLeftItems = branches.map((item) => item.name); const branchBottomSheetRightItems = branches.find((item) => item.name === selectedBranch1Depth)?.branchResponses; - // TODO: QA 이후 복원 - // useValidateUserInfo(memberInfo); + useValidateUserInfo(memberInfo); const onClickBranch = (selected: Info) => { if (selectedBranchResponses.length >= 10) { @@ -135,13 +137,20 @@ const SignUpMatchPage = () => { }, { onSuccess: () => { - postNotificationSettings({ - purposeIds: selectedCheckboxId.goal, - branchIds: selectedBranchResponses.map((item) => item.id), - cooperationWay: WORKING_PLACE_MAP[ - selectedRadioName.cooperationWays as keyof typeof WORKING_PLACE_MAP - ] as WorkingPlaceType, - }); + postNotificationSettings( + { + purposeIds: selectedCheckboxId.goal, + branchIds: selectedBranchResponses.map((item) => item.id), + cooperationWay: WORKING_PLACE_MAP[ + selectedRadioName.cooperationWays as keyof typeof WORKING_PLACE_MAP + ] as WorkingPlaceType, + }, + { + onSuccess: () => { + clearSessionData('signUpData'); + }, + }, + ); }, }, ); diff --git a/src/pages/SignUp/utils/manageQueryString.ts b/src/pages/SignUp/utils/manageQueryString.ts index 2378c226..973c1e05 100644 --- a/src/pages/SignUp/utils/manageQueryString.ts +++ b/src/pages/SignUp/utils/manageQueryString.ts @@ -1,30 +1,20 @@ -export const generateQueryString = (params: Record) => { - return Object.keys(params) - .map((key) => { - if (typeof params[key] === 'object') { - return `${key}=${JSON.stringify(params[key])}`; - } - - return `${key}=${params[key]}`; - }) - .join('&'); +export const setSessionData = (key: string, data: Record) => { + sessionStorage.setItem(key, JSON.stringify(data)); }; -export const parseQueryString = >() => { - const searchParams = new URLSearchParams(window.location.search); - const searchParamsObject = Object.fromEntries(searchParams.entries()); +export const getSessionData = >(key: string): T | undefined => { + const data = sessionStorage.getItem(key); + if (!data) { + return undefined; + } - const parsedObject = Object.entries(searchParamsObject).reduce( - (acc, [key, value]) => { - try { - acc[key] = JSON.parse(value); - } catch { - acc[key] = value; - } - return acc; - }, - {} as Record, - ); + try { + return JSON.parse(data); + } catch { + return undefined; + } +}; - return parsedObject as T; +export const clearSessionData = (key: string) => { + sessionStorage.removeItem(key); };