Refactor: modify card list grid (#350)

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-pnpm exec lint-staged || exit 1
+pnpm lint-staged || exit 1

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",

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>

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>;
 }

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,15 +42,15 @@ 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}
           fill
           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">

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 {