[REFACTOR] 로그인 로직 수정 및 미흡한 API 연결 수정

src/apis/client.ts

@@ -1,7 +1,6 @@
 import axios, { AxiosInstance } from 'axios';
 
-import { authService } from '@/services/AuthService';
-import { userService } from '@/services/UserService';
+import { tokenService } from '@/services/TokenService';
 
 export const noAuthClient: AxiosInstance = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
@@ -14,30 +13,23 @@ export const authClient: AxiosInstance = axios.create({
 });
 
 authClient.interceptors.request.use((config) => {
-  if (userService.getUserNickname() === '') {
-    const registerToken = authService.getRegisterToken();
-    if (registerToken !== null && registerToken !== undefined) {
-      config.headers['Authorization'] = `Bearer ${registerToken}`;
-    } else {
-      window.alert('로그인이 필요합니다.');
-      authService.onLogout();
-    }
-  }
-
+  config.headers['Authorization'] = tokenService.getHeader();
   return config;
 });
 
 authClient.interceptors.response.use(
-  (response) => {
-    return response;
-  },
+  (response) => 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);
+      try {
+        await tokenService.updateAccessToken();
+        originalRequest.headers['Authorization'] = tokenService.getHeader();
+        return axios(originalRequest);
+      } catch (e) {
+        return Promise.reject(e);
+      }
     }
     return Promise.reject(error);
   }

src/apis/personaAPI.ts

@@ -77,14 +77,13 @@ export const personaAPI = {
     return response.data;
   },
 
