atomsystem 0.4.3 → 0.5.0

package/components/blocks/CardListBlock.tsx

@@ -1,18 +1,16 @@
 'use client';
 
 import React, { useState } from 'react';
+import { Card, Button, Badge } from '@/components/ui';
 import {
   LayoutGrid,
   List as ListIcon,
   Search,
   Bookmark,
-  Star,
-  Eye,
   ArrowUpRight,
-  Sparkles,
-  Layers,
   Palette,
-  ShieldCheck,
+  Layers,
+  Shield,
   Zap,
 } from 'lucide-react';
 
@@ -22,94 +20,61 @@ interface CardItem {
   title: string;
   description: string;
   tag: string;
+  price: string;
   icon: 'palette' | 'layers' | 'shield' | 'zap';
-  stats: { views: string; rating: number };
-  date: string;
-  isBookmarked?: boolean;
 }
 
 const INITIAL_CARDS: CardItem[] = [
   {
     id: 'c1',
     category: 'Foundation',
-    title: '시맨틱 색상 및 다크모드 매트릭스',
-    description: 'W3C DTCG 표준 3단계 계층 구조(Primitive → Semantic → Component)를 완벽히 준수하는 컬러 시스템.',
+    title: '시맨틱 색상 & 다크모드 매트릭스',
+    description: 'W3C DTCG 표준 3단계 계층 구조를 준수하는 토큰 기반 컬러 시스템.',
     tag: 'W3C 표준',
+    price: 'Free',
     icon: 'palette',
-    stats: { views: '14.2k', rating: 4.9 },
-    date: '2026.11',
   },
   {
     id: 'c2',
     category: 'Component',
     title: '고접근성 인터랙티브 모달 & 드로어',
-    description: 'ARIA-1.2 명세를 100% 만족하며 포커스 트랩과 ESC 키 닫기, 백드롭 블러를 지원하는 레이어 컴포넌트.',
+    description: '포커스 트랩과 키보드 내비게이션을 보장하는 시맨틱 레이어 컴포넌트.',
     tag: 'A11y AAA',
+    price: '$19',
     icon: 'layers',
-    stats: { views: '9.8k', rating: 4.8 },
-    date: '2026.10',
   },
   {
     id: 'c3',
     category: 'Pattern',
-    title: 'B2B 핀테크 인증 및 결제 승인 플로우',
-    description: '생체 인증, 간편 비밀번호, 카드 CVC 실시간 유효성 검증과 가맹점 수수료율 자동 산출 UX.',
+    title: 'B2B 핀테크 인증 & 결제 승인 플로우',
+    description: '실시간 유효성 검증과 가맹점 수수료율 자동 산출 반응형 위젯.',
     tag: 'Fintech UX',
+    price: '$39',
     icon: 'shield',
-    stats: { views: '18.5k', rating: 5.0 },
-    date: '2026.11',
   },
   {
     id: 'c4',
     category: 'Component',
-    title: '실시간 가변 폰트 & 타이포 스케일러',
-    description: 'Pretendard Variable 기반의 유동적(Fluid) 폰트 크기 및 행간(Line-height) 자동 보정 시스템.',
+    title: '가변 폰트 & 타이포 스케일러',
+    description: 'Fluid 폰트 크기 및 행간을 토큰으로 제어하는 타이포그래피 블록.',
     tag: 'Typography',
+    price: 'Free',
     icon: 'zap',
-    stats: { views: '7.1k', rating: 4.7 },
-    date: '2026.09',
-  },
-  {
-    id: 'c5',
-    category: 'Pattern',
-    title: 'AI 에이전트 스트리밍 메시지 뷰포트',
-    description: '대규모 언어 모델의 토큰 단위 스트리밍을 60fps로 매끄럽게 자동 스크롤하는 차세대 피드.',
-    tag: 'AI System',
-    icon: 'layers',
-    stats: { views: '23.4k', rating: 4.9 },
-    date: '2026.11',
-  },
-  {
-    id: 'c6',
-    category: 'Foundation',
-    title: '모션 이징 & 스프링 물리 타이밍 토큰',
-    description: '자연스러운 사용자 경험을 위한 GSAP 및 CSS transition 타이밍 커브 세트.',
-    tag: 'Micro Interaction',
-    icon: 'palette',
-    stats: { views: '11.0k', rating: 4.8 },
-    date: '2026.10',
   },
 ];
 
 export function CardListBlock() {
   const [cards, setCards] = useState<CardItem[]>(INITIAL_CARDS);
-  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [selectedCategory, setSelectedCategory] = useState<string>('All');
+  const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
   const [searchQuery, setSearchQuery] = useState('');
 
-  const toggleBookmark = (id: string) => {
-    setCards((prev) =>
-      prev.map((c) => (c.id === id ? { ...c, isBookmarked: !c.isBookmarked } : c))
-    );
-  };
-
-  const filteredCards = cards.filter((card) => {
-    const matchesCategory = selectedCategory === 'All' || card.category === selectedCategory;
+  const filteredCards = cards.filter((c) => {
+    const matchesCat = selectedCategory === 'All' || c.category === selectedCategory;
     const matchesSearch =
-      card.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      card.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
-      card.tag.toLowerCase().includes(searchQuery.toLowerCase());
-    return matchesCategory && matchesSearch;
+      c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      c.description.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCat && matchesSearch;
   });
 
   const getIcon = (type: CardItem['icon']) => {
@@ -119,191 +84,131 @@ export function CardListBlock() {
       case 'layers':
         return <Layers className="w-4 h-4 text-blue-500" />;
       case 'shield':
-        return <ShieldCheck className="w-4 h-4 text-emerald-500" />;
+        return <Shield className="w-4 h-4 text-emerald-500" />;
       case 'zap':
         return <Zap className="w-4 h-4 text-amber-500" />;
     }
   };
 
   return (
-    <div className="w-full bg-(--bg-primary) rounded-2xl border border-(--border-subtle) shadow-sm p-5 sm:p-6 transition-colors">
-      {/* Top Filter and Search Bar */}
-      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-5 border-b border-(--border-subtle)">
-        {/* Category Tabs */}
-        <div className="flex flex-wrap items-center gap-1.5">
+    <Card className="overflow-hidden transition-colors">
+      {/* 1. Filter Toolbar composed with Button components */}
+      <div className="p-4 border-b border-(--border-subtle) bg-(--bg-secondary)/20 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+        {/* Category Pills */}
+        <div className="flex items-center gap-1 overflow-x-auto scrollbar-none">
           {['All', 'Foundation', 'Component', 'Pattern'].map((cat) => (
-            <button
+            <Button
               key={cat}
+              variant={selectedCategory === cat ? 'primary' : 'ghost'}
+              size="sm"
               onClick={() => setSelectedCategory(cat)}
-              className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${
-                selectedCategory === cat
-                  ? 'bg-(--accent-primary) text-white shadow-xs'
-                  : 'bg-(--bg-secondary) text-(--text-secondary) hover:text-(--text-primary)'
-              }`}
+              className="text-xs py-1 px-2.5 whitespace-nowrap"
             >
               {cat === 'All' ? '전체' : cat}
-            </button>
+            </Button>
           ))}
         </div>
 
-        {/* Search & View Mode Switcher */}
+        {/* View mode & Search */}
         <div className="flex items-center gap-2">
           <div className="relative">
-            <Search className="w-3.5 h-3.5 absolute left-3 top-1/2 -translate-y-1/2 text-(--text-muted)" />
+            <Search className="w-3.5 h-3.5 absolute left-2.5 top-1/2 -translate-y-1/2 text-(--text-secondary)" />
             <input
               type="text"
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
-              placeholder="블록 및 토큰 검색..."
-              className="text-xs pl-8 pr-3 py-1.5 rounded-lg bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) focus:outline-none focus:border-(--accent-primary) w-36 sm:w-48 transition-colors"
+              placeholder="카드 필터..."
+              className="text-xs pl-7 pr-2.5 py-1 rounded-(--radius-sm) bg-(--bg-secondary) text-(--text-primary) border border-(--border-subtle) focus:outline-none"
             />
           </div>
 
-          <div className="flex items-center p-0.5 rounded-lg bg-(--bg-secondary) border border-(--border-subtle)">
+          <div className="flex rounded-(--radius-sm) border border-(--border-subtle) p-0.5 bg-(--bg-secondary)">
             <button
               onClick={() => setViewMode('grid')}
-              aria-label="그리드 보기"
-              className={`p-1.5 rounded-md transition-colors ${
-                viewMode === 'grid'
-                  ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs'
-                  : 'text-(--text-muted) hover:text-(--text-primary)'
+              aria-label="Grid"
+              className={`p-1 rounded-(--radius-sm) transition-colors ${
+                viewMode === 'grid' ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs' : 'text-(--text-secondary)'
               }`}
             >
-              <LayoutGrid className="w-4 h-4" />
+              <LayoutGrid className="w-3.5 h-3.5" />
             </button>
             <button
               onClick={() => setViewMode('list')}
-              aria-label="리스트 보기"
-              className={`p-1.5 rounded-md transition-colors ${
-                viewMode === 'list'
-                  ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs'
-                  : 'text-(--text-muted) hover:text-(--text-primary)'
+              aria-label="List"
+              className={`p-1 rounded-(--radius-sm) transition-colors ${
+                viewMode === 'list' ? 'bg-(--bg-primary) text-(--text-primary) shadow-xs' : 'text-(--text-secondary)'
               }`}
             >
-              <ListIcon className="w-4 h-4" />
+              <ListIcon className="w-3.5 h-3.5" />
             </button>
           </div>
         </div>
       </div>
 
-      {/* Cards Viewport */}
-      {filteredCards.length === 0 ? (
-        <div className="py-16 text-center text-xs text-(--text-muted)">
-          검색 조건에 맞는 블록 항목이 없습니다.
-        </div>
-      ) : viewMode === 'grid' ? (
-        /* Grid Layout */
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 pt-5">
-          {filteredCards.map((card) => (
-            <div
-              key={card.id}
-              className="group flex flex-col justify-between p-4 rounded-xl bg-(--bg-secondary)/50 hover:bg-(--bg-secondary) border border-(--border-subtle) hover:border-(--border-strong) transition-all duration-200 hover:-translate-y-0.5 shadow-xs"
-            >
-              <div>
-                <div className="flex items-center justify-between mb-3">
-                  <div className="flex items-center gap-2">
-                    <div className="p-2 rounded-lg bg-(--bg-primary) border border-(--border-subtle)">
-                      {getIcon(card.icon)}
-                    </div>
-                    <span className="text-[11px] font-semibold px-2 py-0.5 rounded-full bg-(--bg-primary) text-(--text-secondary) border border-(--border-subtle)">
-                      {card.tag}
-                    </span>
-                  </div>
-                  <button
-                    onClick={() => toggleBookmark(card.id)}
-                    className="p-1.5 rounded-lg text-(--text-muted) hover:text-(--accent-primary) transition-colors"
-                  >
-                    <Bookmark
-                      className={`w-4 h-4 ${card.isBookmarked ? 'fill-(--accent-primary) text-(--accent-primary)' : ''}`}
-                    />
-                  </button>
-                </div>
-
-                <h4 className="text-sm font-bold text-(--text-primary) group-hover:text-(--accent-primary) transition-colors line-clamp-1 mb-1.5">
-                  {card.title}
-                </h4>
-                <p className="text-xs text-(--text-secondary) leading-relaxed line-clamp-2 mb-4">
-                  {card.description}
-                </p>
-              </div>
-
-              <div className="flex items-center justify-between pt-3 border-t border-(--border-subtle) text-[11px] text-(--text-muted)">
-                <div className="flex items-center gap-3">
-                  <span className="flex items-center gap-1">
-                    <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
-                    <span className="font-semibold text-(--text-primary)">{card.stats.rating}</span>
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <Eye className="w-3.5 h-3.5" />
-                    <span>{card.stats.views}</span>
-                  </span>
-                </div>
-                <div className="flex items-center gap-1 font-semibold text-(--accent-primary) group-hover:translate-x-0.5 transition-transform">
-                  <span>보기</span>
-                  <ArrowUpRight className="w-3 h-3" />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      ) : (
-        /* List Layout */
-        <div className="space-y-3 pt-5">
-          {filteredCards.map((card) => (
-            <div
-              key={card.id}
-              className="group flex flex-col sm:flex-row sm:items-center justify-between p-4 rounded-xl bg-(--bg-secondary)/50 hover:bg-(--bg-secondary) border border-(--border-subtle) hover:border-(--border-strong) transition-all gap-4 shadow-xs"
-            >
-              <div className="flex items-start sm:items-center gap-3">
-                <div className="p-2.5 rounded-lg bg-(--bg-primary) border border-(--border-subtle) shrink-0 mt-0.5 sm:mt-0">
-                  {getIcon(card.icon)}
-                </div>
+      {/* 2. Cards Viewport composed with UI Card & Badge */}
+      <div className="p-4 sm:p-5">
+        {viewMode === 'grid' ? (
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3.5">
+            {filteredCards.map((c) => (
+              <Card
+                key={c.id}
+                interactive
+                className="p-4 flex flex-col justify-between"
+              >
                 <div>
-                  <div className="flex items-center gap-2 mb-1">
-                    <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full bg-(--bg-primary) text-(--text-secondary) border border-(--border-subtle)">
-                      {card.tag}
-                    </span>
-                    <span className="text-[10px] text-(--text-muted)">{card.date}</span>
+                  <div className="flex items-center justify-between mb-2.5">
+                    <div className="p-2 rounded-(--radius-sm) bg-(--bg-secondary) border border-(--border-subtle)">
+                      {getIcon(c.icon)}
+                    </div>
+                    <Badge variant="neutral" className="text-[11px]">
+                      {c.tag}
+                    </Badge>
                   </div>
-                  <h4 className="text-sm font-bold text-(--text-primary) group-hover:text-(--accent-primary) transition-colors">
-                    {card.title}
+                  <h4 className="font-semibold text-xs text-(--text-primary) line-clamp-1 mb-1">
+                    {c.title}
                   </h4>
-                  <p className="text-xs text-(--text-secondary) mt-0.5 line-clamp-1 max-w-xl">
-                    {card.description}
+                  <p className="text-xs text-(--text-secondary) line-clamp-2 leading-relaxed">
+                    {c.description}
                   </p>
                 </div>
-              </div>
 
-              <div className="flex items-center justify-between sm:justify-end gap-4 shrink-0 pt-2 sm:pt-0 border-t sm:border-0 border-(--border-subtle)">
-                <div className="flex items-center gap-3 text-xs text-(--text-muted)">
-                  <span className="flex items-center gap-1">
-                    <Star className="w-3.5 h-3.5 fill-amber-400 text-amber-400" />
-                    <span className="font-semibold text-(--text-primary)">{card.stats.rating}</span>
-                  </span>
-                  <span className="flex items-center gap-1">
-                    <Eye className="w-3.5 h-3.5" />
-                    <span>{card.stats.views}</span>
-                  </span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <button
-                    onClick={() => toggleBookmark(card.id)}
-                    className="p-1.5 rounded-lg text-(--text-muted) hover:text-(--accent-primary) transition-colors"
-                  >
-                    <Bookmark
-                      className={`w-4 h-4 ${card.isBookmarked ? 'fill-(--accent-primary) text-(--accent-primary)' : ''}`}
-                    />
-                  </button>
-                  <button className="px-3 py-1.5 rounded-lg text-xs font-semibold bg-(--bg-primary) hover:bg-(--accent-primary) hover:text-white text-(--text-primary) border border-(--border-subtle) transition-colors flex items-center gap-1">
-                    <span>상세보기</span>
+                <div className="pt-3 border-t border-(--border-subtle) flex items-center justify-between mt-3 text-xs">
+                  <span className="font-semibold text-(--text-primary)">{c.price}</span>
+                  <button className="text-xs font-medium text-(--accent-primary) hover:underline flex items-center gap-0.5">
+                    <span>선택</span>
                     <ArrowUpRight className="w-3 h-3" />
                   </button>
                 </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
+              </Card>
+            ))}
+          </div>
+        ) : (
+          <div className="space-y-2">
+            {filteredCards.map((c) => (
+              <Card
+                key={c.id}
+                className="p-3 px-4 flex items-center justify-between transition-colors gap-3"
+              >
+                <div className="flex items-center gap-3">
+                  <div className="p-1.5 rounded-(--radius-sm) bg-(--bg-secondary) border border-(--border-subtle)">
+                    {getIcon(c.icon)}
+                  </div>
+                  <div>
+                    <div className="font-semibold text-xs text-(--text-primary)">{c.title}</div>
+                    <div className="text-[11px] text-(--text-secondary) line-clamp-1">{c.description}</div>
+                  </div>
+                </div>
+                <div className="flex items-center gap-3 shrink-0 text-xs">
+                  <span className="font-semibold text-(--text-primary)">{c.price}</span>
+                  <Button variant="secondary" size="sm" className="text-xs py-1 px-2.5">
+                    상세보기
+                  </Button>
+                </div>
+              </Card>
+            ))}
+          </div>
+        )}
+      </div>
+    </Card>
   );
 }