## 2026-05-27 — Vault 사이드바 너비 자유 조절 + Resizer 시각성 강화

### 배경

어제 도입된 Obsidian-style `VaultLayout`에서 좌/우 사이드바와 중앙 에디터 사이의 너비 조절 UX가 두 가지 문제를 안고 있었다:

1. **Resizer 핸들이 너무 얇고 흐릿함** — `w-1`(4px) + `bg-warm-200/60`이라 마우스 커서가 어디서 col-resize로 바뀌는지 시각적으로 거의 안 보였고, 드래그 중에도 색 변화가 없어 어디서 끌고 있는지 확인이 어려웠다.
2. **사이드바 너비 제한이 좁음** — 좌측 200~600px, 우측 220~600px clamp가 걸려 있어 사이드바를 옵시디언처럼 ribbon만 남도록 작게 줄이거나 화면 거의 끝까지 크게 키우는 게 불가능했다.

### 주요 변경

#### 1. Resizer 두께/색상/active 상태 강화 (`08b3c15`)

- **`src/client/src/components/vault/Resizer.tsx`**: 핸들 두께 `w-1`(4px) → `w-1.5`(6px), 기본 배경 `bg-warm-200/60` → `bg-warm-300`로 진하게. `active:bg-accent` 추가로 드래그 중에도 accent 색을 유지해 현재 잡고 있는 핸들이 시각적으로 명확해짐.

#### 2. 사이드바 너비 clamp 통일·해제 (`b868f51`)

- **`src/client/src/components/vault/vault-state.ts`**: 좌/우 별도였던 `LEFT_W_MIN`/`LEFT_W_MAX`/`RIGHT_W_MIN`/`RIGHT_W_MAX` 상수 4개를 `SIDEBAR_W_MIN`(32) / `SIDEBAR_W_MAX`(100000) 한 쌍으로 통합. 최소 32는 사이드바 ribbon 한 줄 너비, 최대는 사실상 무제한. `readLayout()`과 `setLeftWidth`/`setRightWidth` 양쪽에서 새 상수 사용.
- **`src/client/src/components/vault/SidebarRail.tsx`**: 내부 패널 콘텐츠의 `style={{ width: Math.max(width - 32, 100) }}` 안전판을 `Math.max(width - 32, 0)`으로 완화. 사이드바를 끝까지 줄이면 패널 콘텐츠가 0px이 되고 ribbon(32px)만 남는 형태가 됨 — `leftCollapsed`/`rightCollapsed` 상태로 명시적으로 접지 않아도 동일한 시각 효과를 드래그로 도달 가능.

### 수정된 주요 파일

| 파일 | 변경 내용 |
|------|----------|
| `src/client/src/components/vault/Resizer.tsx` | 핸들 6px·warm-300·active 색상 유지 |
| `src/client/src/components/vault/vault-state.ts` | width clamp 좌/우 통일 + 32~100000으로 해제 |
| `src/client/src/components/vault/SidebarRail.tsx` | 내부 콘텐츠 min width 100 → 0 |

### 아키텍처 결정

1. **clamp 완전 제거 대신 32/100000으로 두기**: 음수·NaN 같은 비정상 값은 막아야 하므로 `clamp()` 자체는 유지. 32는 ribbon 너비 그대로(시각적 일관성), 100000은 절대로 화면 너비를 넘기지 않는 큰 상수(사용자 모니터 폭 다양성 대응) — 사용자 입장에서는 사실상 무제한.
2. **내부 콘텐츠 min width 0 허용**: 사이드바가 ribbon만 남는 상태를 `*Collapsed` boolean에만 의존하지 않고 너비 드래그만으로도 자연스럽게 만들기 위함. `flex` 컨테이너 + `min-w-0`로 중앙 에디터는 항상 `flex-1`로 남은 공간을 차지하므로 사이드바를 키워도 레이아웃이 깨지지 않음.
