Merge pull request #90 from SWMTheFirstTake/dev

Dev

Author: MindulMendul

src/components/chat/closet/ClosetClothCard.tsx

@@ -22,14 +22,14 @@ export default function ClosetClothCard({ cloth }: ClosetClothCardProps) {
       {/* 삭제 버튼 (우상단) */}
       <button
         aria-label="remove-from-closet"
-        className="absolute top-2 right-2 z-10 w-8 h-8 rounded-full bg-white/90 dark:bg-slate-700 text-slate-600 dark:text-slate-200 shadow hover:bg-white dark:hover:bg-slate-600 flex items-center justify-center"
+        className="absolute top-2 right-2 z-10 w-8 h-8 rounded-full bg-white/90 dark:bg-slate-700 text-slate-600 dark:text-white shadow hover:bg-white dark:hover:bg-slate-600 flex items-center justify-center"
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
           removeClothFromCloset(cloth.id);
         }}
       >
-        <LucideIcon name={'X'} size={16} />
+        <LucideIcon name={'X'} color={'blue-100'} size={16} />
       </button>
       {/* ClothModal로 감싸기 */}
       <ClothModal product={product}>

src/components/chat/codination/CodinationActions.tsx

@@ -16,7 +16,7 @@ const CodinationActions = memo(function CodinationActions({
 }: CodinationActionsProps) {
   return (
     <div className="space-y-2">
-      {codination.fitting_image ? (
+      {codination.fitting_id ? (
         <button
           onClick={onVirtualFitting}
           className="w-full flex items-center gap-2 p-3 rounded-lg hover:bg-green-50 dark:hover:bg-green-900/20 text-green-600 dark:text-green-400 transition-colors"

src/components/chat/codination/CodinationCard.tsx

@@ -1,22 +1,21 @@
 'use client';
 
-import { activeCodinationAtom } from '@/atoms/chatAtoms';
+import { activeCodinationAtom, panelAtom } from '@/atoms/chatAtoms';
 import { useAtom } from 'jotai';
 import { useState, useCallback, memo } from 'react';
 import { useCodination } from '@/hooks/useCodination';
 import { useVirtualFitting } from '@/hooks/useVirtualFitting';
 import CodinationCardHeader from './CodinationCardHeader';
-import CodinationClothItem from './CodinationClothItem';
 import CodinationActions from './CodinationActions';
-import ClothModal from '@/components/chat/modal/ClothModal';
 
 interface CodinationCardProps {
   codination: Codination;
 }
 
 const CodinationCard = memo(function CodinationCard({ codination }: CodinationCardProps) {
-  const [activeCodination] = useAtom(activeCodinationAtom);
+  const [activeCodination, setActiveCodination] = useAtom(activeCodinationAtom);
   const [isExpanded, setIsExpanded] = useState(false);
+  const [_, setPanel] = useAtom(panelAtom);
 
   // 스토리지 훅 사용
   const { removeCodination } = useCodination();
@@ -30,6 +29,12 @@ const CodinationCard = memo(function CodinationCard({ codination }: CodinationCa
   );
 
   const handleVirtualFitting = useCallback(async () => {
+    if (codination?.fitting_id) {
+      setActiveCodination(codination);
+      setPanel('fitting');
+      return;
+    }
+    setActiveCodination(codination);
     await executeVirtualFitting(codination.cloths);
   }, [executeVirtualFitting, codination.cloths]);
 

src/components/chat/codination/CodinationPanel.tsx

@@ -1,74 +1,11 @@
 'use client';
 
-import { activeCodinationAtom, closetAtom, closetCodinationAtom, panelAtom } from '@/atoms/chatAtoms';
-import { useAtom, useSetAtom } from 'jotai';
-import { Button } from '@/components/ui/button';
 import { Plus } from 'lucide-react';
 import CodinationCard from '@/components/chat/codination/CodinationCard';
 import { useCodination } from '@/hooks/useCodination';
-import { useVirtualFitting } from '@/hooks/useVirtualFitting';
-import { userAtom } from '@/atoms/authAtoms';
 
 export default function CodinationPanel() {
-  const setPanel = useSetAtom(panelAtom);
-  const setActiveCodination = useSetAtom(activeCodinationAtom);
-  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 hasUpperAndLower =
-    closetCodination &&
-    closetCodination.cloths.some((cloth) => cloth.url.includes('TOP')) &&
-    closetCodination.cloths.some((cloth) => cloth.url.includes('BOTTOM'));
-
-  const isDisabled = !closetCodination || closetCodination.cloths.length === 0 || !hasUpperAndLower;
-
-  const handleAddNewCodination = () => {
-    setPanel('closet');
-    setActiveCodination(null);
-    setClosetCodination(null);
-  };
-
-  const handleSubmitFitting = async () => {
-    if (isDisabled || !closetCodination) return;
-
-    // 사용자 프로필의 모델 이미지 체크
-    if (user?.userId) {
-      try {
-        const { loadUserProfile } = await import('@/lib/indexedDB');
-        const userProfile = await loadUserProfile(user.userId);
-        if (!userProfile?.modelImage) {
-          // 세팅 패널 모달 띄우기
-          setPanel('settings');
-          return;
-        }
-      } catch (error) {
-        console.error('사용자 프로필 로드 실패:', error);
-        // 세팅 패널 모달 띄우기
-        setPanel('settings');
-        return;
-      }
-    }
-
-    // 가상피팅 실행
-    const success = await executeVirtualFitting(closetCodination.cloths);
-
-    if (success) {
-      // 즉시 fitting 패널로 이동
-      setPanel('fitting');
-      setActiveCodination(closetCodination);
-      setClosetCodination(null);
-
-      // 코디네이션 업데이트
-      await updateCodination(closetCodination);
-    }
-  };
+  const { codinations } = useCodination();
 
   if (codinations.length === 0)
     return (
@@ -79,25 +16,7 @@ export default function CodinationPanel() {
           </div>
           <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>
         </div>
-        {closetCodination && closetCodination.cloths.length > 0 && (
-          <div className="p-4 border-t border-slate-200 dark:border-slate-700">
-            <button
-              className={`w-full cursor-pointer h-12 btn bg-navy dark:bg-blue-600 text-lg text-white disabled:bg-blue-50 dark:disabled:bg-slate-600`}
-              disabled={isDisabled}
-              onClick={handleSubmitFitting}
-            >
-              가상피팅하기
-            </button>
-          </div>
-        )}
       </div>
     );
 
@@ -106,23 +25,10 @@ export default function CodinationPanel() {
       <div className="flex-1 overflow-y-auto">
         <div className="flex flex-col gap-4 p-4">
           {codinations.map((codination, key) => (
-            <CodinationCard codination={codination} key={key}></CodinationCard>
+            <CodinationCard codination={codination} key={key} />
           ))}
         </div>
       </div>
-      {closetCodination && closetCodination.cloths.length > 0 && (
-        <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'
-            } text-lg text-white disabled:bg-blue-50`}
-            disabled={isDisabled}
-            onClick={handleSubmitFitting}
-          >
-            {closetCodination.fitting_image ? '피팅 결과 보기' : '가상피팅하기'}
-          </button>
-        </div>
-      )}
     </div>
   );
 }

src/components/chat/fitting/FittingCard.tsx

@@ -11,9 +11,6 @@ export default function FittingCard() {
   const user = useAtomValue(userAtom);
   const { fittingStatus } = useFitting(activeCodination?.id);
 
-  // 코디네이션에 저장된 피팅 이미지가 있으면 우선 표시
-  const displayImage = activeCodination?.fitting_image || fittingStatus.resultUrl;
-
   return (
     <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">
@@ -22,7 +19,7 @@ export default function FittingCard() {
           resultUrl={fittingStatus.resultUrl}
           errorMessage={fittingStatus.errorMessage}
           userModelImage={user?.modelImage}
-          displayImage={displayImage}
+          displayImage={fittingStatus.resultUrl}
         />
       </div>
     </div>

src/components/chat/fitting/FittingDetail.tsx

@@ -23,39 +23,25 @@ export default function FittingDetail() {
       <div className="border border-blue dark:bg-slate-800 rounded-2xl p-4">
         <h3 className="text-2xl font-bold mb-4">피팅 모델</h3>
         <div className="flex items-center gap-4">
+          <div className="flex-shrink-0">
+            <Image
+              src={user?.modelImage || '/model_image.jpg'}
+              alt="사용자 모델 이미지"
+              width={80}
+              height={80}
+              className="rounded-lg object-cover"
+            />
+          </div>
           {user?.modelImage ? (
-            <>
-              <div className="flex-shrink-0">
-                <Image
-                  src={user.modelImage}
-                  alt="사용자 모델 이미지"
-                  width={80}
-                  height={80}
-                  className="rounded-lg object-cover"
-                />
-              </div>
-              <div className="flex-1">
-                <p className="font-bold text-lg mb-1">개인 모델 이미지</p>
-                <p className="text-sm text-green-600 dark:text-green-400">✅ 설정된 모델 이미지가 사용됩니다</p>
-              </div>
-            </>
+            <div className="flex-1">
+              <p className="font-bold text-lg mb-1">개인 모델 이미지</p>
+              <p className="text-sm text-green-600 dark:text-green-400">✅ 설정된 모델 이미지가 사용됩니다</p>
+            </div>
           ) : (
-            <>
-              <div className="flex-shrink-0 w-20 h-20 bg-gray-200 dark:bg-slate-600 rounded-lg flex items-center justify-center">
-                <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
-                  />
-                </svg>
-              </div>
-              <div className="flex-1">
-                <p className="font-bold text-lg  mb-1">기본 모델 이미지</p>
-                <p className="text-sm text-gray-500 ">[설정]에서 개인 모델 이미지를 업로드하세요</p>
-              </div>
-            </>
+            <div className="flex-1">
+              <p className="font-bold text-lg  mb-1">기본 모델 이미지</p>
+              <p className="text-sm text-gray-500 ">[설정]에서 개인 모델 이미지를 업로드하세요</p>
+            </div>
           )}
         </div>
       </div>
@@ -68,7 +54,13 @@ export default function FittingDetail() {
             ? activeCodination.cloths.map((cloth: ClosetCloth, index: number) => (
                 <div key={index} className="flex items-center gap-3 p-3 rounded-lg">
                   <div className="flex-shrink-0 flex items-center justify-center w-15 aspect-[3/4]">
-                    <Image src={cloth.url} alt={cloth.name} fill className="rounded-lg object-cover" />
+                    <Image
+                      src={cloth.url}
+                      alt={cloth.name}
+                      width={100}
+                      height={100}
+                      className="rounded-lg object-cover"
+                    />
                   </div>
                   {/* 텍스트 영역 */}
                   <div className="flex-1 min-w-0">

src/components/chat/modal/ClothModal.tsx

@@ -104,14 +104,6 @@ export default function ClothModal({ product, cloth, children }: ClothModalProps
               </DialogHeader>
 
               <div className="space-y-6">
-                {/* 상품 설명 */}
-                {/* <div>
-                  <h3 className="text-2xl font-semibold mb-4">상품 설명</h3>
-                  <div className="bg-gray-50 dark:bg-gray-700 p-4 rounded-lg">
-                    <p className="text-gray-600 dark:text-gray-300 leading-relaxed">{activeCloth.description}</p>
-                  </div>
-                </div> */}
-
                 {/* 스타일 정보 */}
                 <div>
                   <h3 className="text-2xl font-semibold mb-4">스타일 정보</h3>

src/components/chat/modal/CodinationModal.tsx

@@ -41,7 +41,7 @@ export default function CodinationModal({ isOpen, onClose }: CodinationModalProp
     if (!closetCodination) {
       setClosetCodination({
         id: '',
-        fitting_image: null,
+        fitting_id: null,
         cloths: [cloth],
       });
       return;
@@ -126,7 +126,7 @@ export default function CodinationModal({ isOpen, onClose }: CodinationModalProp
                     {/* 선택 표시 */}
                     {isSelected && (
                       <div className="absolute top-2 right-2 w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center z-10">
-                        <span className=" text-xs">✓</span>
+                        <span className=" text-xs text-white">✓</span>
                       </div>
                     )}
 
@@ -157,7 +157,7 @@ export default function CodinationModal({ isOpen, onClose }: CodinationModalProp
           <button
             onClick={handleCreateCodination}
             disabled={selectedCloths.length === 0 || isCreating}
-            className="w-full sm:flex-1 px-4 py-3 bg-blue-600 rounded-lg hover:bg-blue-700 dark:hover:bg-blue-500 disabled:bg-blue-200 disabled:dark:bg-blue-800 disabled:dark:hover:bg-blue-800 disabled:cursor-not-allowed transition-colors"
+            className="w-full sm:flex-1 px-4 py-3 bg-blue-600 rounded-lg text-white hover:bg-blue-700 dark:hover:bg-blue-500  disabled:bg-blue-200 disabled:dark:bg-blue-800 disabled:dark:hover:bg-blue-800 disabled:cursor-not-allowed transition-colors"
           >
             {isCreating ? '생성 중...' : `코디 생성 (${selectedCloths.length}개)`}
           </button>

src/components/ui/icons/LucideIcon.tsx

@@ -9,15 +9,15 @@ export interface LucideIconProps extends HTMLAttributes<HTMLOrSVGElement> {
   size?: number;
 }
 
-export default function LucideIcon({ name, color = 'blue-500', size = 16, ...props }: LucideIconProps) {
+export default function LucideIcon({ name, color, size = 16, ...props }: LucideIconProps) {
   const SelectLucideIcon = icons[name];
 
   const isClickEvent = !!props.onClick;
   const pointerStyle = isClickEvent ? 'cursor-pointer' : '';
 
   return (
     <SelectLucideIcon
-      color={parseColorSet(color, props.className?.includes('dark'))}
+      color={color && parseColorSet(color, props.className?.includes('dark'))}
       size={size}
       className={cn(pointerStyle, props.className)}
       {...props}

src/hooks/useCodinationCreation.ts

@@ -32,7 +32,7 @@ export const useCodinationCreation = () => {
     const isDuplicate = codinations.some((existingCodination) =>
       isSameCodination(existingCodination, {
         id: '',
-        fitting_image: null,
+        fitting_id: null,
         cloths: closetCodination.cloths,
       }),
     );
@@ -44,7 +44,7 @@ export const useCodinationCreation = () => {
 
     const newCodination: Codination = {
       id: `codination-${Date.now()}`,
-      fitting_image: null,
+      fitting_id: null,
       cloths: [...closetCodination.cloths],
     };
 
@@ -53,7 +53,7 @@ export const useCodinationCreation = () => {
       await addCodination(newCodination);
       setClosetCodination(null);
       setPanel('codination');
-      
+
       console.log('새 코디네이션 생성됨:', newCodination);
       return true;
     } catch (error) {