@kood/claude-code 0.1.6 → 0.1.9

package/templates/tanstack-start/docs/design/color.md

@@ -1,235 +0,0 @@
-# 색상 시스템
-
-> **상위 문서**: [UI/UX 디자인 가이드](./index.md)
-
-색상은 UI에서 가장 강력한 시각적 요소입니다. 일관된 색상 사용은 브랜드 인지도를 높이고 사용자 경험을 개선합니다.
-
-## 60-30-10 규칙
-
-디자이너들이 가장 많이 사용하는 색상 배분 규칙입니다.
-
-```
-┌─────────────────────────────────────────────────┐
-│                                                 │
-│              60% 기본색 (Primary)               │
-│              배경, 여백, 기본 영역               │
-│                                                 │
-├───────────────────────────────────┬─────────────┤
-│                                   │             │
-│       30% 보조색 (Secondary)      │    10%      │
-│       카드, 섹션, 구분 영역        │   강조색    │
-│                                   │   (Accent)  │
-│                                   │   버튼,     │
-│                                   │   링크,     │
-│                                   │   CTA       │
-└───────────────────────────────────┴─────────────┘
-```
-
-### 실제 적용 예시
-
-```tsx
-// 60% - 배경
-<div className="bg-white">              {/* 흰색 배경 */}
-
-  // 30% - 보조 영역
-  <section className="bg-gray-50">      {/* 밝은 회색 섹션 */}
-    <div className="bg-white">          {/* 카드 배경 */}
-
-      // 10% - 강조
-      <button className="bg-blue-600">  {/* 주요 버튼 */}
-        시작하기
-      </button>
-    </div>
-  </section>
-</div>
-```
-
-## 색상 팔레트 구성
-
-### 1. 기본 색상 (Neutral Colors)
-
-배경, 텍스트, 테두리에 사용하는 중립적인 색상입니다.
-
-```
-White       #FFFFFF   bg-white        가장 밝은 배경
-Gray 50     #F9FAFB   bg-gray-50      섹션 배경
-Gray 100    #F3F4F6   bg-gray-100     카드 배경, hover
-Gray 200    #E5E7EB   bg-gray-200     테두리, 구분선
-Gray 300    #D1D5DB   bg-gray-300     비활성 테두리
-Gray 400    #9CA3AF   text-gray-400   비활성 텍스트
-Gray 500    #6B7280   text-gray-500   보조 텍스트
-Gray 600    #4B5563   text-gray-600   부제목
-Gray 700    #374151   text-gray-700   본문
-Gray 800    #1F2937   text-gray-800   제목
-Gray 900    #111827   text-gray-900   강조 텍스트
-```
-
-### 2. 브랜드 색상 (Brand Colors)
-
-서비스를 대표하는 주요 색상입니다. **1-2가지**만 선택하세요.
-
-```tsx
-// 예시: 파란색 브랜드
-const brandColors = {
-  primary: {
-    50:  '#EFF6FF',  // 매우 밝은 배경
-    100: '#DBEAFE',  // 밝은 배경
-    200: '#BFDBFE',  // hover 배경
-    300: '#93C5FD',  // 테두리
-    400: '#60A5FA',  // 비활성 버튼
-    500: '#3B82F6',  // 기본 버튼
-    600: '#2563EB',  // hover 버튼
-    700: '#1D4ED8',  // active 버튼
-    800: '#1E40AF',  // 어두운 버튼
-    900: '#1E3A8A',  // 매우 어두운
-  }
-}
-```
-
-### 3. 의미론적 색상 (Semantic Colors)
-
-특정 의미를 가진 색상입니다. **절대 다른 용도로 사용하지 마세요.**
-
-| 색상 | 의미 | 사용처 | Tailwind |
-|------|------|--------|----------|
-| 🟢 Green | 성공, 완료 | 성공 메시지, 체크 | `text-green-600` |
-| 🔴 Red | 오류, 위험 | 에러 메시지, 삭제 | `text-red-600` |
-| 🟡 Yellow | 경고, 주의 | 경고 메시지 | `text-yellow-600` |
-| 🔵 Blue | 정보, 안내 | 안내 메시지, 링크 | `text-blue-600` |
-
-```tsx
-// ✅ 올바른 사용
-<span className="text-green-600">저장되었습니다</span>
-<span className="text-red-600">필수 항목입니다</span>
-
-// ❌ 잘못된 사용 - 빨간색을 장식용으로
-<span className="text-red-600">새로운 기능!</span>
-```
-
-## 색상 대비 (Contrast)
-
-### WCAG 접근성 기준
-
-텍스트가 잘 읽히려면 배경과 충분한 대비가 필요합니다.
-
-| 기준 | 최소 대비 | 적용 대상 |
-|------|----------|----------|
-| AA (일반) | 4.5:1 | 일반 텍스트 (16px 미만) |
-| AA (큰 텍스트) | 3:1 | 큰 텍스트 (18px 이상) |
-| AAA (강화) | 7:1 | 최고 수준 접근성 |
-
-### 안전한 조합
-
-```tsx
-// ✅ 좋은 대비 (흰 배경)
-<p className="text-gray-900">진한 텍스트 - 대비 15.8:1</p>
-<p className="text-gray-700">본문 텍스트 - 대비 8.6:1</p>
-<p className="text-gray-600">보조 텍스트 - 대비 5.7:1</p>
-
-// ⚠️ 주의 필요
-<p className="text-gray-500">밝은 텍스트 - 대비 4.6:1 (경계)</p>
-
-// ❌ 피해야 함
-<p className="text-gray-400">너무 밝음 - 대비 3.0:1</p>
-```
-
-### 버튼 색상 대비
-
-```tsx
-// ✅ 좋은 버튼 대비
-<button className="bg-blue-600 text-white">    {/* 흰색 on 파란색 */}
-<button className="bg-gray-900 text-white">    {/* 흰색 on 검정색 */}
-<button className="bg-white text-gray-900 border"> {/* 검정색 on 흰색 */}
-
-// ❌ 나쁜 버튼 대비
-<button className="bg-yellow-300 text-white">  {/* 대비 부족 */}
-<button className="bg-gray-200 text-gray-400"> {/* 대비 부족 */}
-```
-
-## 다크 모드
-
-다크 모드는 선택이 아닌 필수가 되어가고 있습니다.
-
-### 색상 반전 원칙
-
-```
-라이트 모드              다크 모드
-━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
-bg-white         ←→     bg-gray-900
-bg-gray-50       ←→     bg-gray-800
-bg-gray-100      ←→     bg-gray-700
-text-gray-900    ←→     text-white
-text-gray-700    ←→     text-gray-200
-text-gray-500    ←→     text-gray-400
-```
-
-### Tailwind 다크 모드 적용
-
-```tsx
-// 기본 패턴
-<div className="bg-white dark:bg-gray-900">
-  <h1 className="text-gray-900 dark:text-white">제목</h1>
-  <p className="text-gray-600 dark:text-gray-300">본문</p>
-</div>
-
-// 카드 컴포넌트
-<div className="bg-white dark:bg-gray-800
-               border border-gray-200 dark:border-gray-700
-               shadow-sm">
-  <h3 className="text-gray-900 dark:text-white">카드 제목</h3>
-</div>
-```
-
-## 색상 사용 체크리스트
-
-### 반드시 지켜야 할 것
-
-- [ ] 브랜드 색상은 1-2가지만 사용
-- [ ] 의미론적 색상(빨강, 초록 등)은 해당 의미로만 사용
-- [ ] 텍스트-배경 대비 4.5:1 이상 유지
-- [ ] 색상만으로 정보 전달하지 않기 (아이콘/텍스트 병행)
-
-### 권장 사항
-
-- [ ] 60-30-10 규칙 따르기
-- [ ] 다크 모드 지원
-- [ ] 색상 변수(토큰) 사용
-- [ ] 일관된 색상 네이밍
-
-## Tailwind 설정
-
-```css
-/* src/styles/app.css */
-@import "tailwindcss";
-
-@theme {
-  /* 브랜드 색상 */
-  --color-primary-50: oklch(0.97 0.01 250);
-  --color-primary-100: oklch(0.93 0.03 250);
-  --color-primary-500: oklch(0.55 0.2 250);
-  --color-primary-600: oklch(0.48 0.22 250);
-  --color-primary-700: oklch(0.42 0.2 250);
-
-  /* 의미론적 색상 */
-  --color-success: oklch(0.55 0.15 145);
-  --color-error: oklch(0.55 0.2 25);
-  --color-warning: oklch(0.75 0.15 85);
-  --color-info: oklch(0.55 0.2 250);
-}
-```
-
-```tsx
-// 사용 예시
-<button className="bg-primary-600 hover:bg-primary-700">
-  주요 버튼
-</button>
-
-<span className="text-success">성공!</span>
-<span className="text-error">오류 발생</span>
-```
-
-## 참고 자료
-
-- [Tailwind CSS Colors](https://tailwindcss.com/docs/colors)
-- [WCAG Color Contrast](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html)
-- [Coolors - 색상 팔레트 생성](https://coolors.co/)

package/templates/tanstack-start/docs/design/spacing.md

@@ -1,341 +0,0 @@
-# 간격과 레이아웃
-
-> **상위 문서**: [UI/UX 디자인 가이드](./index.md)
-
-간격(Spacing)은 요소들 사이의 여백을 말합니다. 적절한 간격은 콘텐츠를 읽기 쉽게 만들고 시각적 계층을 형성합니다.
-
-## 왜 간격이 중요한가?
-
-### 간격 없는 디자인 vs 적절한 간격
-
-```
-❌ 간격 없음                    ✅ 적절한 간격
-┌──────────────────┐           ┌──────────────────┐
-│제목본문텍스트버튼│           │                  │
-│모든것이붙어있음  │           │    제목          │
-│읽기가어려움      │           │                  │
-└──────────────────┘           │    본문 텍스트   │
-                               │                  │
-                               │    [ 버튼 ]      │
-                               │                  │
-                               └──────────────────┘
-```
-
-## 8px 그리드 시스템
-
-### 왜 8px인가?
-
-- 대부분의 화면 해상도에서 깔끔하게 나눠짐
-- 계산이 쉬움 (8, 16, 24, 32...)
-- 반응형 디자인에 유리
-
-### Tailwind 간격 스케일
-
-```css
-/* 기본 단위: 1 = 0.25rem = 4px */
-
-/* 주로 사용하는 간격 */
-1    → 4px   (0.25rem)   아주 작은 간격
-2    → 8px   (0.5rem)    작은 간격
-3    → 12px  (0.75rem)
-4    → 16px  (1rem)      기본 간격
-5    → 20px  (1.25rem)
-6    → 24px  (1.5rem)    중간 간격
-8    → 32px  (2rem)      큰 간격
-10   → 40px  (2.5rem)
-12   → 48px  (3rem)      섹션 간격
-16   → 64px  (4rem)      페이지 섹션
-20   → 80px  (5rem)
-24   → 96px  (6rem)      대형 섹션
-```
-
-### 간격 사용 가이드
-
-| 용도 | 간격 | Tailwind | 실제 크기 |
-|------|------|----------|----------|
-| 아이콘-텍스트 | xs | `gap-1` | 4px |
-| 인라인 요소 | sm | `gap-2` | 8px |
-| 폼 필드 내부 | md | `p-3` | 12px |
-| 카드 내부 | lg | `p-4` | 16px |
-| 카드 간격 | xl | `gap-6` | 24px |
-| 섹션 내부 | 2xl | `py-8` | 32px |
-| 섹션 간격 | 3xl | `py-12` | 48px |
-| 페이지 섹션 | 4xl | `py-16` | 64px |
-
-## 간격 유형
-
-### 1. Padding (내부 여백)
-
-요소 안쪽의 여백입니다.
-
-```tsx
-// 전체 방향
-<div className="p-4">16px 전체</div>
-
-// 개별 방향
-<div className="pt-4">위 16px</div>
-<div className="pr-4">오른쪽 16px</div>
-<div className="pb-4">아래 16px</div>
-<div className="pl-4">왼쪽 16px</div>
-
-// 축 방향
-<div className="px-4">좌우 16px</div>
-<div className="py-4">상하 16px</div>
-```
-
-### 2. Margin (외부 여백)
-
-요소 바깥쪽의 여백입니다.
-
-```tsx
-// 전체 방향
-<div className="m-4">16px 전체</div>
-
-// 개별 방향
-<div className="mt-4">위 16px</div>
-<div className="mr-4">오른쪽 16px</div>
-<div className="mb-4">아래 16px</div>
-<div className="ml-4">왼쪽 16px</div>
-
-// 자동 마진 (중앙 정렬)
-<div className="mx-auto">좌우 중앙</div>
-```
-
-### 3. Gap (그리드/플렉스 간격)
-
-Flexbox나 Grid 아이템 간의 간격입니다.
-
-```tsx
-// Flexbox에서
-<div className="flex gap-4">
-  <div>아이템 1</div>
-  <div>아이템 2</div>  {/* 16px 간격 */}
-  <div>아이템 3</div>
-</div>
-
-// Grid에서
-<div className="grid grid-cols-3 gap-6">
-  <div>카드 1</div>
-  <div>카드 2</div>  {/* 24px 간격 */}
-  <div>카드 3</div>
-</div>
-
-// 축별 gap
-<div className="flex gap-x-4 gap-y-2">
-  {/* 가로 16px, 세로 8px */}
-</div>
-```
-
-## 실전 레이아웃 패턴
-
-### 1. 카드 컴포넌트
-
-```tsx
-<div className="p-6 rounded-lg border border-gray-200">
-  {/* 제목 - 아래 간격 */}
-  <h3 className="text-lg font-semibold mb-2">카드 제목</h3>
-
-  {/* 본문 - 아래 간격 */}
-  <p className="text-gray-600 mb-4">
-    카드 설명 텍스트입니다.
-  </p>
-
-  {/* 버튼 그룹 */}
-  <div className="flex gap-2">
-    <button className="px-4 py-2">취소</button>
-    <button className="px-4 py-2">확인</button>
-  </div>
-</div>
-```
-
-### 2. 폼 레이아웃
-
-```tsx
-<form className="space-y-6">
-  {/* 필드 그룹 */}
-  <div className="space-y-4">
-    <div>
-      <label className="block text-sm font-medium mb-1">이름</label>
-      <input className="w-full px-3 py-2 border rounded" />
-    </div>
-
-    <div>
-      <label className="block text-sm font-medium mb-1">이메일</label>
-      <input className="w-full px-3 py-2 border rounded" />
-    </div>
-  </div>
-
-  {/* 버튼 영역 */}
-  <div className="flex justify-end gap-3">
-    <button className="px-4 py-2">취소</button>
-    <button className="px-4 py-2 bg-blue-600 text-white">저장</button>
-  </div>
-</form>
-```
-
-### 3. 페이지 섹션
-
-```tsx
-<main className="py-12">
-  {/* 히어로 섹션 */}
-  <section className="py-16 px-4">
-    <div className="max-w-4xl mx-auto text-center">
-      <h1 className="text-4xl font-bold mb-4">히어로 제목</h1>
-      <p className="text-xl text-gray-600 mb-8">서브 타이틀</p>
-      <button>시작하기</button>
-    </div>
-  </section>
-
-  {/* 기능 섹션 */}
-  <section className="py-16 px-4 bg-gray-50">
-    <div className="max-w-6xl mx-auto">
-      <h2 className="text-3xl font-bold text-center mb-12">주요 기능</h2>
-      <div className="grid grid-cols-3 gap-8">
-        {/* 카드들 */}
-      </div>
-    </div>
-  </section>
-</main>
-```
-
-### 4. 네비게이션 바
-
-```tsx
-<nav className="px-4 py-3 border-b">
-  <div className="max-w-6xl mx-auto flex items-center justify-between">
-    {/* 로고 */}
-    <div className="font-bold text-xl">Logo</div>
-
-    {/* 메뉴 */}
-    <div className="flex items-center gap-6">
-      <a href="#">메뉴 1</a>
-      <a href="#">메뉴 2</a>
-      <a href="#">메뉴 3</a>
-    </div>
-
-    {/* 액션 */}
-    <div className="flex items-center gap-3">
-      <button className="px-3 py-1.5">로그인</button>
-      <button className="px-3 py-1.5 bg-blue-600 text-white rounded">
-        시작하기
-      </button>
-    </div>
-  </div>
-</nav>
-```
-
-## 반응형 간격
-
-### 화면 크기별 간격 조정
-
-```tsx
-// 모바일에서 작게, 데스크탑에서 크게
-<section className="py-8 md:py-12 lg:py-16">
-  <div className="px-4 md:px-6 lg:px-8">
-    {/* 콘텐츠 */}
-  </div>
-</section>
-
-// 그리드 간격 조정
-<div className="grid gap-4 md:gap-6 lg:gap-8">
-  {/* 아이템들 */}
-</div>
-```
-
-### 브레이크포인트별 권장 간격
-
-| 요소 | Mobile | Tablet (md) | Desktop (lg) |
-|------|--------|-------------|--------------|
-| 컨테이너 패딩 | 16px | 24px | 32px |
-| 섹션 간격 | 32px | 48px | 64px |
-| 카드 간격 | 16px | 24px | 32px |
-| 그리드 gap | 16px | 24px | 32px |
-
-## 시각적 그룹핑
-
-### 근접성의 법칙
-
-> 가까이 있는 요소는 관련있어 보입니다.
-
-```tsx
-// ✅ 좋은 예 - 관련 요소 그룹핑
-<div>
-  <div className="mb-6">
-    <h3 className="mb-2">제목</h3>        {/* 밀접: 8px */}
-    <p>설명 텍스트</p>                    {/* 같은 그룹 */}
-  </div>
-                                          {/* 분리: 24px */}
-  <div className="mb-6">
-    <h3 className="mb-2">다른 제목</h3>   {/* 새 그룹 */}
-    <p>다른 설명</p>
-  </div>
-</div>
-
-// ❌ 나쁜 예 - 같은 간격으로 그룹 불명확
-<div>
-  <h3 className="mb-4">제목</h3>          {/* 16px */}
-  <p className="mb-4">설명 텍스트</p>      {/* 16px - 구분 안됨 */}
-  <h3 className="mb-4">다른 제목</h3>      {/* 16px - 구분 안됨 */}
-  <p className="mb-4">다른 설명</p>
-</div>
-```
-
-### 간격 비율 권장
-
-```
-같은 그룹 내 요소: 8-12px (gap-2, gap-3)
-그룹과 그룹 사이: 24-32px (gap-6, gap-8)
-섹션과 섹션 사이: 48-64px (py-12, py-16)
-```
-
-## 컨테이너와 최대 너비
-
-### 표준 컨테이너
-
-```tsx
-// 기본 컨테이너
-<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-  {/* 콘텐츠 */}
-</div>
-
-// 좁은 콘텐츠 (블로그, 문서)
-<div className="max-w-3xl mx-auto px-4">
-  {/* 텍스트 콘텐츠 */}
-</div>
-
-// 넓은 콘텐츠 (대시보드)
-<div className="max-w-full px-4 lg:px-8">
-  {/* 전체 너비 콘텐츠 */}
-</div>
-```
-
-### 최대 너비 옵션
-
-```css
-max-w-sm     384px    좁은 카드
-max-w-md     448px    폼
-max-w-lg     512px    모달
-max-w-xl     576px    넓은 모달
-max-w-2xl    672px    중간 콘텐츠
-max-w-3xl    768px    블로그 글
-max-w-4xl    896px    문서
-max-w-5xl    1024px   표준 콘텐츠
-max-w-6xl    1152px   넓은 콘텐츠
-max-w-7xl    1280px   대시보드
-```
-
-## 체크리스트
-
-### 반드시 지켜야 할 것
-
-- [ ] 일관된 간격 단위 사용 (8px 배수)
-- [ ] 관련 요소는 가깝게, 다른 그룹은 멀리
-- [ ] 반응형 간격 적용
-- [ ] 충분한 터치 영역 (최소 44px)
-
-### 권장 사항
-
-- [ ] `space-y-*`, `gap-*` 유틸리티 활용
-- [ ] 섹션마다 일관된 패딩 적용
-- [ ] 최대 너비로 가독성 확보
-- [ ] 여백으로 시각적 계층 표현