사용자 화면 사이드바 스타일을 Thred 기준으로 정렬.

좌측 네비게이션과 카테고리의 간격 및 hover 인터랙션을 원본 패턴에 맞게 보정하고, 테마 전환/사이드바 전환 애니메이션과 샘플 폴더 Git 제외 설정을 함께 반영해 사용자 화면 일관성을 높였다.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-05-07 17:52:18 +09:00
parent 97d2d8ffb3
commit d47134c46d
15 changed files with 252 additions and 56 deletions

View File

@@ -1,5 +1,25 @@
# 의사결정 이력
## 2026-05-07 v0.0.45
### 사용자 화면 단일 배경과 사이드바 전환 방식 결정
사용자 화면 라이트 모드는 전체 배경을 `#fcfcfc`로 통일하고, 영역 구분은 색상 차이가 아니라 보더로만 처리한다. Thred 참고 화면처럼 배경 톤 편차를 줄이면 카드, 사이드바, 본문이 하나의 캔버스 안에서 정돈되어 보이고 시선이 콘텐츠와 타이포에 더 집중되기 때문이다.
왼쪽 사이드바는 열림/닫힘 시 DOM을 제거하지 않고 너비를 애니메이션으로 줄인다. 사이드바가 즉시 사라지면 레이아웃이 튀어 보이므로, 그리드 컬럼과 사이드바 폭을 함께 전환해 스르륵 접히는 느낌을 유지한다.
왼쪽 네비게이션 항목은 기본 상태에서 회색 세로 바를 보이고 hover/focus 시 원형 아이콘으로 전환한다. 정적 상태에서는 구분선을 제공하고 상호작용 시 클릭 가능 영역을 명확하게 드러내기 위해서다.
## 2026-05-07 v0.0.44
### 사용자 화면 테마 상태 저장과 샘플 폴더 제외 결정
사용자 화면 라이트/다크 모드는 시스템 테마 자동 감지에만 의존하지 않고 수동 전환 상태를 `localStorage.SITE_THEME`에 저장한다. 공개 화면 헤더와 사이드바에서 같은 테마 상태를 공유해야 하며, 다음 방문에서도 사용자가 마지막으로 선택한 테마를 유지해야 하기 때문이다.
테마 색상 적용은 CSS 변수와 `html[data-theme]` 조합으로 처리한다. 기존 `prefers-color-scheme`는 기본 fallback으로 유지하되, 사용자가 명시적으로 라이트를 고른 경우 시스템이 다크여도 의도한 화면이 유지되도록 우선순위를 분리한다.
Thred 참고용 샘플인 `ZCF-v1.0.5`와 보관 폴더는 레퍼런스 자료로만 사용하고 Git 추적 대상에서 제외한다. 대용량 정적 자산과 외부 테마 원본이 변경 이력에 섞이면 실제 서비스 코드 변경 검토가 어려워지기 때문이다.
## 2026-05-07 v0.0.43
### 대표 이미지 액션과 선택 확정 흐름 결정