refactor: 회원가입 불가한 이슈 수정

ConceptBe · Dec 15, 2024 · f973185 · f973185
1 parent 814e16b
commit f973185
Show file tree

Hide file tree

Showing 6 changed files with 106 additions and 65 deletions.
diff --git 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
@@ -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<FieldValue>({
-    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<DropdownValue>({
-    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
@@ -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<QueryStringProps>);
+  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
@@ -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<FieldValue>({
-    nickname: '',
-    company: '',
-    intro: '',
+    nickname: prevInputtedData.nickname ?? '',
+    company: prevInputtedData.workingPlace ?? '',
+    intro: prevInputtedData.introduction ?? '',
   });
   const { dropdownValue, onResetDropdown, onClickDropdown } = useDropdown<DropdownValue>({
-    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
@@ -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<QueryStringProps>);
+  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
@@ -1,30 +1,20 @@
-export const generateQueryString = (params: Record<string, any>) => {
-  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<string, any>) => {
+  sessionStorage.setItem(key, JSON.stringify(data));
 };
 
-export const parseQueryString = <T extends Record<string, any>>() => {
-  const searchParams = new URLSearchParams(window.location.search);
-  const searchParamsObject = Object.fromEntries(searchParams.entries());
+export const getSessionData = <T extends Record<string, any>>(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<string, any>,
-  );
+  try {
+    return JSON.parse(data);
+  } catch {
+    return undefined;
+  }
+};
 
-  return parsedObject as T;
+export const clearSessionData = (key: string) => {
+  sessionStorage.removeItem(key);
 };