Design: 콜렉션 페이지 스타일 수정 (텍스트 줄임 적용, 뒤로가기 path 추가 등)

src/app/collection/page.css.ts

@@ -11,9 +11,9 @@ export const container = style({
 export const folders = style({
   padding: '2.4rem 4.8rem',
   display: 'grid',
-  gridTemplateColumns: '1fr 1fr',
+  gridTemplateColumns: 'repeat(2, 1fr)',
   gridColumnGap: 34,
-  gridRowGap: 34,
+  gridRowGap: 24,
 });
 
 // 폴더
@@ -79,13 +79,20 @@ export const bottomShape = style({
 export const title = style([
   Label,
   {
+    maxWidth: 130,
     display: 'flex',
     gap: 6,
     alignItems: 'center',
     color: vars.color.black,
   },
 ]);
 
+export const folderName = style({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+});
+
 // 폴더 버튼
 export const addFolderButtonContainer = style({
   position: 'fixed',

src/app/collection/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Image from 'next/image';
+import { useRouter } from 'next/navigation';
 import { useQuery } from '@tanstack/react-query';
 
 import * as styles from './page.css';
@@ -12,6 +13,7 @@ import getFolders, { FoldersResponseType } from '../_api/folder/getFolders';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
 
 export default function CollectionPage() {
+  const router = useRouter();
   const { data } = useQuery<FoldersResponseType>({
     queryKey: [QUERY_KEYS.getFolders],
     queryFn: getFolders,
@@ -22,7 +24,7 @@ export default function CollectionPage() {
 
   return (
     <section>
-      <Header title="콜렉션" left="back" />
+      <Header title="콜렉션" left="back" leftClick={() => router.back()} />
       <div className={styles.container}>
         <div className={styles.folders}>
           {data?.folders.map((folder) => (
@@ -33,7 +35,7 @@ export default function CollectionPage() {
                 <div className={styles.bottomShape}></div>
               </div>
               <p className={styles.title}>
-                <span>{folder.folderName}</span>
+                <span className={styles.folderName}>{folder.folderName}</span>
                 <span>{`(${folder.listCount})`}</span>
               </p>
             </div>