Feat: 콜렉션 상세페이지 및 폴더 이름 변경, 삭제 기능 개발

src/app/_api/collect/getCollection.ts

@@ -0,0 +1,29 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+import { CollectionType } from '@/lib/types/listType';
+
+interface GetCollectionType {
+  folderId: string;
+  cursorId?: number;
+}
+
+interface ResponseType {
+  collectionLists: CollectionType[];
+  cursorId: number;
+  hasNext: boolean;
+}
+
+async function getCollection({ folderId, cursorId }: GetCollectionType) {
+  const params = new URLSearchParams({
+    size: '8',
+  });
+
+  if (cursorId) {
+    params.append('cursorId', cursorId.toString());
+  }
+
+  const response = await axiosInstance.get<ResponseType>(`/folder/${folderId}/collections?${params.toString()}`);
+
+  return response.data;
+}
+
+export default getCollection;

src/app/_api/folder/deleteFolder.ts

@@ -0,0 +1,7 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+const deleteFolder = async (folderId: string) => {
+  await axiosInstance.delete(`/folders/${folderId}`);
+};
+
+export default deleteFolder;

src/app/_api/folder/updateFolder.ts

@@ -0,0 +1,12 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+
+interface CollectionFolderProps {
+  folderId: string;
+  folderName: string;
+}
+
+const updateCollectionFolder = async ({ folderId, folderName }: CollectionFolderProps) => {
+  await axiosInstance.put(`/folders/${folderId}`, { folderName });
+};
+
+export default updateCollectionFolder;

src/app/collection/[folderId]/_components/Collections.css.ts

@@ -0,0 +1,13 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+
+export const container = style({
+  padding: '2.4rem 1.6rem',
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr',
+  gridTemplateRows: 'max-content',
+  gridGap: 12,
+  alignContent: 'flex-start',
+  justifyItems: 'center',
+  backgroundColor: vars.color.bggray,
+});

src/app/collection/[folderId]/_components/Collections.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useQuery } from '@tanstack/react-query';
+
+import * as styles from './Collections.css';
+
+import ShapeSimpleList from '@/components/ShapeSimpleList/ShapeSimpleList';
+import getCollection from '@/app/_api/collect/getCollection';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+
+interface CollectionsProps {
+  folderId: string;
+}
+
+// TODO 무한스크롤
+
+export default function Collections({ folderId }: CollectionsProps) {
+  const { data } = useQuery({
+    queryKey: [QUERY_KEYS.getCollection],
+    queryFn: () => getCollection({ folderId }),
+  });
+
+  return (
+    <ul className={styles.container}>
+      {data?.collectionLists.map(({ list, id }) => {
+        const hasImage = !!list.representativeImageUrl;
+        return <ShapeSimpleList list={list} hasImage={hasImage} key={id} />;
+      })}
+    </ul>
+  );
+}

src/app/collection/[folderId]/_components/HeaderContainer.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import BottomSheet from '@/components/BottomSheet/BottomSheet';
+import Header from '@/components/Header/Header';
+
+import useBooleanOutput from '@/hooks/useBooleanOutput';
+
+interface HeaderContainerProps {
+  handleSetOnBottomSheet: () => void;
+  handleSetOnDeleteOption: () => void;
+}
+
+export default function HeaderContainer({ handleSetOnBottomSheet, handleSetOnDeleteOption }: HeaderContainerProps) {
+  const { isOn, handleSetOn, handleSetOff } = useBooleanOutput();
+
+  const bottomSheetOptionList = [
+    {
+      key: 'editFolder',
+      title: '폴더 이름 바꾸기', // TODO locale 적용
+      onClick: handleSetOnBottomSheet,
+    },
+    {
+      key: 'deleteFolder',
+      title: '폴더 삭제하기',
+      onClick: handleSetOnDeleteOption,
+    },
+  ];
+
+  const RightButton = () => {
+    const handleClickOption = () => {
+      handleSetOn();
+    };
+    return <button onClick={handleClickOption}>수정</button>;
+  };
+
+  return (
+    <>
+      <Header title="콜렉션" left="back" right={<RightButton />} leftClick={() => history.back()} />
+      {isOn && <BottomSheet onClose={handleSetOff} optionList={bottomSheetOptionList} isActive />}
+    </>
+  );
+}

src/app/collection/[folderId]/page.css.ts

@@ -0,0 +1,34 @@
+import { style } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+import { Subtitle } from '@/styles/font.css';
+
+export const container = style({
+  height: '100vh',
+  backgroundColor: vars.color.bggray,
+});
+
+// BottomSheet Input
+export const contentInput = style({
+  padding: '2rem 2.4rem',
+  backgroundColor: '#F5F6FA',
+  borderRadius: 18,
+
+  color: vars.color.black,
+  fontSize: '1.6rem',
+  fontWeight: 400,
+});
+
+// BottomSheet Description
+export const content = style([
+  Subtitle,
+  {
+    paddingTop: 30,
+    fontWeight: 600,
+    color: vars.color.black,
+
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
+    alignItems: 'center',
+  },
+]);

src/app/collection/[folderId]/page.tsx

