Feature: 리스트 생성 Ver3.0

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@egjs/react-grid": "^1.16.0",
+    "@hello-pangea/dnd": "^17.0.0",
     "@mui/material": "^5.15.9",
     "@next/third-parties": "^14.1.0",
     "@tanstack/react-query": "^5.17.12",
@@ -45,11 +46,10 @@
     "next": "14.0.4",
     "next-pwa": "^5.6.0",
     "open-graph": "^0.2.6",
-    "react": "^18",
+    "react": "^18.3.1",
     "react-apexcharts": "^1.4.1",
-    "react-beautiful-dnd": "^13.1.1",
     "react-cookie": "^7.0.2",
-    "react-dom": "^18",
+    "react-dom": "^18.3.1",
     "react-hook-form": "^7.50.0",
     "react-ios-pwa-prompt": "^1.8.4",
     "react-lottie": "^1.2.4",
@@ -73,9 +73,8 @@
     "@types/jest": "^29.5.11",
     "@types/node": "^20",
     "@types/open-graph": "^0.2.5",
-    "@types/react": "^18",
-    "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-dom": "^18",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "eslint": "^8",
     "eslint-config-next": "14.0.4",
     "eslint-config-prettier": "^9.1.0",

src/app/list/[listId]/_components/ListDetailInner/index.tsx

@@ -8,7 +8,7 @@ import { ListDetailType } from '@/lib/types/listType';
 import Header from '@/app/list/[listId]/_components/ListDetailInner/Header';
 import RankList from '@/app/list/[listId]/_components/ListDetailInner/RankList';
 import Footer from '@/app/list/[listId]/_components/ListDetailInner/Footer';
-import { BACKGROUND_COLOR_PALETTE_TYPE, BACKGROUND_COLOR_READ } from '@/styles/Color';
+import { BACKGROUND_COLOR_READ } from '@/styles/Color';
 
 interface OptionsProps {
   value: string;

src/app/list/[listId]/edit/page.tsx

@@ -1,45 +1,45 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import { FieldErrors, FormProvider, useForm } from 'react-hook-form';
+import { FormProvider, useForm } from 'react-hook-form';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useRouter, useParams } from 'next/navigation';
+import { useParams, useRouter } from 'next/navigation';
 
-import CreateItem from '@/app/list/create/_components/CreateItem';
-import CreateList from '@/app/list/create/_components/CreateList';
+import { ItemImagesType, ListCreateType, ListDetailType, ListEditType } from '@/lib/types/listType';
+import { CategoryType } from '@/lib/types/categoriesType';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import toasting from '@/lib/utils/toasting';
+import toastMessage from '@/lib/constants/toastMessage';
+import { useLanguage } from '@/store/useLanguage';
+import { useUser } from '@/store/useUser';
 
-import updateList from '@/app/_api/list/updateList';
 import getListDetail from '@/app/_api/list/getListDetail';
 import getCategories from '@/app/_api/category/getCategories';
-import { QUERY_KEYS } from '@/lib/constants/queryKeys';
-import { ItemImagesType, ListDetailType, ListEditType } from '@/lib/types/listType';
-import { CategoryType } from '@/lib/types/categoriesType';
-import { useUser } from '@/store/useUser';
+import updateList from '@/app/_api/list/updateList';
 
