모달창 구현하기 & util Function vs Custom hooks에 대한 고뇌

src/frontend/apps/web/src/features/chat/ui/file-modal.tsx

@@ -0,0 +1,90 @@
+import { Button } from '@workspace/ui/components';
+import { Modal } from '@workspace/ui/components/Modal/modal';
+import { FileData } from '../model';
+import { formatFileSize } from '../model';
+import Image from 'next/image';
+
+type FileModalProps = {
+  isOpen: boolean;
+  setIsOpen: (isOpen: boolean) => void;
+  size?: 'default' | 'lg';
+  className?: string;
+  fileData: FileData;
+};
+
+const FileModal = ({
+  isOpen,
+  setIsOpen,
+  size,
+  className,
+  fileData,
+}: FileModalProps) => {
+  return (
+    <Modal
+      size={size}
+      className={className}
+      isOpen={isOpen}
+      onClose={() => setIsOpen(false)}
+    >
+      <div className="p-6">
+        {/* 헤더 */}
+        <div className="flex justify-between items-center mb-6">
+          <div className="flex items-center gap-3">
+            <span className="p-2 bg-gray-100 rounded-lg">
+              {fileData.type === 'image' ? '🖼️' : '🎥'}
+            </span>
+            <div>
+              <h2 className="text-lg font-bold text-gray-800">
+                {fileData.name}
+              </h2>
+              <p className="text-sm text-gray-500">
+                {fileData.type === 'image' ? 'Image' : 'Video'} •{' '}
+                {formatFileSize(fileData.file.size)}
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* 컨텐츠 영역 */}
+        <div className="rounded-xl overflow-hidden bg-gray-50">
+          {fileData.type === 'image' ? (
+            <div className="relative w-full h-[40vh]">
+              <Image
+                src={fileData.preview}
+                alt={fileData.name}
+                fill
+                className="object-contain"
+                sizes="(max-width: 768px) 100vw, 80vw"
+              />
+            </div>
+          ) : (
+            <div className="relative w-full h-[40vh] bg-black">
+              <video
+                src={fileData.preview}
+                className="w-full h-full"
+                controls
+                autoPlay
+                controlsList="nodownload"
+                poster={fileData.thumbnailUrl}
+              >
+                Your browser does not support the video tag.
+              </video>
+            </div>
+          )}
+        </div>
+
+        {/* 푸터 */}
+        <div className="flex justify-end gap-2 mt-6">
+          <Button
+            variant="default"
+            onClick={() => setIsOpen(false)}
+          >
+            Close
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+};
+
+export default FileModal;

src/frontend/apps/web/src/features/chat/ui/file-preview-image.tsx

@@ -0,0 +1,19 @@
+import Image from 'next/image';
+
+export const ImagePreivew = ({
+  preview,
+  onClick,
+}: {
+  preview: string;
+  onClick: () => void;
+}) => {
+  return (
+    <Image
+      src={preview}
+      alt="Preview"
+      fill
+      className="object-cover"
+      onClick={onClick}
+    />
+  );
+};

src/frontend/apps/web/src/features/chat/ui/file-preview-item.tsx

@@ -1,6 +1,10 @@
 'use client';
+import { useState } from 'react';
+
+import { ImagePreivew } from './file-preview-image';
+import { VideoPreview } from './file-preview-video';
+import FileModal from './file-modal';
 
-import Image from 'next/image';
 import type { FileData } from '../model';
 
 type FilePreviewItemProps = {
@@ -12,31 +16,40 @@ export const FilePreviewItem = ({
   fileData,
   onRemove,
 }: FilePreviewItemProps) => {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
   return (
     <div className="relative group flex-shrink-0">
       <div className="w-20 h-20 rounded-lg relative">
         {fileData.type === 'image' ? (
-          <Image
-            src={fileData.preview}
-            alt="Preview"
-            fill
-            className="object-cover"
+          <ImagePreivew
+            preview={fileData.preview}
+            onClick={() => setIsModalOpen(true)}
           />
         ) : (
-          <Image
-            src={fileData.thumbnailUrl || ''}
-            alt="Video thumbnail"
-            fill
-            className="object-cover"
+          <VideoPreview
+            thumbnailUrl={fileData.thumbnailUrl}
+            onClick={() => setIsModalOpen(true)}
           />
         )}
         <button
-          onClick={() => onRemove(fileData.id)}
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove(fileData.id);
+          }}
           className="absolute top-1 right-1 bg-red-500 text-white rounded-full w-5 h-5 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
         >
           ×
         </button>
       </div>
+      {isModalOpen && (
+        <FileModal
+          isOpen={isModalOpen}
+          setIsOpen={setIsModalOpen}
+          size="default"
+          fileData={fileData}
+        />
+      )}
     </div>
   );
 };

src/frontend/apps/web/src/features/chat/ui/file-preview-video.tsx

@@ -0,0 +1,24 @@
+import Image from 'next/image';
+
+export const VideoPreview = ({
+  thumbnailUrl,
+  onClick,
+}: {
+  thumbnailUrl: string;
+  onClick: () => void;
+}) => {
+  return (
+    <>
+      <Image
+        src={thumbnailUrl}
+        alt="Video thumbnail"
+        fill
+        className="object-cover"
+        onClick={onClick}
+      />
+      <div className="absolute bottom-1 right-1 bg-black/60 text-white text-xs px-1 rounded">
+        ▶
+      </div>
+    </>
+  );
+};