Merge pull request #295 from TEAM-SEONYAK/feat/#294/senior-profile-data

[ Feat ] 온보딩, 선배프로필 등록 데이터 연결 및 디자인 QA 반영

src/components/commons/seniorCard/SeniorCard.tsx

@@ -52,9 +52,11 @@ const SeniorCardWrapper = styled.div<{ $isSmall: boolean }>`
   display: flex;
   flex-direction: column;
   gap: 1rem;
+  justify-content: center;
   align-items: center;
 
   width: 100%;
+  padding-top: 3.2rem;
   border-radius: 8px;
 
   background: ${({ theme }) => theme.colors.grayScaleWhite};
@@ -63,7 +65,7 @@ const SeniorCardWrapper = styled.div<{ $isSmall: boolean }>`
 const SeniorCardLayout = styled.div`
   display: flex;
   gap: 1.5rem;
-  justify-content: center;
+  justify-content: flex-start;
   align-items: center;
 
   width: 100%;

src/pages/seniorProfile/SeniorProfilePage.tsx

@@ -4,7 +4,7 @@ import Complete from '@pages/seniorProfile/components/Complete';
 import Init from '@pages/seniorProfile/components/Init';
 import PreView from '@pages/seniorProfile/components/preView/index';
 import { seniorProfileRegisterType, seniorProfileInitial } from '@pages/seniorProfile/types';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Career from './components/Career';
 import Example from './components/Example';
 import Sentence from './components/Sentence';
@@ -14,11 +14,20 @@ import { SENIOR_PROFILE_STEPS } from './constants';
 import { Header } from '../../components/commons/Header';
 import ProgressBar from '../../components/commons/ProgressBar';
 import theme from '../../styles/theme';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 const SeniorProfilePage = () => {
   const [step, setStep] = useState(0);
   const [profile, setProfile] = useState<seniorProfileRegisterType>(seniorProfileInitial);
-  const userName = step >= 2 && step <= 4 ? '도현' : '';
+  const location = useLocation();
+  const navigate = useNavigate();
+  const { seniorId, nickname } = location.state || {};
+  const userName = step >= 2 && step <= 4 ? nickname : '';
+
+  useEffect(() => {
+    if (!seniorId || !nickname) navigate('/');
+  }, [seniorId, nickname, navigate]);
+
   const getComponent = () => {
     switch (step) {
       case 0:
@@ -34,7 +43,7 @@ const SeniorProfilePage = () => {
       case 5:
         return <TimeSelect profile={profile} setProfile={setProfile} setStep={setStep} />;
       case 6:
-        return <PreView setStep={setStep} profile={profile} seniorId={11 + ''} />;
+        return <PreView setStep={setStep} profile={profile} seniorId={seniorId} />;
       case 7:
         return <Complete />;
       default:

src/pages/seniorProfile/components/Example.tsx

@@ -33,6 +33,7 @@ const Example = ({ setStep }: { setStep: React.Dispatch<React.SetStateAction<num
       {seniorId ? (
         <>
           <Header LeftSvg={ArrowLeftIc} onClickLeft={() => setSeniorId(0)} />
+          <Divider />
           <PreView seniorId={seniorId + ''} variant="secondary" />
         </>
       ) : (
@@ -81,6 +82,16 @@ const Wrapper = styled.div`
   background-color: ${({ theme }) => theme.colors.grayScaleLG1};
 `;
 
+const Divider = styled.div`
+  position: fixed;
+  top: 4.9rem;
+
+  width: 100%;
+  height: 0.14rem;
+
+  background: ${({ theme }) => theme.colors.grayScaleLG2};
+`;
+
 const IconContainer = styled.section`
   padding-bottom: 2.2rem;
 `;

src/pages/seniorProfile/components/preView/Review.tsx

@@ -23,6 +23,10 @@ const Meta = styled.p`
 `;
 
 const ReviewBox = styled.p`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
   width: 100%;
   padding: 4.4rem 8.7rem 4.3rem 8.6rem;