@@ -0,0 +1,128 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { ChangeEvent, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+
+import HeaderContainer from './_components/HeaderContainer';
+import Collections from './_components/Collections';
+import BottomSheet from '../_components/BottomSheet';
+
+import * as styles from './page.css';
+
+import useBooleanOutput from '@/hooks/useBooleanOutput';
+import { useLanguage } from '@/store/useLanguage';
+import toasting from '@/lib/utils/toasting';
+import toastMessage from '@/lib/constants/toastMessage';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import updateCollectionFolder from '@/app/_api/folder/updateFolder';
+import deleteFolder from '@/app/_api/folder/deleteFolder';
+
+interface ParamType {
+  params: { folderId: string };
+}
+
+// TODO API에 FolderName 필드 추가 요청 => input value에 보여주기 & 헤더 타이틀
+export default function CollectionDetailPage({ params }: ParamType) {
+  const folderId = params.folderId;
+  const { isOn, handleSetOn, handleSetOff } = useBooleanOutput();
+  const {
+    isOn: isDeleteOption,
+    handleSetOn: handleSetOnDeleteOption,
+    handleSetOff: handleSetOffDeleteOption,
+  } = useBooleanOutput();
+  const queryClient = useQueryClient();
+  const { language } = useLanguage();
+  const router = useRouter();
+
+  const [value, setValue] = useState('');
+
+  // 폴더 수정하기 mutation
+  const editFolderMutation = useMutation({
+    mutationFn: updateCollectionFolder,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getFolders] });
+      setValue('');
+      handleSetOff();
+    },
+    onError: (error) => {
+      if (isAxiosError(error)) {
+        const errorData = error.response?.data;
+        if (errorData.error === 'UNAUTHORIZED') {
+          toasting({ type: 'error', txt: toastMessage[language].requiredLogin });
+          return;
+        }
+        if (errorData.code.split('_')[0] === 'DUPLICATE') {
+          toasting({ type: 'error', txt: toastMessage[language].duplicatedFolderName });
+          return;
+        }
+      }
+      toasting({ type: 'error', txt: toastMessage[language].failedFolder });
+    },
+  });
+
+  // 폴더 삭제하기 mutation
+  const deleteFolderMutation = useMutation({
+    mutationFn: deleteFolder,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.getFolders] });
+      handleSetOffDeleteOption();
+      router.push('/collection');
+    },
+    onError: (error) => {
+      if (isAxiosError(error)) {
+        const errorData = error.response?.data;
+        if (errorData.error === 'UNAUTHORIZED') {
+          toasting({ type: 'error', txt: toastMessage[language].requiredLogin });
+          return;
+        }
+      }
+    },
+  });
+
+  const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setValue(e.target.value);
+  };
+
+  const handleEditFolder = () => {
+    if (!value.trim()) {
+      toasting({ type: 'warning', txt: toastMessage[language].emptyFolderName });
+      return;
+    }
+    editFolderMutation.mutate({ folderId, folderName: value });
+  };
+
+  const handleDeleteFolder = () => {
+    deleteFolderMutation.mutate(folderId);
+  };
+
+  return (
+    <section className={styles.container}>
+      <HeaderContainer handleSetOnBottomSheet={handleSetOn} handleSetOnDeleteOption={handleSetOnDeleteOption} />
+      <Collections folderId={folderId} />
+      <BottomSheet isOn={isOn}>
+        <BottomSheet.Title>폴더 이름 바꾸기</BottomSheet.Title>
+        <input
+          autoFocus
+          placeholder="폴더명을 작성해 주세요"
+          value={value}
+          onChange={handleChangeInput}
+          className={styles.contentInput}
+        />
+        <BottomSheet.Button onClose={handleSetOff} onClick={handleEditFolder}>
+          만들기
+        </BottomSheet.Button>
+      </BottomSheet>
+      <BottomSheet isOn={isDeleteOption}>
+        <div className={styles.content}>
+          <p>정말 삭제하시나요?</p>
+          <p>폴더와 안에 있었던 리스트가 모두 삭제돼요</p>
+        </div>
+        <BottomSheet.Button onClose={handleSetOffDeleteOption} isDelete={true} onClick={handleDeleteFolder}>
+          삭제
+        </BottomSheet.Button>
+      </BottomSheet>
+    </section>
+  );
+}

src/app/collection/[category]/page.tsx → src/app/collection/_[category]/page.tsx

@@ -9,10 +9,10 @@ import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 import { useEffect, useMemo } from 'react';
 import useIntersectionObserver from '@/hooks/useIntersectionObserver';
 import getCollection from '@/app/_api/collect/__getCollection';
-import Top3CardSkeleton from '@/app/collection/[category]/_components/Top3CardSkeleton';
-import NoData from '@/app/collection/[category]/_components/NoData';
+import Top3CardSkeleton from '@/app/collection/_[category]/_components/Top3CardSkeleton';
+import NoData from '@/app/collection/_[category]/_components/NoData';
 import { CollectionType } from '@/lib/types/listType';
-import Top3Card from '@/app/collection/[category]/_components/Top3Card';
+import Top3Card from '@/app/collection/_[category]/_components/Top3Card';
 import { categoriesLocale } from '@/app/collection/locale';
 import { useLanguage } from '@/store/useLanguage';
 

src/app/collection/_components/BottomSheet.css.ts

@@ -47,16 +47,6 @@ export const contentTitle = style([
   },
 ]);
 
-export const contentInput = style({
-  padding: '2rem 2.4rem',
-  backgroundColor: '#F5F6FA',
-  borderRadius: 18,
-
-  color: vars.color.black,
-  fontSize: '1.6rem',
-  fontWeight: 400,
-});
-
 export const optionButtons = style({
   margin: 12,
   display: 'flex',
@@ -79,4 +69,5 @@ const button = style({
 export const variantButton = styleVariants({
   default: [button],
   active: [button, { color: vars.color.blue }],
+  delete: [button, { color: vars.color.red }],
 });