Merge pull request #79 from Leets-Official/77-feat/로그인,회원가입-API-연동

[Feat] 카카오 로그인/회원가입 API 연결, 프로필 조회 API 연결 및 코드 리팩토링

Author: KyeongJooni

src/app/layout/MainLayout.tsx

@@ -1,10 +1,24 @@
+import { useLogoutMutation } from '@shared/apis/auth';
+import { useAuth } from '@shared/apis/user';
 import { Header } from '@shared/ui/Header';
 import { Outlet } from 'react-router';
 
 const MainLayout = () => {
+  const { user, isLoggedIn, isLoading } = useAuth();
+  const { mutate: logout } = useLogoutMutation();
+
+  const handleLogout = () => {
+    logout();
+  };
+
   return (
     <div className="min-h-screen bg-white">
-      <Header />
+      <Header
+        isLoading={isLoading}
+        isLoggedIn={isLoggedIn}
+        user={user ? { profileImage: user.profileImage, nickname: user.nickname } : undefined}
+        onLogoutClick={handleLogout}
+      />
       <div className="mt-header-total">
         <Outlet />
       </div>

src/app/layout/ProtectedLayout.tsx

@@ -0,0 +1,14 @@
+import { useAuthStore } from '@shared/stores';
+import { Navigate, Outlet } from 'react-router';
+
+const ProtectedLayout = () => {
+  const accessToken = useAuthStore((state) => state.accessToken);
+
+  if (!accessToken) {
+    return <Navigate to="/login" replace />;
+  }
+
+  return <Outlet />;
+};
+
+export default ProtectedLayout;

src/app/layout/PublicLayout.tsx

@@ -0,0 +1,14 @@
+import { useAuthStore } from '@shared/stores';
+import { Navigate, Outlet } from 'react-router';
+
+const PublicLayout = () => {
+  const accessToken = useAuthStore((state) => state.accessToken);
+
+  if (accessToken) {
+    return <Navigate to="/" replace />;
+  }
+
+  return <Outlet />;
+};
+
+export default PublicLayout;

src/app/layout/index.ts

@@ -0,0 +1,22 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { useState, type ReactNode } from 'react';
+
+type QueryProviderProps = {
+  children: ReactNode;
+};
+
+export const QueryProvider = ({ children }: QueryProviderProps) => {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            staleTime: 60 * 1000,
+            retry: 1,
+          },
+        },
+      })
+  );
+
+  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+};

src/app/providers/QueryProvider.tsx

@@ -1,3 +1,4 @@
+import { QueryProvider } from './QueryProvider';
 import { ToastProvider } from './ToastProvider';
 import type { ReactNode } from 'react';
 
@@ -6,5 +7,9 @@ type AppProvidersProps = {
 };
 
 export const AppProviders = ({ children }: AppProvidersProps) => {
-  return <ToastProvider>{children}</ToastProvider>;
+  return (
+    <QueryProvider>
+      <ToastProvider>{children}</ToastProvider>
+    </QueryProvider>
+  );
 };

src/app/providers/index.tsx

@@ -1,34 +1,43 @@
 import { index, layout, route, type RouteConfig } from '@react-router/dev/routes';
 
 export default [
-  // (auth) - 레이아웃 없는 인증 페이지
-  route('login', 'routes/(auth)/login.tsx'),
-  route('signup', 'routes/(auth)/signup.tsx'),
+  // (auth) - 비로그인만 접근 가능 (로그인 시 / 로 리다이렉트)
+  layout('layout/PublicLayout.tsx', [
+    route('login', 'routes/(auth)/login.tsx'),
+    route('signup', 'routes/(auth)/signup.tsx'),
+  ]),
+
+  // 카카오 콜백 (인증 체크 불필요)
+  route('login/kakao', 'routes/(auth)/login.kakao.tsx'),
 
   // (main) - MainLayout 적용 페이지
   layout('layout/MainLayout.tsx', [
+    // 공개 페이지 (누구나 접근 가능)
     index('routes/(main)/_index.tsx'),
 
     // buy
     route('buy', 'routes/(main)/buy/index.tsx'),
     route('buy/:id', 'routes/(main)/buy/detail.tsx'),
 
-    // sell
-    route('sell', 'routes/(main)/sell/index.tsx'),
-    route('sell/confirm', 'routes/(main)/sell/confirm.tsx'),
-
     // repair
     route('repair', 'routes/(main)/repair/index.tsx'),
 
-    // mypage
-    route('mypage', 'routes/(main)/mypage/index.tsx'),
-    route('mypage/settings', 'routes/(main)/mypage/settings.tsx'),
-    route('mypage/profile', 'routes/(main)/mypage/profile.tsx'),
-
     // seller
     route('seller/:userId', 'routes/(main)/seller/index.tsx'),
 
-    // chatbot
-    route('chatbot', 'routes/(main)/chatbot/index.tsx'),
+    // 로그인 필요 페이지 (미로그인 시 /login 으로 리다이렉트)
+    layout('layout/ProtectedLayout.tsx', [
+      // sell
+      route('sell', 'routes/(main)/sell/index.tsx'),
+      route('sell/confirm', 'routes/(main)/sell/confirm.tsx'),
+
+      // mypage
+      route('mypage', 'routes/(main)/mypage/index.tsx'),
+      route('mypage/settings', 'routes/(main)/mypage/settings.tsx'),
+      route('mypage/profile', 'routes/(main)/mypage/profile.tsx'),
+
+      // chatbot
+      route('chatbot', 'routes/(main)/chatbot/index.tsx'),
+    ]),
   ]),
 ] satisfies RouteConfig;

src/app/routes.ts

@@ -0,0 +1,5 @@
+import { KakaoLogin } from '@pages/login';
+
+export default function KakaoLoginRoute() {
+  return <KakaoLogin />;
+}

src/app/routes/(auth)/login.kakao.tsx

@@ -223,5 +223,20 @@
         transform: translateY(4px);
       }
     }
+
+    .animate-dropdown {
+      animation: dropdown 0.2s ease-out forwards;
+    }
+
+    @keyframes dropdown {
+      from {
+        opacity: 0;
+        transform: translateY(-8px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
   }
 }

src/app/styles/index.css

@@ -1 +1 @@
-export { LoginPage } from './ui';
+export { LoginPage, KakaoLogin } from './ui';