Merge pull request #23 from SWMTheFirstTake/dev

MindulMendul · web-flow · commit 33995648fbb7 · 2025-07-16T18:31:43.000+09:00
오른쪽 사진 패널 기능 강화
diff --git a/app/chat/page.tsx b/app/chat/page.tsx
@@ -8,15 +8,18 @@ import ChatSubmit from '@/components/ChatSubmit';
 import ChatArea from '@/components/ChatArea';
 import { useChat } from '@/hooks/useChat';
 import { useChatRooms } from '@/hooks/useChatRoom';
-import ImageDetailPanel from '@/components/ImageDetailPanel';
+import ImagePanel from '@/components/ImagePanel';
 
 export default function Chat() {
   const [inputValue, setInputValue] = useState<string>('');
   const [inputImage, setInputImage] = useState<MessageImage | undefined>(undefined);
   const [currentChatId, setCurrentChatId] = useState<number | null>(null);
   const [isAIResponding, setIsAIResponding] = useState<boolean>(false);
   const [hasUserSentMessage, setHasUserSentMessage] = useState<boolean>(false);
-  const [selectedImage, setSelectedImage] = useState<MessageImage | null>(null);
+  const [openTabs, setOpenTabs] = useState<MessageImage[]>([]);
+  const [activeTabId, setActiveTabId] = useState<string | null>(null);
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
 
   /** chat state 관리하는 hook */
   const { messages, examples, isLoading: isChatLoading, sendMessage, addMessageToCache } = useChat(currentChatId);
@@ -30,6 +33,12 @@ export default function Chat() {
     }
   }, [messages, hasUserSentMessage]);
 