-export type FormErrors = FieldErrors<ListEditType>;
+import StepOne from '@/app/list/create/_components/StepOne';
+import StepThree from '@/app/list/create/_components/StepThree';
+import StepTwo from '@/app/list/create/_components/StepTwo';
 
 export default function EditPage() {
   const router = useRouter();
+  const { user } = useUser();
+  const { language } = useLanguage();
   const queryClient = useQueryClient();
   const param = useParams<{ listId: string }>();
-  const { user } = useUser();
-
-  const [step, setStep] = useState<'list' | 'item'>('list');
 
-  const { data: listDetailData } = useQuery<ListDetailType>({
-    queryKey: [QUERY_KEYS.getListDetail, param?.listId],
-    queryFn: () => getListDetail(Number(param?.listId)),
-  });
+  /** step 관리 */
+  const [step, setStep] = useState(1);
 
-  const { data: categories } = useQuery<CategoryType[]>({
-    queryKey: [QUERY_KEYS.getCategories],
-    queryFn: () => getCategories(),
-  });
+  const handleNext = () => setStep((prev) => prev + 1);
+  const handleBack = () => setStep((prev) => prev - 1);
 
-  const methods = useForm<ListEditType>({
+  /** React Hook Form */
+  //-- 초기세팅
+  const methods = useForm<ListCreateType>({
     mode: 'onChange',
     defaultValues: {
-      category: 'culture',
+      category: '',
       labels: [],
       collaboratorIds: [],
       title: '',
@@ -51,8 +51,49 @@ export default function EditPage() {
     },
   });
 
-  //request용 데이터 만드는 함수.
+  //--- 기존 데이터 불러오기
+  //기존 리스트 데이터
+  const { data: listDetailData } = useQuery<ListDetailType>({
+    queryKey: [QUERY_KEYS.getListDetail, param?.listId],
+    queryFn: () => getListDetail(Number(param?.listId)),
+  });
+
+  // 카테고리 목록
+  const { data: categories } = useQuery<CategoryType[]>({
+    queryKey: [QUERY_KEYS.getCategories],
+    queryFn: () => getCategories(),
+  });
 
+  //데이터 채워넣기
+  useEffect(() => {
+    if (listDetailData) {
+      methods.reset({
+        category: categories?.find((category) => category.korName === listDetailData.categoryKorName)?.engName,
+        labels: listDetailData.labels.map((obj) => obj.name),
+        collaboratorIds: listDetailData.collaborators.filter((c) => c.id !== user.id).map((c) => c.id),
+        title: listDetailData.title,
+        description: listDetailData.description,
+        isPublic: listDetailData.isPublic,
+        backgroundPalette: listDetailData.backgroundPalette,
+        backgroundColor: listDetailData.backgroundColor,
+        items: listDetailData.items.map(({ id, rank, title, comment, link, imageUrl }) => {
+          return {
+            rank: rank,
+            id: id,
+            title: title,
+            comment: comment ? comment : '',
+            link: link ? link : '',
+            imageUrl: typeof imageUrl === 'string' ? imageUrl : '',
+          };
+        }),
+      });
+    }
+
+    methods.trigger(['title']);
+  }, [listDetailData, categories, methods]);
+
+  /** Request 보내기 */
+  //--- 포맷 맞추기
   const formatData = () => {
     const originData = methods.getValues();
 
@@ -80,6 +121,7 @@ export default function EditPage() {
       }),
     };
 
+    //이미지rank,extension & 이미지파일 배열
     const imageData: ItemImagesType = {
       listId: Number(param?.listId),
       extensionRanks: originData.items
@@ -100,46 +142,16 @@ export default function EditPage() {
     return { listData, imageData, imageFileList };
   };
 
-  const handleStepChange = (step: 'list' | 'item') => {
-    setStep(step);
+  //--아이템 중복 확인
+  const getIsAllUnique = () => {
+    const allTitles = methods.getValues().items.map((item, itemIndex) => {
+      return item.title === '' ? itemIndex : item.title;
+    }); //TODO: 필요한 코드인지 다시 확인하기
+    const isAllUnique = new Set(allTitles).size === allTitles.length;
+    return isAllUnique;
   };
 
-  const handleSubmit = () => {
-    const { listData, imageData, imageFileList } = formatData();
-    const updateData = {
-      listId: Number(param?.listId) || 0,
-      listData: listData,
-      imageData: imageData,
-      imageFileList: imageFileList,
-    };
-    updateListMutation(updateData);
-  };
-
-  useEffect(() => {
-    if (listDetailData) {
-      methods.reset({
-        category: categories?.find((c) => c.korName === listDetailData.categoryKorName)?.engName || 'culture',
-        labels: listDetailData.labels.map((obj) => obj.name),
-        collaboratorIds: listDetailData.collaborators.filter((c) => c.id !== user.id).map((c) => c.id),
-        title: listDetailData.title,
-        description: listDetailData.description,
-        isPublic: listDetailData.isPublic,
-        backgroundPalette: listDetailData.backgroundPalette,
-        backgroundColor: listDetailData.backgroundColor,
-        items: listDetailData.items.map(({ id, rank, title, comment, link, imageUrl }) => {
-          return {
-            rank: rank,
-            id: id,
-            title: title,
-            comment: comment ? comment : '',
-            link: link ? link : '',
-            imageUrl: typeof imageUrl === 'string' ? imageUrl : '',
-          };
-        }),
-      });
-    }
-  }, [listDetailData, categories, methods]);
-
+  //--- 리스트 수정하기
   const {
     mutate: updateListMutation,
     isPending: isUpdatingList,
@@ -154,27 +166,34 @@ export default function EditPage() {
     },
   });
 
+  //--- 제출
+  const handleSubmit = () => {
+    if (getIsAllUnique()) {
+      const { listData, imageData, imageFileList } = formatData();
+      const updateData = {
+        listId: Number(param?.listId) || 0,
+        listData: listData,
+        imageData: imageData,
+        imageFileList: imageFileList,
+      };
+      updateListMutation(updateData);
+    } else {
+      toasting({ type: 'error', txt: toastMessage[language].duplicatedItemError });
+    }
+  };
+
   return (
-    <>
-      <FormProvider {...methods}>
-        {step === 'list' ? (
-          <CreateList
-            onNextClick={() => {
-              handleStepChange('item');
-            }}
-            type="edit"
-          />
-        ) : (
-          <CreateItem
-            onBackClick={() => {
-              handleStepChange('list');
-            }}
-            onSubmitClick={handleSubmit}
-            isSubmitting={isUpdatingList || isSuccess}
-            type="edit"
-          />
-        )}
-      </FormProvider>
-    </>
+    <FormProvider {...methods}>
+      {step === 1 && <StepOne onNextClick={handleNext} type="edit" />}
+      {step === 2 && <StepTwo onBeforeClick={handleBack} onNextClick={handleNext} type="edit" />}
+      {step === 3 && (
+        <StepThree
+          onBeforeClick={handleBack}
+          onNextClick={handleSubmit}
+          isSubmitting={isUpdatingList || isSuccess}
+          type="edit"
+        />
+      )}
+    </FormProvider>
   );
 }