atomsystem 0.4.0 → 0.4.3

package/atom.design.md

@@ -95,6 +95,23 @@ CSS-in-JS의 런타임 파싱 비용, 자바스크립트 번들 팽창을 방지
 
 ---
 
+### 07. 정갈한 AI 안티패턴 방어 (Anti-Pattern Prevention & Polish)
+> **AI 슬롭(AI Slop)을 원천 차단하고 불필요한 장식을 덜어낸 정갈한 본질을 추구합니다.**
+
+Impeccable 디자인 철학에 기반하여 LLM이 양산하는 클리셰적 디자인 왜곡을 엄격히 방어합니다. 과도한 네온 그라디언트, 촌스러운 단면 테두리, 불필요한 바운스 모션을 지양하고 담백하며 정돈된 모던 인터페이스를 완성합니다.
+
+* **권장 실천 (DO)**:
+  - ✅ 상태 표시는 굵은 단면 테두리 대신 은은한 1px 보더, 상태 도트/아이콘, 부드러운 틴트 배경을 활용합니다.
+  - ✅ 모션은 튀는 바운스(bounce) 대신 자연스러운 감속 이징(ease-out, 200~300ms)과 미세한 페이드/스케일을 적용합니다.
+  - ✅ 코드 커밋 전 `npm run lint:design` (impeccable detect)을 통해 디자인 결함을 무비용(0-Token)으로 정적 검증합니다.
+* **지양 안티패턴 (DON'T)**:
+  - ❌ 카드나 콜아웃, 사이드바에 굵은 좌측 테두리(border-l-4 등 Side-tab tell)를 남발하지 않습니다.
+  - ❌ 시각적 피로감을 유발하는 무의미한 보라색 그라디언트나 과도한 드롭 섀도를 인라인 하드코딩하지 않습니다.
+  - ❌ 시각적 위계와 무관하게 모든 요소를 둥근 플로팅 카드로 감싸는 레이아웃 남용을 피합니다.
+* **표준 참조**: `Impeccable Design Quality Standards & Zero-Slop Heuristics`
+
+---
+
 ## 2. 디자인 토큰 사양 (Design Token Specifications)
 
 ### 🎨 시맨틱 컬러 토큰

package/components/blocks/BlockViewerCard.tsx

@@ -0,0 +1,229 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  Code2,
+  Eye,
+  Copy,
+  Check,
+  Monitor,
+  Tablet,
+  Smartphone,
+  ExternalLink,
+  Tag,
+} from 'lucide-react';
+import { BlockItem } from '@/lib/data/blocks';
+
+interface BlockViewerCardProps {
+  block: BlockItem;
+  children: React.ReactNode;
+}
+
+export function BlockViewerCard({ block, children }: BlockViewerCardProps) {
+  const [activeTab, setActiveTab] = useState<'preview' | 'react' | 'html'>('preview');
+  const [viewport, setViewport] = useState<'desktop' | 'tablet' | 'mobile'>('desktop');
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = (code: string) => {
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  const getViewportMaxWidth = () => {
+    switch (viewport) {
+      case 'mobile':
+        return 'max-w-[390px]';
+      case 'tablet':
+        return 'max-w-[768px]';
+      default:
+        return 'max-w-full';
+    }
+  };
+
+  return (
+    <div
+      id={block.id}
+      className="scroll-mt-20 rounded-2xl bg-(--bg-primary) border border-(--border-subtle) shadow-xs overflow-hidden transition-all duration-200"
+    >
+      {/* Block Header Info */}
+      <div className="p-5 sm:p-6 border-b border-(--border-subtle)">
+        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-2">
+          <div className="flex items-center gap-2.5">
+            <span className="px-2.5 py-0.5 rounded-full text-[11px] font-bold bg-(--accent-primary)/10 text-(--accent-primary)">
+              {block.badge}
+            </span>
+            <span className="text-xs text-(--text-muted) font-medium">{block.englishTitle}</span>
+          </div>
+
+          {/* Tokens used tags */}
+          <div className="flex flex-wrap items-center gap-1.5">
+            <span className="text-[10px] text-(--text-muted) flex items-center gap-1 mr-1">
+              <Tag className="w-3 h-3" />
+              토큰 바인딩:
+            </span>
+            {block.tokensUsed.map((token) => (
+              <span
+                key={token}
+                className="font-mono text-[10px] px-1.5 py-0.2 rounded bg-(--bg-secondary) text-(--text-secondary) border border-(--border-subtle)"
+              >
+                {token}
+              </span>
+            ))}
+          </div>
+        </div>
+
+        <h3 className="text-xl font-bold text-(--text-primary) tracking-tight mb-1.5">
+          {block.title}
+        </h3>
+        <p className="text-xs sm:text-sm text-(--text-secondary) leading-relaxed">
+          {block.description}
+        </p>
+
+        {/* Feature Highlights Pill */}
+        <div className="flex flex-wrap gap-2 mt-4">
+          {block.features.map((feat, idx) => (
+            <span
+              key={idx}
+              className="text-[11px] text-(--text-secondary) bg-(--bg-secondary)/70 px-2.5 py-1 rounded-lg border border-(--border-subtle)"
+            >
+              ✓ {feat}
+            </span>
+          ))}
+        </div>
+      </div>
+
+      {/* Control Bar: Viewport selector & Code tabs */}
+      <div className="px-4 py-2.5 bg-(--bg-secondary)/60 border-b border-(--border-subtle) flex items-center justify-between gap-3 overflow-x-auto">
+        {/* Left: View Mode Tabs */}
+        <div className="flex items-center gap-1 bg-(--bg-primary) p-0.5 rounded-lg border border-(--border-subtle) shrink-0">
+          <button
+            onClick={() => setActiveTab('preview')}
+            data-tab="preview"
+            className={`flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-semibold transition-colors ${
+              activeTab === 'preview'
+                ? 'bg-(--accent-primary) text-white shadow-xs'
+                : 'text-(--text-secondary) hover:text-(--text-primary)'
+            }`}
+          >
+            <Eye className="w-3.5 h-3.5" />
+            <span>라이브 프리뷰</span>
+          </button>
+          <button
+            onClick={() => setActiveTab('react')}
+            data-tab="react"
+            className={`flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-semibold transition-colors ${
+              activeTab === 'react'
+                ? 'bg-(--accent-primary) text-white shadow-xs'
+                : 'text-(--text-secondary) hover:text-(--text-primary)'
+            }`}
+          >
+            <Code2 className="w-3.5 h-3.5" />
+            <span>React (TSX)</span>
+          </button>
+          <button
+            onClick={() => setActiveTab('html')}
+            data-tab="html"
+            className={`flex items-center gap-1.5 px-3 py-1 rounded-md text-xs font-semibold transition-colors ${
+              activeTab === 'html'
+                ? 'bg-(--accent-primary) text-white shadow-xs'
+                : 'text-(--text-secondary) hover:text-(--text-primary)'
+            }`}
+          >
+            <Code2 className="w-3.5 h-3.5" />
+            <span>HTML & CSS</span>
+          </button>
+        </div>
+
+        {/* Right: Viewport resizing (Only in preview mode) & Copy button */}
+        <div className="flex items-center gap-2">
+          {activeTab === 'preview' && (
+            <div className="hidden sm:flex items-center gap-0.5 bg-(--bg-primary) p-0.5 rounded-lg border border-(--border-subtle)">
+              <button
+                onClick={() => setViewport('desktop')}
+                title="데스크톱 뷰 (100%)"
+                className={`p-1.5 rounded-md transition-colors ${
+                  viewport === 'desktop'
+                    ? 'bg-(--bg-secondary) text-(--text-primary)'
+                    : 'text-(--text-muted) hover:text-(--text-primary)'
+                }`}
+              >
+                <Monitor className="w-3.5 h-3.5" />
+              </button>
+              <button
+                onClick={() => setViewport('tablet')}
+                title="태블릿 뷰 (768px)"
+                className={`p-1.5 rounded-md transition-colors ${
+                  viewport === 'tablet'
+                    ? 'bg-(--bg-secondary) text-(--text-primary)'
+                    : 'text-(--text-muted) hover:text-(--text-primary)'
+                }`}
+              >
+                <Tablet className="w-3.5 h-3.5" />
+              </button>
+              <button
+                onClick={() => setViewport('mobile')}
+                title="모바일 뷰 (390px)"
+                className={`p-1.5 rounded-md transition-colors ${
+                  viewport === 'mobile'
+                    ? 'bg-(--bg-secondary) text-(--text-primary)'
+                    : 'text-(--text-muted) hover:text-(--text-primary)'
+                }`}
+              >
+                <Smartphone className="w-3.5 h-3.5" />
+              </button>
+            </div>
+          )}
+
+          <button
+            onClick={() =>
+              handleCopy(
+                activeTab === 'html' ? block.codeSnippets.htmlCss : block.codeSnippets.react
+              )
+            }
+            className="flex items-center gap-1 px-3 py-1.5 rounded-lg text-xs font-medium bg-(--bg-primary) hover:bg-(--border-subtle) text-(--text-primary) border border-(--border-subtle) transition-colors"
+          >
+            {copied ? (
+              <>
+                <Check className="w-3.5 h-3.5 text-emerald-500" />
+                <span className="text-emerald-500">복사 완료!</span>
+              </>
+            ) : (
+              <>
+                <Copy className="w-3.5 h-3.5 text-(--text-muted)" />
+                <span>코드 복사</span>
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+
+      {/* Main Content Area */}
+      <div className="p-4 sm:p-8 bg-(--bg-secondary)/30 flex justify-center items-center min-h-[380px]">
+        {activeTab === 'preview' ? (
+          <div
+            className={`w-full transition-all duration-300 mx-auto ${getViewportMaxWidth()} ${
+              viewport !== 'desktop'
+                ? 'border-2 border-dashed border-(--border-strong) rounded-2xl p-2 bg-(--bg-primary) shadow-sm'
+                : ''
+            }`}
+          >
+            {children}
+          </div>
+        ) : (
+          <div className="w-full bg-(--bg-primary) rounded-xl border border-(--border-subtle) overflow-hidden">
+            <div className="px-4 py-2 border-b border-(--border-subtle) bg-(--bg-secondary)/50 text-[11px] font-mono text-(--text-muted) flex justify-between items-center">
+              <span>{activeTab === 'react' ? `${block.id}.tsx` : `${block.id}.html`}</span>
+              <span>{activeTab === 'react' ? 'TypeScript React' : 'Vanilla HTML / Tailwind'}</span>
+            </div>
+            <pre className="p-4 text-xs font-mono text-(--text-primary) overflow-x-auto leading-relaxed max-h-96">
+              <code>
+                {activeTab === 'react' ? block.codeSnippets.react : block.codeSnippets.htmlCss}
+              </code>
+            </pre>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/components/blocks/CardListBlock.tsx

@@ -0,0 +1,309 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  LayoutGrid,
+  List as ListIcon,
+  Search,
+  Bookmark,
+  Star,
+  Eye,
+  ArrowUpRight,
+  Sparkles,
+  Layers,
+  Palette,
+  ShieldCheck,
+  Zap,
+} from 'lucide-react';
+
+interface CardItem {
+  id: string;
+  category: 'Foundation' | 'Component' | 'Pattern';
+  title: string;
+  description: string;
+  tag: 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)를 완벽히 준수하는 컬러 시스템.',
+    tag: 'W3C 표준',
+    icon: 'palette',
+    stats: { views: '14.2k', rating: 4.9 },
+    date: '2026.11',
+  },
+  {
+    id: 'c2',
+    category: 'Component',
+    title: '고접근성 인터랙티브 모달 & 드로어',
+    description: 'ARIA-1.2 명세를 100% 만족하며 포커스 트랩과 ESC 키 닫기, 백드롭 블러를 지원하는 레이어 컴포넌트.',
+    tag: 'A11y AAA',
+    icon: 'layers',
+    stats: { views: '9.8k', rating: 4.8 },
+    date: '2026.10',
+  },
+  {
+    id: 'c3',
+    category: 'Pattern',
+    title: 'B2B 핀테크 인증 및 결제 승인 플로우',
+    description: '생체 인증, 간편 비밀번호, 카드 CVC 실시간 유효성 검증과 가맹점 수수료율 자동 산출 UX.',
+    tag: 'Fintech UX',
+    icon: 'shield',
+    stats: { views: '18.5k', rating: 5.0 },
+    date: '2026.11',
+  },
+  {
+    id: 'c4',
+    category: 'Component',
+    title: '실시간 가변 폰트 & 타이포 스케일러',
+    description: 'Pretendard Variable 기반의 유동적(Fluid) 폰트 크기 및 행간(Line-height) 자동 보정 시스템.',
+    tag: 'Typography',
+    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 [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 matchesSearch =
+      card.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      card.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      card.tag.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCategory && matchesSearch;
+  });
+
+  const getIcon = (type: CardItem['icon']) => {
+    switch (type) {
+      case 'palette':
+        return <Palette className="w-4 h-4 text-purple-500" />;
+      case 'layers':
+        return <Layers className="w-4 h-4 text-blue-500" />;
+      case 'shield':
+        return <ShieldCheck 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">
+          {['All', 'Foundation', 'Component', 'Pattern'].map((cat) => (
+            <button
+              key={cat}
+              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)'
+              }`}
+            >
+              {cat === 'All' ? '전체' : cat}
+            </button>
+          ))}
+        </div>
+
+        {/* Search & View Mode Switcher */}
+        <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)" />
+            <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"
+            />
+          </div>
+
+          <div className="flex items-center p-0.5 rounded-lg bg-(--bg-secondary) border border-(--border-subtle)">
+            <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)'
+              }`}
+            >
+              <LayoutGrid className="w-4 h-4" />
+            </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)'
+              }`}
+            >
+              <ListIcon className="w-4 h-4" />
+            </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>
+                <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>
+                  <h4 className="text-sm font-bold text-(--text-primary) group-hover:text-(--accent-primary) transition-colors">
+                    {card.title}
+                  </h4>
+                  <p className="text-xs text-(--text-secondary) mt-0.5 line-clamp-1 max-w-xl">
+                    {card.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>
+                    <ArrowUpRight className="w-3 h-3" />
+                  </button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}