Merge pull request #231 from FE9-2/feat/applicationStatus-change

Feat: 지원현황 업데이트 기능 구현, 이미지 dnd 추가 / chore: 콘솔 경고 개선, 알바폼 작성 이미지 여러개 업로드

Author: yyezzzyy

.storybook/main.ts

@@ -5,7 +5,11 @@ interface StorybookConfig extends BaseStorybookConfig {
 }
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../src/app/stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+  ],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",

package-lock.json

@@ -29,6 +29,7 @@
     "next-sitemap": "^4.2.3",
     "prettier": "^3.3.3",
     "react": "^18",
+    "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^7.5.0",
     "react-dom": "^18",
     "react-hook-form": "^7.53.0",
@@ -60,6 +61,7 @@
     "@tanstack/react-query-devtools": "^5.59.20",
     "@types/node": "^20",
     "@types/react": "^18.3.11",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18",
     "@typescript-eslint/eslint-plugin": "^8.9.0",

package.json

@@ -125,7 +125,7 @@ export default function LandingPage() {
                   height: { duration: 0.8, ease: "easeInOut" },
                 }}
               >
-                <Image src="/brand.png" alt="Brand Logo" layout="fill" objectFit="contain" />
+                <Image src="/brand.png" alt="Brand Logo" fill className="object-contain" priority />
               </motion.div>
             </motion.div>
             <AnimatePresence mode="wait">
