[FEAT] 설계하기 결과 화면

src/apis/client.ts

@@ -14,17 +14,31 @@ export const authClient: AxiosInstance = axios.create({
 });
 
 authClient.interceptors.request.use((config) => {
-  if (!config.headers.common || !config.headers.common['Authorization']) {
-    if (userService.getUser().nickname === '') {
-      // register token이 없는 상황 (새로고침)
-      authService.onSetRegisterToken();
-      config.headers['Authorization'] = authClient.defaults.headers.common['Authorization'];
-    } else if (userService.getUser()) {
-      // access token이 만료된 상황
-      authService.onRefreshToken();
-      config.headers['Authorization'] = authClient.defaults.headers.common['Authorization'];
+  if (userService.getUser().nickname === '') {
+    const registerToken = authService.getRegisterToken();
+    if (registerToken !== null && registerToken !== undefined) {
+      config.headers['Authorization'] = `Bearer ${registerToken}`;
+    } else {
+      window.alert('로그인이 필요합니다.');
+      authService.onLogout();
     }
   }
 
   return config;
 });
+
+authClient.interceptors.response.use(
+  (response) => {
+    return response;
+  },
+  async (error) => {
+    const originalRequest = error.config;
+    if (error.response.status === 401 && !originalRequest._retry) {
+      originalRequest._retry = true;
+      const access_token = await authService.getRefreshToken();
+      authService.setAuthToken(access_token);
+      return authClient(originalRequest);
+    }
+    return Promise.reject(error);
+  }
+);

src/apis/personaAPI.ts

@@ -1,5 +1,5 @@
 import { authClient, noAuthClient } from '@/apis/client';
-import { DefineRequest } from '@/types/test.type';
+import { DefineRequest, DesignRequest } from '@/types/test.type';
 
 export const personaAPI = {
   // 페르소나 생성
@@ -9,7 +9,7 @@ export const personaAPI = {
       return response.data;
     }
 
-    const response = await noAuthClient.post('/api/personas/define', userInfo);
+    const response = await noAuthClient.post('/api/personas/define/sharing', userInfo);
     return response.data;
   },
   // 비로그인 유저 페르소나 조회
@@ -24,4 +24,14 @@ export const personaAPI = {
     const response = await authClient.get('/api/personas/define');
     return response.data;
   },
+  // 설계하기 페르소나 등록
+  registerPersonaDesign: async (userInfo: DesignRequest) => {
+    const response = await authClient.post('/api/personas/design', userInfo);
+    return response.data;
+  },
+  // 설계하기 페르소나 조회
+  getPersonaDesign: async () => {
+    const response = await authClient.get('/api/personas/design');
+    return response.data;
+  },
 };

src/components/DefineTest/DefineButtonView.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 
 import { useNavigate } from 'react-router-dom';
-import { useRecoilState, useSetRecoilState } from 'recoil';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 
 import { personaAPI } from '@/apis/personaAPI';
@@ -151,7 +151,7 @@ export const DefineButtonView2 = ({ warning, warningMessage }: Props) => {
 export const DefineButtonView3 = ({ warning, warningMessage }: Props) => {
   const navigate = useNavigate();
   const [showWarn, setShowWarn] = useState(false);
-  const setLoading = useSetRecoilState(loadingState);
+  const [loading, setLoading] = useRecoilState(loadingState);
   const [loadingHandler, setLoadingHandler] = useRecoilState(loadingHandlerState);
 
   const handleButton1Click = () => {
@@ -169,7 +169,7 @@ export const DefineButtonView3 = ({ warning, warningMessage }: Props) => {
       stage_three_keywords: selectedChips3,
     };
 
-    setLoading(true);
+    setLoading({ show: true, speed: 50 });
 
     personaAPI
       .register(userService.getUserState() === 'MEMBER', requestData)
@@ -186,12 +186,13 @@ export const DefineButtonView3 = ({ warning, warningMessage }: Props) => {
           });
         } else {
           console.error('페르소나 생성 실패:', message);
-          setLoading(false);
+          setLoading({ ...loading, show: false });
         }
       })
       .catch((error) => {
         console.error('페르소나 생성 요청 실패:', error);
         window.alert('페르소나 생성 요청 실패');
+        setLoading({ ...loading, show: false });
       });
   };
 

src/components/DesignTest/DesignButtonView.tsx

@@ -1,11 +1,13 @@
 import { useEffect, useState } from 'react';
 
 import { useNavigate } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 
