Feature: 리스트 생성 Ver3.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/create/_components/item/ImagePreview.tsx → src/app/list/_create/_components/item/ImagePreview.tsx

@@ -5,7 +5,7 @@ import ClearBlackIcon from '/public/icons/clear_x_black.svg';
 import * as styles from './Preview.css';
 import fileToBase64 from '@/lib/utils/fileToBase64';
 import { useLanguage } from '@/store/useLanguage';
-import { itemLocale } from '@/app/list/create/locale';
+import { listLocale } from '@/app/list/create/locale';
 
 type ImagePreviewProps = {
   handleClearButtonClick: () => void;
@@ -39,12 +39,12 @@ export default function ImagePreview({ handleClearButtonClick, image }: ImagePre
         <Image
           className={styles.previewImage}
           src={preview || '/icons/attach_image.svg'}
-          alt={itemLocale[language].imageAlt}
+          alt={listLocale[language].imageAlt}
           fill
         />
       )}
       <button className={styles.clearButton} onClick={handleClearClick}>
-        <ClearBlackIcon alt={itemLocale[language].deleteLinkAlt} />
+        <ClearBlackIcon alt={listLocale[language].deleteLinkAlt} />
       </button>
     </div>
   );

src/app/list/_create/locale.ts

@@ -0,0 +1,99 @@
+export const itemLocale = {
+  ko: {
+    addItem: '아이템 추가',
+    backIconAlt: '뒤로가기 버튼',
+    createList: '리스트 생성',
+    editList: '리스트 수정',
+    complete: '완료',
+    imageAlt: '첨부 이미지',
+    deleteLinkAlt: '링크 삭제 버튼',
+    dragAndDrop: '드래그앤드롭',
+    deleteItem: '아이템 삭제',
+    rank: '위',
+    addLink: '링크 추가',
+    confirm: '확인',
+    itemCreateMessage1: '최소 3개, 최대 10개까지 아이템을 추가할 수 있어요.',
+    itemCreateMessage2: '아이템의 순서대로 순위가 정해져요.',
+  },
+  en: {
+    addItem: 'Add Item',
+    backIconAlt: 'Back button',
+    createList: 'Create list',
+    editList: 'Edit list',
+    complete: 'Complete',
+    imageAlt: 'Attached image',
+    deleteLinkAlt: 'Delete link button',
+    dragAndDrop: 'Drag and drop',
+    deleteItem: 'Delete item',
+    rank: 'No.',
+    addLink: 'Add link',
+    confirm: 'Confirm',
+    itemCreateMessage1: 'You can add a minimum of 3 and a maximum of 10 items.',
+    itemCreateMessage2: 'The ranking is determined in the order of the items.',
+  },
+};
+
+export const listLocale = {
+  ko: {
+    closeButtonAlt: '닫기버튼',
+    createList: '리스트 생성',
+    editList: '리스트 수정',
+    next: '다음',
+    noData: '검색결과가 없어요.',
+    public: '공개',
+    private: '비공개',
+    title: '타이틀',
+    description: '소개',
+    category: '카테고리',
+    label: '라벨',
+    addCollaborator: '콜라보레이터 추가',
+    addCollaboratorError: '콜라보레이터는 최대 20명까지 지정할 수 있어요.',
+    backgroundcolor: '배경 색상',
+    publicSetting: '공개 설정',
+    publicMessage: '모든 사람이 이 리스트를 볼 수 있어요.',
+    privateMessage: '이 리스트는 나만 볼 수 있어요.',
+  },
+  en: {
+    closeButtonAlt: 'Close button',
+    createList: 'Create list',
+    editList: 'Edit list',
+    next: 'Next',
+    noData: 'There are no search results.',
+    public: 'Public',
+    private: 'Private',
+    title: 'Title',
+    description: 'Introduction',
+    category: 'Category',
+    label: 'Label',
+    addCollaborator: 'Add collaborator',
+    addCollaboratorError: 'You can designate up to 20 collaborators.',
+    backgroundcolor: 'Background color',
+    publicSetting: 'Public Settings',
+    publicMessage: 'Everyone can see this list.',
+    privateMessage: 'Only I can see this list.',
+  },
+};
+
+type PaletteLocale = {
+  ko: {
+    [key: string]: string;
+  };
+  en: {
+    [key: string]: string;
+  };
+};
+
+export const paletteLocale: PaletteLocale = {
+  ko: {
+    PASTEL: '파스텔',
+    VIVID: '비비드',
+    GRAY: '그레이',
+    LISTY: '리스티',
+  },
+  en: {
+    PASTEL: 'Pastel',
+    VIVID: 'Vivid',
+    GRAY: 'Gray',
+    LISTY: 'Listy',
+  },
+};

