Feat: 쿠키 기반의 인증 로직, 미들웨어, 인터셉터 개선

apps/web/.eslintignore

@@ -0,0 +1,12 @@
+# HTTPS 개발 서버 (JavaScript 파일)
+server.mjs
+
+# Next.js 빌드 출력
+.next/
+out/
+
+# 의존성
+node_modules/
+
+# 생성된 파일
+src/generated/

apps/web/.eslintrc.cjs

@@ -5,7 +5,7 @@ module.exports = {
   parserOptions: {
     project: './tsconfig.json',
   },
-  ignorePatterns: ['stylelint.config.js', 'postcss.config.mjs', '**/__tests__/e2e/**'],
+  ignorePatterns: ['stylelint.config.js', 'postcss.config.mjs', '**/__tests__/e2e/**', 'server.mjs'],
   extends: [
     'next',
     'next/core-web-vitals',

apps/web/next.config.js

@@ -11,6 +11,38 @@ const nextConfig = {
   typescript: { ignoreBuildErrors: false },
   eslint: { ignoreDuringBuilds: false },
   output: 'standalone',
+  // 인증 관련 엔드포인트만 프록시 (쿠키 공유를 위해)
+  async rewrites() {
+    // HTTPS 환경에서만 프록시 활성화
+    // HTTP 개발 환경(CSR only)에서는 프록시 비활성화
+    const proxyEnabled =
+      process.env.NEXT_PUBLIC_ENABLE_PROXY !== 'false';
+
+    if (!proxyEnabled) {
+      console.log(
+        '[Next.js] 🚫 프록시 비활성화 - HTTP CSR 전용 모드',
+      );
+      return [];
+    }
+
+    const apiBaseUrl =
+      process.env.NEXT_PUBLIC_API_BASE_URL ||
+      'https://soso.dreampaste.com';
+
+    console.log('[Next.js] ✅ 프록시 활성화 - HTTPS 전체 기능 모드');
+    return [
+      // 인증 엔드포인트 (로그인, 토큰 갱신)
+      {
+        source: '/api/auth/:path*',
+        destination: `${apiBaseUrl}/auth/:path*`,
+      },
+      // 현재 유저 정보 (SSR prefetch)
+      {
+        source: '/api/users/me',
+        destination: `${apiBaseUrl}/users/me`,
+      },
+    ];
+  },
   //추후 제거 필요
   images: {
     domains: [

apps/web/package.json

@@ -4,7 +4,8 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "next dev",
+    "dev": "NEXT_PUBLIC_ENABLE_PROXY=false next dev",
+    "dev:https": "NEXT_PUBLIC_ENABLE_PROXY=true node server.mjs",
     "build": "next build",
     "build:analyze": "ANALYZE=true next build",
     "start": "next start",

apps/web/server.mjs

@@ -0,0 +1,42 @@
+import { createServer } from 'https';
+import { parse } from 'url';
+import next from 'next';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const dev = process.env.NODE_ENV !== 'production';
+const hostname = 'localhost';
+const port = 3000;
+
+// SSL 인증서 로드
+const httpsOptions = {
+  key: fs.readFileSync(join(__dirname, '.cert', 'localhost+2-key.pem')),
+  cert: fs.readFileSync(join(__dirname, '.cert', 'localhost+2.pem')),
+};
+
+const app = next({ dev, hostname, port });
+const handle = app.getRequestHandler();
+
+app.prepare().then(() => {
+  createServer(httpsOptions, async (req, res) => {
+    try {
+      const parsedUrl = parse(req.url, true);
+      await handle(req, res, parsedUrl);
+    } catch (err) {
+      console.error('Error occurred handling', req.url, err);
+      res.statusCode = 500;
+      res.end('internal server error');
+    }
+  })
+    .once('error', (err) => {
+      console.error(err);
+      process.exit(1);
+    })
+    .listen(port, () => {
+      console.log(`> Ready on https://${hostname}:${port}`);
+    });
+});

apps/web/src/app/layout.tsx

@@ -1,23 +1,14 @@
-// apps/web/app/layout.tsx
-import type { Metadata } from 'next';
 import './globals.css';
+import type { Metadata, Viewport } from 'next';
 import { QueryProvider } from '@/providers/queryProvider';
-import { AuthProvider } from '@/providers/AuthProvider';
 import pretendardFont from '@/assets/fonts/PretandardFont';
 import { ToastContainer } from '@/components/toast/ToastContainer';
 import { OverlayPortal } from '@/components/overlayPortal';
+import { AuthHydrationProvider } from '@/providers/AuthHydrationProvider';
 
 export const metadata: Metadata = {
   title: 'SoSo – Local Biz Helper',
   description: '지역 주민과 함께 만드는 창업 플랫폼',
-  viewport: {
-    width: 'device-width',
-    initialScale: 1,
-    maximumScale: 1,
-    userScalable: false,
-  },
-  themeColor: '#4CAF50', //tailwindcss green-500
-  //manifest: '/manifest.json',
   keywords: ['창업', '지역', '소상공인', '아이디어', '투표'],
   authors: [{ name: 'SOSO Team' }],
   appleWebApp: {
@@ -35,7 +26,14 @@ export const metadata: Metadata = {
     locale: 'ko_KR',
   },
 };
-// 전역 폰트 설정
+
+export const viewport: Viewport = {
+  themeColor: '#4CAF50',
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
 
 export default function RootLayout({
   children,
@@ -55,14 +53,14 @@ export default function RootLayout({
         className="flex flex-col h-screen bg-gradient-to-br from-white to-white dark:from-neutral-1000 dark:to-neutral-900"
       >
         <QueryProvider>
-          <AuthProvider>
-            {/*  */}
+          <AuthHydrationProvider>
+            {/* AuthProvider는 AuthHydration 내부에 포함됨 */}
             <main className="w-full h-full max-w-screen-md md:mx-auto flex-1 overflow-auto">
               {children}
               <ToastContainer />
             </main>
             <OverlayPortal />
-          </AuthProvider>
+          </AuthHydrationProvider>
         </QueryProvider>
       </body>
     </html>

apps/web/src/app/page.tsx

@@ -1,29 +1,22 @@
-// apps/web/src/app/page.tsx
 'use client';
 
-import { useEffect, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { useAuthStore } from '@/stores/authStore';
+import { useAuth } from '@/hooks/useAuth';
 import LogoImage from '@/assets/images/LogoImage';
 import Button from '@/components/buttons/Button';
 
 export default function HomePage() {
   const router = useRouter();
-  const { getIsAuth, isLoading } = useAuthStore();
-  const [ready, setReady] = useState(false);
-
-  useEffect(() => {
-    if (!isLoading) setReady(true);
-  }, [isLoading]);
+  const { isAuth, isLoading } = useAuth();
 
   const handleStart = () => {
-    router.replace(getIsAuth() ? '/main' : '/login');
+    router.replace(isAuth ? '/main' : '/login');
   };
 
   return (
     <div className="h-full w-full flex flex-col items-center justify-between pt-40">
       <h1 className="text-2xl font-semibold animate-fadeIn text-neutral-900 dark:text-neutral-100">
-        {ready ? '소소에 오신 것을 환영합니다' : ''}
+        소소에 오신 것을 환영합니다
       </h1>
       <div className="w-full h-full p-layout flex animate-fadeIn flex-col items-center justify-between space-y-4">
         <div className="my-20 flex-1 flex items-center justify-center">
@@ -32,17 +25,17 @@ export default function HomePage() {
 
         <div className="w-full space-y-4 flex flex-col items-center">
           <p className="text-neutral-600 animate-pulse dark:text-neutral-400 text-sm">
-            {ready ? '일상의 소소한 순간들을 기록해보세요' : ' '}
+            일상의 소소한 순간들을 기록해보세요
           </p>
-          {ready && (
-            <Button
-              onClick={handleStart}
-              variant="filled"
-              className="w-full"
-            >
-              소소 시작하기
-            </Button>
-          )}
+
+          <Button
+            onClick={handleStart}
+            variant="filled"
+            className="w-full"
+            isLoading={isLoading}
+          >
+            소소 시작하기
+          </Button>
         </div>
       </div>
     </div>

apps/web/src/generated/api/endpoints/auth/auth.ts

@@ -30,8 +30,16 @@ import { customInstance } from '../../../../lib/api-client';
 - 새로운 Access Token, Refresh Token 발급
 
 **토큰 발급 방식:**
-- Response Body: accessToken 포함 (기존 호환성 유지)
-- Set-Cookie 헤더: accessToken, refreshToken 쿠키 설정 (SSR 지원)
+- Response Body: accessToken 포함 (모바일 앱 지원)
+- Set-Cookie 헤더: accessToken, refreshToken 쿠키 갱신 (웹 브라우저 자동 관리)
+
+**쿠키 보안 속성:**
+- accessToken: HttpOnly=true, Secure=true, SameSite=None (XSS 방어)
+- refreshToken: HttpOnly=true, Secure=true, SameSite=None (XSS 방어)
+
+**클라이언트별 사용 방법:**
+- 웹 브라우저: 쿠키 자동 갱신, 별도 처리 불필요
+- 모바일 앱: Body에서 새 accessToken 추출 후 저장소 업데이트
 
  * @summary Access Token 재발급
  */
@@ -196,8 +204,16 @@ export const useLogout = <TError = void, TContext = unknown>(
  * 카카오 인가 코드를 통해 사용자 로그인을 처리합니다.
 
 **토큰 발급 방식:**
-- Response Body: accessToken 포함 (기존 호환성 유지)
-- Set-Cookie 헤더: accessToken, refreshToken 쿠키 설정 (SSR 지원)
+- Response Body: accessToken 포함 (모바일 앱 지원)
+- Set-Cookie 헤더: accessToken, refreshToken 쿠키 설정 (웹 브라우저 자동 관리)
+
+**쿠키 보안 속성:**
+- accessToken: HttpOnly=true, Secure=true, SameSite=None (XSS 방어, 30분)
+- refreshToken: HttpOnly=true, Secure=true, SameSite=None (XSS 방어, 14일)
+
+**클라이언트별 사용 방법:**
+- 웹 브라우저: 쿠키 자동 관리, credentials: 'include' 설정 필요
+- 모바일 앱: Body에서 accessToken 추출 후 AsyncStorage/SharedPreferences 저장
 
 **기존 사용자:** JWT 토큰 및 사용자 정보 반환
 **신규 사용자:** 회원가입 세션 생성

apps/web/src/generated/api/endpoints/freeboard/freeboard.ts

@@ -699,8 +699,6 @@ export type UpdateFreeboardPostMutationError =
   | ErrorResponse
   | ErrorResponse
   | ErrorResponse
-  | ErrorResponse
-  | ErrorResponse
   | ErrorResponse;
 
 /**

apps/web/src/generated/api/endpoints/signup/signup.ts

@@ -557,12 +557,16 @@ export const useSetExperience = <
  * 회원가입을 완료하고 사용자 계정을 생성합니다.
 
 **토큰 발급 방식:**
-- Response Body: accessToken 포함 (기존 호환성 유지)
-- Set-Cookie 헤더: accessToken, refreshToken 쿠키 설정 (SSR 지원)
+- Response Body: accessToken 포함 (모바일 앱 지원)
+- Set-Cookie 헤더: accessToken, refreshToken 쿠키 설정 (웹 브라우저 자동 관리)
 
-**쿠키 속성:**
-- accessToken: HttpOnly=false (JavaScript 접근 가능, 30분)
-- refreshToken: HttpOnly=true (XSS 보호, 7일)
+**쿠키 보안 속성:**
+- accessToken: HttpOnly=true, Secure=true, SameSite=None (XSS 방어, 30분)
+- refreshToken: HttpOnly=true, Secure=true, SameSite=None (XSS 방어, 14일)
+
+**클라이언트별 사용 방법:**
+- 웹 브라우저: 쿠키 자동 관리, credentials: 'include' 설정 필요
+- 모바일 앱: Body에서 accessToken 추출 후 AsyncStorage/SharedPreferences 저장
 
  * @summary [9단계] 회원가입 완료
  */

apps/web/src/generated/api/models/index.ts

@@ -85,9 +85,9 @@ export * from './userResponseAgeRange';
 export * from './userResponseGender';
 export * from './userResponseUserType';
 export * from './userSummaryResponse';
-export * from './userSummaryResponseUserType';
 export * from './userSummaryResponse';
 export * from './userSummaryResponseUserType';
+export * from './userSummaryResponseUserType';
 export * from './userTypeRequest';
 export * from './userTypeRequestUserType';
 export * from './voteOptionRequest';