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

src/frontend/apps/web/src/features/chat/model/file-data.type.ts

@@ -1,5 +1,6 @@
 export type FileData = {
   id: string;
+  name: string;
   file: File;
   preview: string;
   thumbnailUrl?: string;

src/frontend/apps/web/src/features/chat/model/file-upload.util.ts

@@ -42,6 +42,7 @@ export const handleFileChangeEvent = async (
     try {
       const fileData: FileData = {
         id: Math.random().toString(36).substring(7),
+        name: file.name,
         file,
         preview: URL.createObjectURL(file),
         type: file.type.startsWith('image/') ? 'image' : 'video',

src/frontend/apps/web/src/features/chat/model/file.utils.ts

@@ -72,3 +72,17 @@ export const generateVideoThumbnail = (file: File): Promise<string> => {
     };
   });
 };
+
+/**
+ * 파일 크기를 사람이 읽기 쉬운 형태로 포맷팅하는 함수
+ *
+ * @param bytes - 파일 크기 (바이트 단위)
+ * @returns 포맷팅된 파일 크기 문자열 (예: '1.23 MB')
+ */
+export const formatFileSize = (bytes: number) => {
+  if (bytes === 0) return '0 Bytes';
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+};

src/frontend/apps/web/src/features/chat/model/index.ts

@@ -1,3 +1,7 @@
 export type { FileData } from './file-data.type';
-export { validateFileSize, generateVideoThumbnail } from './file.utils';
+export {
+  validateFileSize,
+  generateVideoThumbnail,
+  formatFileSize,
+} from './file.utils';
 export { handleFileChangeEvent, removeFile } from './file-upload.util';

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>
+    </>
+  );
+};

src/frontend/packages/ui/.storybook/main.ts

@@ -6,7 +6,7 @@ import { join, dirname } from 'path';
  * This function is used to resolve the absolute path of a package.
  * It is needed in projects that use Yarn PnP or are set up within a monorepo.
  */
-function getAbsolutePath(value: string): any {
+function getAbsolutePath(value: string) {
   return dirname(require.resolve(join(value, 'package.json')));
 }
 const config: StorybookConfig = {

src/frontend/packages/ui/src/components/Modal/modal.stories.tsx

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Modal } from './modal';
+import { Button } from '../Button';
+import { useState } from 'react';
+
+const meta: Meta<typeof Modal> = {
+  title: 'Widget/Modal',
+  component: Modal,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['default', 'lg'],
+      description: 'Sets the size of the modal',
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes to apply',
+    },
+    asChild: {
+      control: 'boolean',
+      description: 'Whether to merge props onto child element',
+    },
+    isOpen: {
+      control: 'boolean',
+      description: 'Controls modal visibility',
+    },
+    onClose: {
+      action: 'closed',
+      description: 'Callback when modal should close',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Modal>;
+
+const ModalWithToggle = ({
+  size,
+  className,
+}: {
+  size?: 'default' | 'lg';
+  className?: string;
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="flex items-center justify-center">
+      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
+      <Modal
+        size={size}
+        className={className}
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+      >
+        <div className="p-6">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-xl font-bold">Modal Title</h2>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIsOpen(false)}
+            >
+              ✕
+            </Button>
+          </div>
+          <div className="py-4">
+            <p>
+              This is a modal component rendered with createPortal.
+              {size === 'lg' ? ' This is a large variant.' : ''}
+            </p>
+          </div>
+          <div className="flex justify-end gap-2 pt-4">
+            <Button
+              variant="outline"
+              onClick={() => setIsOpen(false)}
+            >
+              Cancel
+            </Button>
+            <Button onClick={() => setIsOpen(false)}>Confirm</Button>
+          </div>
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+// 기본 모달 Story
+export const Default: Story = {
+  render: () => <ModalWithToggle />,
+};
+
+// 큰 사이즈 모달 Story
+export const Large: Story = {
+  render: () => <ModalWithToggle size="lg" />,
+};