## 2026-04-15 — Glassmorphism + Skeleton + 인라인 프로젝트명 수정 + Rate Limit 자동 재스케줄

### 배경

Apple 스타일 디자인 시스템(4/7) 후속으로 glassmorphism, micro-interactions, 다층 그림자, 순차 등장 애니메이션을 도입하여 시각적 만족감 강화. 프로젝트 이름은 생성 시 고정되어 수정이 불가능하던 제약 해결. Claude CLI의 rate limit 소진 시 창구 리셋 시점에 자동으로 태스크를 재시도하는 스케줄링 추가.

### 주요 변경

#### 1. UI 디자인 업그레이드 — glassmorphism + skeleton + 애니메이션 (`b35d89d`, `3637bb1`, `b2c9c3f`, `51e10f5`, `4cf739f`)

- **클라이언트**: `index.css` 다층 그림자 변수(elevated, card hover용), 카드 상단 하이라이트 + 호버 부상 애니메이션
- **클라이언트**: `tailwind.config.js` — slide-up/slide-down/scale-in/shimmer 등 cubic-bezier 기반 애니메이션 키프레임
- **클라이언트**: `index.css` 전역 전환 효과 — 모든 버튼/링크/입력에 0.3s cubic-bezier 적용
- **클라이언트**: 프로젝트 목록/토론 목록 stagger 애니메이션 (50ms 간격으로 카드 slide-up)
- **클라이언트**: `ProjectForm` 모달에 backdrop-blur + scale-up 애니메이션
- **클라이언트**: `Skeleton.tsx` 신규 + `App`/`ProjectList`/`ProjectDetail`/`DiscussionDetail`/`NotionPanel`/`AnalyticsPanel`에 스켈레톤 로딩 상태 적용
- **클라이언트**: glass/glass-card CSS — `@apply` 호환성 버그 수정(opacity 클래스 분리), 다크 모드 배경색 수정

#### 2. 프로젝트 이름 인라인 수정 (`d2ce584`)

- **클라이언트**: `ProjectHeader.tsx` — h1 클릭 시 인라인 input 전환 (Enter 저장, Escape 취소, blur 자동 저장, hover 시 연필 아이콘 힌트)
- **i18n**: `header.editName` 추가

#### 3. Rate Limit 리셋 시점 자동 재스케줄 (`e2a1ecf`, `74fe7f9`, `4b3ae98`, `a219c59`)

- **서버**: `log-streamer.ts` — Claude stream-json의 `rate_limit_event` 파싱, WebSocket으로 브로드캐스트
- **서버**: 서버 시작 시 rate limit reset 시각 fetch하여 복구
- **서버**: `GET /api/rate-limit` (현재 reset 시각 조회), `POST /api/todos/:id/schedule-on-reset` (리셋 시점 1회성 스케줄 생성)
- **클라이언트**: `TodoItem.tsx` — rate-limit 상태일 때 "리셋 시점에 실행 예약" UI 표시. pending/failed/stopped 등 startable 상태 모두에 제공
- **i18n**: 한/영 번역 키 추가

#### 4. JSON 에러 응답 파싱 + 기타 버그 수정 (`9f8d5ad`, `40ed6fa`)

- **클라이언트**: `api/client.ts` — 응답 body의 JSON 에러를 파싱하여 가독성 있는 메시지로 표시
- **클라이언트**: 브랜치 컨텍스트 메뉴 클릭이 액션 트리거되지 않던 버그 수정

### 수정된 주요 파일

| 파일 | 변경 내용 |
|------|----------|
| `src/client/src/index.css` | 다층 그림자, 글래스모피즘, stagger 애니메이션, 글로벌 전환 |
| `src/client/tailwind.config.js` | slide-up/scale-in/shimmer 애니메이션 키프레임 |
| `src/client/src/components/Skeleton.tsx` | **신규** — 스켈레톤 로딩 컴포넌트 |
| `src/client/src/components/ProjectHeader.tsx` | 이름 인라인 편집 모드 |
| `src/server/services/log-streamer.ts` | rate_limit_event 파싱 + WebSocket 브로드캐스트 |
| `src/server/routes/schedules.ts` | `/rate-limit`, `/todos/:id/schedule-on-reset` 엔드포인트 |
| `src/server/index.ts` | 서버 시작 시 rate limit reset 시각 fetch |
| `src/client/src/components/TodoItem.tsx` | rate-limit 재스케줄 UI |

### 아키텍처 결정

1. **Rate limit 1회성 스케줄 위임**: rate limit 복구 로직을 별도 서비스가 아닌 기존 `schedule_runs` 인프라 위에 1회성 스케줄로 구현. scheduler는 이미 실행/만료 처리를 담당하므로 재사용
2. **Stagger 애니메이션 CSS 기반**: JS 기반 staggered reveal 대신 CSS `animation-delay`로 처리하여 리액트 리렌더링 비용 0

---
