캘린더의 콘텐츠와 컨트롤 레이어를 분리한다

[developer-1px]

Goal Anchor

• Outcome: 캘린더의 콘텐츠 평면과 컨트롤 평면을 시각적·레이아웃적으로 분리한다.
• Done:
  • 일정, 날짜, 시간 그리드는 하나의 연속된 콘텐츠 평면으로 유지한다.
  • 탐색, 보기 전환, 캘린더 선택, 인스펙터, AI 입력은 콘텐츠를 밀지 않는 플로팅 컨트롤로 배치한다.
  • 컨트롤끼리 표면, 크기, 라운드, 그림자, 포커스 규칙을 통일한다.
  • 실제 주간 화면에서 겹침, 스크롤, 좁은 폭, 이벤트 선택 상태를 검증한다.
• Don't:
  • 아직 공용 ControlLayer나 새 디자인 시스템으로 승격하지 않는다.
  • 캘린더 이벤트와 날짜 셀을 플로팅 카드로 만들지 않는다.
  • 캘린더 기능이나 데이터 모델은 변경하지 않는다.

범위

캘린더 데모 라우트의 제품 로컬 레이아웃과 시각 규칙만 변경한다. 기존 정본 UI primitive는 역할과 책임이 일치하는 범위에서 재사용한다.

검증

• 캘린더 관련 테스트와 타입 검사
• 주간 화면 실제 브라우저 확인
• 컨트롤 겹침, 스크롤, 좁은 폭, 이벤트 선택 상태 확인
• 변경 파일과 계약의 양방향 대조

[developer-1px]

작업 계획

Goal Anchor

• Outcome: 캘린더의 콘텐츠 평면과 컨트롤 평면을 시각적·레이아웃적으로 분리한다.
• Done: 콘텐츠를 밀지 않는 플로팅 조작부, 통일된 컨트롤 표현, 실제 주간 화면의 겹침·스크롤·좁은 폭·선택 상태 검증.
• Don't: 공용 ControlLayer 승격, 이벤트·날짜 셀의 플로팅 카드화, 기능·데이터 모델 변경은 하지 않는다.

단계

1. 현재 캘린더의 콘텐츠·컨트롤 배치와 반응형 동작을 추적한다.
2. 캘린더 제품 로컬 범위에서 컨트롤을 독립 오버레이 평면으로 재배치하고 표면 규칙을 통일한다.
3. 관련 검사와 실제 브라우저에서 기본·선택·좁은 폭·스크롤 상태를 검증한다.
4. 전체 diff를 계약과 대조한 뒤 커밋, 푸시, PR을 연다.

위험과 제외

• 플로팅 컨트롤이 콘텐츠를 가리거나 포인터·키보드 접근을 방해할 수 있어 실제 화면 검증을 필수로 한다.
• 공용 UI 시스템 추출과 캘린더 도메인 동작 변경은 이번 범위 밖이다.

[developer-1px]

구현 진행

콘텐츠 그리드를 밀던 상단 행과 왼쪽 열을 제거하고, 캘린더 제품 로컬 오버레이 평면으로 컨트롤을 재배치했다.

이전
ProductShell
├─ Toolbar (문서 흐름의 행)
└─ Canvas
   ├─ Sources (문서 흐름의 열)
   ├─ Calendar content
   ├─ Inspector
   └─ Composer

현재
ProductShell
├─ Toolbar (floating)
└─ Canvas
   ├─ Control layer (absolute)
   │  ├─ Sources
   │  ├─ Inspector
   │  └─ Composer
   └─ Content layer
      └─ Calendar grid

확인된 상태:

• 기본 주간 화면에서 콘텐츠 그리드가 전체 너비를 사용한다.
• 소스 선택은 포커스 시에만 콘텐츠 위로 확장된다.
• 이벤트 선택 인스펙터는 선택 대상에 앵커되어 오버레이된다.
• 760px 및 480px 폭에서 상단 조작부를 확인했고, 작은 폭에서는 중복 기간 문자열만 숨겨 조작부 충돌을 피한다.

