feat: 카카오 OAuth 로그인 플로우 완전 구현 및 인증 토큰 관리 시스템 구축

src/entities/auth/apis/get-ticket.api.ts

@@ -1,16 +1,17 @@
 import { fetchInstance } from '@/shared';
 
-export const GET_TICKET_API_PATH = '/api/auth/ticket';
+export const GET_TICKET_API_PATH = () => '/auth/ticket';
 
 interface GetTicketApiResponse {
   refreshToken: string;
 }
 
 export const getTicketApi = async (ticket: string): Promise<GetTicketApiResponse> => {
-  const response = await fetchInstance.get<GetTicketApiResponse>(GET_TICKET_API_PATH, {
+  const response = await fetchInstance.get<GetTicketApiResponse>(GET_TICKET_API_PATH(), {
     params: {
       ticket,
     },
   });
+
   return response.data;
 };

src/entities/auth/apis/index.ts

@@ -1 +1,2 @@
 export * from './get-ticket.api';
+export * from './refresh-token.api';

src/entities/auth/apis/refresh-token.api.ts

@@ -0,0 +1,21 @@
+import { fetchInstance } from '@/shared';
+
+export const REFRESH_TOKEN_API_PATH = '/auth/refresh';
+
+interface RefreshTokenApiRequest {
+  refreshToken: string;
+}
+
+interface RefreshTokenApiResponse {
+  accessToken: string;
+}
+
+export const refreshTokenApi = async ({
+  refreshToken,
+}: RefreshTokenApiRequest): Promise<RefreshTokenApiResponse> => {
+  const response = await fetchInstance.post<RefreshTokenApiResponse>(REFRESH_TOKEN_API_PATH, {
+    refreshToken,
+  });
+
+  return response.data;
+};

src/entities/auth/hooks/index.ts

@@ -1,2 +1,3 @@
-export * from './getAuthTicket';
+export * from './useGetAuthTicket';
 export * from './useKakaoLogin';
+export * from './useGetRefreshToken';

src/entities/auth/hooks/useGetAuthTicket.ts

@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { GET_TICKET_API_PATH, getTicketApi } from '../apis';
+
+export const GetAuthTicketQueryKey = [GET_TICKET_API_PATH()];
+
+export const useGetAuthTicket = (ticket: string) => {
+  return useQuery({
+    queryKey: [GetAuthTicketQueryKey, ticket],
+    queryFn: () => getTicketApi(ticket),
+    enabled: !!ticket && ticket.trim().length > 0,
+  });
+};

src/entities/auth/hooks/useGetRefreshToken.ts

@@ -0,0 +1,15 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { authStorage } from '@/shared';
+
+import { REFRESH_TOKEN_API_PATH, refreshTokenApi } from '../apis';
+
+export const GetRefreshTokenQueryKey = [REFRESH_TOKEN_API_PATH];
+
+export const useGetRefreshToken = () => {
+  return useQuery({
+    queryKey: [GetRefreshTokenQueryKey],
+    queryFn: () => refreshTokenApi({ refreshToken: authStorage.refreshToken.get() }),
+    enabled: !!authStorage.refreshToken.get(),
+  });
+};

src/entities/auth/hooks/useKakaoLogin.ts

@@ -26,6 +26,12 @@ export const useKakaoCallback = (ticket: string) => {
     queryKey: KakaoCallbackQueryKey.callback(ticket),
     queryFn: () => getTicketApi(ticket),
     retry: 0,
-    staleTime: Infinity,
+    enabled: !!ticket, // ticket이 있을 때만 API 호출
+  });
+};
+
+export const useGetTicket = (ticket: string) => {
+  return useMutation({
+    mutationFn: () => getTicketApi(ticket),
   });
 };

src/entities/chart/apis/size-price.api.ts

@@ -0,0 +1,16 @@
+import { fetchInstance } from '@/shared';
+
+export const SIZE_PRICE_API_PATH = '/graph/sizePriceIndex';
+
+interface SizePriceApiResponse {
+  month: string;
+  sizeband: string;
+  baseindex: number;
+  changerate: number;
+}
+
+export const sizePriceApi = async (): Promise<SizePriceApiResponse> => {
+  const response = await fetchInstance.get<SizePriceApiResponse>(SIZE_PRICE_API_PATH);
+
+  return response.data;
+};

src/features/login/components/common/buttons/KakaoLoginButton.tsx

