Merge pull request #60 from KUSITMS-29th-TEAM-D/develop

v0.2.0

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/DesignStartPage/DesignStartView.tsx

@@ -0,0 +1,97 @@
+import { useNavigate } from 'react-router-dom';
+import { styled } from 'styled-components';
+
+import backgroundImg from '@/assets/backgrounds/designStartBackground.png';
+import { PlainButton } from '@/components/common/Button/PlainButton';
+
+export const DesignStartView = () => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate('/test/design/2');
+  };
+  return (
+    <div>
+      <ViewContainer>
+        <Styled1Container>
+          <TopContainer>
+            <TitleTextContainer>
+              <TitleContainer>
+                <br />
+                어떤 브랜더가 되고 싶나요?
+              </TitleContainer>
+              <SubTitleContainer>
+                문항은 <span className="highlight">총 3문항</span>으로, 앞으로 만들어 갈 나의 브랜드
+                방향성을 설정하는 첫 걸음이에요.
+                <br />
+                설계하기 테스트를 통해 나의 브랜드 컨셉을 정해보고,{' '}
+                <span className="highlight">브랜딩을 시작해보세요!</span>
+              </SubTitleContainer>
+            </TitleTextContainer>
+            <PlainButton variant="gray" width="376px" height="48px" onClick={handleClick}>
+              시작하기
+            </PlainButton>
+          </TopContainer>
+        </Styled1Container>
+      </ViewContainer>
+    </div>
+  );
+};
+
+const TitleTextContainer = styled.div`
+  align-self: stretch;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 16px;
+  display: flex;
+`;
+
+const TitleContainer = styled.div`
+  width: 100%;
+  color: ${({ theme }) => `${theme.color.gray900}`};
+  ${({ theme }) => theme.font.desktop.h2};
+`;
+
+const SubTitleContainer = styled.div`
+  width: 100%;
+  color: ${({ theme }) => `${theme.color.gray700}`};
+  ${({ theme }) => theme.font.desktop.body1m};
+  word-wrap: break-word;
+
+  .highlight {
+    color: ${({ theme }) => `${theme.color.primary700}`};
+  }
+`;
+
+const TopContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 48px;
+  display: flex;
+`;
+
+const Styled1Container = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 64px;
+  padding-top: 118px;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
+  display: inline-flex;
+`;
+
+export const ViewContainer = styled.div`
+  height: 100vh;
+
+  background-image: url(${backgroundImg});
+  background-size: cover;
+  background-position: right;
+  display: flex;
+  overflow-x: auto;
+`;