다른 페이지에서도 다크모드 적용

MindulMendul · MindulMendul · commit ebe2cc8ef728 · 2025-10-29T17:46:44.000+09:00
diff --git a/app/chat/[roomId]/page.tsx b/app/chat/[roomId]/page.tsx
@@ -36,10 +36,9 @@ export default function ChatRoomPage({ params }: ChatRoomPageProps) {
     setTempMessage(null);
   }, [roomId, mutate, setTempMessage, tempMessage?.roomId, tempMessage?.userMessage]);
 
-
   return (
     <Suspense>
-      <div className="flex flex-col">
+      <div className="flex flex-col max-w-[1024px]">
         {/* 상단에 메뉴 표시 */}
         <div>
           <ChatMenu />
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -90,14 +90,14 @@ export default function RootLayout({
       </head>
       <body className={`${plus_jakarta_sans.variable} ${noto_sans_kr.variable} antialiased min-h-screen flex flex-col`}>
         <main className="flex-grow text-blue dark:text-blue-250">
-          <div className="w-full max-w-[1024px] mx-auto">
-          <JotaiProvider>
-            <QueryProvider>
-              <ServerAuthProvider>
-                <StorageInitializer>{children}</StorageInitializer>
-              </ServerAuthProvider>
-            </QueryProvider>
-          </JotaiProvider>
+          <div className="w-full mx-auto">
+            <JotaiProvider>
+              <QueryProvider>
+                <ServerAuthProvider>
+                  <StorageInitializer>{children}</StorageInitializer>
+                </ServerAuthProvider>
+              </QueryProvider>
+            </JotaiProvider>
           </div>
         </main>
         <Suspense fallback={null}>
diff --git a/app/page.tsx b/app/page.tsx
@@ -7,11 +7,11 @@ export default function Home() {
   return (
     <div className="font-sans">
       <section className="h-screen flex items-center justify-center relative ">
-        <div className="absolute inset-x-0 top-0 h-1/2 bg-blue -z-20 pointer-events-none">
-          <Image className="object-cover opacity-60" src={'/logo1.png'} alt={'logo'} fill />
+        <div className="absolute inset-x-0 top-0 h-1/2 bg-blue dark:bg-blue-800 -z-20 pointer-events-none">
+          <Image className="object-cover opacity-60 dark:opacity-30" src={'/logo1.png'} alt={'logo'} fill />
         </div>
         <div className="absolute inset-0 -z-10 pointer-events-none"></div>
-        <div className="max-w-5xl mx-auto pb-24 px-4 w-full bg-white rounded-4xl shadow-2xl">
+        <div className="max-w-5xl mx-auto pb-24 px-4 w-full bg-white dark:bg-slate-800 rounded-4xl shadow-2xl">
           <HeroSection />
           <NextChat />
         </div>
@@ -40,7 +40,7 @@ export default function Home() {
         </div>
       </section>
 
-      <section id="about" className="py-20 md:py-28 bg-white">
+      <section id="about" className="py-20 md:py-28">
         <div className="max-w-6xl mx-auto px-4">
           <Explanation />
         </div>
diff --git a/app/signin/page.tsx b/app/signin/page.tsx
@@ -1,18 +1,20 @@
 import SigninSNSForm from '@/components/auth/SigninSNSForm';
 import LoginBackground from '@/components/auth/LoginBackground';
 import Image from 'next/image';
+import LoginBackgroundDark from '@/components/auth/LoginBackgroundDark';
 
 export default function SigninPage() {
   return (
     <div className="min-h-screen flex items-center justify-center relative overflow-hidden">
       <LoginBackground />
+      <LoginBackgroundDark />
 
       {/* 메인 컨텐츠 */}
       <div className="relative z-10 w-full max-w-4xl mx-4">
-        <div className="bg-white/70 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/20 p-16 space-y-12">
+        <div className="bg-white/70 dark:bg-slate-800 backdrop-blur-xl rounded-3xl shadow-2xl  p-16 space-y-12">
           {/* 헤더 섹션 */}
           <div className="text-center space-y-8">
-            <div className="inline-flex items-center justify-center w-32 h-32 bg-white rounded-3xl shadow-lg p-4">
+            <div className="inline-flex items-center justify-center w-32 h-32 bg-white dark:bg-slate-800 rounded-3xl shadow-lg dark:shadow-none p-4">
               <Image
                 src="/TFT_icon.png"
                 alt="The First Take"
diff --git a/src/components/auth/LoginBackground.tsx b/src/components/auth/LoginBackground.tsx
@@ -1,6 +1,6 @@
 export default function LoginBackground() {
   return (
-    <div className="fixed inset-0 w-screen h-screen z-0">
+    <div className="dark:hidden fixed inset-0 w-screen h-screen z-0">
       <svg
         viewBox="0 0 1920 1080"
         xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/auth/LoginBackgroundDark.tsx b/src/components/auth/LoginBackgroundDark.tsx
@@ -1,6 +1,6 @@
 export default function LoginBackgroundDark() {
   return (
-    <div className="fixed inset-0 w-screen h-screen z-0">
+    <div className="hidden dark:block fixed inset-0 w-screen h-screen z-0">
       <svg
         viewBox="0 0 1920 1080"
         xmlns="http://www.w3.org/2000/svg"
@@ -157,5 +157,3 @@ export default function LoginBackgroundDark() {
     </div>
   );
 }
-
-
diff --git a/src/components/landing/NextChat.tsx b/src/components/landing/NextChat.tsx
@@ -90,16 +90,18 @@ export default function NextChat() {
         <div className="relative group">
           <div className="absolute -inset-0.5 bg-gradient-to-r rounded-2xl blur opacity-20 group-hover:opacity-30 transition duration-300"></div>
           <div className="relative">
-            <div className="
+            <div
+              className="
               w-full min-h-[70px] max-h-[140px] 
-              bg-white border-2 border-gray-200 
+              bg-white dark:bg-slate-700 border-2 border-gray-200 dark:border-slate-700
               rounded-2xl 
               focus-within:border-blue-400 focus-within:ring-4 focus-within:ring-blue-100 
               shadow-lg hover:shadow-xl
               transition-all duration-300 ease-out
               backdrop-blur-sm
               flex items-end justify-between p-4
-            ">
+            "
+            >
               <Textarea
                 value={inputValue}
                 onChange={(e) => setInputValue(e.target.value)}
@@ -111,7 +113,8 @@ export default function NextChat() {
                 }}
                 placeholder="패션에 대해 마음대로 물어보세요! 예: '데이트룩 추천해줘'"
                 className="
-                  flex-1 bg-transparent resize-none
+                  flex-1 resize-none
+                  bg-transparent dark:bg-slate-700
                   text-lg
                   border-none focus-visible:border-0 focus:outline-none focus:ring-0
                   placeholder:text-gray-400
