Merge pull request #38 from Searchweb-Dev/feat/SW-65

Feat/sw 65 - 세션 기반 인증에서 JWT 기반 인증 전환

Author: jin2304

.gitignore

@@ -45,5 +45,14 @@ out/
 .claude/
 CLAUDE.md
 
+### OMC ###
+.omc/
+
 ### HTTP Tests ###
 *.http
+
+### Temporary Files ###
+.gradle-user/
+status.txt
+status_utf8.txt
+docs/Backend/memo/

build.gradle

@@ -26,16 +26,19 @@ repositories {
 
 dependencies {
 	implementation 'org.springframework.boot:spring-boot-starter-security'
-	implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
 	implementation 'org.springframework.boot:spring-boot-starter-web'
 	implementation 'org.springframework.boot:spring-boot-starter-aop'
     implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
 	implementation 'org.mybatis.spring.boot:mybatis-spring-boot-starter:3.0.3'
-	implementation 'org.thymeleaf.extras:thymeleaf-extras-springsecurity6'
 	implementation 'org.springframework.boot:spring-boot-starter-validation'
 	implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'
 	implementation 'me.paulschwarz:spring-dotenv:4.0.0'
 	implementation 'org.jsoup:jsoup:1.17.2'
+
+	// JWT
+	implementation 'io.jsonwebtoken:jjwt-api:0.12.6'
+	runtimeOnly 'io.jsonwebtoken:jjwt-impl:0.12.6'
+	runtimeOnly 'io.jsonwebtoken:jjwt-jackson:0.12.6'
 	implementation platform('org.springframework.ai:spring-ai-bom:1.1.2')
 	implementation 'org.springframework.ai:spring-ai-starter-model-openai'
 	implementation 'org.springframework.ai:spring-ai-starter-model-google-genai'

docs/Backend/02. jwt-oauth2-architecture.md

@@ -1,12 +1,29 @@
 import type { NextConfig } from "next";
 
+const isDev = process.env.NODE_ENV === 'development';
+const backendOrigin = (process.env.NEXT_PUBLIC_BACKEND_ORIGIN || (isDev ? 'http://localhost:8080' : '')).replace(/\/+$/, '');
+
 const nextConfig: NextConfig = {
-  // [BACKEND_CONNECT] 백엔드 API 프록시 설정 (CORS 해결)
+  // [BACKEND_CONNECT] 백엔드 API 프록시 설정
+  // 인증 관련 엔드포인트(/api/auth/*)는 프론트엔드에서 백엔드로 직접 호출한다.
+  // (buildBackendUrl 참고) Set-Cookie 가 프록시를 거치며 누락되는 문제를 방지하기 위함.
+  // 아래 rewrite 는 인증 외 일반 API 용이며, Phase 3(Nginx 단일 origin) 도입 시 제거된다.
   async rewrites() {
+    // 운영 환경에서 백엔드 주소가 없는 경우(예: Nginx 단일 오리진 사용) rewrite 생략
+    if (!backendOrigin) return [];
+
     return [
       {
         source: '/api/:path*',
-        destination: 'http://localhost:8080/api/:path*',
+        destination: `${backendOrigin}/api/:path*`,
+      },
+      {
+        source: '/oauth2/:path*',
+        destination: `${backendOrigin}/oauth2/:path*`,
+      },
+      {
+        source: '/login/oauth2/:path*',
+        destination: `${backendOrigin}/login/oauth2/:path*`,
       },
     ];
   },

docs/Backend/03. jwt-oauth2-test-scenarios.md

@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore } from '@/lib/store/authStore';
+
+/**
+ * OAuth 로그인 완료 후 백엔드가 리디렉션하는 콜백 페이지
+ * - 마운트 시 initialize()를 직접 호출하여 토큰 갱신 및 상태 초기화 진행 (authStore 내부에서 중복 호출 방지)
+ * - initialize()는 내부적으로 한 번만 실행되도록 싱글톤(Promise) 처리되어 있어 안전함
+ */
+export default function AuthCallbackPage() {
+  const router = useRouter();
+  const initialize = useAuthStore((s) => s.initialize);
+  const isInitializing = useAuthStore((s) => s.isInitializing);
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const initialized = useRef(false);
+
+  // 컴포넌트 마운트 시 초기화 실행
+  // - authStore.initialize() 내부에서 이미 진행 중인 Promise가 있다면 재사용하므로 안전함
+  useEffect(() => {
+    if (!initialized.current) {
+      initialize();
+      initialized.current = true;
+    }
+  }, [initialize]);
+
+  useEffect(() => {
+    // 초기화가 끝날 때까지 대기
+    if (isInitializing) return;
+    
+    // 인증 성공 여부에 따라 페이지 이동
+    router.replace(isAuthenticated ? '/my-links' : '/login');
+  }, [isInitializing, isAuthenticated, router]);
+
+  return (
+    <div className="flex min-h-screen items-center justify-center">
+      <div className="flex flex-col items-center gap-3">
+        <div className="h-8 w-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+        <p className="text-sm text-text-sub">로그인 처리 중...</p>
+      </div>
+    </div>
+  );
+}

frontend/next.config.ts

@@ -4,6 +4,7 @@ import "./globals.css";
 import { AppLayout } from "@/components/layout/AppLayout";
 import { SaveLinkDialog } from "@/components/dialogs/SaveLinkDialog";
 import { CreateFolderDialog } from "@/components/dialogs/CreateFolderDialog";
+import { AuthProvider } from "@/components/providers/AuthProvider";
 import { QueryProvider } from "@/components/providers/QueryProvider";
 
 
@@ -31,11 +32,13 @@ export default function RootLayout({
       </head>
       <body className={`${inter.variable} font-sans antialiased bg-background-light dark:bg-background-dark text-text-main h-screen overflow-hidden flex transition-colors duration-200`}>
         <QueryProvider>
-          <AppLayout>
-            {children}
-            <SaveLinkDialog />
-            <CreateFolderDialog />
-          </AppLayout>
+          <AuthProvider>
+            <AppLayout>
+              {children}
+            </AppLayout>
+          </AuthProvider>
+          <SaveLinkDialog />
+          <CreateFolderDialog />
         </QueryProvider>
       </body>
     </html>

frontend/src/app/auth/callback/page.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import NextLink from "next/link";
 import { Input } from "@/components/ui/input";
+import { buildBackendUrl } from "@/lib/config/backend";
 
 export default function LoginPage() {
   return (
@@ -137,7 +138,8 @@ export default function LoginPage() {
               </div>
 
               {/* Google Sign In - Purple Gradient Background */}
-              <button type="button" className="group relative mb-6 flex h-11 w-full items-center justify-center gap-3 rounded-lg border-t border-white/20 bg-[linear-gradient(135deg,#6d28d9,#8b5cf6)] text-white shadow-md transition-all hover:brightness-110 hover:shadow-primary/25">
+              {/* 소셜 로그인 시작도 백엔드 직통으로 보내야 OAuth 콜백과 쿠키 발급 주체가 일관된다. */}
+              <button type="button" onClick={() => { window.location.href = buildBackendUrl('/oauth2/authorization/google'); }} className="group relative mb-6 flex h-11 w-full items-center justify-center gap-3 rounded-lg border-t border-white/20 bg-[linear-gradient(135deg,#6d28d9,#8b5cf6)] text-white shadow-md transition-all hover:brightness-110 hover:shadow-primary/25">
                 <div className="flex h-6 w-6 items-center justify-center rounded-full bg-white p-1">
                   <svg className="h-full w-full" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                     <title>Google Logo</title>

frontend/src/app/layout.tsx

@@ -4,15 +4,19 @@ import { RightPanel } from '@/components/my-links/RightPanel';
 import { useUIStore } from '@/lib/store/uiStore';
 import { useFolders } from '@/lib/api/folderApi';
 import { useFolderStore } from '@/lib/store/folderStore';
-import { TEMP_MEMBER_ID } from '@/lib/auth/currentUser';
+import { useAuthStore } from '@/lib/store/authStore';
 
 const PINNED_COLORS = ['bg-blue-600', 'bg-indigo-500', 'bg-teal-500', 'bg-amber-500', 'bg-emerald-600'];
 
 export default function MyLinksPage() {
   const { toggleRightPanel } = useUIStore();
   const setSelectedFolderId = useFolderStore((s) => s.setSelectedFolderId);
-
-  const { data: folders, isLoading, error } = useFolders(TEMP_MEMBER_ID);
+  const memberId = useAuthStore((s) => s.member?.memberId);
+  const isAuthInitializing = useAuthStore((s) => s.isInitializing);
+  const { data: folders, isLoading: isFoldersLoading, error } = useFolders(memberId);
+  
+  // 인증 정보를 복구 중이거나 아직 폴더 목록을 가져오는 중이면 로딩 상태로 간주
+  const isLoading = isAuthInitializing || isFoldersLoading;
   const pinnedFolders = folders?.slice(0, 5) ?? [];
 
   return (
@@ -162,8 +166,8 @@ export default function MyLinksPage() {
             </div>
           )}
 
-          {/* ── 빈 상태 ── */}
-          {folders && folders.length === 0 && (
+          {/* ── 빈 상태 (로딩이 끝난 후 데이터가 없는 경우) ── */}
+          {!isLoading && folders && folders.length === 0 && (
             <div className="col-span-full flex items-center justify-center py-8">
               <div className="flex flex-col items-center gap-1 text-gray-400 text-xs">
                 <span className="material-symbols-outlined text-2xl">folder_off</span>

frontend/src/app/login/page.tsx

@@ -4,7 +4,7 @@ import { useUIStore } from '@/lib/store/uiStore';
 import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
 import { useState } from 'react';
 import { useCreateFolder } from '@/lib/api/folderApi';
-import { TEMP_MEMBER_ID } from '@/lib/auth/currentUser';
+import { useAuthStore } from '@/lib/store/authStore';
 
 const COLORS = [
   { id: 'purple', base: 'bg-purple-500 hover:ring-purple-500', active: 'ring-purple-500 shadow-[0_0_8px_rgba(168,85,247,0.5)]' },
@@ -28,6 +28,7 @@ export function CreateFolderDialog() {
   const [selectedIcon, setSelectedIcon] = useState('work');     // 선택된 아이콘 이름
   const [selectedColor, setSelectedColor] = useState('purple'); // 선택된 색상 ID
   const [isPinned, setIsPinned] = useState(true);               // 상단 고정 여부
+  const memberId = useAuthStore((s) => s.member?.memberId);
 
   // 폴더 생성 API 연동 (React Query Mutation)
   const createFolderMutation = useCreateFolder();
@@ -38,12 +39,12 @@ export function CreateFolderDialog() {
    */
   const handleCreateFolder = () => {
     // 유효성 검사: 이름이 비어있으면 중단
-    if (!folderName.trim()) return;
+    if (!folderName.trim() || !memberId) return;
 
     // API 호출
     createFolderMutation.mutate(
       {
-        ownerMemberId: TEMP_MEMBER_ID, // 현재는 테스트용 ID 사용
+        ownerMemberId: memberId,
         folderName: folderName.trim(),
       },
       {