Merge pull request #81 from SWMTheFirstTake/dev

빌드 안 되던 거 수정

Author: MindulMendul

app/chat/[roomId]/page.tsx

@@ -34,7 +34,7 @@ export default function ChatRoomPage({ params }: ChatRoomPageProps) {
     if (tempMessage?.roomId != roomId || !tempMessage?.userMessage) return;
     mutate({ inputValue: tempMessage.userMessage });
     setTempMessage(null);
-  }, [roomId]);
+  }, [roomId, mutate, setTempMessage, tempMessage?.roomId, tempMessage?.userMessage]);
 
   // lg 이상일 때 panel이 'chat'이면 자동으로 'closet'으로 전환
   useEffect(() => {

src/components/auth/AuthJotaiInitializer.tsx

@@ -33,7 +33,7 @@ export default function AuthJotaiInitializer({ initialUser }: AuthJotaiInitializ
     };
 
     initialize();
-  }, [initialUser]);
+  }, [initialUser, setUser]);
 
   return null;
 }

src/components/chat/message/ChatArea.tsx

@@ -53,7 +53,7 @@ export default function ChatArea() {
   // 첫 마운트 시에 대화 내용 불러오기
   useEffect(() => {
     loadMessages();
-  }, [roomId]);
+  }, [roomId, loadMessages]);
 
   // 메시지가 변경될 때마다 그룹 업데이트
   useEffect(() => {

src/components/chat/modal/CodinationModal.tsx

@@ -89,7 +89,13 @@ export default function CodinationModal({ isOpen, onClose }: CodinationModalProp
                   key={cloth.id}
                   className="flex items-center space-x-2 px-2 py-1 bg-blue-100 dark:bg-blue-800/30 rounded text-sm"
                 >
-                  <img src={cloth.url} alt={cloth.name} className="w-6 h-6 object-cover rounded" />
+                  <Image
+                    src={cloth.url}
+                    alt={cloth.name}
+                    width={300}
+                    height={300}
+                    className="w-6 h-6 object-cover rounded"
+                  />
                   <span className="text-blue-800 dark:text-blue-200 text-xs truncate max-w-20">{cloth.name}</span>
                 </div>
               ))}

src/components/chat/settings/ModelImageUpload.tsx

@@ -7,62 +7,66 @@ import { Button } from '@/components/ui/button';
 import { Camera, X, Loader2 } from 'lucide-react';
 import { saveUserProfile } from '@/lib/indexedDB';
 import { postChatUpload } from '@/api/chatAPI';
