htlee
e0b51efc54
쇼케이스 (/design-system.html): - 별도 Vite entry (System Flow 패턴 재사용, 메인 SPA 분리) - 10개 섹션: Intro / Token / Typography / Badge / Button / Form / Card / Layout / Catalog (19+) / Guide - 추적 ID 체계 (TRK-CATEGORY-SLUG): - hover 시 툴팁 + "ID 복사 모드"에서 클릭 시 클립보드 복사 - URL hash 딥링크 (#trk=TRK-BADGE-critical-sm) 스크롤+하이라이트 - 산출문서/논의에서 특정 변형 정확히 참조 가능 - Dark/Light 테마 토글로 양쪽 시각 검증 신규 공통 컴포넌트: - Button (@shared/components/ui/button.tsx) - 5 variant × 3 size = 15 변형 - primary/secondary/ghost/outline/destructive × sm/md/lg - Input / Select / Textarea / Checkbox / Radio - Input · Select 공통 inputVariants 공유 (sm/md/lg × default/error/success) - PageContainer / PageHeader / Section (shared/components/layout/) - PageContainer: size sm/md/lg + fullBleed (지도/풀화면 예외) - PageHeader: title + description + icon + demo 배지 + actions 슬롯 - Section: Card + CardHeader + CardTitle + CardContent 단축 variants.ts 확장: - buttonVariants / inputVariants / pageContainerVariants CVA 정의 - Button/Input/Select는 variants.ts에서 import하여 fast-refresh 경고 회피 빌드 검증 완료: - TypeScript 타입 체크 통과 - ESLint 통과 (경고 0) - vite build: designSystem-*.js 54KB (메인 SPA와 분리) 이 쇼케이스가 확정된 후 실제 40+ 페이지 마이그레이션 진행 예정.
69 lines
3.1 KiB
TypeScript
69 lines
3.1 KiB
TypeScript
import { TrkSectionHeader, Trk } from '../lib/Trk';
|
|
|
|
export function IntroSection() {
|
|
return (
|
|
<>
|
|
<TrkSectionHeader
|
|
id="TRK-SEC-intro"
|
|
title="KCG Design System"
|
|
description="kcg-ai-monitoring 프론트엔드의 시각 언어 · 컴포넌트 · 레이아웃 규칙 단일 참조 페이지"
|
|
/>
|
|
|
|
<Trk id="TRK-INTRO-overview" className="ds-sample">
|
|
<h3 className="text-sm font-semibold text-heading mb-2">이 페이지의 목적</h3>
|
|
<ul className="text-xs text-label space-y-1.5 list-disc list-inside leading-relaxed">
|
|
<li>
|
|
<strong className="text-heading">모든 스타일의 뼈대</strong> — 페이지 파일은 이 쇼케이스에 정의된 컴포넌트와 토큰만
|
|
사용한다. 임의의 `className="bg-red-600"` 같은 직접 스타일은 금지.
|
|
</li>
|
|
<li>
|
|
<strong className="text-heading">미세조정의 단일 지점</strong> — 색상 · 여백 · 텍스트 크기 등 모든 변경은 이 페이지에서
|
|
먼저 시각적으로 검증한 후 실제 페이지에 적용한다.
|
|
</li>
|
|
<li>
|
|
<strong className="text-heading">ID 기반 참조</strong> — 각 쇼케이스 항목에 <code>TRK-*</code> 추적 ID가 부여되어 있어,
|
|
특정 변형을 정확히 가리키며 논의 · 수정이 가능하다.
|
|
</li>
|
|
</ul>
|
|
</Trk>
|
|
|
|
<Trk id="TRK-INTRO-howto" className="ds-sample mt-3">
|
|
<h3 className="text-sm font-semibold text-heading mb-2">사용 방법</h3>
|
|
<ol className="text-xs text-label space-y-1.5 list-decimal list-inside leading-relaxed">
|
|
<li>
|
|
상단 <strong className="text-heading">"ID 복사 모드"</strong> 체크박스를 켜면 쇼케이스 항목 클릭 시 ID가 클립보드에
|
|
복사된다.
|
|
</li>
|
|
<li>
|
|
URL 해시 <code className="font-mono text-blue-400">#trk=TRK-BADGE-critical-sm</code> 으로 특정 항목 딥링크 — 스크롤
|
|
+ 하이라이트.
|
|
</li>
|
|
<li>
|
|
상단 <strong className="text-heading">Dark / Light</strong> 토글로 두 테마에서 동시에 검증.
|
|
</li>
|
|
<li>
|
|
좌측 네비게이션으로 섹션 이동. 각 섹션 제목 옆에 섹션의 <code>TRK-SEC-*</code> ID가 노출된다.
|
|
</li>
|
|
</ol>
|
|
</Trk>
|
|
|
|
<Trk id="TRK-INTRO-naming" className="ds-sample mt-3">
|
|
<h3 className="text-sm font-semibold text-heading mb-2">추적 ID 명명 규칙</h3>
|
|
<code className="ds-code">
|
|
{`TRK-<카테고리>-<슬러그>[-<변형>]
|
|
|
|
예시:
|
|
TRK-TOKEN-text-heading → 시맨틱 토큰 --text-heading
|
|
TRK-BADGE-critical-sm → Badge intent=critical size=sm
|
|
TRK-BUTTON-primary-md → Button variant=primary size=md
|
|
TRK-LAYOUT-page-container → PageContainer 루트
|
|
TRK-CAT-alert-level-HIGH → alertLevels 카탈로그의 HIGH 배지
|
|
TRK-SEC-badge → Badge 섹션 자체
|
|
|
|
카테고리: SEC, INTRO, TOKEN, TYPO, BADGE, BUTTON, FORM, CARD, LAYOUT, CAT, GUIDE`}
|
|
</code>
|
|
</Trk>
|
|
</>
|
|
);
|
|
}
|