Refactor/upload image

.dockerignore

@@ -1,6 +1,8 @@
 node_modules
 npm-debug.log
-.DS_Store
+Dockerfile
+.dockerignore
 .git
 .gitignore
-*.log
+.env
+.env.production

package.json

@@ -22,6 +22,9 @@
     ]
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@hookform/resolvers": "^3.9.0",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",

public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.6.6'
-const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
+const PACKAGE_VERSION = '2.6.8'
+const INTEGRITY_CHECKSUM = '00729d72e3b82faf54ca8b9621dbb96f'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -199,7 +199,19 @@ async function getResponse(event, client, requestId) {
     // Remove the "accept" header value that marked this request as passthrough.
     // This prevents request alteration and also keeps it compliant with the
     // user-defined CORS policies.
-    headers.delete('accept', 'msw/passthrough')
+    const acceptHeader = headers.get('accept')
+    if (acceptHeader) {
+      const values = acceptHeader.split(',').map((value) => value.trim())
+      const filteredValues = values.filter(
+        (value) => value !== 'msw/passthrough',
+      )
+
+      if (filteredValues.length > 0) {
+        headers.set('accept', filteredValues.join(', '))
+      } else {
+        headers.delete('accept')
+      }
+    }
 
     return fetch(requestClone, { headers })
   }

src/app/layout/ui/Navigation.tsx

@@ -37,16 +37,18 @@ export const Navigation = ({ active }: { active: string }) => {
   ) : 0
 
   return (
-    <nav className='flex items-center h-full -mx-[22.5px]'>
-      {Object.entries(NAV_ICONS).map(([name, value]) => (
-        <NavigationItem
-          key={name}
-          name={name}
-          active={active === name}
-          path={value.path}
-          unreadNotificationsCount={unreadNotificationsCount}
-        />
-      ))}
+    <nav className="flex items-center h-full -mx-[22.5px]" aria-label="main navigation">
+      <ul className='flex w-full' role='menu'>
+        {Object.entries(NAV_ICONS).map(([name, value]) => (
+          <NavigationItem
+            key={name}
+            name={name}
+            active={active === name}
+            path={value.path}
+            unreadNotificationsCount={unreadNotificationsCount}
+          />
+        ))}
+      </ul>
     </nav>
   );
 };

src/app/main.tsx

@@ -1,7 +1,7 @@
 import './index.css';
 
 import { storeLogin } from '@/features/auth/model/authSlice';
-import ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { Toaster } from 'sonner';
 import App from './App';
