Merge pull request #84 from SWMTheFirstTake/dev

MindulMendul · web-flow · commit eb7635dc2a2d · 2025-10-29T17:47:27.000+09:00
Dev
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/chat/ChatMenu.tsx b/src/components/chat/ChatMenu.tsx
@@ -41,7 +41,7 @@ export default function ChatMenu() {
         <div className="flex items-center justify-around h-16 w-full">
           <button
             aria-label="Chat"
-            className={`w-16 flex flex-col items-center gap-1 ${isClient && panel == 'chat' ? 'font-bold text-blue-600 dark:text-blue-400' : 'text-slate-400 dark:text-slate-600'}`}
+            className={`w-16 flex flex-col items-center gap-1 ${isClient && panel == 'chat' ? 'font-bold text-blue-600 dark:text-slate-100 rounded-md' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100 rounded-md transition-colors'}`}
             onClick={handleChat}
           >
             <span className="inline-flex">
@@ -51,7 +51,7 @@ export default function ChatMenu() {
           </button>
           <button
             aria-label="Closet"
-            className={`w-16 flex flex-col items-center gap-1 ${isClient && panel == 'closet' ? 'font-bold text-blue-600 dark:text-blue-400' : 'text-slate-400 dark:text-slate-600'}`}
+            className={`w-16 flex flex-col items-center gap-1 ${isClient && panel == 'closet' ? 'font-bold text-blue-600 dark:text-slate-100 rounded-md' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100 rounded-md transition-colors'}`}
             onClick={handleCloset}
           >
             <span className="inline-flex">
@@ -61,7 +61,7 @@ export default function ChatMenu() {
           </button>
           <button
             aria-label="Codination"
-            className={`w-16 flex flex-col items-center gap-1 ${isClient && panel == 'codination' ? 'font-bold text-blue-600 dark:text-blue-400' : 'text-slate-400 dark:text-slate-600'}`}
+            className={`w-16 flex flex-col items-center gap-1 ${isClient && panel == 'codination' ? 'font-bold text-blue-600 dark:text-slate-100 rounded-md' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100 rounded-md transition-colors'}`}
             onClick={handleCodination}
           >
             <span className="inline-flex">
@@ -71,7 +71,7 @@ export default function ChatMenu() {
           </button>
           <button
             aria-label="Fitting"
-            className={`w-16 flex flex-col items-center gap-1 ${isClient && panel == 'fitting' ? 'font-bold text-blue-600 dark:text-blue-400' : 'text-slate-400 dark:text-slate-600'}`}
+            className={`w-16 flex flex-col items-center gap-1 ${isClient && panel == 'fitting' ? 'font-bold text-blue-600 dark:text-slate-100 rounded-md' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100 rounded-md transition-colors'}`}
             onClick={handleFitting}
           >
             <span className="inline-flex">
@@ -82,7 +82,7 @@ export default function ChatMenu() {
           <SettingsPanel>
             <button
               aria-label="Settings"
-              className="w-16 flex flex-col items-center gap-1 text-slate-400 dark:text-slate-600"
+              className="w-16 flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100"
             >
               <span className="inline-flex">
                 <LucideIcon name={'Settings'} size={24} />
@@ -98,7 +98,7 @@ export default function ChatMenu() {
         <div className="flex flex-col items-center justify-center gap-10 w-full h-full">
           <button
             aria-label="Chat"
-            className={`w-full flex flex-col items-center gap-1 ${isClient && panel == 'chat' ? 'font-bold text-blue-600 dark:text-blue-400' : 'text-slate-400 dark:text-slate-600'}`}
+            className={`w-full flex flex-col items-center gap-1 ${isClient && panel == 'chat' ? 'font-bold text-blue-600 dark:text-slate-100 rounded-md' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100 rounded-md transition-colors'}`}
             onClick={handleChat}
           >
             <span className="inline-flex">
@@ -108,7 +108,7 @@ export default function ChatMenu() {
           </button>
           <button
             aria-label="Closet"
-            className={`w-full flex flex-col items-center gap-1 ${isClient && panel == 'closet' ? 'font-bold text-blue-600 dark:text-blue-400' : 'text-slate-400 dark:text-slate-600'}`}
+            className={`w-full flex flex-col items-center gap-1 ${isClient && panel == 'closet' ? 'font-bold text-blue-600 dark:text-slate-100 rounded-md' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100 rounded-md transition-colors'}`}
             onClick={handleCloset}
           >
             <span className="inline-flex">
@@ -118,7 +118,7 @@ export default function ChatMenu() {
           </button>
           <button
             aria-label="Codination"
-            className={`w-full flex flex-col items-center gap-1 ${isClient && panel == 'codination' ? 'font-bold text-blue-600 dark:text-blue-400' : 'text-slate-400 dark:text-slate-600'}`}
+            className={`w-full flex flex-col items-center gap-1 ${isClient && panel == 'codination' ? 'font-bold text-blue-600 dark:text-slate-100 rounded-md' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100 rounded-md transition-colors'}`}
             onClick={handleCodination}
           >
             <span className="inline-flex">
@@ -128,7 +128,7 @@ export default function ChatMenu() {
           </button>
           <button
             aria-label="Fitting"
-            className={`w-full flex flex-col items-center gap-1 ${isClient && panel == 'fitting' ? 'font-bold text-blue-600 dark:text-blue-400' : 'text-slate-400 dark:text-slate-600'}`}
+            className={`w-full flex flex-col items-center gap-1 ${isClient && panel == 'fitting' ? 'font-bold text-blue-600 dark:text-slate-100 rounded-md' : 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100 rounded-md transition-colors'}`}
             onClick={handleFitting}
           >
             <span className="inline-flex">
@@ -139,7 +139,7 @@ export default function ChatMenu() {
           <SettingsPanel>
             <button
               aria-label="Settings"
-              className="w-full flex flex-col items-center gap-1 text-slate-400 dark:text-slate-600"
+              className="w-full flex flex-col items-center gap-1 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-100"
             >
               <span className="inline-flex">
                 <LucideIcon name={'Settings'} size={24} />
diff --git a/src/components/chat/closet/ClosetPanel.tsx b/src/components/chat/closet/ClosetPanel.tsx
@@ -19,13 +19,13 @@ export default function ClosetPanel() {
   };
 
   return (
-    <div className="h-full flex flex-col">
+    <div className="h-full flex flex-col dark:bg-slate-800">
       <div className="overflow-y-auto p-4 h-11/12">
         {closet.length === 0 ? (
           <div className="flex flex-col items-center justify-center h-full text-center">
-            <h3 className="text-xl font-semibold text-blue dark:text-white mb-2">옷장이 비어있습니다</h3>
-            <p className="text-blue mb-4">AI와 대화하여 패션 아이템을 옷장에 추가해보세요</p>
-            <p className="text-sm text-blue">추천받은 아이템을 클릭하면 옷장에 자동으로 추가됩니다</p>
+            <h3 className="text-2xl font-semibold mb-4">옷장이 비어있습니다</h3>
+            <p className="">AI와 대화하여 패션 아이템을 옷장에 추가해보세요</p>
+            <p className="">추천받은 아이템을 클릭하면 옷장에 자동으로 추가됩니다</p>
           </div>
         ) : (
           <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4">
@@ -36,7 +36,7 @@ export default function ClosetPanel() {
         )}
       </div>
       <button
-        className="cursor-pointer h-1/12 btn bg-blue-700 text-2xl text-white hover:bg-blue-800 transition-colors"
+        className="cursor-pointer h-1/12 btn bg-blue-600 text-2xl text-white hover:bg-blue-700 dark:hover:bg-blue-500 transition-colors"
         onClick={handleOpenModal}
       >
         코디하기
diff --git a/src/components/chat/codination/CodinationPanel.tsx b/src/components/chat/codination/CodinationPanel.tsx
@@ -15,11 +15,11 @@ export default function CodinationPanel() {
   const [closetCodination, setClosetCodination] = useAtom(closetCodinationAtom);
   const [activeCodination] = useAtom(activeCodinationAtom);
   const [user] = useAtom(userAtom);
-  
+
   // 스토리지 훅 사용
   const { codinations, updateCodination } = useCodination();
-  const { executeVirtualFitting } = useVirtualFitting({ 
-    codinationId: closetCodination?.id || activeCodination?.id || '' 
+  const { executeVirtualFitting } = useVirtualFitting({
+    codinationId: closetCodination?.id || activeCodination?.id || '',
   });
   // 상의와 하의가 모두 선택되었는지 확인
   const hasUpperAndLower =
@@ -58,30 +58,31 @@ export default function CodinationPanel() {
 
     // 가상피팅 실행
     const success = await executeVirtualFitting(closetCodination.cloths);
-    
+
     if (success) {
       // 즉시 fitting 패널로 이동
       setPanel('fitting');
       setActiveCodination(closetCodination);
       setClosetCodination(null);
-      
+
       // 코디네이션 업데이트
       await updateCodination(closetCodination);
     }
   };
 
   if (codinations.length === 0)
     return (
-      <div className="h-full flex flex-col">
+      <div className="h-full flex flex-col dark:bg-slate-800">
         <div className="flex-1 flex flex-col items-center justify-center text-center p-8">
-          <div className="w-24 h-24 bg-slate-100 dark:bg-slate-800 rounded-full flex items-center justify-center mb-6">
-            <Plus className="w-12 h-12 text-slate-400" />
+          <div className="w-24 h-24 bg-slate-100 dark:bg-slate-700 rounded-full flex items-center justify-center mb-6">
+            <Plus className="w-12 h-12 " />
           </div>
-          <h3 className="text-xl font-semibold text-slate-900 dark:text-white mb-3">아직 코디가 없습니다</h3>
-          <p className="text-slate-600 dark:text-slate-400 mb-6 max-w-md">
-            AI와 대화하여 가상피팅에 사용할 옷 조합들을 추가해보세요
-          </p>
-          <Button onClick={handleAddNewCodination} className="bg-blue-600 dark:bg-blue-500 hover:bg-blue-700 dark:hover:bg-blue-600 text-white px-6 py-3">
+          <h3 className="text-xl font-semibold mb-3">아직 코디가 없습니다</h3>
+          <p className="mb-6 max-w-md">AI와 대화하여 가상피팅에 사용할 옷 조합들을 추가해보세요</p>
+          <Button
+            onClick={handleAddNewCodination}
+            className="bg-blue-600  hover:bg-blue-700 dark:hover:bg-blue-500 text-white px-6 py-3"
+          >
             <Plus className="w-4 h-4 mr-2" />
             코디 추가하기
           </Button>
@@ -113,9 +114,7 @@ export default function CodinationPanel() {
         <div className="p-4 border-t border-slate-200 dark:border-slate-700">
           <button
             className={`w-full cursor-pointer h-12 btn ${
-              closetCodination.fitting_image 
-                ? 'bg-green-600 hover:bg-green-700' 
-                : 'bg-navy'
+              closetCodination.fitting_image ? 'bg-green-600 hover:bg-green-700' : 'bg-navy'
             } text-lg text-white disabled:bg-blue-50`}
             disabled={isDisabled}
             onClick={handleSubmitFitting}
diff --git a/src/components/chat/fitting/FittingCard.tsx b/src/components/chat/fitting/FittingCard.tsx
@@ -15,7 +15,7 @@ export default function FittingCard() {
   const displayImage = activeCodination?.fitting_image || fittingStatus.resultUrl;
 
   return (
-    <div className="flex bg-gray-100 dark:bg-slate-700 flex-col h-full min-h-[400px]">
+    <div className="flex bg-gray-100 dark:bg-slate-800 flex-col h-full min-h-[400px]">
       <div className="flex h-full items-center justify-center">
         <FittingStatus
           status={fittingStatus.status}
diff --git a/src/components/chat/fitting/FittingDetail.tsx b/src/components/chat/fitting/FittingDetail.tsx
@@ -21,7 +21,7 @@ export default function FittingDetail() {
     <div className="flex flex-col space-y-4 h-full">
       {/* 모델 이미지 정보 */}
       <div className="border border-blue dark:bg-slate-800 rounded-2xl p-4">
-        <h3 className="text-2xl font-bold text-navy-500 dark:text-white mb-4">피팅 모델</h3>
+        <h3 className="text-2xl font-bold mb-4">피팅 모델</h3>
         <div className="flex items-center gap-4">
           {user?.modelImage ? (
             <>
@@ -35,7 +35,7 @@ export default function FittingDetail() {
                 />
               </div>
               <div className="flex-1">
-                <p className="font-bold text-lg text-navy-500 dark:text-white mb-1">개인 모델 이미지</p>
+                <p className="font-bold text-lg mb-1">개인 모델 이미지</p>
                 <p className="text-sm text-green-600 dark:text-green-400">✅ 설정된 모델 이미지가 사용됩니다</p>
               </div>
             </>
@@ -52,8 +52,8 @@ export default function FittingDetail() {
                 </svg>
               </div>
               <div className="flex-1">
-                <p className="font-bold text-lg text-navy-500 dark:text-white mb-1">기본 모델 이미지</p>
-                <p className="text-sm text-gray-500 dark:text-gray-400">설정에서 개인 모델 이미지를 업로드하세요</p>
+                <p className="font-bold text-lg  mb-1">기본 모델 이미지</p>
+                <p className="text-sm text-gray-500 ">[설정]에서 개인 모델 이미지를 업로드하세요</p>
               </div>
             </>
           )}
@@ -62,7 +62,7 @@ export default function FittingDetail() {
 
       {/* 코디 아이템 정보 */}
       <div className="flex-1 min-h-0 border border-blue dark:bg-slate-800 rounded-2xl p-4">
-        <h3 className="text-2xl font-bold text-navy-500 dark:text-white mb-4">코디 아이템</h3>
+        <h3 className="text-2xl font-bold mb-4">코디 아이템</h3>
         <div className="space-y-2 overflow-y-auto">
           {activeCodination
             ? activeCodination.cloths.map((cloth: ClosetCloth, index: number) => (
diff --git a/src/components/chat/fitting/FittingStatus.tsx b/src/components/chat/fitting/FittingStatus.tsx
@@ -34,7 +34,7 @@ const FittingStatus = memo(function FittingStatus({
       return (
         <div className="text-blue-400 dark:text-blue-200 text-center">
           <div className="w-20 h-20 mx-auto mb-4 bg-gray-150 dark:bg-slate-600 rounded-full flex items-center justify-center">
-            <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-500 dark:border-blue-200"></div>
+            <div className="animate-spin rounded-full h-10 w-10 border-b-2 border-blue-500 dark:border-blue-300"></div>
           </div>
           <p className="text-base font-medium">가상피팅 진행 중...</p>
           <p className="text-sm mt-1">잠시만 기다려주세요</p>
@@ -87,7 +87,7 @@ const FittingStatus = memo(function FittingStatus({
               </div>
             </div>
           ) : (
-            <div>
+            <div className="dark:text-blue-300">
               <div className="w-20 h-20 mx-auto mb-4 bg-gray-200 dark:bg-slate-600 rounded-full flex items-center justify-center">
                 <svg className="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path
@@ -99,7 +99,7 @@ const FittingStatus = memo(function FittingStatus({
                 </svg>
               </div>
               <p className="text-base font-medium">피팅 이미지</p>
-              <p className="text-sm text-gray-500 mt-1">설정에서 모델 이미지를 업로드하세요</p>
+              <p className="text-sm mt-1">설정에서 모델 이미지를 업로드하세요</p>
             </div>
           )}
         </div>
diff --git a/src/components/chat/message/ChatInputBox.tsx b/src/components/chat/message/ChatInputBox.tsx
diff --git a/src/components/chat/message/balloon/MainPost.tsx b/src/components/chat/message/balloon/MainPost.tsx
diff --git a/src/components/chat/modal/CodinationModal.tsx b/src/components/chat/modal/CodinationModal.tsx
diff --git a/src/components/landing/NextChat.tsx b/src/components/landing/NextChat.tsx
diff --git a/src/lib/indexedDB.ts b/src/lib/indexedDB.ts
