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,113 @@
+import { createVar, style, styleVariants } from '@vanilla-extract/css';
+import { vars } from '@/styles/theme.css';
+import { Label, LabelSmall } from '@/styles/font.css';
+
+export const imageUrl = createVar();
+
+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,
+});
+
+const content = style({
+  width: 173,
+  height: 173,
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+
+  backgroundImage: imageUrl,
+  backgroundPosition: 'center',
+  backgroundColor: vars.color.white,
+});
+
+export const contentVariant = styleVariants({
+  round: [content, { borderRadius: '100%' }],
+  square: [content, { borderRadius: 20 }],
+});
+
+export const category = style([
+  LabelSmall,
+  {
+    padding: '2px 6px',
+    backgroundColor: vars.color.blue,
+    borderRadius: 20,
+    color: vars.color.white,
+  },
+]);
+
+export const info = style({
+  paddingTop: '0.6rem',
+  paddingBottom: '0.5rem',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 4,
+});
+
+// 배경이미지 유무에 따른 스타일 variants
+const fontColor = {
+  white: vars.color.white,
+  black: vars.color.black,
+};
+
+export const title = styleVariants(fontColor, (color) => [
+  Label,
+  {
+    color,
+    fontWeight: 600,
+  },
+]);
+
+export const owner = styleVariants(fontColor, (color) => [
+  LabelSmall,
+  {
+    color,
+    fontWeight: 400,
+  },
+]);
+
+export const items = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  gap: 5,
+});
+
+const item = style({
+  padding: '0.45rem 0.62rem',
+  borderRadius: 18,
+  display: 'flex',
+  gap: 2,
+  alignItems: 'center',
+});
+
+export const itemVariant = styleVariants({
+  white: [
+    item,
+    {
+      backgroundColor: '#F5FAFF',
+      color: vars.color.blue,
+    },
+  ],
+  blue: [
+    item,
+    {
+      backgroundColor: 'rgba(245, 250, 255, 0.30)',
+      color: vars.color.white,
+    },
+  ],
+});
+
+export const date = styleVariants(fontColor, (color) => ({
+  paddingTop: '0.8rem',
+  fontSize: '0.9rem',
+  color,
+}));

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

@@ -0,0 +1,62 @@
+'use client';
+
+import Link from 'next/link';
+import { useQuery } from '@tanstack/react-query';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import * as styles from './Collections.css';
+
+import getCollection from '@/app/_api/collect/getCollection';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import formatDate from '@/lib/utils/dateFormat';
+
+interface CollectionsProps {
+  folderId: string;
+}
+
+// TODO 무한스크롤
+
+export default function Collections({ folderId }: CollectionsProps) {
+  const { data } = useQuery({
+    queryKey: [QUERY_KEYS.getCollection],
+    queryFn: () => getCollection({ folderId }),
+  });
+
+  console.log(data);
+
+  return (
+    <ul className={styles.container}>
+      {data?.collectionLists.map(({ list, id }) => {
+        const hasImage = !!list.representativeImageUrl;
+        return (
+          <Link
+            key={id}
+            href={`/list/${list.id}`}
+            className={styles.contentVariant[hasImage ? 'round' : 'square']}
+            style={assignInlineVars({
+              [styles.imageUrl]: `url(${hasImage ? list.representativeImageUrl : ''})`,
+            })}
+          >
+            <div className={styles.category}>{list.category}</div>
+            <div className={styles.info}>
+              <h3 className={styles.title[hasImage ? 'white' : 'black']}>{list.title}</h3>
+              <p className={styles.owner[hasImage ? 'white' : 'black']}>{list.ownerNickname}</p>
+            </div>
+            <ul className={styles.items}>
+              {list.listItems.map((item) => (
+                <li key={item.id} className={styles.itemVariant[hasImage ? 'blue' : 'white']}>
+                  <span>
+                    {item.rank}
+                    {`.`}
+                  </span>
+                  <span>{item.title}</span>
+                </li>
+              ))}
+            </ul>
+            <p className={styles.date[hasImage ? 'white' : 'black']}>{formatDate(list.updatedDate)}</p>
+          </Link>
+        );
+      })}
+    </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',
+  },
+]);