Merge pull request #196 from Igloo-Club/fes/register

[Fes/register] regitser 플로우 수정
Igloo-Club · May 14, 2024 · a070026 · a070026
2 parents c97e0ea + 72d52f7
commit a070026
Show file tree

Hide file tree

Showing 19 changed files with 542 additions and 513 deletions.
diff --git a/src/register/RegisterPage.tsx b/src/register/RegisterPage.tsx
@@ -2,38 +2,32 @@ import useFunnel from './hooks/useFunnel';
 import styled from '@emotion/styled';
 
 import {
-  약관동의,
   전화번호입력,
   전화번호인증,
-  회사이메일입력,
-  회사이메일인증,
   닉네임입력,
   성별생년월일,
-  // SNS계정,
   기본프로필입력1,
-  기본프로필입력2,
-  지역선택,
+  FaceDepictionList,
   시간선택,
   장소선택,
   회원가입완료,
+  PersonalityDepiction,
+  HobbyList,
 } from './funnelPages/0_index';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Registertypes } from './types/registerTypes';
 import { ScheduleTypes } from './types/scheduleTypes';
 
 type StepType =
-  | '약관동의'
   | '전화번호입력'
   | '전화번호인증'
-  | '회사이메일입력'
-  | '회사이메일인증'
   | '닉네임입력'
   | '성별생년월일'
-  | 'SNS계정'
   | '기본프로필입력1'
-  | '기본프로필입력2'
-  | '지역선택'
+  | 'FaceDepictionList'
+  | 'PersonalityDepiction'
+  | 'HobbyList'
   | '시간선택'
   | '장소선택'
   | '회원가입완료';
@@ -55,32 +49,21 @@ const Register = () => {
 
   const [Funnel, setStep] = useFunnel(
     [
-      '약관동의',
       '전화번호입력',
       '전화번호인증',
-      '회사이메일입력',
-      '회사이메일인증',
       '닉네임입력',
       '성별생년월일',
-      'SNS계정',
       '기본프로필입력1',
-      '기본프로필입력2',
-      '지역선택',
+      'FaceDepictionList',
+      'PersonalityDepiction',
+      'HobbyList',
       '시간선택',
       '장소선택',
       '회원가입완료',
     ] as const,
     initialState as StepType,
   );
 
-  const [emailInfo, setEmailInfo] = useState<{
-    email: string;
-    companyName: string | string[] | number;
-  }>({
-    email: '',
-    companyName: '',
-  });
-
   const [phoneNum, setPhoneNum] = useState('');
 
   const [registerValues, setRegisterValues] = useState<Registertypes>({
@@ -111,6 +94,14 @@ const Register = () => {
       ...data,
     }));
   };
+  //특성 선택 핸들러
+  const handleValues = (value: string | string[], name?: string) => {
+    if (!name) return;
+    setRegisterValues((prevValues) => ({
+      ...prevValues,
+      [name]: value,
+    }));
+  };
 
   //장소시간선택 데이터
   const [registerScheduleValues, setRegisterScheduleValues] =
