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

src/frontend/apps/web/src/features/chat/model/file.utils.ts → src/frontend/apps/web/src/features/chat/lib/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/lib/index.ts

@@ -0,0 +1,5 @@
+export {
+  validateFileSize,
+  generateVideoThumbnail,
+  formatFileSize,
+} from './file.utils';

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/index.ts

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

src/frontend/apps/web/src/features/chat/model/use-file-managements.ts

@@ -0,0 +1,97 @@
+import type { FileData } from './file-data.type';
+import { validateFileSize, generateVideoThumbnail } from '../lib/file.utils';
+import { useState, useEffect } from 'react';
+
+/**
+ * 파일 관리를 위한 커스텀 훅
+ * @returns {Object} 파일 관리 관련 메서드와 상태
+ * - selectedFiles: 선택된 파일 목록
+ * - handleFileChange: 파일 선택 이벤트 핸들러
+ * - handleRemoveFile: 파일 제거 메서드
+ * - setSelectedFiles: 파일 목록 설정 함수
+ */
+export const useFileManagements = () => {
+  const [selectedFiles, setSelectedFiles] = useState<FileData[]>([]);
+
+  const processFile = async (file: File): Promise<FileData | null> => {
+    if (!validateFileSize(file)) return null;
+
+    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',
+    };
+
+    if (fileData.type === 'video') {
+      try {
+        fileData.thumbnailUrl = await generateVideoThumbnail(file);
+      } catch (error) {
+        console.error('Failed to generate thumbnail:', error);
+      }
+    }
+
+    return fileData;
+  };
+
+  /**
+   * 파일 선택 이벤트 핸들러
+   * @param event - 파일 input 이벤트
+   */
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const handleFileChange = async (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    setIsLoading(true);
+    setError(null);
+
+    try {
+      const files = Array.from(event.target.files || []);
+      event.target.value = '';
+
+      const processedFiles = await Promise.all(files.map(processFile));
+
+      setSelectedFiles((prev) => [...prev, ...processedFiles.filter(Boolean)]);
+    } catch (error) {
+      setError(error as Error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    const currentFiles = selectedFiles;
+
+    return () => {
+      currentFiles.forEach((file) => {
+        URL.revokeObjectURL(file.preview);
+      });
+    };
+  }, [selectedFiles]);
+
+  /**
+   * 파일 제거 메서드
+   * @param id - 제거할 파일의 ID
+   */
+  const handleRemoveFile = (id: string) => {
+    setSelectedFiles((prev) => {
+      const fileToRemove = prev.find((file) => file.id === id);
+      if (fileToRemove) {
+        URL.revokeObjectURL(fileToRemove.preview);
+      }
+      return prev.filter((file) => file.id !== id);
+    });
+  };
+
+  return {
+    handleFileChange,
+    handleRemoveFile,
+    selectedFiles,
+    setSelectedFiles,
+    isLoading,
+    error,
+  };
+};

src/frontend/apps/web/src/features/chat/ui/chat-toggle-group.tsx

@@ -1,40 +1,55 @@
 'use client';
-import { useState, useRef } from 'react';
+import { useCallback } from 'react';
 
 import { Button } from '@workspace/ui/components';
-import { handleFileChangeEvent, removeFile } from '@/src/features/chat/model';
 
-import { FilePreviewList } from './file-preivew-list';
+import { FilePreviewList } from './file-preview-list';
 import { FileUploadTrigger } from './file-upload-trigger';
-import type { FileData } from '../model';
+import { Loader } from 'lucide-react';
+
+import { useFileManagements } from '../model';
 
 type ChatToggleGroupsProps = {
   name: string;
   onSend?: () => void;
 };
 
 const ChatToggleGroup = ({ name, onSend }: ChatToggleGroupsProps) => {
-  const [selectedFiles, setSelectedFiles] = useState<FileData[]>([]);
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    handleFileChangeEvent(event, setSelectedFiles);
-  };
-
-  const handleRemoveFile = (id: string) => {
-    removeFile(id, setSelectedFiles);
-  };
+  const {
+    selectedFiles,
+    handleFileChange,
+    handleRemoveFile,
+    isLoading,
+    error,
+  } = useFileManagements();
 
   return (
     <div className="flex flex-col justify-between gap-2">
+      {error && <div className="text-red-500">{error.message}</div>}
+
       <FilePreviewList
         selectedFiles={selectedFiles}
-        onRemoveFile={handleRemoveFile}
+        onRemoveFile={useCallback(
+          (id) => handleRemoveFile(id),
+          [handleRemoveFile],
+        )}
       />
       <div className="flex flex-row justify-between">
-        <FileUploadTrigger
-          name={name}
-          onFileChange={handleFileChange}
-        />
+        <div className="flex flex-row gap-4 items-center">
+          <FileUploadTrigger
+            name={name}
+            onFileChange={useCallback(
+              (event) => handleFileChange(event),
+              [handleFileChange],
+            )}
+          />
+          {isLoading && (
+            <Loader
+              size="20"
+              color="#000"
+            />
+          )}
+        </div>
         {onSend && (
           <Button
             onClick={onSend}

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 '../lib';
+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;