-  // Discover 페르소나 키워드 전체 조회
-  getDiscoverAllKeyword: async () => {
-    const response = await authClient.get('/api/personas/discover/all-keywords');
-    return response.data;
-  },
-
   // Discover 페르소나 키워드 카테고리별 조회
   getDiscoverCategoryKeyword: async (category: string) => {
+    if (category === 'all') {
+      const response = await authClient.get('/api/personas/discover/all-keywords');
+      return response.data;
+    }
+
     const response = await authClient.get(
       `/api/personas/discover/keywords?category=${CATEGORY_TYPE[category].title}`
     );

src/apis/tokenAPI.ts → src/apis/tokenAPI/getAccessToken.ts

@@ -1,8 +1,11 @@
 import { noAuthClient } from '@/apis/client';
 
-export const tokenAPI = {
-  refresh: async () => {
+export const getAccessToken = async () => {
+  try {
     const response = await noAuthClient.get('/api/reissue/access-token');
     return response.data;
-  },
+  } catch (error) {
+    console.error('Access Token 갱신 실패:', error);
+    throw error;
+  }
 };

src/apis/userAPI.ts

@@ -1,5 +1,5 @@
 import { authClient, noAuthClient } from '@/apis/client';
-import { RegisterRequest } from '@/types/userAPI.type';
+import { ReRegisterRequest, RegisterRequest } from '@/types/userAPI.type';
 
 export const userAPI = {
   // 신규 유저 등록
@@ -12,6 +12,16 @@ export const userAPI = {
     const response = await noAuthClient.get(`/api/users/check-nickname/${nickname}`);
     return response.data;
   },
+  // 유저 정보 조회
+  getUserInfo: async () => {
+    const response = await authClient.get('/api/users/infos');
+    return response.data;
+  },
+  // 유저 정보 수정
+  updateUserInfo: async (userInfo: ReRegisterRequest) => {
+    const response = await authClient.patch('/api/users/infos', userInfo);
+    return response.data;
+  },
   // 로그아웃
   logout: async () => {
     const response = await noAuthClient.post('/api/users/logout');

src/components/DefineResultPage/ResultView.tsx

@@ -8,9 +8,10 @@ import { DefineResult } from '@/types/test.type';
 
 interface ResultViewProps {
   result: DefineResult;
+  showRetestButton?: boolean;
 }
 
-export const ResultView = ({ result }: ResultViewProps) => {
+export const ResultView = ({ result, showRetestButton = true }: ResultViewProps) => {
   const navigate = useNavigate();
 
   return (
@@ -26,14 +27,16 @@ export const ResultView = ({ result }: ResultViewProps) => {
         <CardSection result={result} />
         <DescriptionSection result={result} />
       </StyledContent>
-      <StyledPlainButton
-        variant="primary2"
-        onClick={() => {
-          navigate('/test/define/1');
-        }}
-      >
-        다시 테스트 하기
-      </StyledPlainButton>
+      {showRetestButton && (
+        <StyledPlainButton
+          variant="primary2"
+          onClick={() => {
+            navigate('/test/define/1');
+          }}
+        >
+          다시 테스트 하기
+        </StyledPlainButton>
+      )}
     </StyledInnerContainer>
   );
 };

src/components/DefineStartPage/DefineDesktopView.tsx

@@ -1,50 +1,42 @@
-import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import backgroundImg from '@/assets/backgrounds/defineBackground.png';
 import { PlainButton } from '@/components/common/Button/PlainButton';
 
-export const DefineDesktopView = () => {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    navigate('/test/define/2');
-  };
+export const DefineDesktopView = ({ onNext }: { onNext: () => void }) => {
   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>
-
-          <Styled2Container>
-            <SubTextContainer>
-              <span className="highlight">홀랜드 검사란,</span>
+    <ViewContainer>
+      <Styled1Container>
+        <TopContainer>
+          <TitleTextContainer>
+            <TitleContainer>
               <br />
-              성격 유형과 커리어의 특성을 6개의 유형으로 분류하여 육각형으로 보여주는 검사로,
+              현재 당신은 어떤 사람인가요?
+            </TitleContainer>
+            <SubTitleContainer>
+              문항은 <span className="highlight">총 3문항</span>으로, 홀랜드 검사 이론을 기반으로
+              구성되어 있어요.
               <br />
-              셀피스의 정의하기 테스트는 해당 이론에서 착안하여 고안되었습니다.
-            </SubTextContainer>
-          </Styled2Container>
-        </Styled1Container>
-      </ViewContainer>
-    </div>
+              정의하기 테스트를 통해 나의 조각 유형을 도출하고,{' '}
+              <span className="highlight">결과 카드</span>를 받아보세요!
+            </SubTitleContainer>
+          </TitleTextContainer>
+          <PlainButton variant="gray" width="376px" height="48px" onClick={onNext}>
+            테스트 시작하기
+          </PlainButton>
+        </TopContainer>
+
+        <Styled2Container>
+          <SubTextContainer>
+            <span className="highlight">홀랜드 검사란,</span>
+            <br />
+            성격 유형과 커리어의 특성을 6개의 유형으로 분류하여 육각형으로 보여주는 검사로,
+            <br />
+            셀피스의 정의하기 테스트는 해당 이론에서 착안하여 고안되었습니다.
+          </SubTextContainer>
+        </Styled2Container>
+      </Styled1Container>
+    </ViewContainer>
   );
 };
 
@@ -82,6 +74,9 @@ const TopContainer = styled.div`
   align-items: flex-start;
   gap: 48px;
   display: flex;
+
+  transform: scale(0.8);
+  transform-origin: top left;
 `;
 
 const SubTextContainer = styled.div`
@@ -118,4 +113,6 @@ export const ViewContainer = styled.div`
   background-position: right;
   display: flex;
   overflow-x: auto;
+
+  //zoom: 1.25;
 `;

src/components/DefineStartPage/DefineMobileView.tsx

@@ -1,45 +1,37 @@
-import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 import backgroundImg from '@/assets/backgrounds/defineBackground.png';
 import { PlainButton } from '@/components/common/Button/PlainButton';
 
-export const DefineMobileView = () => {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    navigate('/test/define/2');
-  };
+export const DefineMobileView = ({ onNext }: { onNext: () => void }) => {
   return (
-    <div>
-      <ViewContainer>
-        <StyledContainer>
-          <TopContainer>
-            <TitleTextContainer>
-              <TitleContainer>현재 당신은 어떤 사람인가요?</TitleContainer>
-              <SubTitleContainer>
-                문항은 <span className="highlight">총 3문항</span>으로,
-                <br /> 홀랜드 검사 이론을 기반으로 구성되어 있어요.
-                <br />
-                정의하기 테스트를 통해 나의 조각 유형을 도출하고,{' '}
-                <span className="highlight">결과 카드</span>를 받아보세요!
-              </SubTitleContainer>
-            </TitleTextContainer>
-            <BottomContainer>
-              <SubTextContainer>
-                <span className="highlight">홀랜드 검사란,</span>
-                <br />
-                성격 유형과 커리어의 특성을 6개의 유형으로 분류하여 육각형으로 보여주는 검사로,
-                셀피스의 정의하기 테스트는 해당 이론에서 착안하여 고안되었습니다.
-              </SubTextContainer>
-              <PlainButton variant="gray" width="100%" height="48px" onClick={handleClick}>
-                테스트 시작하기
-              </PlainButton>
-            </BottomContainer>
-          </TopContainer>
-        </StyledContainer>
-      </ViewContainer>
-    </div>
+    <ViewContainer>
+      <StyledContainer>
+        <TopContainer>
+          <TitleTextContainer>
+            <TitleContainer>현재 당신은 어떤 사람인가요?</TitleContainer>
+            <SubTitleContainer>
+              문항은 <span className="highlight">총 3문항</span>으로,
+              <br /> 홀랜드 검사 이론을 기반으로 구성되어 있어요.
+              <br />
+              정의하기 테스트를 통해 나의 조각 유형을 도출하고,{' '}
+              <span className="highlight">결과 카드</span>를 받아보세요!
+            </SubTitleContainer>
+          </TitleTextContainer>
+          <BottomContainer>
+            <SubTextContainer>
+              <span className="highlight">홀랜드 검사란,</span>
+              <br />
+              성격 유형과 커리어의 특성을 6개의 유형으로 분류하여 육각형으로 보여주는 검사로,
+              셀피스의 정의하기 테스트는 해당 이론에서 착안하여 고안되었습니다.
+            </SubTextContainer>
+            <PlainButton variant="gray" width="100%" height="48px" onClick={onNext}>
+              테스트 시작하기
+            </PlainButton>
+          </BottomContainer>
+        </TopContainer>
+      </StyledContainer>
+    </ViewContainer>
   );
 };
 
@@ -134,4 +126,6 @@ const ViewContainer = styled.div`
   background-image: url(${backgroundImg});
   background-size: cover;
   background-position: center;
+
+  //zoom: 1.25;
 `;