@@ -130,54 +121,31 @@ const Register = () => {
   return (
     <RagisterLayout>
       <Funnel>
-        <Funnel.Step name="약관동의">
-          <약관동의 onNext={() => setStep('전화번호입력')} percent={8} />
-        </Funnel.Step>
         <Funnel.Step name="전화번호입력">
           <전화번호입력
-            onPrev={() => setStep('약관동의')}
             onNext={() => setStep('전화번호인증')}
             setPhoneNum={setPhoneNum}
-            percent={10}
+            percent={20}
           />
         </Funnel.Step>
         <Funnel.Step name="전화번호인증">
           <전화번호인증
             onPrev={() => setStep('전화번호입력')}
             onNext={() => {
-              setStep('회사이메일입력');
+              setStep('닉네임입력');
               localStorage.setItem('STEP', '회사이메일입력');
             }}
             phoneNum={phoneNum}
-            percent={20}
-          />
-        </Funnel.Step>
-        <Funnel.Step name="회사이메일입력">
-          <회사이메일입력
-            onPrev={() => setStep('전화번호입력')}
-            onNext={() => setStep('회사이메일인증')}
-            setEmailInfo={setEmailInfo}
-            percent={28}
-          />
-        </Funnel.Step>
-        <Funnel.Step name="회사이메일인증">
-          <회사이메일인증
-            onPrev={() => setStep('회사이메일입력')}
-            onNext={() => {
-              setStep('닉네임입력');
-              localStorage.setItem('STEP', '닉네임입력');
-            }}
-            emailInfo={emailInfo}
-            percent={35}
+            percent={30}
           />
         </Funnel.Step>
         <Funnel.Step name="닉네임입력">
           <닉네임입력
-            onPrev={() => setStep('회사이메일입력')}
+            onPrev={() => setStep('전화번호인증')}
             onNext={() => setStep('성별생년월일')}
             handleRegisterValue={handleRegisterValue}
             registerValues={registerValues}
-            percent={43}
+            percent={40}
           />
         </Funnel.Step>
         <Funnel.Step name="성별생년월일">
@@ -189,46 +157,51 @@ const Register = () => {
             percent={50}
           />
         </Funnel.Step>
-        {/* <Funnel.Step name="SNS계정">
-          <SNS계정
-            onPrev={() => setStep('성별생년월일')}
-            onNext={() => setStep('기본프로필입력1')}
-            handleRegisterValue={handleRegisterValue}
-            registerValues={registerValues}
-          />
-        </Funnel.Step> */}
         <Funnel.Step name="기본프로필입력1">
           <기본프로필입력1
             onPrev={() => setStep('닉네임입력')}
-            onNext={() => setStep('기본프로필입력2')}
+            onNext={() => setStep('FaceDepictionList')}
             handleRegisterValue={handleRegisterValue}
             registerValues={registerValues}
             percent={60}
           />
         </Funnel.Step>
-        <Funnel.Step name="기본프로필입력2">
-          <기본프로필입력2
-            onPrev={() => setStep('기본프로필입력1')}
-            onNext={() => {
-              setStep('지역선택'), localStorage.setItem('STEP', '지역선택');
-            }}
+        <Funnel.Step name="FaceDepictionList">
+          <FaceDepictionList
+            values={registerValues.faceDepictionList}
+            handleValues={handleValues}
+            onPrev={() => setStep('닉네임입력')}
+            onNext={() => setStep('PersonalityDepiction')}
             handleRegisterValue={handleRegisterValue}
             registerValues={registerValues}
-            percent={75}
+            percent={70}
           />
         </Funnel.Step>
-        <Funnel.Step name="지역선택">
-          <지역선택
-            onPrev={() => setStep('기본프로필입력2')}
+        <Funnel.Step name="PersonalityDepiction">
+          <PersonalityDepiction
+            values={registerValues.personalityDepictionList}
+            handleValues={handleValues}
+            onPrev={() => setStep('FaceDepictionList')}
+            onNext={() => setStep('HobbyList')}
+            handleRegisterValue={handleRegisterValue}
+            registerValues={registerValues}
+            percent={80}
+          />
+        </Funnel.Step>
+        <Funnel.Step name="HobbyList">
+          <HobbyList
+            values={registerValues.hobbyList}
+            handleValues={handleValues}
+            onPrev={() => setStep('PersonalityDepiction')}
             onNext={() => setStep('시간선택')}
-            handleScheduleValue={handleScheduleValue}
-            registerScheduleValues={registerScheduleValues}
-            percent={85}
+            handleRegisterValue={handleRegisterValue}
+            registerValues={registerValues}
+            percent={90}
           />
         </Funnel.Step>
         <Funnel.Step name="시간선택">
           <시간선택
-            onPrev={() => setStep('지역선택')}
+            onPrev={() => setStep('HobbyList')}
             onNext={() => setStep('장소선택')}
             handleScheduleValue={handleScheduleValue}
             registerScheduleValues={registerScheduleValues}

diff --git a/src/register/assets/images/0_index.ts b/src/register/assets/images/0_index.ts
@@ -8,6 +8,7 @@ import rabbitImg from './animalImages/rabbitImg.png';
 import tRexImg from './animalImages/tRexImg.png';
 import wolfImg from './animalImages/wolfImg.png';
 import markerImg from './marker.png';
+import prefinish from './prefinish.png';
 
 export {
   bearImg,
@@ -20,4 +21,5 @@ export {
   tRexImg,
   wolfImg,
   markerImg,
+  prefinish,
 };
diff --git a/src/register/assets/images/prefinish.png b/src/register/assets/images/prefinish.png
diff --git a/src/register/assets/svgs/0_index.ts b/src/register/assets/svgs/0_index.ts
@@ -5,6 +5,7 @@ import CheckNone from './CheckNone.svg?react';
 import CancelIcon from './CancelIcon.svg?react';
 import MarkerIcon from './MarkerIcon.svg?react';
 import CheckApplication from './CheckApplication.svg?react';
+import Kakao from './kakao.svg?react';
 
 export {
   ArrowLeft,
@@ -14,4 +15,5 @@ export {
   CancelIcon,
   MarkerIcon,
   CheckApplication,
+  Kakao,
 };
diff --git a/src/register/assets/svgs/kakao.svg b/src/register/assets/svgs/kakao.svg
diff --git a/src/register/components/FaceDepictionList.tsx b/src/register/components/FaceDepictionList.tsx
@@ -3,29 +3,30 @@ import { ArrowLeft } from '../assets/svgs/0_index';
 import * as St from '../styles/registerStyles';
 import RegisterBtn from './RegisterBtn';
 import { FACEDEPICTION } from '../constants/profileConstants';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { useState } from 'react';
 import CheckBoxItem from './CheckBoxItem';
+import { ExtendedNavTypesProps } from '../types/navTypes';
 
-interface FaceDepictionListProps {
+interface FaceDepictionListProps extends ExtendedNavTypesProps {
   values: string[];
   handleValues: (value: string | string[], name?: string) => void;
-  setShowFaceDepiction: Dispatch<SetStateAction<boolean>>;
 }
 
 const FaceDepictionList = ({
+  onNext,
+  onPrev,
   values,
   handleValues,
-  setShowFaceDepiction,
 }: FaceDepictionListProps) => {
   const [thisValues, setThisValues] = useState<string[]>(values);
 
   const handleSubmit = () => {
     handleValues(thisValues, 'faceDepictionList');
-    setShowFaceDepiction(false);
+    onNext();
   };
   return (
     <StBackgroud>
-      <ArrowLeft onClick={() => setShowFaceDepiction(false)} />
+      <ArrowLeft onClick={() => onPrev()} />
       <StArticleStyles>
         <section css={St.sectionStyles}>
           <St.TitleBox>

diff --git a/src/register/components/HobbyList.tsx b/src/register/components/HobbyList.tsx
@@ -3,26 +3,31 @@ import { ArrowLeft } from '../assets/svgs/0_index';
 import * as St from '../styles/registerStyles';
 import RegisterBtn from './RegisterBtn';
 import { HOBBY } from '../constants/profileConstants';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { useState } from 'react';
 import CheckBoxItem from './CheckBoxItem';
+import { ExtendedNavTypesProps } from '../types/navTypes';
 
-interface HobbyListProps {
+interface HobbyListProps extends ExtendedNavTypesProps {
   values: string[];
   handleValues: (value: string | string[], name?: string) => void;
-  setShowHobby: Dispatch<SetStateAction<boolean>>;
 }
 
-const HobbyList = ({ values, handleValues, setShowHobby }: HobbyListProps) => {
+const HobbyList = ({
+  values,
+  handleValues,
+  onNext,
+  onPrev,
+}: HobbyListProps) => {
   const [thisValues, setThisValues] = useState<string[]>(values);
 
   const handleSubmit = () => {
     handleValues(thisValues, 'hobbyList');
-    setShowHobby(false);
+    onNext();
   };
 
   return (
     <StBackgroud>
-      <ArrowLeft onClick={() => setShowHobby(false)} />
+      <ArrowLeft onClick={() => onPrev()} />
       <StArticleStyles>
         <section css={St.sectionStyles}>
           <St.TitleBox>

diff --git a/src/register/components/PersonalityDepiction.tsx b/src/register/components/PersonalityDepiction.tsx
@@ -3,30 +3,31 @@ import { ArrowLeft } from '../assets/svgs/0_index';
 import * as St from '../styles/registerStyles';
 import RegisterBtn from './RegisterBtn';
 import { PERSONALITYDEPICTION } from '../constants/profileConstants';
-import { Dispatch, SetStateAction, useState } from 'react';
+import { useState } from 'react';
 import CheckBoxItem from './CheckBoxItem';
+import { ExtendedNavTypesProps } from '../types/navTypes';
 
-interface PersonalityDepictionProps {
+interface PersonalityDepictionProps extends ExtendedNavTypesProps {
   values: string[];
   handleValues: (value: string | string[], name?: string) => void;
-  setShowPersonalityDepiction: Dispatch<SetStateAction<boolean>>;
 }
 
 const PersonalityDepiction = ({
+  onNext,
+  onPrev,
   values,
   handleValues,
-  setShowPersonalityDepiction,
 }: PersonalityDepictionProps) => {
   const [thisValues, setThisValues] = useState<string[]>(values);
 
   const handleSubmit = () => {
     handleValues(thisValues, 'personalityDepictionList');
-    setShowPersonalityDepiction(false);
+    onNext();
   };
 
   return (
     <StBackgroud>
-      <ArrowLeft onClick={() => setShowPersonalityDepiction(false)} />
+      <ArrowLeft onClick={() => onPrev()} />
       <StArticleStyles>
         <section css={St.sectionStyles}>
           <St.TitleBox>