القائمة
UX/동작 규칙 E1-E9 검증. 컴포넌트, CSS, App 레이아웃 변경 후 사용.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
세션 변경사항을 분석하여 검증 스킬 누락을 탐지합니다. 기존 스킬을 동적으로 탐색하고, 새 스킬을 생성하거나 기존 스킬을 업데이트한 뒤 CLAUDE.md를 관리합니다.
todoStore↔timerStore 간 연동 및 삭제 안전성 SYNC-1~6 검증.
프로젝트의 모든 verify 스킬을 순차 실행하여 통합 검증 보고서를 생성합니다. 기능 구현 후, PR 전, 코드 리뷰 시 사용.
서버 사이드 타이머 동기화 SYNC-T1~T5 검증. 브라우저 닫아도 타이머 상태 유지, 서버 시간 기준 경과시간 계산.
프론트↔백엔드 API 연동 API-1~7 검증. todoStore, 서버 라우트 변경 후 사용.
프런트엔드·백엔드 빌드 검증 BUILD-1~4. 소스 변경 후 타입 체크와 프로덕션 빌드가 에러 없이 통과하는지 확인.
| name | verify-ui-conventions |
| description | UX/동작 규칙 E1-E9 검증. 컴포넌트, CSS, App 레이아웃 변경 후 사용. |
UI/UX 규칙(E1-E8)이 올바르게 구현되었는지 검증합니다:
src/components/ 내 파일 추가/수정 후src/App.tsx 레이아웃 변경 후| File | Purpose |
|---|---|
src/App.tsx | 메인 레이아웃 (Timer + TodoList) |
src/App.css | 전체 스타일 + 반응형 미디어 쿼리 |
src/components/Timer.tsx | 타이머 UI + 활성 TODO 표시 |
src/components/TodoItem.tsx | 개별 TODO (🍅 카운트, 인라인 편집, ▶ 버튼) |
src/components/TodoList.tsx | TODO 목록 (미완료/완료 분리) |
파일: src/App.tsx
검사: Timer + TodoList가 하나의 페이지에 렌더링, 라우팅 없음
grep -n "Timer\|TodoList" src/App.tsx
grep -rc "react-router\|BrowserRouter\|Routes" src/ --include="*.tsx"
PASS: Timer + TodoList 존재 + react-router 0건 FAIL: 라우터 사용 또는 컴포넌트 누락
파일: src/components/
검사: 파일명 + export 함수명 PascalCase
ls src/components/*.tsx
grep -n "export default function" src/components/*.tsx
PASS: 모든 파일명이 대문자 시작 + export 함수도 PascalCase FAIL: camelCase 또는 kebab-case 파일명
수정 방법: 파일명을 PascalCase로 변경 (예: todo-item.tsx → TodoItem.tsx)
파일: src/App.css
검사: @media 쿼리 존재
grep -n "@media" src/App.css
PASS: @media 쿼리 최소 1개 존재 FAIL: 반응형 규칙 없음
수정 방법: @media (max-width: 480px) { ... } 추가
파일: src/components/TodoList.tsx
검사: completed 기준 분리 렌더링
grep -n "completed" src/components/TodoList.tsx
grep -n "filter" src/components/TodoList.tsx
PASS: !t.completed + t.completed 분리 필터링 존재
FAIL: 분리 없이 단일 리스트
파일: src/components/Timer.tsx
검사: activeTodoId에 해당하는 Todo 제목 표시
grep -n "activeTodo" src/components/Timer.tsx
grep -n "todoTitle\|activeTodoTitle" src/components/Timer.tsx src/App.tsx
PASS: 활성 TODO 제목 표시 로직 존재 FAIL: 바인딩된 TODO 표시 없음
파일: src/components/TodoItem.tsx
검사: 🍅 표시 + isEditing 상태 기반 편집 모드
grep -n "completedPomodoros\|🍅" src/components/TodoItem.tsx
grep -n "isEditing\|setIsEditing" src/components/TodoItem.tsx
PASS: 🍅 카운트 표시 + 인라인 편집 모드 존재 FAIL: 누락
파일: src/stores/timerStore.ts
검사: 서버 동기화로 브라우저 재접속 시 타이머 복원
grep -c "fetchTimerState\|TIMER_API\|syncToServer" src/stores/timerStore.ts
PASS: fetchTimerState + syncToServer 로직 존재 (서버 동기화) FAIL: 타이머 상태 복원 로직 없음
파일: src/components/TodoItem.tsx, src/stores/timerStore.ts
검사:
grep -n "handleItemClick\|handleCheckbox\|setActiveTodo" src/components/TodoItem.tsx
grep -n "setActiveTodo" src/stores/timerStore.ts
grep -n "alert\|window.confirm" src/components/TodoItem.tsx
PASS: li 클릭 → setActiveTodo(선택만) + 실행중 다른 TODO 전환 시 confirm 경고 + 체크박스 → 실행중 alert 경고 존재 + 타이머 자동 시작 없음 FAIL: 리스트 클릭 시 start() 호출 또는 실행중 전환/체크박스에 경고 없음
| Step | 검사 | 판정 | 비고 |
|------|------|------|------|
| 1 | 단일 페이지 | PASS/FAIL | 상세 |
| 2 | PascalCase | PASS/FAIL | 상세 |
| 3 | 반응형 CSS | PASS/FAIL | 상세 |
| 4 | 완료 분리 | PASS/FAIL | 상세 |
| 5 | 바인딩 표시 | PASS/FAIL | 상세 |
| 6 | 🍅 + 인라인편집 | PASS/FAIL | 상세 |
| 7 | 타이머 복원 | PASS/FAIL | 상세 |
| 8 | 클릭 동작 | PASS/FAIL | 상세 |