+import Image from 'next/image';
 
 export default function ModelImageUpload() {
   const [user, setUser] = useAtom(userAtom);
   const [isLoading, setIsLoading] = useState(false);
   const [previewImage, setPreviewImage] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
-  const handleImageUpload = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
+  const handleImageUpload = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
 
-    if (file && user) {
-      setIsLoading(true);
+      if (file && user) {
+        setIsLoading(true);
 
-      // 파일 크기 검증 (5MB 제한)
-      if (file.size > 5 * 1024 * 1024) {
-        alert('파일 크기는 5MB 이하여야 합니다.');
-        setIsLoading(false);
-        return;
-      }
-
-      // 파일 타입 검증
-      if (!file.type.startsWith('image/')) {
-        alert('이미지 파일만 업로드 가능합니다.');
-        setIsLoading(false);
-        return;
-      }
-
-      try {
-        const formData = new FormData();
-        formData.append('file', file);
+        // 파일 크기 검증 (5MB 제한)
+        if (file.size > 5 * 1024 * 1024) {
+          alert('파일 크기는 5MB 이하여야 합니다.');
+          setIsLoading(false);
+          return;
+        }
 
-        const response = await postChatUpload(formData);
-        if (response.status === 'fail') {
-          console.error('사진 업로드 중 에러');
+        // 파일 타입 검증
+        if (!file.type.startsWith('image/')) {
+          alert('이미지 파일만 업로드 가능합니다.');
           setIsLoading(false);
           return;
         }
 
-        const result = response.data;
-        setPreviewImage(result);
-
-        const newProfile: User = {
-          ...user,
-          modelImage: result,
-        };
-
-        setUser(newProfile);
-        await saveUserProfile(newProfile);
-      } catch (error) {
-        console.error('이미지 업로드 실패:', error);
-        alert('이미지 업로드에 실패했습니다.');
-      } finally {
-        setIsLoading(false);
+        try {
+          const formData = new FormData();
+          formData.append('file', file);
+
+          const response = await postChatUpload(formData);
+          if (response.status === 'fail') {
+            console.error('사진 업로드 중 에러');
+            setIsLoading(false);
+            return;
+          }
+
+          const result = response.data;
+          setPreviewImage(result);
+
+          const newProfile: User = {
+            ...user,
+            modelImage: result,
+          };
+
+          setUser(newProfile);
+          await saveUserProfile(newProfile);
+        } catch (error) {
+          console.error('이미지 업로드 실패:', error);
+          alert('이미지 업로드에 실패했습니다.');
+        } finally {
+          setIsLoading(false);
+        }
       }
-    }
-  }, [user, setUser]);
+    },
+    [user, setUser],
+  );
 
   const handleRemoveImage = useCallback(async () => {
     if (user) {
@@ -107,9 +111,11 @@ export default function ModelImageUpload() {
       {!isLoading && (user?.modelImage || previewImage) && (
         <div className="space-y-3">
           <div className="relative group">
-            <img
+            <Image
               src={previewImage || user?.modelImage || '/model_image.jpg'}
               alt="현재 설정된 모델 이미지"
+              width={300}
+              height={300}
               className="w-full h-48 object-cover rounded-lg border border-gray-200 shadow-sm"
             />
             {/* 오버레이 버튼들 */}
@@ -132,13 +138,7 @@ export default function ModelImageUpload() {
               </div>
             </div>
             {/* 숨겨진 파일 입력 */}
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept="image/*"
-              onChange={handleImageUpload}
-              className="hidden"
-            />
+            <input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageUpload} className="hidden" />
           </div>
           <div className="text-center">
             <p className="text-sm text-green-600 font-medium">✅ 모델 이미지가 설정되었습니다</p>
@@ -153,13 +153,7 @@ export default function ModelImageUpload() {
           <Camera className="h-12 w-12 text-gray-400 mx-auto mb-4" />
           <p className="text-gray-500 mb-4">가상 피팅에 사용할 모델 이미지를 업로드하세요</p>
           <p className="text-xs text-gray-400 mb-4">JPG, PNG, GIF 파일 (최대 5MB)</p>
-          <input
-            ref={fileInputRef}
-            type="file"
-            accept="image/*"
-            onChange={handleImageUpload}
-            className="hidden"
-          />
+          <input ref={fileInputRef} type="file" accept="image/*" onChange={handleImageUpload} className="hidden" />
           <Button
             onClick={handleFileSelect}
             variant="outline"

src/hooks/useChatHandler.ts

@@ -46,7 +46,7 @@ export function useChatHandlers(): {
 
       setMessages((prev) => [...prev, userMessage]);
     },
-    [roomId],
+    [roomId, resetAtomState, setMessages, user?.userId, user?.username],
   );
 
   const handleExampleSelect = useCallback(

src/hooks/useChatStream.ts

@@ -157,7 +157,7 @@ export const useChatStream = () => {
         const userMessage: Message = {
           id: Date.now().toString(),
           content: inputValue,
-          user: { userId: 'asdf', username: 'mindul', modelImage: null, darkMode: false },
+          user: { userId: 'asdf', username: 'mindul', modelImage: null },
           agent: null,
           message_type: 'USER',
           products: products ? [products] : [],

src/hooks/useCodinationSave.ts

@@ -118,7 +118,7 @@ export function useCodinationSave() {
       const key = makeProductsKey(products);
       setLocallySavedKeys((prev) => new Set(prev).add(key));
     },
-    [codinations, addCodination, setActiveCodination, setPanel, closet, addClothesToCloset, makeProductsKey],
+    [codinations, addCodination, setActiveCodination, setPanel, addClothesToCloset, makeProductsKey],
   );
 
   const isSaved = useCallback(
@@ -134,3 +134,4 @@ export function useCodinationSave() {
     isSaved,
   };
 }
+

src/hooks/useFitting.ts

@@ -140,7 +140,7 @@ export const useFitting = (codinationId?: string) => {
     };
 
     initializeFittingStatus();
-  }, [isLoading, loadFittingStatusFromStorage, setFittingStatus, shouldUseStorage]);
+  }, [isLoading, loadFittingStatusFromStorage, setFittingStatus, shouldUseStorage, codinationId]);
 
   useEffect(() => {
     if (fittingStatus.status !== 'idle' && shouldUseStorage) {

src/hooks/useToast.ts

@@ -12,26 +12,29 @@ export interface Toast {
 export const useToast = () => {
   const [toasts, setToasts] = useState<Toast[]>([]);
 
-  const addToast = useCallback((toast: Omit<Toast, 'id'>) => {
-    const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-    const newToast: Toast = {
-      id,
-      duration: 5000, // 기본 5초
-      ...toast,
-    };
-
-    setToasts((prev) => [...prev, newToast]);
-
-    // 자동 제거
-    setTimeout(() => {
-      removeToast(id);
-    }, newToast.duration);
-  }, []);
-
   const removeToast = useCallback((id: string) => {
     setToasts((prev) => prev.filter((toast) => toast.id !== id));
   }, []);
 
+  const addToast = useCallback(
+    (toast: Omit<Toast, 'id'>) => {
+      const id = `toast-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+      const newToast: Toast = {
+        id,
+        duration: 5000, // 기본 5초
+        ...toast,
+      };
+
+      setToasts((prev) => [...prev, newToast]);
+
+      // 자동 제거
+      setTimeout(() => {
+        removeToast(id);
+      }, newToast.duration);
+    },
+    [removeToast],
+  );
+
   const showSuccess = useCallback(
     (message: string, duration?: number) => {
       addToast({ type: 'success', message, duration });
@@ -70,7 +73,3 @@ export const useToast = () => {
     showInfo,
   };
 };
-
-
-
-