-import { authClient, noAuthClient } from '@/apis/client';
+import { personaAPI } from '@/apis/personaAPI';
 import { PlainButton } from '@/components/common/Button/PlainButton';
-import { userService } from '@/services/UserService';
+import { loadingHandlerState } from '@/recoil/loadingHandlerState';
+import { loadingState } from '@/recoil/loadingState';
 
 interface Props {
   warning?: boolean;
@@ -241,6 +243,8 @@ export const DesignButtonView4 = ({ warning, warningMessage }: Props) => {
 export const DesignButtonView5 = ({ warning, warningMessage }: Props) => {
   const navigate = useNavigate();
   const [showWarn, setShowWarn] = useState(false);
+  const [loading, setLoading] = useRecoilState(loadingState);
+  const [loadingHandler, setLoadingHandler] = useRecoilState(loadingHandlerState);
 
   const handleButton1Click = () => {
     navigate('/test/design/5');
@@ -261,20 +265,31 @@ export const DesignButtonView5 = ({ warning, warningMessage }: Props) => {
       career: selectedChips5[0],
     };
 
-    try {
-      const client = userService.getUserState() === 'MEMBER' ? authClient : noAuthClient;
-      const response = await client.post('/api/personas/design', requestData);
-      const { code, message } = response.data;
-
-      if (code === '201') {
-        console.log('페르소나 생성 성공');
-        navigate('/'); // 결과 페이지로 이동
-      } else {
-        console.error('페르소나 생성 실패:', message);
-      }
-    } catch (error) {
-      console.error('페르소나 생성 요청 실패:', error);
-    }
+    setLoading({ show: true, speed: 70 });
+
+    personaAPI
+      .registerPersonaDesign(requestData)
+      .then((response) => {
+        const { code, message } = response;
+
+        if (code === '201') {
+          console.log('페르소나 생성 성공');
+          setLoadingHandler({
+            ...loadingHandler,
+            handleCompleted: () => {
+              navigate('/test/design/result');
+            },
+          });
+        } else {
+          console.error('페르소나 생성 실패:', message);
+          setLoading({ ...loading, show: false });
+        }
+      })
+      .catch((error) => {
+        console.error('페르소나 생성 요청 실패:', error);
+        window.alert('페르소나 생성 요청 실패');
+        setLoading({ ...loading, show: false });
+      });
   };
 
   useEffect(() => {

src/components/HomePage/NonTesterMemberView.tsx

@@ -62,7 +62,7 @@ export const NonTesterMemberView = () => {
   const [selectedInterest, setSelectedInterest] = useState<string[]>([]);
   const [selectedKeywords, setSelectedKeywords] = useState<string[]>([]);
   const [selectedFree, setSelectedFree] = useState<boolean>(false);
-  const [showAmountModal, setShowAmountModal] = useState<boolean>(false);
+  /* const [showAmountModal, setShowAmountModal] = useState<boolean>(false); */
   const [selectedAmount, setSelectedAmount] = useState<{ min: number; max: number }>({
     min: 0,
     max: 0,
@@ -139,7 +139,7 @@ export const NonTesterMemberView = () => {
           </StyledFilterButton>
           <StyledFilterAmount
             onClick={() => {
-              setShowAmountModal((prev) => !prev);
+              //setShowAmountModal((prev) => !prev);
             }}
           >
             <span>금액</span>

src/components/OnboardingPage/SetupBranding.tsx

@@ -24,9 +24,9 @@ export const SetupBranding = () => {
     userAPI
       .register(onboarding)
       .then((res) => {
-        authService.onLoginSuccess(res.payload.access_token);
+        authService.setAuthToken(res.payload.access_token);
         userService.setUser({ nickname: res.payload.nickname });
-        authService.onRemoveRegisterToken();
+        authService.deleteRegisterToken();
         navigate('/');
       })
       .catch(() => {

src/components/common/Navigation/DefineHeaderNavigation.tsx

@@ -1,4 +1,4 @@
-/* import { useNavigate } from 'react-router-dom'; */
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 const StyledContainer = styled.header`
@@ -71,11 +71,10 @@ const StyledButton = styled.button`
 `;
 
 const DefineHeaderNavigation = () => {
-  //const navigate = useNavigate();
+  const navigate = useNavigate();
 
   const handleButtonClick = () => {
-    // TODO: 홈페이지로 이동하도록 변경하기
-    window.location.href = 'https://selpiece.framer.website';
+    navigate('/');
   };
   return (
     <StyledContainer>

src/components/common/Navigation/DesignHeaderNavigation.tsx

@@ -1,4 +1,4 @@
-/* import { useNavigate } from 'react-router-dom'; */
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
 const StyledContainer = styled.header`
@@ -71,11 +71,10 @@ const StyledButton = styled.button`
 `;
 
 const DesignHeaderNavigation = () => {
-  //const navigate = useNavigate();
+  const navigate = useNavigate();
 
   const handleButtonClick = () => {
-    // TODO: 홈페이지로 이동하도록 변경하기
-    window.location.href = 'https://selpiece.framer.website';
+    navigate('/');
   };
   return (
     <StyledContainer>

src/components/common/Navigation/TopNavigation.tsx

@@ -26,6 +26,7 @@ export const TopNavigation = () => {
           {NAVIGATION_MENU.map((item) => (
             <StyledMenuButton
               key={item.menu}
+              $active={location.pathname.includes(item.path)}
               onClick={() => {
                 navigate(item.path);
               }}
@@ -41,6 +42,7 @@ export const TopNavigation = () => {
             <StyledMenuButton
               $filled
               $width="100px"
+              $active={false}
               onClick={() => {
                 navigate('auth');
               }}
@@ -116,7 +118,7 @@ const StyledUserButton = styled.button`
   }
 `;
 
-const StyledMenuButton = styled.button<{ $filled?: boolean; $width?: string }>`
+const StyledMenuButton = styled.button<{ $filled?: boolean; $width?: string; $active: boolean }>`
   ${({ theme }) => theme.font.desktop.body2m};
 
   width: ${({ $width }) => $width};
@@ -141,4 +143,10 @@ const StyledMenuButton = styled.button<{ $filled?: boolean; $width?: string }>`
             color: ${props.theme.color.primary600};
           }
         `}
+
+  ${({ $active, theme }) =>
+    $active &&
+    css`
+      color: ${theme.color.primary600};
+    `}
 `;

src/constants/navigation.ts

@@ -1,5 +1,5 @@
 export const NAVIGATION_MENU = [
   //TODO: path 수정하기
   { menu: '자기이해', path: '/understand' },
-  { menu: '경험추천', path: '/' },
+  { menu: '경험추천', path: '/recommend' },
 ];

src/pages/DefineTestPage.tsx

@@ -27,7 +27,7 @@ export const DefineTestPage2 = () => {
 export const DefineTestPage3 = () => {
   const loading = useRecoilValue(loadingState);
 
-  if (loading) {
+  if (loading.show) {
     return <LoadingPage />;
   }
 

src/pages/DesignResultPage.tsx

@@ -1,25 +1,33 @@
+import { useEffect, useState } from 'react';
+
 import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
 
+import { personaAPI } from '@/apis/personaAPI';
 import BackgroundImg from '@/assets/backgrounds/designResultBackground.png';
 import { PlainButton } from '@/components/common/Button/PlainButton';
-
-const Dummy = {
-  name: '민선',
-  brand: '학교 생활 열심히 하며\n수익도 내는 20대 갓생 유튜버',
-};
+import { userService } from '@/services/UserService';
+import { DesignResult } from '@/types/test.type';
 
 export const DesignResultPage = () => {
+  const [result, setResult] = useState<DesignResult | null>(null);
   const navigate = useNavigate();
 
+  useEffect(() => {
+    personaAPI.getPersonaDesign().then((res) => {
+      setResult(res.payload);
+    });
+  }, []);
+
   return (
     <StyledContainer>
       <StyledInnerContainer>
         <StyledContent>
           <div className="title">
-            <span className="highlight">{Dummy.name}</span>님은 이런 브랜드가 되고 싶군요!
+            <span className="highlight">{userService.getUser().nickname}</span>님은 이런 브랜드가
+            되고 싶군요!
           </div>
-          <div className="brand">“{Dummy.brand}”</div>
+          <div className="brand">“{result?.definition}”</div>
           <PlainButton
             variant="gray"
             width="100%"
@@ -72,8 +80,8 @@ const StyledContent = styled.div`
   .brand {
     ${({ theme }) => theme.font.desktop.h2};
     color: ${({ theme }) => theme.color.primary600};
-    white-space: pre-line;
     text-align: center;
     margin-bottom: 32px;
+    word-break: keep-all;
   }
 `;