@@ -1,19 +1,19 @@
-import { useKakaoLogin } from '@/entities';
-import { Button } from '@/shared';
+import { BASE_URL, Button } from '@/shared';
 
 import KakaoSymbol from '../../../_assets/kakao-symbol.webp';
 
 export const KakaoLoginButton = () => {
-  const { mutate: startKakaoLogin, isPending } = useKakaoLogin();
+  const startKakaoLogin = () => {
+    window.location.href = `${BASE_URL}/oauth2/authorization/kakao`;
+  };
+
   return (
     <Button
       onClick={() => startKakaoLogin()}
       className='flex h-11 w-90 items-center gap-3 rounded-lg bg-kakao text-black hover:bg-kakao/80 active:bg-kakao/80'
     >
       <img src={KakaoSymbol} className='size-4' width={16} height={16} alt='kakao' />
-      <span className='text-sm font-semibold'>
-        {isPending ? '이동중' : '카카오 계정으로 계속하기'}
-      </span>
+      <span className='text-sm font-semibold'>카카오 계정으로 계속하기</span>
     </Button>
   );
 };

src/features/main/apis/diagnosis.api.ts

@@ -3,7 +3,7 @@ import { fetchInstance } from '@/shared';
 
 import type { HouseType } from '../types';
 
-export const DIAGNOSIS_API_PATH = '/api/diagnosis';
+export const DIAGNOSIS_API_PATH = '/diagnosis';
 
 interface DiagnosisApiRequest {
   address: string;

src/features/main/components/features/form/DiagnosticForm.tsx

@@ -1,3 +1,4 @@
+import { type RefObject } from 'react';
 import { useForm } from 'react-hook-form';
 
 import { zodResolver } from '@hookform/resolvers/zod';
@@ -17,7 +18,11 @@ import {
   RentTypeField,
 } from '../../common';
 
-export const DiagnosticForm = () => {
+type Props = {
+  scrollToRiskAnalysis: RefObject<HTMLDivElement>;
+};
+
+export const DiagnosticForm = ({ scrollToRiskAnalysis }: Props) => {
   const { setDiagnosisData } = useHouseData();
 
   const form = useForm<SearchAddressType>({
@@ -40,6 +45,20 @@ export const DiagnosticForm = () => {
       }),
     onSuccess: (data) => {
       setDiagnosisData(data);
+
+      // 진단 완료 후 위험도 분석 섹션으로 스크롤
+      setTimeout(() => {
+        if (scrollToRiskAnalysis.current) {
+          const element = scrollToRiskAnalysis.current;
+          const elementTop = element.offsetTop;
+          const offset = 80;
+
+          window.scrollTo({
+            top: elementTop - offset,
+            behavior: 'smooth',
+          });
+        }
+      }, 100);
     },
   });
 

src/features/main/constants/form-type.ts

@@ -9,7 +9,7 @@ export const FORM_FIELDS = {
 export const PLACEHOLDER_TEXTS = {
   ADDRESS: '주소를 알려주세요',
   HOUSE_TYPE: '주택유형을 알려주세요',
-  DETAIL_ADDRESS: '상세주소를 알려주세요.',
+  DETAIL_ADDRESS: '상세주소를 알려주세요',
   DEPOSIT: '전세금액',
 } as const;
 

src/features/main/ui/InputSection.tsx

@@ -1,6 +1,12 @@
+import { type RefObject } from 'react';
+
 import { DiagnosticForm } from '../components';
 
-export const InputSection = () => {
+type Props = {
+  scrollToRiskAnalysis: RefObject<HTMLDivElement>;
+};
+
+export const InputSection = ({ scrollToRiskAnalysis }: Props) => {
   return (
     <div className='flex w-1/2 flex-col items-center justify-center gap-6 p-8'>
       <div className='flex w-full max-w-md flex-col gap-4'>
@@ -11,7 +17,7 @@ export const InputSection = () => {
           </span>
           <span className='text-4xl font-bold'>안심할 수 있는지 확인해봐요!</span>
         </div>
-        <DiagnosticForm />
+        <DiagnosticForm scrollToRiskAnalysis={scrollToRiskAnalysis} />
       </div>
     </div>
   );

src/features/main/ui/RiskAnalysisSummarySection.tsx

@@ -1,10 +1,12 @@
+import { forwardRef } from 'react';
+
 import { Spinner } from '@/shared';
 
 import { RiskChartBox, RiskFactorsBox } from '../components';
 import { DEFAULT_RISK_ANALYSIS_DATA } from '../mock/risk-analysis.mock';
 import { useHouseData } from '../store';
 
-export const RiskAnalysisSummarySection = () => {
+export const RiskAnalysisSummarySection = forwardRef<HTMLDivElement>((_, ref) => {
   const { diagnosisData, isLoading, error } = useHouseData();
 
   if (isLoading) return <Spinner />;
@@ -20,7 +22,10 @@ export const RiskAnalysisSummarySection = () => {
   }
 
   return (
-    <div className='mx-auto mt-10 flex w-full max-w-7xl rounded-lg bg-white shadow-[0px_4px_30px_0px_#0000001A]'>
+    <div
+      ref={ref}
+      className='mx-auto mt-10 flex w-full max-w-7xl rounded-lg bg-white shadow-[0px_4px_30px_0px_#0000001A]'
+    >
       {/* 메인 위험도 분석 섹션 */}
       <div className='flex w-full justify-between px-10 pt-5'>
         {/* 왼쪽: 위험도 게이지 */}
@@ -30,4 +35,6 @@ export const RiskAnalysisSummarySection = () => {
       </div>
     </div>
   );
-};
+});
+
+RiskAnalysisSummarySection.displayName = 'RiskAnalysisSummarySection';

src/pages/main/MainPage.tsx

@@ -1,3 +1,5 @@
+import { useRef } from 'react';
+
 import {
   AlternativeSection,
   ChartSection,
@@ -9,13 +11,15 @@ import {
 } from '@/features';
 
 export default function MainPage() {
+  const riskAnalysisRef = useRef<HTMLDivElement>(null);
+
   return (
     <div className='flex min-h-screen w-full flex-col'>
       <div className='flex w-full gap-4'>
-        <InputSection />
+        <InputSection scrollToRiskAnalysis={riskAnalysisRef as React.RefObject<HTMLDivElement>} />
         <MapSection />
       </div>
-      <RiskAnalysisSummarySection />
+      <RiskAnalysisSummarySection ref={riskAnalysisRef} />
       <ChartSection />
       <LandlordReliabilitySection />
       <LandlordPropertySection />

src/pages/oauth/OAuthRedirectPage.tsx

@@ -1,33 +1,54 @@
 import { useEffect } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
-import { toast } from 'sonner';
-
-import { useKakaoCallback } from '@/entities';
-import { ROUTER_PATH, authStorage } from '@/shared';
+import { useGetAuthTicket, useGetRefreshToken } from '@/entities';
+import { ROUTER_PATH, Spinner, authStorage } from '@/shared';
 
 export default function OAuthRedirectPage() {
-  const [searchParams] = useSearchParams();
-
+  const location = useLocation();
   const navigate = useNavigate();
 
-  const ticket = searchParams.get('ticket');
+  const ticket = new URLSearchParams(location.search).get('ticket');
 
-  const { data, isSuccess, isError } = useKakaoCallback(ticket ?? '');
+  const { data, isLoading } = useGetAuthTicket(ticket ?? '');
 
   useEffect(() => {
-    if (isSuccess && data) {
-      authStorage.refreshToken.set(data.refreshToken);
-
-      navigate(ROUTER_PATH.ROOT);
+    if (data) {
+      const refreshToken = data.refreshToken;
+      authStorage.refreshToken.set(refreshToken);
+      navigate(ROUTER_PATH.ROOT, { replace: true });
     }
-
-    if (isError) {
-      // 실패 시, 에러 처리 후 로그인 페이지로 이동
-      toast.error('카카오 로그인에 실패했습니다.');
-      navigate(ROUTER_PATH.LOGIN);
-    }
-  }, [isSuccess, isError, data, navigate]);
-
-  return <div>로그인 중입니다...</div>;
+  }, [data, navigate]);
+
+  const { data: refreshTokenData, isLoading: isRefreshTokenLoading } = useGetRefreshToken();
+
+  if (!ticket) {
+    return <div>로그인을 다시 진행해주세요.</div>;
+  }
+
+  if (isLoading || isRefreshTokenLoading) {
+    return <Spinner />;
+  }
+
+  if (!data || !refreshTokenData) {
+    return <Spinner />;
+  }
+
+  if (refreshTokenData) {
+    authStorage.accessToken.set(refreshTokenData.accessToken);
+  }
+
+  return (
+    <div className='flex min-h-screen items-center justify-center'>
+      <div className='text-center'>
+        <div className='mb-4 text-2xl font-semibold'>
+          {isLoading ? '로그인 처리 중...' : '로그인 중입니다...'}
+        </div>
+
+        <div className='text-gray-500'>
+          {isLoading ? '서버와 통신 중입니다.' : '잠시만 기다려주세요.'}
+        </div>
+      </div>
+    </div>
+  );
 }