다음은 사이트 타입 검사, 테스트, 빌드와 최종 브라우저 검증이다.

[developer-1px]

계약 델타 1 — 플로팅 문법

사용자 지시에 따라 플로팅 컨트롤의 완료 조건을 다음처럼 구체화한다.

• 이전: 컨트롤을 콘텐츠를 밀지 않는 오버레이로 배치한다.
• 이후: 컨트롤은 콘텐츠의 의미 있는 부분을 상시 가리지 않는 안전 위치에 두고, 위치와 기능은 유휴 상태에도 식별 가능하게 유지하며, 배경·그림자·확장 같은 강한 표면은 hover, focus, 선택 등 필요 상태에서만 활성화한다.

적용:

• 상단 조작은 날짜 헤더의 상단 안전 영역에 유지하되 유휴 표면을 투명하게 한다.
• 소스 선택은 시간 거터의 작은 아이콘으로 보이고 접근·포커스 때만 확장 표면을 연다.
• 이벤트 인스펙터는 이벤트 선택 때만 나타난다.
• AI 입력은 유휴 상태에는 작은 진입점으로 축소되고 접근·포커스 때만 입력 표면을 펼친다.

공용 ControlLayer 승격과 캘린더 기능·데이터 모델 변경은 계속 제외한다.

[developer-1px]

계약 델타 2 — Tonal Float

사용자가 연구 결과의 적용을 승인했다. 실시간 글래스 효과 대신 다음 표면 문법을 적용한다.

• backdrop-filter/blur를 캘린더 플로팅 컨트롤에서 제거한다.
• 유휴 상태는 투명한 위치 표시만 유지한다.
• hover, focus, 선택 상태는 거의 불투명한 토널 단색 면, 얇은 경계, 작은 그림자로 레이어를 구분한다.
• 크기 변화는 애니메이션하지 않고 상태 진입 시 즉시 전환한다. 시각 전환은 주로 opacity와 색상으로 제한한다.
• 이벤트 인스펙터처럼 읽기 표면이 필요한 컨트롤은 나타나는 동안 안정적인 단색 면을 사용한다.

기존 Goal Anchor와 공용 시스템 비승격, 기능·데이터 모델 불변 조건은 유지한다.

[developer-1px]

계약 델타 3 — 상시 입력과 상단 플로팅 군 분리

사용자 피드백에 따라 AI 채팅 입력을 축소형 disclosure로 바꾼 시도는 철회한다. AI 입력은 제품의 상시 채널이므로 전체 폭의 안정된 입력 면을 유지한다.

플로팅 활성 문법은 상단 조작부에 적용한다. 긴 툴바 표면 하나를 두지 않고 다음 세 군이 독립적으로 유휴/활성 상태를 가진다.

• 기간 탐색
• 보기 전환
• Today

각 군은 유휴 상태에 기능이 보이고, hover 또는 focus-within일 때만 토널 단색 면, 얇은 경계, 작은 그림자를 표시한다. blur는 사용하지 않는다.

[developer-1px]

진행 보고

캘린더의 콘텐츠 레이어와 컨트롤 레이어를 분리하고 최종 시각 검수를 마쳤습니다.

구현

• 날짜 범위는 캘린더 콘텐츠의 제목으로 이동
• 이전/오늘/다음, 보기 전환, 캘린더 소스를 하나의 컴팩트한 플로팅 툴바로 통합
• 캘린더 소스 선택은 툴바에서 필요할 때만 열리는 컨텍스트 패널로 구성
• AI 입력창은 접히지 않는 안정적인 전체 입력 폭을 유지
• backdrop-filter 없이 불투명도·테두리·약한 그림자만 사용하는 Tonal Float 문법 적용
• 1280px, 760px, 480px 뷰포트에서 콘텐츠를 가리지 않는 배치 확인

