@kood/claude-code 0.3.14 → 0.3.15

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

@@ -0,0 +1,180 @@
+# 아이콘 가이드
+
+<size_system>
+
+| 크기 | 용도 | 터치 영역 |
+|------|------|----------|
+| 16px, 20px | 텍스트와 함께 | - |
+| 24px | 기본 시스템 아이콘 | 44-48px |
+| 32-48px | 강조 | 그대로 |
+
+**규칙:** 4px/8px 배수 | ✅ 16, 20, 24, 32, 48 | ❌ 홀수, 소수점
+
+</size_system>
+
+---
+
+<touch_target>
+
+**최소 터치 영역:** Apple 44px | Google 48px | 한국 44-48px
+
+```tsx
+{/* ✅ 충분한 터치 영역 */}
+<button className="w-12 h-12 flex items-center justify-center">
+  <svg className="w-6 h-6" />
+</button>
+
+{/* ❌ 부족 */}
+<button className="w-8 h-8"><svg className="w-4 h-4" /></button>
+```
+
+</touch_target>
+
+---
+
+<styles>
+
+**Outline (기본):** 깔끔, 미니멀, 비활성 상태
+**Filled (활성):** 선택/활성 상태, 강조
+
+**선 두께 (KRDS):**
+- 16px: 1.2-1.5px
+- 20px: 1.5-1.8px
+- 24px: 1.6-2px
+- 32px: 2-2.5px
+- 48px: 3px
+
+```tsx
+{/* Outline */}
+<svg className="w-6 h-6 stroke-current text-gray-600" fill="none" />
+
+{/* Filled */}
+<svg className="w-6 h-6 fill-current text-primary-500" />
+```
+
+</styles>
+
+---
+
+<libraries>
+
+| 라이브러리 | 특징 | 적합성 |
+|-----------|------|--------|
+| **Heroicons** | Tailwind, 라인/채움 | ⭐⭐⭐⭐⭐ |
+| **Lucide** | Feather 후속, 깔끔 | ⭐⭐⭐⭐⭐ |
+| **Phosphor** | 다양한 웨이트 | ⭐⭐⭐⭐ |
+| **Material Icons** | Google, 다양 스타일 | ⭐⭐⭐⭐ |
+| **Tabler Icons** | 미니멀 라인 | ⭐⭐⭐⭐ |
+
+```tsx
+import { HomeIcon } from '@heroicons/react/24/outline';
+import { HomeIcon as HomeSolid } from '@heroicons/react/24/solid';
+```
+
+</libraries>
+
+---
+
+<colors>
+
+```tsx
+{/* 비활성 */}
+<svg className="w-6 h-6 text-gray-600" />
+
+{/* 활성 */}
+<svg className="w-6 h-6 text-primary-500" />
+
+{/* 호버 */}
+<svg className="w-6 h-6 text-gray-600 hover:text-gray-900 transition-colors" />
+
+{/* Semantic */}
+<svg className="w-5 h-5 text-green-500" />  {/* Success */}
+<svg className="w-5 h-5 text-red-500" />    {/* Error */}
+```
+
+</colors>
+
+---
+
+<component_sizes>
+
+```tsx
+{/* Small Button: 아이콘 16px */}
+<button className="h-8 px-3 flex items-center gap-1.5">
+  <svg className="w-4 h-4" /><span>버튼</span>
+</button>
+
+{/* Medium Button: 아이콘 20px */}
+<button className="h-11 px-4 flex items-center gap-2">
+  <svg className="w-5 h-5" /><span>버튼</span>
+</button>
+
+{/* Icon Only: 터치 영역 44px + 아이콘 24px */}
+<button className="w-11 h-11 flex items-center justify-center">
+  <svg className="w-6 h-6" />
+</button>
+
+{/* 인풋 좌측 */}
+<div className="relative">
+  <div className="absolute left-3 top-1/2 -translate-y-1/2">
+    <svg className="w-5 h-5 text-gray-400" />
+  </div>
+  <input className="w-full h-11 pl-10 pr-3" />
+</div>
+
+{/* 빈 상태 */}
+<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>
+```
+
+</component_sizes>
+
+---
+
+<accessibility>
+
+```tsx
+{/* ✅ aria-label */}
+<button aria-label="알림">
+  <svg className="w-6 h-6" aria-hidden="true" />
+</button>
+
+{/* ✅ 텍스트와 함께 */}
+<button>
+  <svg className="w-5 h-5" aria-hidden="true" />
+  <span>검색</span>
+</button>
+
+{/* ❌ 레이블 없음 */}
+<button><svg className="w-6 h-6" /></button>
+```
+
+</accessibility>
+
+---
+
+<animation>
+
+```tsx
+{/* 호버 */}
+<svg className="w-6 h-6 text-gray-600 hover:text-gray-900 transition-colors" />
+<svg className="w-6 h-6 hover:scale-110 transition-transform" />
+
+{/* 로딩 */}
+<svg className="w-6 h-6 animate-spin text-primary-500" />
+<svg className="w-6 h-6 animate-pulse text-gray-400" />
+```
+
+</animation>
+
+---
+
+<sources>
+
+- [KRDS 아이콘 가이드](https://www.krds.go.kr/html/site/style/style_06.html)
+- [Gmarket Design System - Iconography](https://gds.gmarket.co.kr/foundation/iconography)
+- [Heroicons](https://heroicons.com)
+- [Lucide Icons](https://lucide.dev)
+
+</sources>

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

@@ -0,0 +1,259 @@
+# 마이크로 인터랙션
+
+<principles>
+
+**시간:** 150-250ms 적절 | <100ms 너무 빠름 | >300ms 너무 느림
+**이징:** ease-out, cubic-bezier(0.4, 0, 0.2, 1)
+**목적:** 피드백 제공, 상태 변화 명확, 주의 집중
+
+✅ 피드백/상태/집중 | ❌ 장식/과도한 움직임/불필요한 딜레이
+
+</principles>
+
+---
+
+<button>
+
+```tsx
+{/* 호버: 배경색 */}
+<button className="bg-primary-500 hover:bg-primary-600 transition-colors duration-200">버튼</button>
+
+{/* 호버: 그림자 */}
+<button className="shadow-sm hover:shadow-md transition-shadow duration-200">버튼</button>
+
+{/* 호버: 크기 */}
+<button className="hover:scale-105 transition-transform duration-200">버튼</button>
+
+{/* 클릭: Scale down */}
+<button className="active:scale-95 transition-transform duration-150">버튼</button>
+
+{/* 로딩 */}
+<button disabled className="bg-primary-500 text-white flex items-center gap-2">
+  <svg className="w-5 h-5 animate-spin" />{isLoading ? '처리 중...' : '저장하기'}
+</button>
+```
+
+</button>
+
+---
+
+<input>
+
+```tsx
+{/* 포커스: 링 */}
+<input className="border focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200" />
+
+{/* 플로팅 레이블 */}
+<div className="relative">
+  <input
+    id="email"
+    className="peer w-full h-12 px-3 pt-5 pb-1 border rounded-lg focus:border-primary-500 transition-colors"
+    placeholder=" "
+  />
+  <label
+    htmlFor="email"
+    className="absolute left-3 top-1/2 -translate-y-1/2 transition-all duration-200 peer-focus:top-2 peer-focus:text-xs peer-focus:text-primary-500 peer-[:not(:placeholder-shown)]:top-2 peer-[:not(:placeholder-shown)]:text-xs"
+  >
+    이메일
+  </label>
+</div>
+
+{/* 에러 Shake */}
+<input className={hasError ? 'animate-shake border-red-500' : 'border-gray-300'} />
+
+@keyframes shake {
+  0%, 100% { transform: translateX(0); }
+  25% { transform: translateX(-8px); }
+  75% { transform: translateX(8px); }
+}
+```
+
+</input>
+
+---
+
+<card>
+
+```tsx
+{/* 미세한 그림자 */}
+<div className="border rounded-xl hover:shadow-md transition-shadow duration-300" />
+
+{/* 들어올리기 */}
+<div className="border rounded-xl hover:-translate-y-1 hover:shadow-lg transition-all duration-300" />
+
+{/* 테두리 색상 */}
+<div className="border border-gray-200 rounded-xl hover:border-primary-500 transition-colors duration-300" />
+
+{/* 클릭 가능 */}
+<button className="w-full text-left p-4 border rounded-xl hover:border-primary-500 hover:shadow-md active:scale-[0.98] transition-all duration-200" />
+```
+
+</card>
+
+---
+
+<toggle>
+
+```tsx
+{/* 스위치 */}
+<button
+  onClick={() => setEnabled(!enabled)}
+  className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
+    enabled ? 'bg-primary-500' : 'bg-gray-300'
+  }`}
+>
+  <span
+    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
+      enabled ? 'translate-x-6' : 'translate-x-1'
+    }`}
+  />
+</button>
+
+{/* 체크박스 */}
+<label className="flex items-center gap-2 cursor-pointer">
+  <input type="checkbox" className="peer sr-only" />
+  <div className="w-5 h-5 border-2 border-gray-300 rounded peer-checked:bg-primary-500 peer-checked:border-primary-500 transition-all duration-200 flex items-center justify-center">
+    <svg className="w-3 h-3 text-white scale-0 peer-checked:scale-100 transition-transform duration-200" />
+  </div>
+  <span>옵션</span>
+</label>
+```
+
+</toggle>
+
+---
+
+<modal>
+
+```tsx
+{/* 페이드 인 */}
+<div className={`fixed inset-0 bg-black/50 transition-opacity duration-300 ${
+  isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
+}`}>
+  <div className={`fixed inset-0 flex items-center justify-center transition-transform duration-300 ${
+    isOpen ? 'scale-100' : 'scale-95'
+  }`}>
+    <div className="bg-white rounded-2xl p-6 max-w-md" />
+  </div>
+</div>
+
+{/* 슬라이드 업 (바텀시트) */}
+<div className={`fixed bottom-0 inset-x-0 bg-white rounded-t-2xl transition-transform duration-300 ${
+  isOpen ? 'translate-y-0' : 'translate-y-full'
+}`} />
+```
+
+</modal>
+
+---
+
+<loading>
+
+```tsx
+{/* 스켈레톤 */}
+<div className="space-y-3 animate-pulse">
+  <div className="h-4 bg-gray-200 rounded w-3/4" />
+  <div className="h-4 bg-gray-200 rounded w-1/2" />
+</div>
+
+{/* 스피너 */}
+<svg className="w-6 h-6 animate-spin text-primary-500">
+  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
+  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
+</svg>
+
+{/* 프로그레스 바 */}
+<div className="fixed top-0 left-0 right-0 h-1 bg-gray-200">
+  <div className="h-full bg-primary-500 transition-all duration-300" style={{ width: `${progress}%` }} />
+</div>
+```
+
+</loading>
+
+---
+
+<toast>
+
+```tsx
+{/* 하단 슬라이드 업 */}
+<div className={`fixed bottom-4 left-1/2 -translate-x-1/2 transition-all duration-300 ${
+  isVisible ? 'translate-y-0 opacity-100' : 'translate-y-4 opacity-0 pointer-events-none'
+}`}>
+  <div className="bg-gray-900 text-white px-4 py-3 rounded-lg shadow-lg">
+    저장되었습니다
+  </div>
+</div>
+
+{/* 우측 슬라이드 인 */}
+<div className={`fixed top-4 right-4 transition-all duration-300 ${
+  isVisible ? 'translate-x-0 opacity-100' : 'translate-x-4 opacity-0 pointer-events-none'
+}`}>
+  <div className="bg-white border px-4 py-3 rounded-lg shadow-lg">
+    작업이 완료되었습니다
+  </div>
+</div>
+```
+
+</toast>
+
+---
+
+<page_transition>
+
+```tsx
+{/* Fade */}
+<div className="animate-fadeIn" />
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+{/* Slide Up */}
+<div className="animate-slideUp" />
+
+@keyframes slideUp {
+  from { opacity: 0; transform: translateY(20px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+```
+
+</page_transition>
+
+---
+
+<avoid>
+
+❌ 모든 요소에 애니메이션
+❌ 300ms+ 느린 전환
+❌ 복잡한 3D 효과
+❌ 자동 재생 애니메이션 (접근성)
+
+**Reduced Motion:**
+```css
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+```
+
+```tsx
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+<button className={prefersReducedMotion ? '' : 'hover:scale-105 transition-transform'}>버튼</button>
+```
+
+</avoid>
+
+---
+
+<sources>
+
+- [디자인베이스 - 마이크로인터랙션](https://designbase.co.kr/dictionary/microinteractions/)
+- [디자인키트 - Micro Interactions](https://www.designkits.co.kr/blog/web-terminology/Micro-Interactions)
+- [Micron.js](https://webkul.github.io/micron/)
+- [CSS 애니메이션으로 UX 향상](https://velog.io/@jiheon788/Micro-Interactions의-도입-CSS-애니메이션으로-사용자-경험UX-향상하기)
+
+</sources>

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

@@ -0,0 +1,115 @@
+# 반응형 패턴
+
+<breakpoints>
+
+```
+sm: 640px   | md: 768px   | lg: 1024px  | xl: 1280px
+모바일       | 태블릿      | 소형 데스크톱 | 데스크톱
+```
+
+</breakpoints>
+
+---
+
+<navigation>
+
+**데스크톱:** 상단 헤더 + 좌측 사이드바
+**태블릿:** 상단 헤더 + 햄버거 메뉴 (오버레이)
+**모바일:** 상단 헤더 + 하단 탭바
+
+```tsx
+{/* 사이드바: 데스크톱만 */}
+<aside className="hidden lg:block w-60" />
+
+{/* 하단 탭바: 모바일만 */}
+<nav className="lg:hidden fixed bottom-0 w-full" />
+```
+
+</navigation>
+
+---
+
+<grid>
+
+**데스크톱:** 3-4 컬럼 | **태블릿:** 2 컬럼 | **모바일:** 1-2 컬럼
+
+```tsx
+<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+  {items.map(item => <Card key={item.id} {...item} />)}
+</div>
+```
+
+</grid>
+
+---
+
+<table_to_card>
+
+```tsx
+{/* 데스크톱: 테이블 */}
+<table className="hidden md:table w-full">
+  <thead><tr><th>이름</th><th>이메일</th></tr></thead>
+  <tbody>
+    {users.map(user => <tr key={user.id}><td>{user.name}</td></tr>)}
+  </tbody>
+</table>
+
+{/* 모바일: 카드 */}
+<div className="md:hidden space-y-3">
+  {users.map(user => (
+    <div key={user.id} className="p-4 border rounded-lg">
+      <div className="font-semibold">{user.name}</div>
+      <div className="text-sm text-gray-600">{user.email}</div>
+    </div>
+  ))}
+</div>
+```
+
+</table_to_card>
+
+---
+
+<touch_optimization>
+
+**최소 터치 타겟:** 44px × 44px
+**버튼 간 간격:** 최소 8px
+
+```tsx
+{/* ✅ 충분한 터치 영역 */}
+<button className="h-11 px-4">버튼</button>
+
+{/* ❌ 너무 작음 */}
+<button className="h-6 px-2 text-xs">버튼</button>
+```
+
+</touch_optimization>
+
+---
+
+<container_width>
+
+| 용도 | max-w | 패딩 |
+|------|-------|------|
+| 대시보드 | max-w-7xl | px-4 md:px-6 lg:px-8 |
+| 콘텐츠 | max-w-3xl | px-4 md:px-6 |
+| 폼/설정 | max-w-md | px-4 |
+
+</container_width>
+
+---
+
+<spacing>
+
+**패딩:** 모바일 px-4 (16px) | 태블릿 px-6 (24px) | 데스크톱 px-8 (32px)
+**섹션 간:** space-y-8 md:space-y-12 (32px → 48px)
+**카드 내부:** p-4 md:p-6 (16px → 24px)
+
+```tsx
+<div className="px-4 md:px-6 lg:px-8">
+  <div className="space-y-8 md:space-y-12">
+    <section className="p-4 md:p-6 border rounded-lg" />
+  </div>
+</div>
+```
+
+</spacing>