From 8d481f6cdff2663c21d203780e23b5bd57baa9d6 Mon Sep 17 00:00:00 2001
From: Bangdayeon <dybang00@gmail.com>
Date: Wed, 4 Feb 2026 20:41:36 +0900
Subject: [PATCH] Refactor: modify card list grid (#350)

---
 .husky/pre-commit                           | 2 +-
 package.json                                | 2 +-
 src/app/(route)/all-link/AllLink.tsx        | 7 ++++---
 src/components/basics/CardList/CardList.tsx | 2 +-
 src/components/basics/LinkCard/LinkCard.tsx | 6 +++---
 src/styles/globals.css                      | 4 ++++
 6 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/.husky/pre-commit b/.husky/pre-commit
index f7488eff..ab2a786f 100644
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm exec lint-staged || exit 1
\ No newline at end of file
+pnpm lint-staged || exit 1
\ No newline at end of file
diff --git a/package.json b/package.json
index ee22b959..74dc4e7b 100644
--- a/package.json
+++ b/package.json
@@ -8,7 +8,7 @@
     "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
-    "lint": "exec eslint .",
+    "lint": "eslint .",
     "prepare": "husky",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
diff --git a/src/app/(route)/all-link/AllLink.tsx b/src/app/(route)/all-link/AllLink.tsx
index f7b6276e..cfe7dbca 100644
--- a/src/app/(route)/all-link/AllLink.tsx
+++ b/src/app/(route)/all-link/AllLink.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import CardList from '@/components/basics/CardList/CardList';
 import InfiniteScroll from '@/components/basics/InfiniteScroll/InfiniteScroll';
 import LinkCard from '@/components/basics/LinkCard/LinkCard';
 import LinkCardDetailPanel from '@/components/wrappers/LinkCardDetailPanel/LinkCardDetailPanel';
@@ -45,7 +46,7 @@ export default function AllLink() {
             <header>
               <h1 className="font-title-md">전체 링크</h1>
             </header>
-            <div className="min-h-0 flex-1 overflow-y-auto">
+            <div className="custom-scrollbar min-h-0 flex-1 overflow-y-auto p-1">
               {links.length === 0 ? (
                 <p className="text-gray600">표시할 링크가 없습니다.</p>
               ) : (
@@ -54,7 +55,7 @@ export default function AllLink() {
                   hasMore={hasMore}
                   isLoading={isLoadingMore}
                 >
-                  <div className="grid min-w-0 grid-cols-2 justify-center justify-items-center gap-5 md:grid-cols-3 xl:grid-cols-4">
+                  <CardList>
                     {links.map(link => (
                       <LinkCard
                         key={link.id}
@@ -65,7 +66,7 @@ export default function AllLink() {
                         onClick={() => handleSelectLink(link.id)}
                       />
                     ))}
-                  </div>
+                  </CardList>
                 </InfiniteScroll>
               )}
             </div>
diff --git a/src/components/basics/CardList/CardList.tsx b/src/components/basics/CardList/CardList.tsx
index adbfc95e..70dfd74e 100644
--- a/src/components/basics/CardList/CardList.tsx
+++ b/src/components/basics/CardList/CardList.tsx
@@ -9,5 +9,5 @@ interface CardListProps {
 }
 
 export default function CardList({ children }: CardListProps) {
-  return <div className="grid w-full max-w-251 grid-cols-4 gap-4">{children}</div>;
+  return <div className="grid grid-cols-2 gap-4 md:grid-cols-4">{children}</div>;
 }
diff --git a/src/components/basics/LinkCard/LinkCard.tsx b/src/components/basics/LinkCard/LinkCard.tsx
index c87d4c6b..b8e7404b 100644
--- a/src/components/basics/LinkCard/LinkCard.tsx
+++ b/src/components/basics/LinkCard/LinkCard.tsx
@@ -27,7 +27,7 @@ const LinkCard = React.forwardRef<HTMLDivElement, LinkCardProps>(function LinkCa
   return (
     <div
       ref={ref}
-      className="border-gray200 hover:bg-gray50 active:bg-blue50 focus:border-blue500 relative flex h-58 w-47 cursor-pointer flex-col overflow-hidden rounded-2xl border transition-colors"
+      className="border-gray200 hover:bg-gray50 active:bg-blue50 focus:border-blue500 relative flex aspect-47/58 w-full cursor-pointer flex-col overflow-hidden rounded-2xl border transition-colors"
       tabIndex={0}
       onClick={onClick}
       onKeyDown={handleKeyDown}
@@ -42,7 +42,7 @@ const LinkCard = React.forwardRef<HTMLDivElement, LinkCardProps>(function LinkCa
         />
       )}
 
-      <div className="bg-gray900 relative h-22 w-full shrink-0">
+      <div className="bg-gray900 relative aspect-94/47 w-full max-w-94 shrink-0">
         <Image
           src={imageUrl ? imageUrl : '/images/default_linkcard_image.png'}
           alt={title}
@@ -50,7 +50,7 @@ const LinkCard = React.forwardRef<HTMLDivElement, LinkCardProps>(function LinkCa
           className="border-gray200 border-b object-cover"
         />
       </div>
-      <div className="flex flex-1 flex-col justify-between p-3">
+      <div className="flex w-full flex-1 flex-col justify-between p-3">
         <div className="flex flex-col gap-1">
           <span className="truncate text-sm font-semibold">{title}</span>
           <div className="flex items-center gap-1">
diff --git a/src/styles/globals.css b/src/styles/globals.css
index cf8dd965..8213a2f8 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -51,6 +51,10 @@
   scrollbar-width: none; /* Firefox */
 }
 
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
 /* ========== DIVIDER FALLBACK ========== */
 /* Ensure divider colors render even if Tailwind layers are unavailable (e.g., Storybook). */
 .divider-gray100 {