+  useEffect(() => {
+    if (isSidebarOpen) {
+      setIsPanelOpen(false);
+    }
+  }, [isSidebarOpen]);
+
   const sendMsg = useCallback(
     (inputValue: string, inputImage?: MessageImage) => {
       const userMessage: Message = {
@@ -89,6 +98,32 @@ export default function Chat() {
     setInputImage(undefined);
   };
 
+  const handleOpenTab = (newImageData: MessageImage) => {
+    const isAlreadyOpen = openTabs.some((tab) => tab.src === newImageData.src);
+    if (!isAlreadyOpen) {
+      setOpenTabs((prevTabs) => [...prevTabs, newImageData]);
+    }
+    setActiveTabId(newImageData.src);
+    setIsPanelOpen(true); // 이미지 클릭 시 패널 열기
+  };
+
+  // 3. 탭을 닫는 함수
+  const handleCloseTab = (tabSrcToClose: string) => {
+    const remainingTabs = openTabs.filter((tab) => tab.src !== tabSrcToClose);
+    setOpenTabs(remainingTabs);
+    if (activeTabId === tabSrcToClose) {
+      if (remainingTabs.length > 0) {
+        setActiveTabId(remainingTabs[remainingTabs.length - 1].src);
+      } else {
+        setActiveTabId(null);
+      }
+    }
+  };
+
+  const handleTogglePanel = () => {
+    setIsPanelOpen(!isPanelOpen);
+  };
+
   return (
     <div className="flex min-h-screen w-full relative">
       <div className="hidden lg:block">
@@ -106,6 +141,9 @@ export default function Chat() {
             onChatSelect={handleChatSelect}
             onNewChat={handleNewChat}
             chatRooms={chatRooms}
+            isSidebarOpen={isSidebarOpen}
+            setIsSidebarOpen={setIsSidebarOpen}
+            setIsPanelOpen={setIsPanelOpen}
           />
           <div className="flex-1 min-h-0">
             <ChatArea
@@ -115,7 +153,7 @@ export default function Chat() {
               isAIResponding={isAIResponding && hasUserSentMessage}
               examples={examples}
               onExampleSelect={handleExampleSelect}
-              setSelectedImage={setSelectedImage}
+              setSelectedImage={handleOpenTab}
             />
           </div>
           <ChatSubmit
@@ -127,18 +165,14 @@ export default function Chat() {
           />
         </div>
       </SidebarInset>
-      <div className="flex h-[100vh] overflow-hidden">
-        <div className="hidden lg:block h-full">
-          <div
-            className={`h-full ${selectedImage ? 'w-96' : 'w-0'} bg-beige border-l border-gray-200 transition-all duration-500 ease-in-out
-              ${selectedImage ? 'translate-x-0 opacity-100' : 'translate-x-full opacity-0 pointer-events-none'}
-            `}
-            style={{ minWidth: 0 }}
-          >
-            {selectedImage && <ImageDetailPanel imageData={selectedImage} onClose={() => setSelectedImage(null)} />}
-          </div>
-        </div>
-      </div>
+      <ImagePanel
+        isOpen={isPanelOpen}
+        onToggle={handleTogglePanel}
+        openTabs={openTabs}
+        activeTabId={activeTabId}
+        onTabSelect={setActiveTabId}
+        onTabClose={handleCloseTab}
+      />
     </div>
   );
 }
diff --git a/src/components/ChatArea.tsx b/src/components/ChatArea.tsx
@@ -20,7 +20,7 @@ export default function ChatArea({
   isAIResponding?: boolean;
   examples: string[];
   onExampleSelect?: (text: string) => void;
-  setSelectedImage: (img: MessageImage | null) => void;
+  setSelectedImage: Function;
 }) {
   const scrollAreaRef = useRef<HTMLDivElement>(null);
 
diff --git a/src/components/ChatHeader.tsx b/src/components/ChatHeader.tsx
@@ -6,32 +6,53 @@ interface AppSidebarProps {
   currentChatId: number | null;
   onChatSelect: (chatId: number) => void;
   onNewChat: () => void;
+  isSidebarOpen?: boolean;
+  setIsSidebarOpen: (open: boolean) => void;
+  setIsPanelOpen?: (open: boolean) => void;
 }
 
-export default function ChatHeader({ chatRooms, currentChatId, onChatSelect, onNewChat }: AppSidebarProps) {
+export default function ChatHeader({
+  chatRooms,
+  currentChatId,
+  onChatSelect,
+  onNewChat,
+  isSidebarOpen,
+  setIsSidebarOpen,
+}: AppSidebarProps) {
   return (
     <div className="flex items-center justify-between px-4 py-6 mx-16 md:mx-auto w-[calc(100vw-68px)] lg:w-full bg-white">
       <div className="flex items-center gap-2">
-        {/* 모바일: 햄버거 버튼 + 체크박스 해킹 */}
-        <input type="checkbox" id="sidebar-mobile-toggle" className="hidden peer" />
-        <label htmlFor="sidebar-mobile-toggle" className="fixed top-4 left-4 z-50 lg:hidden p-2 cursor-pointer">
+        {/* 모바일: 햄버거 버튼 */}
+        <button className="fixed top-4 left-4 z-50 lg:hidden p-2 cursor-pointer" onClick={() => setIsSidebarOpen(true)}>
           <Menu className="w-6 h-6 text-blue" />
-        </label>
-        {/* 모바일 오버레이 */}
-        <label
-          htmlFor="sidebar-mobile-toggle"
-          className="fixed inset-0 z-40 bg-black opacity-40 transition-opacity duration-200 hidden peer-checked:block lg:hidden"
-        />
-        {/* 모바일 사이드바 */}
-        <aside className="fixed top-0 left-0 h-full w-[80%] max-w-full z-50 bg-beige shadow-lg transform transition-transform duration-300 -translate-x-full peer-checked:translate-x-0 lg:hidden">
-          <SidebarContent
-            chatRooms={chatRooms}
-            currentChatId={currentChatId}
-            onChatSelect={onChatSelect}
-            onNewChat={onNewChat}
-            className="py-6"
-          />
-        </aside>
+        </button>
+        {/* 모바일 오버레이 및 사이드바 */}
+        {isSidebarOpen && (
+          <>
+            <div
+              className="fixed inset-0 z-[500] bg-black opacity-40 transition-opacity duration-200 lg:hidden"
+              onClick={() => setIsSidebarOpen(false)}
+            />
+            <aside className="fixed top-0 left-0 h-full w-[80%] max-w-full z-[500] bg-beige shadow-lg transform transition-transform duration-300 lg:hidden">
+              <div className="flex items-center w-full h-20">
+                <button
+                  type="button"
+                  className="p-6 cursor-pointer flex items-center justify-center"
+                  onClick={() => setIsSidebarOpen(false)}
+                >
+                  <Menu className="w-8 h-8 text-blue" />
+                </button>
+              </div>
+              <SidebarContent
+                chatRooms={chatRooms}
+                currentChatId={currentChatId}
+                onChatSelect={onChatSelect}
+                onNewChat={onNewChat}
+                className="py-6"
+              />
+            </aside>
+          </>
+        )}
         <span className="font-bold text-3xl text-blue">The First Take {currentChatId?.toString() || ''}</span>
       </div>
       <div className="w-9 h-9 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 font-bold text-lg">
diff --git a/src/components/ImageDetailPanel.tsx b/src/components/ImageDetailPanel.tsx
@@ -21,9 +21,6 @@ export default function ImageDetailPanel({
       {/* 헤더 */}
       <div className="flex justify-between items-center p-4 border-b border-gray-200 dark:border-gray-700">
         <h2 className="text-lg font-semibold text-gray-800 dark:text-white">패션 아이템 상세 정보</h2>
-        <button onClick={onClose} className="p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors">
-          <X className="w-4 h-4 text-gray-500 dark:text-gray-400" />
-        </button>
       </div>
 
       {/* 내용 */}
diff --git a/src/components/ImagePanel.tsx b/src/components/ImagePanel.tsx
@@ -0,0 +1,71 @@
+// components/ImagePanel.tsx
+
+import Image from 'next/image';
+import ImageDetailPanel from '@/components/ImageDetailPanel';
+import { ChevronLeft } from 'lucide-react';
+
+export default function ImagePanel({
+  isOpen,
+  onToggle, // 패널을 여닫는 함수
+  openTabs,
+  activeTabId,
+  onTabSelect,
+  onTabClose,
+}: {
+  isOpen: boolean;
+  onToggle: () => void;
+  openTabs: any[];
+  activeTabId: string | null;
+  onTabSelect: (id: string) => void;
+  onTabClose: (id: string) => void;
+}) {
+  const activeTabData = openTabs.find((tab) => tab.src === activeTabId);
+
+  return (
+    <div
+      className={`fixed top-0 right-0 h-full bg-beige border-l border-gray-200 shadow-xl z-40 
+                 flex flex-row transition-transform duration-500 ease-in-out
+                 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}
+    >
+      <button
+        onClick={onToggle}
+        className="absolute top-36 -translate-y-1/2 left-0 h-36 -translate-x-full z-20 bg-beige p-2 rounded-l-lg border border-gray-200 hover:bg-gray-100 transition-colors"
+        title={isOpen ? '패널 닫기' : '패널 열기'}
+      >
+        <ChevronLeft size={20} className={`transition-transform duration-300 ${isOpen ? 'rotate-180' : 'rotate-0'}`} />
+      </button>
+      {/* 왼쪽: 세로 탭 바 (1/3) */}
+      <div className="h-full w-28 border-r border-gray-200 bg-beige flex flex-col items-center gap-2 overflow-y-auto p-2">
+        {openTabs.map((tab) => (
+          <button
+            key={tab.src}
+            onClick={() => onTabSelect(tab.src)}
+            className={`relative overflow-hidden flex-shrink-0 
+                       transition-all duration-200
+                       ${activeTabId === tab.src ? 'ring-2 ring-blue-500 ring-offset-2' : 'hover:opacity-80'}`}
+          >
+            <Image src={tab.src} alt={tab.name} width={64} height={64} className="h-32 w-28 object-cover" />
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onTabClose(tab.src);
+              }}
+              className="absolute top-0 right-0 m-1 w-5 h-5 bg-black/50 text-white text-xs rounded-full flex items-center justify-center hover:bg-red-500"
+              title="탭 닫기"
+            >
+              ×
+            </button>
+          </button>
+        ))}
+      </div>
+      {/* 오른쪽: 상세 이미지 영역 (2/3) */}
+      <div className="flex-1 w-96 h-full overflow-y-auto">
+        {activeTabData ? (
+          <ImageDetailPanel imageData={activeTabData} onClose={() => onTabClose(activeTabData.src)} />
+        ) : (
+          <div className="p-8 text-center text-gray-500">선택된 이미지가 없습니다.</div>
+        )}
+      </div>
+    </div>
+  );
+}