@@ -35,7 +35,8 @@ async function setupMocks(): Promise<void> {
 
   await setupMocks()
 
-  ReactDOM.createRoot(document.getElementById('root')!).render(
+  const root = createRoot(document.getElementById('root')!)
+  root.render(
     <ReactQueryProvider>
       <Provider store={store}>
         <App />

src/features/register/api/index.ts

@@ -1,2 +1,3 @@
 export { getAuctionUploadURLs } from './getAuctionUploadURLs';
 export { postAuction } from './postAuction';
+export { uploadImagesToS3 } from './uploadImagesToS3';

src/features/register/index.ts

@@ -3,3 +3,4 @@ export * from './config';
 export * from './lib';
 export * from './model';
 export * from './ui';
+export * from './utils';

src/features/register/lib/imageCompressionWorker.ts

@@ -0,0 +1,47 @@
+/// <reference lib="webworker" />
+
+import { toast } from 'sonner';
+
+interface WorkerMessage {
+  fileData: ArrayBuffer;
+  fileName: string;
+}
+
+self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
+  const { fileData, fileName } = e.data;
+
+  try {
+    const blob = new Blob([fileData]);
+    const imageBitmap = await createImageBitmap(blob);
+
+    const maxWidth = imageBitmap.width > 750 ? 750 : imageBitmap.width;
+    const scale = maxWidth / imageBitmap.width;
+    const targetWidth = maxWidth;
+    const targetHeight = imageBitmap.height * scale;
+
+    const offscreen = new OffscreenCanvas(targetWidth, targetHeight);
+    const ctx = offscreen.getContext('2d');
+
+    if (!ctx) {
+      toast.error('이미지 업로드에 실패했습니다.');
+      return;
+    }
+
+    ctx.drawImage(imageBitmap, 0, 0, targetWidth, targetHeight);
+
+    // quality 설정
+    const quality = 0.9;
+    const webpBlob = await offscreen.convertToBlob({
+      type: 'image/webp',
+      quality,
+    });
+
+    // 변환된 Blob을 메인 스레드로 전송
+    // (메인 스레드에서 File로 감싸 최종 반환)
+    const arrayBuffer = await webpBlob.arrayBuffer();
+    self.postMessage({ arrayBuffer, fileName }, [arrayBuffer]);
+  } catch (error) {
+    // 에러 발생 시 메인 스레드에 알림
+    self.postMessage({ error: (error as Error).message });
+  }
+};

src/features/register/lib/index.ts

@@ -1,4 +1,3 @@
-export { dataURLtoFile } from './dataURLToFile';
 export { useDragAndDrop } from './useDragAndDrop';
 export { useEditableNumberInput } from './useEditableNumberInput';
 export { useImageUploader } from './useImageUploader';

src/features/register/lib/useDragAndDrop.ts

@@ -1,43 +1,38 @@
-import { DragEvent, useState } from 'react';
+import { DragEndEvent, DragStartEvent, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
 
-export const useDragAndDrop = (
-  state: string[],
-  setState: (images: string[]) => void,
-) => {
-  const [draggedIndex, setDraggedIndex] = useState<number | null>(null);
-  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+import { arrayMove } from '@dnd-kit/sortable';
+import { useState } from 'react';
 
-  const handleDragStart = (index: number) => {
-    setDraggedIndex(index);
-  };
+export const useDragAndDrop = (state: string[], setState: (state: string[]) => void) => {
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  // 센서 정의, PointerSensor는 마우스, 터치, 펜 이벤트를 모두 커버
+  const sensors = useSensors(useSensor(PointerSensor));
 
-  const handleDragOver = (e: DragEvent<HTMLDivElement>, index: number) => {
-    e.preventDefault();
-    setHoveredIndex(index);
+  const handleDragStart = (event: DragStartEvent) => {
+    setActiveId(event.active.id as string);
   };
 
-  const handleDragLeave = () => {
-    setHoveredIndex(null);
+  const handleDragCancel = () => {
+    setActiveId(null);
   };
 
-  const handleDrop = (index: number) => {
-    if (draggedIndex !== null && draggedIndex !== index) {
-      const newImages = [...state];
-      [newImages[index], newImages[draggedIndex]] = [
-        newImages[draggedIndex],
-        newImages[index],
-      ];
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = state.indexOf(active.id as string);
+      const newIndex = state.indexOf(over.id as string);
+      const newImages = arrayMove(state, oldIndex, newIndex);
       setState(newImages);
     }
-    setDraggedIndex(null);
-    setHoveredIndex(null);
-  };
 
+    setActiveId(null);
+  };
   return {
+    activeId,
+    sensors,
     handleDragStart,
-    handleDragLeave,
-    handleDragOver,
-    handleDrop,
-    hoveredIndex,
+    handleDragCancel,
+    handleDragEnd,
   };
 };

src/features/register/lib/useImageUploader.ts

@@ -1,16 +1,37 @@
-import { ChangeEvent, useRef } from 'react';
+import { ChangeEvent, useRef, useState } from 'react';
 import { compressAndConvertToWebP, convertFileToDataURL } from '../utils';
 
 import { toast } from 'sonner';
 
 export const useImageUploader = (state: string[], setState: (images: string[]) => void) => {
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const [progress, setProgress] = useState(0);
+  const [isReading, setIsReading] = useState(false);
+  const [_completedCount, setCompletedCount] = useState(0);
 
   const addImages = async (newFiles: File[]) => {
-    const compressedFiles = await Promise.all(newFiles.map((file) => compressAndConvertToWebP(file)));
-    const compressedImages = await Promise.all(compressedFiles.map((file) => convertFileToDataURL(file)));
+    setProgress(0);
+    setIsReading(true);
+    setCompletedCount(0);
+    const totalFiles = newFiles.length;
 
-    setState(Array.from(new Set([...state, ...compressedImages])));
+    const compressedAllFiles = await Promise.all(
+      newFiles.map(async (file) => {
+        const compressed = await compressAndConvertToWebP(file);
+        const dataUrl = await convertFileToDataURL(compressed);
+
+        setCompletedCount((prev) => {
+          const newCompletedCount = prev + 1;
+          setProgress(Math.round((newCompletedCount / totalFiles) * 100));
+          return newCompletedCount;
+        });
+
+        return dataUrl;
+      })
+    );
+    setState(Array.from(new Set([...state, ...compressedAllFiles])));
+    setProgress(100);
+    setIsReading(false);
   };
 
   const handleImage = (e: ChangeEvent<HTMLInputElement>) => {
@@ -41,5 +62,7 @@ export const useImageUploader = (state: string[], setState: (images: string[]) =
     deleteImage,
     handleImage,
     handleBoxClick,
+    progress,
+    isReading,
   };
 };

src/features/register/ui/AddImageButton.tsx

@@ -1,30 +1,39 @@
+import { ProgressCircle } from '@/shared';
 import { AiOutlinePlus } from 'react-icons/ai';
 
 interface AddImageButtonProps {
   handleBoxClick: () => void;
   length: number;
+  progress: number
+  isReading: boolean
 }
 
-export const AddImageButton = ({ handleBoxClick, length }: AddImageButtonProps) => {
+export const AddImageButton = ({ handleBoxClick, length, progress, isReading }: AddImageButtonProps) => {
   return (
     <button
       type="button"
       className="flex items-center justify-center w-full h-32 border-2 rounded cursor-pointer web:w-32"
       onClick={handleBoxClick}
       aria-label="사진 추가 박스 버튼"
     >
-      <div className="flex flex-col items-center justify-center gap-2">
-        <AiOutlinePlus
-          aria-label="plus icon"
-          className=" text-gray2 text-heading2 web:text-heading3"
-        />
-        <div className="text-body1 web:text-[.75rem] flex">
-          <p aria-label="현재 사진 숫자" className="text-cheeseYellow">
-            {length}
-          </p>
-          /5
-        </div>
-      </div>
+      {
+        isReading
+          ?
+          <ProgressCircle progress={progress} />
+          :
+          <div className="flex flex-col items-center justify-center gap-2">
+            <AiOutlinePlus
+              aria-label="plus icon"
+              className=" text-gray2 text-heading2 web:text-heading3"
+            />
+            <div className="text-body1 web:text-[.75rem] flex">
+              <p aria-label="현재 사진 숫자" className="text-cheeseYellow">
+                {length}
+              </p>
+              /5
+            </div>
+          </div>
+      }
     </button>
   );
 };

src/features/register/ui/ImageItem.tsx

@@ -0,0 +1,49 @@
+import { CSS } from "@dnd-kit/utilities";
+import { CarouselItem } from "@/shared";
+import DeleteIcon from '@/shared/assets/icons/delete.svg';
+import { useSortable } from '@dnd-kit/sortable';
+
+interface ImageItemProps {
+  image: string;
+  index: number;
+  deleteImage: (index: number) => void;
+}
+
+export const ImageItem = ({ image, index, deleteImage }: ImageItemProps) => {
+  // 이 아이템이 정렬 가능한 항목임을 선언
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: image })
+
+  // dnd kit가 계산한 좌표값을 DOM에 적용해 실제 아이템이 마우스를 따라 움직이게 한다.
+  const style = {
+    transform: CSS.Translate.toString(transform),
+    transition,
+    cursor: "grab",
+  };
+
+  return (
+    <CarouselItem className='pr-2 basis-1/2 image:basis-1/3' key={image}>
+      <div
+        className='relative flex items-center justify-center h-32 mx-3 duration-200'
+        ref={setNodeRef}
+        style={style}
+        {...attributes}
+
+      >
+        <img src={image} alt={`상품 사진 ${index}`} {...listeners} className='relative object-cover w-full h-full' />
+        {index === 0 && (
+          <p className='absolute text-[8px] web:text-xs rounded py-1 px-2 text-white bg-[#454545]/90 top-2 left-1/2 transform -translate-x-1/2'>
+            대표 사진
+          </p>
+        )}
+        <button
+          type="button"
+          className='absolute top-[-5%] right-[-5%] cursor-pointer text-black size-6'
+          onClick={() => deleteImage(index)}
+          aria-label={`사진 삭제 ${index}`}
+        >
+          <img src={DeleteIcon} alt='사진 삭제 버튼' />
+        </button>
+      </div>
+    </CarouselItem >
+  );
+}