@@ -158,6 +158,7 @@ export default function LandingPage() {
                       width={400}
                       height={300}
                       className="mb-6 object-cover"
+                      priority
                     />
                   </motion.div>
                   <motion.p

public/favicon.svg

@@ -31,36 +31,48 @@ export default function RecruitContentSection() {
   const imageUrlsData: string[] = watch("imageUrls");
 
   // 이미지 파일 change핸들러
-  const handleChangeImages = async (files: File[]) => {
-    let uploadedUrls: string[] = [];
-    //파일 선택 시 업로드 api 요청
-    try {
-      uploadedUrls = await uploadImages(files);
-    } catch (err) {
-      console.log("이미지 파일 체인지 핸들러 - 이미지 업로드 실패");
-      console.error(err);
-    }
-    // 선택한 이미지 업데이트
-    const updatedImageList =
-      uploadedUrls.map((url) => ({
+  const handleChangeImages = async (files: File[] | string[]) => {
+    // files가 File[] 타입인 경우 (새로운 이미지 업로드)
+    if (files.length > 0 && files[0] instanceof File) {
+      let uploadedUrls: string[] = [];
+      try {
+        uploadedUrls = await uploadImages(files as File[]);
+      } catch (err) {
+        console.log("이미지 파일 체인지 핸들러 - 이미지 업로드 실패");
+        console.error(err);
+      }
+
+      // 선택한 이미지 업데이트
+      const updatedImageList = uploadedUrls.map((url) => ({
         url,
         id: crypto.randomUUID(),
-      })) || [];
+      }));
 
-    // 기존 이미지 포함하기
-    const originalImageList =
-      imageUrlsData.map((url) => ({
+      // 기존 이미지 포함하기
+      const originalImageList = imageUrlsData.map((url) => ({
         url,
         id: crypto.randomUUID(),
-      })) || [];
+      }));
 
-    const allImageList = [...originalImageList, ...updatedImageList];
-    const submitImageList = [...imageUrlsData, ...uploadedUrls];
+      const allImageList = [...originalImageList, ...updatedImageList];
+      const submitImageList = [...imageUrlsData, ...uploadedUrls];
 
-    // prop으로 전달
-    setInitialImageList(allImageList);
-    // 훅폼 데이터에 세팅
-    setValue("imageUrls", submitImageList, { shouldDirty: true });
+      // prop으로 전달
+      setInitialImageList(allImageList);
+      // 훅폼 데이터에 세팅
+      setValue("imageUrls", submitImageList, { shouldDirty: true });
+    }
+    // files가 string[] 타입인 경우 (드래그 앤 드롭으로 순서 변경)
+    else {
+      const urls = files as string[];
+      const newImageList = urls.map((url) => ({
+        url,
+        id: crypto.randomUUID(),
+      }));
+
+      setInitialImageList(newImageList);
+      setValue("imageUrls", urls, { shouldDirty: true });
+    }
   };
 
   const handleDeleteImage = (url: string) => {
@@ -142,7 +154,7 @@ export default function RecruitContentSection() {
         <div className="relative">
           <ImageInput
             {...register("imageUrls")}
-            onChange={(files: File[]) => {
+            onChange={(files: File[] | string[]) => {
               handleChangeImages(files);
             }}
             onDelete={(id) => handleDeleteImage(id)}

src/app/(home)/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useFormContext, Controller } from "react-hook-form";
-import { useState, ChangeEvent, MouseEvent, useCallback } from "react";
+import { ChangeEvent, MouseEvent, useCallback } from "react";
 import { cn } from "@/lib/tailwindUtil";
 import DatePickerInput from "@/app/components/input/dateTimeDaypicker/DatePickerInput";
 import TimePickerInput from "@/app/components/input/dateTimeDaypicker/TimePickerInput";
@@ -80,6 +80,7 @@ export default function WorkConditionSection() {
       setValue("location", fullAddress);
       trigger("location");
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [setValue]
   );
 

src/app/(pages)/(workform)/addform/section/RecruitContentSection.tsx

@@ -24,7 +24,7 @@ export default function FormImage({ imageUrls, currentPage, onPageChange }: Form
             alt={`알바 이미지 ${index + 1}`}
             className="h-full w-full rounded-lg object-cover"
             priority={index === 0}
-            layout="fill"
+            fill
           />
         </div>
       ))}

src/app/(pages)/(workform)/addform/section/WorkConditionSection.tsx

@@ -5,6 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import dynamic from "next/dynamic";
 import { Toaster } from "react-hot-toast";
 import ModalLayout from "@/app/components/modal/ModalLayout";
+import MouseTrail from "./components/mouseTrail/MouseTrail";
 
 const ReactQueryDevtools = dynamic(
   () => import("@tanstack/react-query-devtools").then((mod) => mod.ReactQueryDevtools),
@@ -31,20 +32,24 @@ export default function ClientLayout({ children }: { children: React.ReactNode }
 
   return (
     <QueryClientProvider client={queryClient}>
-      {children}
-      <Toaster
-        position="top-center"
-        reverseOrder={false}
-        toastOptions={{
-          duration: 3000,
-          style: {
-            background: "#363636",
-            color: "#fff",
-          },
-        }}
-      />
-      {process.env.NODE_ENV === "development" && <ReactQueryDevtools initialIsOpen={false} />}
-      <ModalLayout />
+      <div className="relative">
+        {children}
+        <MouseTrail />
+        <Toaster
+          position="top-center"
+          reverseOrder={false}
+          toastOptions={{
+            duration: 3000,
+            style: {
+              background: "#363636",
+              color: "#fff",
+              zIndex: 10000,
+            },
+          }}
+        />
+        {process.env.NODE_ENV === "development" && <ReactQueryDevtools initialIsOpen={false} />}
+        <ModalLayout />
+      </div>
     </QueryClientProvider>
   );
 }

src/app/(pages)/(workform)/work/[formId]/components/FormImage.tsx

@@ -12,9 +12,9 @@ import DotLoadingSpinner from "@/app/components/loading-spinner/DotLoadingSpinne
 import { isValidS3Url } from "@/utils/checkS3Url";
 import { useUser } from "@/hooks/queries/user/me/useUser";
 import { userRoles } from "@/constants/userRoles";
-import EmptyImage from "./EmptyImage";
 import InfoItem from "./InfoItem";
 import { useDeleteForm } from "@/hooks/queries/form/useDeleteForm";
+import EmptyImage from "./EmptyImage";
 
 interface AlbaListItemProps extends FormListType {
   isMyForm?: boolean;
@@ -153,10 +153,13 @@ const AlbaListItem = ({
           isValidS3Url(imageUrls[0]) ? (
             <Image
               src={imageUrls[0]}
-              alt="Recruit Image"
+              alt={`${title} 이미지`}
               fill
+              sizes="(max-width: 768px) 327px, 372px"
               className="object-cover transition-opacity duration-300"
               onError={() => setImageError(true)}
+              priority
+              quality={75}
             />
           ) : (
             <EmptyImage />