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

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

@@ -1,8 +1,5 @@
-import { createVar, style, styleVariants } from '@vanilla-extract/css';
+import { style } 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',
@@ -14,100 +11,3 @@ export const container = style({
   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

@@ -1,14 +1,12 @@
 '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 ShapeSimpleList from '@/components/ShapeSimpleList/ShapeSimpleList';
 import getCollection from '@/app/_api/collect/getCollection';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
-import formatDate from '@/lib/utils/dateFormat';
 
 interface CollectionsProps {
   folderId: string;
@@ -22,40 +20,11 @@ export default function Collections({ folderId }: CollectionsProps) {
     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>
-        );
+        return <ShapeSimpleList list={list} hasImage={hasImage} key={id} />;
       })}
     </ul>
   );

src/components/ShapeSimpleList/ShapeSimpleList.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/components/ShapeSimpleList/ShapeSimpleList.tsx

@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import { assignInlineVars } from '@vanilla-extract/dynamic';
+
+import * as styles from './ShapeSimpleList.css';
+
+import formatDate from '@/lib/utils/dateFormat';
+import { CollectionListType } from '@/lib/types/listType';
+
+interface ShapeSimpleListProps {
+  list: CollectionListType;
+  hasImage: boolean;
+}
+
+export default function ShapeSimpleList({ list, hasImage }: ShapeSimpleListProps) {
+  return (
+    <Link
+      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>
+  );
+}