@kood/claude-code 0.3.12 → 0.3.15

package/templates/.claude/skills/korea-uiux-design/references/service-patterns.md

@@ -0,0 +1,206 @@
+# 주요 서비스 패턴
+
+<toss>
+
+**산업:** 핀테크 | **키워드:** 신뢰, 명확성, 미니멀리즘
+
+| 요소 | 내용 |
+|------|------|
+| **Primary** | Blue #3182F6 (신뢰감, 안정감) |
+| **Secondary** | Gray (정보 위계 명확) |
+| **폰트** | Pretendard, Spoqa Han Sans |
+| **특징** | 단순 명확, 강한 파란색, 카드 중심, 흰색/밝은 회색 배경 |
+| **UX 라이팅** | "어떤 이름으로 불러드릴까요?", "잠깐, 문제가 생겼어요" |
+
+```tsx
+{/* 금액 강조 */}
+<div className="text-4xl font-bold">15,000원</div>
+<div className="text-sm text-gray-600 mt-1">이번 달 총 지출</div>
+
+{/* 카드 */}
+<div className="p-6 bg-white rounded-2xl border">
+  <h2 className="text-lg font-semibold mb-4">내 자산</h2>
+  <div className="text-3xl font-bold">1,250,000원</div>
+</div>
+
+{/* 버튼 */}
+<button className="w-full h-14 bg-primary-500 text-white rounded-xl">다음</button>
+```
+
+</toss>
+
+---
+
+<kakao>
+
+**산업:** 메신저 | **키워드:** 친근함, 노란색, 말풍선
+
+| 요소 | 내용 |
+|------|------|
+| **Primary** | Yellow #FEE500 (친근, 밝음) |
+| **Secondary** | Brown #3C1E1E (안정감) |
+| **특징** | 말풍선 모티브, 노란색 브랜드, radius 12px |
+
+```tsx
+{/* 로그인 버튼 (디자인 가이드) */}
+<button className="w-full h-12 bg-[#FEE500] rounded-xl flex items-center justify-center gap-2">
+  <img src="/kakao-symbol.svg" className="w-5 h-5" />
+  <span className="text-[#000000]/85 text-[15px] font-medium">카카오 로그인</span>
+</button>
+
+{/* 말풍선 */}
+<div className="relative p-4 bg-yellow-400 rounded-2xl rounded-tl-none">
+  <div className="absolute -top-2 left-0 w-4 h-4 bg-yellow-400 rounded-br-full" />
+  <p>메시지</p>
+</div>
+```
+
+**규칙:** 말풍선 심볼 필수 (형태/비율/색상 변경 불가), radius 12px, 폰트 15pt
+
+</kakao>
+
+---
+
+<baemin>
+
+**산업:** 음식 배달 | **키워드:** 감성, 손글씨, 일러스트
+
+| 요소 | 내용 |
+|------|------|
+| **Primary** | Teal #2AC1BC (신선, 활기) |
+| **Secondary** | Coral/Pink (따뜻함) |
+| **폰트** | 배민 주아체, 도현체, 연성체, 기랑해랑체, 글림체, WORK (앱 전용, 2025) |
+| **특징** | 손글씨, 다채로운 일러스트, 유쾌한 톤 |
+
+```tsx
+{/* 음식점 카드 */}
+<div className="rounded-2xl overflow-hidden bg-white border">
+  <img className="w-full aspect-[4/3] object-cover" src="/food.jpg" />
+  <div className="p-4">
+    <h3 className="font-bold text-base">식당 이름</h3>
+    <div className="flex items-center gap-1 text-sm text-gray-600">
+      <span>⭐ 4.8</span><span>•</span><span>리뷰 1,234</span>
+    </div>
+    <div className="flex items-center justify-between mt-2">
+      <span className="text-sm text-gray-600">배달 30분</span>
+      <span className="text-sm font-semibold text-primary-500">최소 15,000원</span>
+    </div>
+  </div>
+</div>
+
+{/* 빈 상태 */}
+<div className="flex flex-col items-center py-12 gap-4">
+  <img src="/empty-illustration.svg" className="w-32 h-32" />
+  <h3 className="font-bold text-lg">주문 내역이 없어요</h3>
+  <p className="text-sm text-gray-600">배민에서 맛있는 음식을 주문해보세요!</p>
+</div>
+```
+
+</baemin>
+
+---
+
+<flex>
+
+**산업:** 기업 금융 | **키워드:** 프로페셔널, 효율성, B2B
+
+| 요소 | 내용 |
+|------|------|
+| **Primary** | Purple #8B5CF6 (프로페셔널) |
+| **Secondary** | Gray #6B7280 (차분, 신뢰) |
+| **특징** | 정보 밀도 높은 대시보드, 데이터 시각화, 효율적 워크플로우 |
+
+```tsx
+{/* 통계 카드 그리드 */}
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+  <div className="p-6 bg-white rounded-xl border">
+    <div className="text-sm text-gray-600">라벨</div>
+    <div className="text-2xl font-bold text-gray-900">값</div>
+    <div className="text-xs text-green-600 mt-1">↑ +12%</div>
+  </div>
+</div>
+
+{/* 테이블 */}
+<table className="w-full">
+  <thead className="bg-gray-50 border-b">
+    <tr>
+      <th className="px-6 py-3 text-left text-xs font-medium text-gray-600">항목</th>
+    </tr>
+  </thead>
+</table>
+```
+
+</flex>
+
+---
+
+<karrot>
+
+**산업:** 중고거래 | **키워드:** 동네, 따뜻함, 신뢰
+
+| 요소 | 내용 |
+|------|------|
+| **Primary** | Orange #FF6F0F (당근색, 따뜻함, 친근) |
+| **특징** | 지역 기반 UI, 당근 모티브, 신뢰 중심 거래 |
+
+```tsx
+{/* 상품 카드 */}
+<div className="flex gap-3 p-4 border-b">
+  <img className="w-24 h-24 rounded-lg object-cover" src="/product.jpg" />
+  <div className="flex-1 min-w-0">
+    <h3 className="font-semibold truncate">상품 이름</h3>
+    <div className="text-sm text-gray-600 truncate">우리동네 • 1시간 전</div>
+    <div className="text-base font-bold">15,000원</div>
+  </div>
+  <div className="flex items-end">
+    <div className="flex items-center gap-1 text-sm text-gray-500">
+      <svg className="w-4 h-4" /><span>3</span>
+    </div>
+  </div>
+</div>
+
+{/* 동네 선택 */}
+<button className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-100">
+  <svg className="w-5 h-5 text-gray-700" />
+  <span className="font-semibold">우리동네</span>
+  <svg className="w-4 h-4 text-gray-400" />
+</button>
+```
+
+</karrot>
+
+---
+
+<common_patterns>
+
+| 패턴 | 적용 |
+|------|------|
+| **모바일 우선** | 모바일 앱 우선 설계 |
+| **카드 기반** | 정보를 카드로 그룹화 |
+| **큰 터치 타겟** | 최소 44-48px |
+| **명확한 CTA** | 주요 액션 명확 |
+
+```tsx
+{/* 모바일 우선 + 반응형 */}
+<div className="px-4 md:px-6 lg:px-8 max-w-7xl mx-auto" />
+
+{/* 카드 */}
+<div className="p-4 md:p-6 bg-white rounded-xl md:rounded-2xl border" />
+
+{/* CTA */}
+<button className="w-full h-14 bg-primary-500 text-white rounded-xl">주요 액션</button>
+```
+
+</common_patterns>
+
+---
+
+<sources>
+
+- [토스 디자인 시스템 가이드](https://toss.tech/article/toss-design-system-guide)
+- [토스 TDS 개발자센터](https://developers-apps-in-toss.toss.im/design/components.html)
+- [카카오 로그인 디자인 가이드](https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide)
+- [배민 디자인 스토리](https://story.baemin.com/)
+- [우아한형제들 기술블로그](https://techblog.woowahan.com/6305/)
+
+</sources>

package/templates/.claude/skills/korea-uiux-design/references/state-patterns.md

@@ -0,0 +1,320 @@
+# 상태 패턴
+
+<empty>
+
+```tsx
+{/* 기본 빈 상태 */}
+<div className="flex flex-col items-center py-12 gap-4">
+  <div className="w-20 h-20 rounded-full bg-gray-100 flex items-center justify-center">
+    <svg className="w-10 h-10 text-gray-400" />
+  </div>
+  <div className="text-center">
+    <h3 className="font-semibold text-gray-900">아직 내용이 없어요</h3>
+    <p className="text-sm text-gray-600 mt-1">첫 번째 항목을 추가해보세요</p>
+  </div>
+  <button className="h-11 px-4 bg-primary-500 text-white rounded-lg">추가하기</button>
+</div>
+
+{/* 검색 결과 없음 */}
+<div className="flex flex-col items-center py-12 gap-3">
+  <svg className="w-16 h-16 text-gray-300" />
+  <h3 className="font-semibold">검색 결과가 없어요</h3>
+  <p className="text-sm text-gray-600">다른 검색어로 시도해보세요</p>
+</div>
+
+{/* 필터 결과 없음 */}
+<div className="flex flex-col items-center py-12 gap-3">
+  <svg className="w-16 h-16 text-gray-300" />
+  <h3 className="font-semibold">조건에 맞는 항목이 없어요</h3>
+  <p className="text-sm text-gray-600">필터를 조정해보세요</p>
+  <button onClick={resetFilters} className="text-sm text-primary-500 font-medium">
+    필터 초기화
+  </button>
+</div>
+```
+
+</empty>
+
+---
+
+<loading>
+
+```tsx
+{/* 스켈레톤 UI */}
+<div className="space-y-4 animate-pulse">
+  {[1, 2, 3].map(i => (
+    <div key={i} className="p-4 border rounded-xl">
+      <div className="flex gap-3">
+        <div className="w-12 h-12 bg-gray-200 rounded-lg" />
+        <div className="flex-1 space-y-2">
+          <div className="h-4 bg-gray-200 rounded w-3/4" />
+          <div className="h-4 bg-gray-200 rounded w-1/2" />
+        </div>
+      </div>
+    </div>
+  ))}
+</div>
+
+{/* 버튼 로딩 */}
+<button disabled className="h-11 px-4 bg-primary-500 text-white rounded-lg flex items-center gap-2 opacity-70">
+  <svg className="w-5 h-5 animate-spin" />처리 중...
+</button>
+
+{/* 인라인 스피너 */}
+<div className="flex items-center gap-2 text-sm text-gray-600">
+  <svg className="w-4 h-4 animate-spin" />
+  <span>불러오는 중...</span>
+</div>
+
+{/* 풀페이지 로딩 */}
+<div className="fixed inset-0 bg-white z-50 flex flex-col items-center justify-center gap-4">
+  <img src="/logo.svg" className="w-16 h-16" />
+  <svg className="w-8 h-8 animate-spin text-primary-500" />
+  <p className="text-sm text-gray-600">잠시만 기다려주세요</p>
+</div>
+```
+
+</loading>
+
+---
+
+<success>
+
+```tsx
+{/* 토스트 (하단) */}
+<div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50">
+  <div className="bg-gray-900 text-white px-4 py-3 rounded-lg shadow-lg flex items-center gap-2">
+    <svg className="w-5 h-5 text-green-400" />
+    <span className="text-sm">저장되었습니다</span>
+  </div>
+</div>
+
+{/* 토스트 (우측 상단) */}
+<div className="fixed top-4 right-4 z-50">
+  <div className="bg-white border border-green-500 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3">
+    <div className="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center">
+      <svg className="w-5 h-5 text-green-600" />
+    </div>
+    <div>
+      <div className="font-semibold">성공</div>
+      <div className="text-sm text-gray-600">작업이 완료되었습니다</div>
+    </div>
+    <button className="text-gray-400 hover:text-gray-600">✕</button>
+  </div>
+</div>
+
+{/* 인라인 성공 */}
+<div className="p-3 bg-green-50 border border-green-200 rounded-lg flex items-start gap-2">
+  <svg className="w-5 h-5 text-green-600 mt-0.5" />
+  <p className="text-sm text-green-800">이메일이 성공적으로 전송되었습니다</p>
+</div>
+
+{/* 성공 페이지 */}
+<div className="flex flex-col items-center py-16 gap-4">
+  <div className="w-20 h-20 rounded-full bg-green-100 flex items-center justify-center">
+    <svg className="w-10 h-10 text-green-600" />
+  </div>
+  <div className="text-center">
+    <h2 className="text-2xl font-bold mb-2">결제 완료</h2>
+    <p className="text-gray-600">주문이 성공적으로 처리되었습니다</p>
+  </div>
+  <div className="flex gap-2 mt-4">
+    <button className="h-11 px-4 border rounded-lg">주문 내역</button>
+    <button className="h-11 px-4 bg-primary-500 text-white rounded-lg">계속 쇼핑하기</button>
+  </div>
+</div>
+```
+
+</success>
+
+---
+
+<error>
+
+```tsx
+{/* 인풋 에러 */}
+<div>
+  <input className="w-full h-11 px-3 border-2 border-red-500 rounded-lg" aria-invalid="true" />
+  <p className="text-sm text-red-600 mt-1 flex items-center gap-1">
+    <svg className="w-4 h-4" />올바른 이메일을 입력해주세요
+  </p>
+</div>
+
+{/* 알림 박스 */}
+<div className="p-3 bg-red-50 border border-red-200 rounded-lg flex items-start gap-2">
+  <svg className="w-5 h-5 text-red-600 mt-0.5" />
+  <div>
+    <h4 className="font-semibold text-red-900 text-sm mb-1">오류가 발생했습니다</h4>
+    <p className="text-sm text-red-800">네트워크 연결을 확인하고 다시 시도해주세요</p>
+  </div>
+</div>
+
+{/* 에러 페이지 */}
+<div className="flex flex-col items-center min-h-screen px-4 gap-4 justify-center">
+  <div className="w-20 h-20 rounded-full bg-red-100 flex items-center justify-center">
+    <svg className="w-10 h-10 text-red-600" />
+  </div>
+  <div className="text-center">
+    <h2 className="text-2xl font-bold mb-2">페이지를 불러올 수 없어요</h2>
+    <p className="text-gray-600">일시적인 오류가 발생했습니다</p>
+  </div>
+  <button onClick={() => window.location.reload()} className="h-11 px-4 bg-primary-500 text-white rounded-lg">
+    새로고침
+  </button>
+</div>
+
+{/* 404 페이지 */}
+<div className="flex flex-col items-center min-h-screen px-4 gap-4 justify-center">
+  <h1 className="text-6xl font-bold text-gray-900">404</h1>
+  <h2 className="text-2xl font-semibold">페이지를 찾을 수 없어요</h2>
+  <p className="text-gray-600">요청하신 페이지가 존재하지 않거나 이동했을 수 있습니다</p>
+  <button onClick={() => router.push('/')} className="h-11 px-4 bg-primary-500 text-white rounded-lg">
+    홈으로 가기
+  </button>
+</div>
+```
+
+</error>
+
+---
+
+<warning>
+
+```tsx
+{/* 경고 알림 */}
+<div className="p-3 bg-yellow-50 border border-yellow-200 rounded-lg flex items-start gap-2">
+  <svg className="w-5 h-5 text-yellow-600 mt-0.5" />
+  <div>
+    <h4 className="font-semibold text-yellow-900 text-sm mb-1">주의하세요</h4>
+    <p className="text-sm text-yellow-800">이 작업은 되돌릴 수 없습니다</p>
+  </div>
+</div>
+
+{/* 확인 모달 */}
+<div className="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50">
+  <div className="bg-white rounded-2xl max-w-sm w-full p-6">
+    <div className="w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center mx-auto mb-4">
+      <svg className="w-6 h-6 text-yellow-600" />
+    </div>
+    <h2 className="text-lg font-semibold text-center mb-2">정말 삭제하시겠어요?</h2>
+    <p className="text-sm text-gray-600 text-center mb-6">삭제한 항목은 복구할 수 없습니다</p>
+    <div className="flex gap-2">
+      <button onClick={onCancel} className="flex-1 h-11 border rounded-lg">취소</button>
+      <button onClick={onConfirm} className="flex-1 h-11 bg-red-500 text-white rounded-lg">삭제</button>
+    </div>
+  </div>
+</div>
+```
+
+</warning>
+
+---
+
+<info>
+
+```tsx
+{/* 정보 알림 */}
+<div className="p-3 bg-blue-50 border border-blue-200 rounded-lg flex items-start gap-2">
+  <svg className="w-5 h-5 text-blue-600 mt-0.5" />
+  <p className="text-sm text-blue-900 flex-1">새로운 기능이 추가되었습니다. 확인해보세요!</p>
+  <button className="text-blue-600 hover:text-blue-800 text-sm font-medium">자세히</button>
+</div>
+
+{/* 배너 알림 */}
+<div className="w-full bg-primary-50 border-b border-primary-200 py-3 px-4">
+  <div className="max-w-7xl mx-auto flex items-center justify-between gap-4">
+    <div className="flex items-center gap-2 flex-1">
+      <svg className="w-5 h-5 text-primary-600" />
+      <p className="text-sm text-primary-900">현재 시스템 점검이 예정되어 있습니다</p>
+    </div>
+    <button className="text-primary-600 hover:text-primary-800">✕</button>
+  </div>
+</div>
+```
+
+</info>
+
+---
+
+<disabled>
+
+```tsx
+{/* 비활성 버튼 */}
+<button disabled className="h-11 px-4 bg-gray-300 text-gray-500 rounded-lg cursor-not-allowed">
+  버튼
+</button>
+
+{/* 툴팁 포함 */}
+<div className="relative group">
+  <button disabled className="h-11 px-4 bg-gray-300 text-gray-500 rounded-lg cursor-not-allowed">
+    저장하기
+  </button>
+  <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-gray-900 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none">
+    모든 필드를 입력해주세요
+  </div>
+</div>
+
+{/* 비활성 카드 */}
+<div className="p-4 border rounded-xl opacity-50 cursor-not-allowed">
+  <div className="relative">
+    <div className="absolute inset-0 bg-white/50" />
+    {/* 내용 */}
+  </div>
+</div>
+```
+
+</disabled>
+
+---
+
+<offline>
+
+```tsx
+{/* 오프라인 배너 */}
+<div className="fixed top-0 inset-x-0 bg-gray-900 text-white py-2 px-4 z-50">
+  <div className="max-w-7xl mx-auto flex items-center justify-center gap-2">
+    <svg className="w-5 h-5" />
+    <span className="text-sm">인터넷 연결이 끊어졌습니다</span>
+  </div>
+</div>
+```
+
+</offline>
+
+---
+
+<progress>
+
+```tsx
+{/* 단계 표시 */}
+<div className="flex items-center justify-between">
+  {steps.map((step, index) => (
+    <div key={step.id} className="flex items-center">
+      <div className={`w-10 h-10 rounded-full flex items-center justify-center font-semibold ${
+        index < currentStep
+          ? 'bg-primary-500 text-white'
+          : index === currentStep
+          ? 'bg-primary-100 text-primary-600 border-2 border-primary-500'
+          : 'bg-gray-100 text-gray-400'
+      }`}>
+        {index < currentStep ? '✓' : index + 1}
+      </div>
+      {index < steps.length - 1 && (
+        <div className={`h-1 w-16 ${index < currentStep ? 'bg-primary-500' : 'bg-gray-200'}`} />
+      )}
+    </div>
+  ))}
+</div>
+```
+
+</progress>
+
+---
+
+<sources>
+
+- [디자인베이스 - Empty State](https://designbase.co.kr/dictionary/emptystate/)
+- [토스 - UX 라이팅](https://toss.im/career/article/ux-writing)
+- [KRDS](https://www.krds.go.kr/)
+
+</sources>

package/templates/.claude/skills/korea-uiux-design/references/typography.md

@@ -0,0 +1,70 @@
+# 타이포그래피
+
+<fonts>
+
+**기본:** Pretendard | Spoqa Han Sans | Noto Sans KR
+**시스템:** `-apple-system, BlinkMacSystemFont, sans-serif`
+**영문 숫자:** Inter, SF Pro
+
+</fonts>
+
+---
+
+<size_system>
+
+| 용도 | 크기 | Tailwind |
+|------|------|----------|
+| 캡션/뱃지 | 11-12px | text-xs |
+| 부가 정보 | 13px | text-[13px] |
+| 본문 | 14-15px | text-sm/text-base |
+| 강조 본문 | 16-17px | text-base/text-lg |
+| 소제목 | 18-20px | text-lg/text-xl |
+| 섹션 제목 | 22-24px | text-xl/text-2xl |
+| 페이지 제목 | 26-32px | text-2xl/text-3xl |
+
+</size_system>
+
+---
+
+<weight_system>
+
+| 용도 | 웨이트 | Tailwind |
+|------|--------|----------|
+| 본문, 설명 | Regular(400) | font-normal |
+| 버튼, 강조 | Medium(500) | font-medium |
+| 제목, 레이블 | Semibold(600) | font-semibold |
+| 대제목, 숫자 | Bold(700) | font-bold |
+
+</weight_system>
+
+---
+
+<korean_specifics>
+
+**자간:** `tracking-tight (-0.01em)` | `tracking-tighter (-0.02em)`
+**행간:** 제목 `leading-tight (1.3)` | 본문 `leading-relaxed (1.6)` | `leading-loose (1.7)`
+
+</korean_specifics>
+
+---
+
+<examples>
+
+```tsx
+{/* 페이지 제목 */}
+<h1 className="text-3xl font-bold tracking-tight leading-tight">대시보드</h1>
+
+{/* 섹션 제목 */}
+<h2 className="text-xl font-semibold tracking-tight">최근 활동</h2>
+
+{/* 본문 */}
+<p className="text-sm font-normal leading-relaxed text-gray-700">본문</p>
+
+{/* 부가 정보 */}
+<span className="text-[13px] text-gray-500">2시간 전</span>
+
+{/* 캡션/뱃지 */}
+<span className="text-xs font-medium text-gray-600">신규</span>
+```
+
+</examples>