검증

• 별도 시각 검수 에이전트 최종 판정: PASS
• npm run typecheck -w @interactive-os/json-document-site
• npm test -w @interactive-os/json-document-site (22 files, 118 tests)
• npm run build -w @interactive-os/json-document-site
• git diff --check

사용자 소유의 추적되지 않은 파일은 변경하지 않았습니다.

[developer-1px]

완료 보고

• PR: 캘린더 콘텐츠와 플로팅 컨트롤 레이어를 분리한다 #704
• 커밋: fb1a2059e4699201bf8c87698746118b60b1195e
• PR 헤드와 로컬 HEAD 일치 확인
• PR 변경 파일이 계약 범위의 2개 파일로 한정됨
• Closes #703 연결 확인
• 최종 인앱 화면 재검증 완료
• 브라우저 콘솔의 애플리케이션 오류 없음
• 별도 시각 검수 에이전트 최종 PASS

검증 화면:
http://127.0.0.1:18777/applications/calendar?view=week&date=2026-06-01

병합은 수행하지 않았습니다.

[developer-1px]

계약 델타 4 — 크기 기반 곡률과 선택적 보더

사용자가 최신 디자인 시스템 조사 결과의 적용을 승인했다. 기존 콘텐츠/컨트롤 분리와 Tonal Float 원칙을 유지하면서 캘린더 제품 로컬 시각 문법을 다음처럼 구체화한다.

• 플로팅 표면은 크기에 따라 곡률을 구분한다: 툴바·팝오버 14px, AI 컴포저 18px, 내부 컨트롤 10px.
• 중첩된 외곽과 내부 컨트롤은 padding 차이만큼 반경이 이어지는 동심 관계를 유지한다.
• 캘린더 그리드의 선은 정보 구조 경계이므로 유지한다.
• 플로팅 툴바는 경계와 그림자를 모두 강하게 쓰지 않고, 옅은 hairline과 근접 그림자만 사용한다.
• AI 컴포저는 상시 입력 영역 식별을 위해 경계를 유지하되 그림자는 더 가볍게 한다.
• 공용 radius token 변경이나 디자인 시스템 승격은 하지 않고 캘린더 제품 로컬에서 먼저 검증한다.

기존 기능, 데이터 모델, 레이아웃 책임과 공용 시스템 비승격 조건은 유지한다.

[developer-1px]

구현 진행 — 정본 토큰에 맞춘 곡률 적용

초기 14/18px 임의 반경과 임의 shadow 시도는 check:tokens가 차단했다. 공용 토큰을 늘리지 않는 기존 비승격 조건을 지키기 위해 정본 shape 문법으로 치환했다.

• 상단 컴팩트 툴바: rounded-full, 옅은 hairline, shadow 제거
• 툴바 내부 segment와 소스 버튼: rounded-full로 외곽과 곡률 계열 통일
• AI 컴포저: rounded-full, 입력 경계만 유지하고 shadow 제거
• 소스 팝오버·이벤트 인스펙터: rounded-surface 유지
• 캘린더 그리드 선: 정보 구조 경계이므로 유지

검증:

• 실제 주간 화면 및 소스 팝오버 확인
• 480px 좁은 폭 확인
• npm run typecheck -w @interactive-os/json-document-site 통과
• npm test -w @interactive-os/json-document-site — 22 files, 118 tests
• npm run build -w @interactive-os/json-document-site 통과
• git diff --check 통과

[developer-1px]

후속 적용 완료

• 후속 커밋: 56f511cc03212f16495f8dba8bede049c5677304
• PR 캘린더 콘텐츠와 플로팅 컨트롤 레이어를 분리한다 #704 헤드와 로컬 HEAD 일치 확인
• 캘린더 제품 로컬 스타일 1개 파일만 추가 변경
• 기본 주간, 소스 팝오버, 480px 화면 검증
• 브라우저 애플리케이션 오류 없음
• 타입 검사, 디자인 토큰 가드, 118개 테스트, 사이트 빌드 통과

