Feat: 세션 유지 컴포넌트 추가 및 주석 디자인 다크테마 적용

2026-02-06 10:43:16 +09:00
parent d31e3f9bc9
commit d2c66a639d
19 changed files with 1341 additions and 273 deletions
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,6 +1,18 @@
+/**
+ * @file app/layout.tsx
+ * @description 애플리케이션의 최상위 루트 레이아웃 (RootLayout)
+ * @remarks
+ * - [레이어] Infrastructure/Layout
+ * - [역할] 전역 스타일(Font/CSS), 테마(Provider), 세션 관리(Manager) 초기화
+ * - [데이터 흐름] Providers -> Children
+ * - [연관 파일] globals.css, theme-provider.tsx
+ */
+
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Geist, Geist_Mono, Outfit } from "next/font/google";
 import { QueryProvider } from "@/providers/query-provider";
+import { ThemeProvider } from "@/components/theme-provider";
+import { SessionManager } from "@/features/auth/components/session-manager";
 import "./globals.css";

 const geistSans = Geist({
@@ -13,22 +25,43 @@ const geistMono = Geist_Mono({
  subsets: ["latin"],
 });

+const outfit = Outfit({
+  variable: "--font-heading",
+  subsets: ["latin"],
+  display: "swap",
+});
+
 export const metadata: Metadata = {
  title: "AutoTrade",
  description: "Automated Crypto Trading Platform",
 };

+/**
+ * RootLayout 컴포넌트
+ * @param children 렌더링할 자식 컴포넌트
+ * @returns HTML 구조 및 전역 Provider 래퍼
+ * @see theme-provider.tsx - 다크모드 지원
+ * @see session-manager.tsx - 세션 타임아웃 감지
+ */
 export default function RootLayout({
  children,
 }: Readonly<{
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
+    <html lang="en" className="scroll-smooth" suppressHydrationWarning>
      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} ${outfit.variable} antialiased`}
      >
-        <QueryProvider>{children}</QueryProvider>
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="system"
+          enableSystem
+          disableTransitionOnChange
+        >
+          <SessionManager />
+          <QueryProvider>{children}</QueryProvider>
+        </ThemeProvider>
      </body>
    </html>
  );