src/app/list/_create/page.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { useState } from 'react';
+import { FieldErrors, FormProvider, useForm } from 'react-hook-form';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useRouter } from 'next/navigation';
+
+import CreateItem from '@/app/list/create/_components/CreateItem';
+import CreateList from '@/app/list/create/_components/CreateList';
+import { ItemImagesType, ListCreateType } from '@/lib/types/listType';
+import toasting from '@/lib/utils/toasting';
+import toastMessage from '@/lib/constants/toastMessage';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import createList from '@/app/_api/list/createList';
+import uploadItemImages from '@/app/_api/list/uploadItemImages';
+import { useLanguage } from '@/store/useLanguage';
+import { useUser } from '@/store/useUser';
+
+export type FormErrors = FieldErrors<ListCreateType>;
+
+export default function CreatePage() {
+  const { language } = useLanguage();
+  const { user: userMeData } = useUser();
+  const queryClient = useQueryClient();
+  const [step, setStep] = useState<'list' | 'item'>('list');
+  const router = useRouter();
+
+  const methods = useForm<ListCreateType>({
+    mode: 'onChange',
+    defaultValues: {
+      category: 'culture',
+      labels: [],
+      collaboratorIds: [],
+      title: '',
+      description: '',
+      isPublic: true,
+      backgroundPalette: 'PASTEL',
+      backgroundColor: 'PASTEL_PINK',
+      items: [
+        {
+          rank: 0,
+          title: '',
+          comment: '',
+          link: '',
+          imageUrl: '',
+        },
+        {
+          rank: 0,
+          title: '',
+          comment: '',
+          link: '',
+          imageUrl: '',
+        },
+        {
+          rank: 0,
+          title: '',
+          comment: '',
+          link: '',
+          imageUrl: '',
+        },
+      ],
+    },
+  });
+
+  const handleStepChange = (step: 'list' | 'item') => {
+    setStep(step);
+  };
+
+  //request용 데이터 만드는 함수.
+  const formatData = () => {
+    const originData = methods.getValues();
+
+    //rank 정리
+    originData.items.forEach((item, index) => {
+      item.rank = index + 1;
+    });
+
+    //데이터 쪼개기
+    const listData: ListCreateType = {
+      ...originData,
+      items: originData.items.map(({ imageUrl, ...rest }) => {
+        return {
+          ...rest,
+          imageUrl: '',
+        };
+      }),
+    };
+
+    const imageData: ItemImagesType = {
+      listId: 0, //temp
+      extensionRanks: originData.items
+        .filter(({ imageUrl }) => imageUrl !== '')
+        .map(({ rank, imageUrl }) => {
+          return {
+            rank: rank,
+            extension:
+              typeof imageUrl === 'object' ? (imageUrl?.[0]?.type.split('/')[1] as 'jpg' | 'jpeg' | 'png') : '',
+          };
+        }),
+    };
+
+    const imageFileList: File[] = originData.items
+      .filter(({ imageUrl }) => imageUrl !== '')
+      .map(({ imageUrl }) => imageUrl?.[0] as File);
+
+    return { listData, imageData, imageFileList };
+  };
+
+  const { mutate: uploadImageMutate, isPending: isUploadingImage } = useMutation({
+    mutationFn: uploadItemImages,
+    retry: 3,
+    retryDelay: 1000,
+    onError: () => {
+      toasting({ type: 'error', txt: toastMessage[language].uploadImageError });
+    },
+  });
+
+  const {
+    mutate: createListMutate,
+    isPending: isCreatingList,
+    isSuccess,
+  } = useMutation({
+    mutationFn: createList,
+    onSuccess: (data) => {
+      if (formatData().imageData.extensionRanks.length !== 0) {
+        uploadImageMutate({
+          listId: data.listId,
+          imageData: formatData().imageData,
+          imageFileList: formatData().imageFileList,
+        });
+      }
+      queryClient.invalidateQueries({
+        queryKey: [
+          QUERY_KEYS.getAllList,
+          userMeData.id + '',
+          formatData().listData.collaboratorIds.length === 0 ? 'my' : 'collabo',
+        ],
+      });
+      router.replace(`/list/${data.listId}`);
+    },
+    onError: () => {
+      toasting({ type: 'error', txt: toastMessage[language].createListError });
+    },
+  });
+
+  //아이템 중복 확인
+  const getIsAllUnique = () => {
+    const allTitles = methods.getValues().items.map((item, itemIndex) => {
+      return item.title === '' ? itemIndex : item.title;
+    });
+    const isAllUnique = new Set(allTitles).size === allTitles.length;
+    return isAllUnique;
+  };
+
+  const handleSubmit = () => {
+    if (getIsAllUnique()) {
+      const { listData } = formatData();
+      createListMutate(listData);
+    } else {
+      toasting({ type: 'error', txt: toastMessage[language].duplicatedItemError });
+    }
+  };
+
+  return (
+    <>
+      <FormProvider {...methods}>
+        {step === 'list' ? (
+          <CreateList
+            onNextClick={() => {
+              handleStepChange('item');
+            }}
+            type="create"
+          />
+        ) : (
+          <CreateItem
+            onBackClick={() => {
+              handleStepChange('list');
+            }}
+            onSubmitClick={handleSubmit}
+            isSubmitting={isUploadingImage || isCreatingList || isSuccess}
+            type="create"
+          />
+        )}
+      </FormProvider>
+    </>
+  );
+}