병합은 수행하지 않았다.

[developer-1px]

계약 델타 5 — 캘린더 콘텐츠의 시간 문법

사용자가 컨트롤뿐 아니라 캘린더 콘텐츠도 같은 디자인 문법으로 정리하도록 승인했다.

• 시간 구조는 직선적으로 유지하되 모든 선을 같은 강도로 표시하지 않는다.
• 정각 가로선은 기본 리듬, 날짜 세로선은 더 약한 보조 리듬으로 구분한다.
• 빈 all-day 영역은 높이와 대비를 줄여 일정이 없을 때 배경으로 물러나게 한다.
• 시간 셀의 브라우저 기본 파란 outline은 제거하고, 선택은 토널 면과 짧은 accent rail로 표시한다.
• 날짜 숫자는 요일보다 강하게 표시한다.
• 캘린더 소스 항목은 상시 테두리 박스 대신 borderless 행과 hover 면으로 표현한다.
• 이벤트, 기능, 데이터 모델과 정본 CalendarTimeGrid API는 변경하지 않는다.

공용 디자인 시스템 승격 없이 캘린더 제품 로컬 classNames 조합으로 적용한다.

[developer-1px]

콘텐츠 문법 적용 완료

• 가로 정각선 45%, 세로 날짜선 30%, 헤더 경계 40%로 시간 구조의 위계를 분리했다.
• 시간 셀 포커스에서 나타나던 전체 열 accent ring을 제거했다.
• 선택 슬롯을 짧은 accent rail과 옅은 토널 면으로 변경했다.
• 빈 all-day 행을 40px에서 32px로 줄이고 레이블 대비를 낮췄다.
• 날짜 숫자를 요일보다 강하게 표시했다.
• Home/Work 소스 토글의 상시 outline을 제거하고 hover 면과 중립 focus ring으로 변경했다.
• 기존 시각 계약 테스트를 새 선 위계에 맞게 갱신했다.

검증:

• 빈 주, 일정이 있는 주, 시간 선택, 소스 팝오버 실제 화면 확인
• npm run typecheck -w @interactive-os/json-document-site
• npm test -w @interactive-os/json-document-site — 22 files, 118 tests
• npm run build -w @interactive-os/json-document-site
• git diff --check

[developer-1px]

후속 적용 완료

• 커밋: 22c7ddda5d1c48d6234630630578e641032eb966
• PR 캘린더 콘텐츠와 플로팅 컨트롤 레이어를 분리한다 #704 헤드와 로컬 HEAD 일치
• 변경 범위는 캘린더 라우트 스타일·조합과 해당 시각 계약 테스트로 한정
• 빈 주, 일정 주, 선택 상태, 소스 팝오버 검증
• 브라우저 애플리케이션 오류 없음
• 타입 검사, 토큰 가드, 118개 테스트, 빌드 통과

병합은 수행하지 않았다.

[developer-1px]

계약 델타 6 — Markdown 타이포그래피와 콘텐츠 글자 통합

사용자가 캘린더 콘텐츠의 글자를 Markdown에서 사용하는 글자 계층 중 하나로 통합하도록 승인했다.

Markdown 정본의 두 콘텐츠 계층을 캘린더에 대응한다.

• body text-sm leading-6: 날짜 숫자, 이벤트 제목
• meta text-xs leading-5: 요일, 시간 거터, 이벤트 시각, 생성 시각 힌트
• 캘린더 콘텐츠에서 별도 text-overline 사용을 제거한다.
• 툴바·내비게이션·제품 기능과 캘린더 데이터 모델은 변경하지 않는다.

새 타이포그래피 토큰이나 캘린더 전용 글자 체계를 추가하지 않고 기존 ui.text.body/meta 정본을 조합한다.