@conscience-technology/ctds 0.0.0-stage → 0.1.0

package/assets/components/DatePicker/DESIGN_NOTES.md

@@ -0,0 +1,106 @@
+# DatePicker — Reference Design Analysis
+
+참고 이미지(모바일 팝오버 형태의 리마인더 데이트픽커)를 8축 관점으로 분해한 문서.
+
+## 1. Container
+
+- 흰 카드, `--radius-lg` 정도의 라운드
+- `box-shadow` 약함, 배경은 회색 페이지 위에 떠있음
+- 카드 안쪽 여백: 상하좌우 균일하게 약 `--space-4`
+- 카드 내부 요소들은 세로 flow 하나: `[presets] → [monthHeader] → [weekdays] → [grid] → [footerActions]`
+  - 이들 사이 gap은 각기 다르지만 **같은 좌우 padding 라인**을 공유. 즉 preset chip의 좌측 모서리와 nav 버튼의 좌측 모서리와 그리드 첫 컬럼의 좌측 모서리가 **동일 수직선상에 정렬됨**.
+
+## 2. Preset chips (상단)
+
+- 3개(Today / Tomorrow / In 2 days). 왼쪽 정렬, `wrap` 허용.
+- 각 chip:
+  - 높이는 `--control-h-sm`에 가까움 (32px)
+  - 배경 `--bg-subtle`, 텍스트 `--fg`
+  - 모서리 완전 라운드(필박스): `border-radius: 999px` (Shape 축에 종속되지 않는 100% 원형)
+  - 폰트 사이즈 `--text-sm`, weight `medium`
+- chip 간격 `--space-2`
+
+**우리 현재 상태와의 gap**: `Button size="sm" variant="secondary"` 사용 중. secondary 배경/색은 맞지만 border-radius가 `--radius-xs`. → **필박스 라운드로 override 필요**.
+
+## 3. Month header
+
+- 좌측 `<` IconButton, 우측 `>` IconButton, 가운데 월/년 텍스트
+- IconButton은 **원형 흰 배경 + 얇은 회색 보더** (하지만 실제로 자세히 보면 그림자 없는 outline 형태, `--radius-full`)
+  - hover 시 살짝 배경 진해짐 정도
+- 중요 포인트: `<` 버튼의 **left edge**가 그리드 첫 컬럼(Mo)의 left edge와 정확히 일치, `>` 버튼의 **right edge**가 마지막 컬럼(Su)의 right edge와 정확히 일치
+  - 즉 `monthHeader`는 `padding-inline: 0`이어야 하고 IconButton 사이즈는 셀 폭(=`--control-h-sm`)과 같아야 함
+- 가운데 텍스트: `--text-sm`, weight `medium`, 색 `--fg`
+
+**우리 현재 상태와의 gap**:
+- monthHeader에 `padding-inline: var(--space-1)`가 걸려서 nav 버튼이 그리드 컬럼과 어긋남 → **제거**
+- IconButton variant는 ghost인데 참고 이미지는 **outline + 원형** → 새 스타일 필요. IconButton의 variant 확장보다는, DatePicker 내부에서 className overlay로 처리하는 게 스코프 작음
+- IconButton size=sm이면 width=`--control-h-sm`으로 셀 폭과 자동 일치 (이건 이미 맞음)
+
+## 4. Weekday row
+
+- 7컬럼 균등, gap 0
+- 각 라벨은 셀 폭과 같은 **정사각 박스**, 텍스트 중앙정렬
+- 색 `--fg-muted`, 폰트 `--text-xs`
+- 요일 코드는 두 글자(Mo, Tu, ...). 우리는 한국어(일/월/화). 유지.
+
+**우리 현재 상태와의 gap**: weekday 이미 aspect-ratio 1, gap 0 처리 완료. OK.
+
+## 5. Day grid
+
+- 7×N 격자, gap 0 (셀들이 서로 붙어있음)
+- 각 셀은 정사각 `--control-h-sm` × `--control-h-sm`
+- 셀 폰트: 숫자만, `--text-sm`, weight `regular`, 색 `--fg`
+- outside month 색: 훨씬 옅음 (`--fg-subtle` 또는 더 옅게)
+- **오늘**: primary 컬러 텍스트 + primary 얇은 1px 링(inset border) — 이미 반영
+  - 링의 모서리 radius는 셀 radius와 동일 (`--radius-sm`)
+- **선택된 날짜**: primary 채움 원, 텍스트는 `--bg`
+  - 선택 셀의 모서리도 `--radius-sm` (참고 이미지 자세히 보면 완전 원은 아니고 약간 라운드된 사각)
+- range 표시(우리 케이스): in-range 셀은 배경 `--hover`, 첫/끝은 primary 채움
+
+**우리 현재 상태와의 gap**:
+- dayCell aspect-ratio 1 완료, gap 0 완료
+- 그러나 **셀 폭이 `--control-h-sm`으로 강제되지 않고, monthCol width가 이를 정확히 제공하는 경우에만 성립.** 지금 monthCol width가 `--control-h-sm * 7`인데 grid-template-columns가 `repeat(7, 1fr)`이라 컬럼 폭 = `--control-h-sm`. 성립.
+- outside 색은 `--fg-subtle` 사용 중. 이미지랑 대체로 부합.
+- 선택 셀 hover 색 살짝 조정 여지 있으나 현재 유지 가능.
+
+## 6. Footer / actions (참고 이미지)
+
+- 상단: `+ Add reminder` 텍스트 링크 (ghost 버튼)
+- 하단: `Remove` (outline) 좌, `Done` (primary) 우 — 하단 padding 안에서 좌우 정렬
+- **우리 DatePicker는 footer 슬롯이 없음.** 지금은 값 선택하면 자동 닫힘.
+- 이 부분은 확장 스코프. 이번 이터레이션에서는 **스킵**.
+
+## 7. Density / spacing 요약
+
+| 요소 | 값 |
+| --- | --- |
+| 카드 padding | `--space-4` |
+| presets → header gap | `--space-3` |
+| header → weekdays gap | `--space-2` |
+| weekdays → grid gap | 0 (weekday가 grid 첫 행처럼 붙음) |
+| chip 간격 | `--space-2` |
+| cell 크기 | `--control-h-sm` |
+| grid gap | 0 |
+
+## 8. 색·라운드 요약
+
+| 요소 | 배경 | 텍스트 | radius |
+| --- | --- | --- | --- |
+| Container | `--bg` | — | `--radius-lg` |
+| Preset chip | `--bg-subtle` | `--fg` | 999px (pill) |
+| Nav IconButton | `--bg` | `--fg` | 999px (원형) + 1px `--border` |
+| Weekday cell | transparent | `--fg-muted` | — |
+| Day cell (default) | transparent | `--fg` | `--radius-sm` (hover 시) |
+| Day cell (today) | transparent | `--primary` | `--radius-sm` + primary 1px inset ring |
+| Day cell (selected) | `--primary` | `--bg` | `--radius-sm` |
+| Day cell (outside) | transparent | `--fg-subtle` | — |
+
+## 9. 이번 이터레이션에서 반영할 변경
+
+1. Preset chip → **pill radius (999px)** 로 override
+2. Nav IconButton → **원형 + 1px `--border`** outline 스타일
+3. `monthHeader` → **`padding-inline: 0`** (nav 버튼과 그리드 컬럼 좌우 정렬)
+4. `panelMain` 내부 gap 재조정: header→weekdays 사이 `--space-2`, weekdays→grid는 최소로 (거의 0)
+5. presets 상단 padding은 `--space-3 var(--space-4)` 유지, 카드 padding과 조화
+
+Footer 액션 슬롯(Add reminder / Remove / Done) 은 별도 이터레이션.

package/assets/components/DatePicker/DESIGN_NOTES_TIME.md

@@ -0,0 +1,125 @@
+# DatePicker with Time — Reference Design Analysis
+
+참고 이미지: 좌측 캘린더, 우측 세로 스크롤 타임 리스트, 하단 액션바가 카드 안에 통합된 형태.
+
+## 1. Overall layout
+
+- 카드는 세로로 두 영역: **body(가로 2열)** + **footer(가로 3영역)**
+- body:
+  - 좌: 캘린더 (약 60% 폭)
+  - 우: 시간 리스트 (약 40% 폭), 세로 스크롤 가능
+  - 좌우 사이에 수직 `1px --border` divider (실제로 이미지에는 얇은 선이 보임)
+- footer:
+  - 좌: Cancel (ghost/링크 스타일)
+  - 중: 선택 결과 값 표시 (outline input처럼 생긴 pill/button)
+  - 우: Schedule (primary 액션)
+  - body와 footer 사이 수평 `1px --border` divider
+
+## 2. Calendar panel (좌)
+
+- monthHeader와 grid는 이전 이터레이션과 동일. `<`, `>`는 얇은 원형 outline.
+- 셀 크기는 `--control-h-md` 정사각.
+- 오늘/점(dot) 표시:
+  - **선택되지 않은 오늘 대신 "이벤트 있음"을 나타내는 작은 점**이 셀 하단에 표시됨 (이미지에서 4일, 14일, 8일 아래에 점이 보임)
+  - 이건 today 표시가 아니라 **"이벤트 있는 날"** 마커. 우리 컨텍스트에선 today 마커로 재활용.
+  - 색: primary(파란색) — 오늘/일반 이벤트, 8일은 회색 점 → 지난 이벤트?
+  - 지금 우리는 today = primary inset ring. 참고 이미지 스타일로 가려면 **ring → dot** 방식으로 재변경 필요.
+- **선택된 날짜 (21일)**: 
+  - `--fg`(거의 검정) 배경의 정사각 라운드(약 `--radius-md`)
+  - 텍스트 `--bg`(흰색)
+  - **커서 위치 표시**를 위해 우측 하단에 커서 아이콘. 이건 UX 디테일이고 우리는 스킵.
+- outside month: 훨씬 옅은 `--fg-subtle`.
+
+**우리와 gap**:
+- today를 dot으로 다시 변경할지? — 이 참고에선 dot. 근데 range 모드에서 dot이 in-range 배경 위로 올라가면 잘 보임(색만 대비). ring보다 유연.
+- 선택 셀 배경이 `--primary` 아닌 `--fg` (mono inverse 톤)임. 참고 스타일에 맞추려면 `--fg` 사용. 하지만 CTDS 프리셋 컨텍스트에선 `--primary` 유지가 자연스러움. 이미지 그대로 재현할지 우리 톤 유지할지 판단 필요.
+
+## 3. Time list (우)
+
+- 세로 리스트, 각 항목은 `HH:MM AM/PM` 텍스트
+- 항목 높이는 대략 `--control-h-md` (36px 정도)
+- 좌우 padding: `--space-3` 정도, 텍스트 좌측정렬
+- 상태:
+  - 기본: `--fg`, 배경 transparent
+  - hover: `--hover` 배경
+  - **선택**: `--bg-subtle` (연한 회색) 배경, 텍스트 `--fg` (bold 아님, 그냥 진한 색). 
+    - 즉 selected가 primary/accent 색이 아님! **회색 배경 + 텍스트 진하게**로 표현.
+    - 이건 캘린더 선택(진한 검정)과 시각 계층을 다르게 준 것. 캘린더 선택 = 강함, 시간 선택 = 약함(secondary confirmation).
+  - past/불가능: 옅은 `--fg-subtle` (12:00 PM, 1:00 PM 이하가 흐림)
+- 리스트 오버플로우: `overflow-y: auto`. 우측에 얇은 스크롤바.
+- 리스트 상단/하단에 페이드 마스크 없음 (그냥 잘려 보임)
+- 리스트 좌측 경계: 수직 `1px --border` divider
+
+**우리와 gap**:
+- 현재 우리 `timeMode="grid30"`은 6-col grid + 각 slot이 border 있는 네모. 참고와 완전히 다름.
+- 참고는 세로 리스트 방식 → 새 timeMode `list` 추가하거나 grid30을 리팩터.
+- 리스트 max-height는 body 높이에 맞춰 스크롤. 우리 timeGrid의 `max-height: calc(--control-h-sm * 6 + ...)` 로직 참고.
+
+## 4. Footer
+
+- 카드 하단 별도 영역, 위쪽에 `1px --border` 수평선
+- 3파트:
+  - **좌 Cancel**: ghost 텍스트, `--fg` 색, hover 시 `--hover` 배경 없이 그냥 텍스트만.
+  - **중 결과 값**: outline pill-ish button. 
+    - 배경 `--bg`, 얇은 `1px --border`, 라운드 `--radius-sm`
+    - 텍스트 `--fg`. "Sep 21, 2027 10:00 AM" 형식.
+    - `--text-sm`.
+    - 클릭 가능해 보이지만 실제 액션은 없음(선택 결과 표시용). 아마 클릭 시 focus 이동 정도.
+  - **우 Schedule**: outline button (Cancel과 비슷하지만 border 있음)
+    - 검정 텍스트, 흰 배경, 얇은 outline. **primary가 아님**.
+    - 이 이미지에선 primary CTA도 outline. 참 조용한 디자인.
+- footer padding: 상하 `--space-3`, 좌우 `--space-4` 정도
+- 3영역 사이 gap: `--space-3` 정도, 중앙 결과 영역이 `flex: 1`로 가운데 늘어남.
+
+## 5. Sizes / spacing 요약
+
+| 요소 | 값 |
+| --- | --- |
+| body height | 캘린더 6주 기준 + header + weekdays = 약 8 × `--control-h-md` |
+| body padding | 좌우 `--space-4`, 위 `--space-3` |
+| body 좌우 divider | vertical `1px --border` |
+| body ↔ footer divider | horizontal `1px --border` |
+| time list item height | `--control-h-md` |
+| time list padding-inline | `--space-3` |
+| footer padding | `--space-3` 상하, `--space-4` 좌우 |
+| footer gap | `--space-3` |
+
+## 6. 이번 이터레이션에서 반영할 변경
+
+우리 컴포넌트 API는 `withTime` + `timeMode` 유지. 참고 이미지 스타일에 맞춰:
+
+1. **timeMode 리스트 스타일 신설**: `timeMode="list"` (기본으로 승격 고려)
+   - 세로 스크롤 리스트, 30분 간격.
+   - 항목: 배경 transparent → `--hover`, 선택 시 `--bg-subtle` 배경.
+   - 리스트 좌측에 vertical divider.
+2. **panel 레이아웃 변경 (withTime일 때만)**:
+   - 지금은 캘린더 아래에 timeArea가 붙음 (`.timeArea`).
+   - 참고처럼 **캘린더 우측에 timeArea 배치**로. `panelMain`을 flex row로.
+   - divider 삽입.
+3. **today dot 표시** (선택사항):
+   - 지금 inset ring → 셀 하단 primary dot으로 되돌리기.
+   - 이유: 참고 이미지가 dot 스타일이고, in-range와의 시각 충돌도 적음.
+4. **Footer 슬롯** (선택사항, 시간 있음 = 자동 닫기 불가 케이스에서 유용):
+   - `withTime` 시 자동 닫기 안 되니 confirm 버튼이 필요.
+   - `withFooter` prop 추가 or `withTime` 자동으로 footer 노출.
+   - 좌: 취소(값 초기화 + 닫기), 우: 확정(닫기만).
+
+이번 스코프:
+- (a) timeMode "list" 신설 + 기본화
+- (b) withTime 시 panel 가로 배치 + divider
+- (c) today 표시 = dot으로 전환
+- (d) footer는 다음 이터레이션으로 미룸 (스코프 크고 API 결정 필요)
+
+## 7. 이미지 그대로 재현 vs 우리 톤 유지
+
+이미지의 특징:
+- 선택 셀 배경 = `--fg` (검정)
+- 시간 선택 = `--bg-subtle` (회색)
+- 액션 = outline
+
+우리 CTDS는 8축 스왑 시스템이라 `--primary`가 프리셋에 따라 다양. 이미지 그대로 흑백으로 갈 필요는 없음.
+
+**결정**: 
+- 선택 셀 = `--primary` 유지 (지금 스타일)
+- 시간 리스트 선택 = `--bg-subtle` (참고와 동일, 캘린더보다 약한 강조)
+- footer는 이번 스코프 밖

package/assets/components/DatePicker/DatePicker.module.css

@@ -0,0 +1,295 @@
+/* Trigger ─────────────────────────────────────────────────── */
+.triggerInput {
+  min-width: calc(var(--space-2) * 22);
+}
+
+.triggerInput[data-with-time] {
+  min-width: calc(var(--space-2) * 30);
+}
+
+/* Popover / inline panel ──────────────────────────────────── */
+/* In · Out 애니메이션은 전역 유틸 `.m-float`가 담당 (globals.css). tsx에서 Content
+   className에 "m-float"을 concat. 여기서는 표면 시각(bg/border/shadow/radius)과
+   Radix가 준 transform-origin만 지정한다. */
+.popoverContent {
+  z-index: var(--z-popover);
+  background: var(--bg);
+  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  transform-origin: var(--radix-popover-content-transform-origin);
+}
+
+.inlineWrap {
+  display: inline-block;
+  background: var(--bg);
+  border: var(--hairline) solid var(--border);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.panelMain {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+  padding: var(--space-3);
+}
+
+.panelMain[data-with-time] {
+  flex-direction: row;
+  align-items: stretch;
+  gap: 0;
+  padding: 0;
+  /* 캘린더 실제 주 수(5~6)에 따라 높이 반응. TimeSelector가 이 높이를 stretch로 따라감. */
+}
+
+.panelMain[data-with-time] > :first-child {
+  padding: var(--space-3);
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding: var(--space-2) var(--space-3);
+  border-top: var(--hairline) solid var(--border);
+}
+
+/* Presets — 상단 chip 나열 ─────────────────────────────────── */
+.presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-1);
+  padding: var(--space-3) var(--space-3) 0;
+}
+
+/* Calendar grid ───────────────────────────────────────────── */
+.calendarWrap {
+  display: flex;
+  gap: var(--space-3);
+}
+
+.monthCol {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  width: calc(var(--control-h-sm) * 7);
+}
+
+.monthHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--space-2);
+  padding-inline: 0;
+}
+
+.monthHeader > button {
+  width: var(--control-h-sm);
+  height: var(--control-h-sm);
+  flex: 0 0 auto;
+}
+
+.monthTitle {
+  flex: 1;
+  text-align: center;
+  font-family: var(--font-normal);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--fg);
+}
+
+
+.weekdays {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0;
+}
+
+.weekday {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1 / 1;
+  font-family: var(--font-normal);
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+}
+
+.grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  column-gap: 0;
+  row-gap: var(--hairline);
+}
+
+.dayCell {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1 / 1;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--fg);
+  font-family: var(--font-normal);
+  font-size: var(--text-sm);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  position: relative;
+  transition: box-shadow var(--duration-fast) var(--ease-out);
+}
+
+.dayCell:hover:not(:disabled):not([data-selected]) {
+  background: var(--hover);
+}
+
+.dayCell:focus-visible {
+  outline: var(--ring-width) solid var(--ring);
+  outline-offset: calc(-1 * var(--ring-width));
+  box-shadow: none;
+}
+
+.dayCell[data-outside] {
+  color: var(--fg-disabled);
+}
+
+.dayCell:disabled {
+  cursor: not-allowed;
+  opacity: 0.35;
+}
+
+.dayCell[data-in-range] {
+  background: var(--secondary-bg);
+  color: var(--secondary-fg);
+  border-radius: 0;
+}
+
+.dayCell[data-range-start] {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.dayCell[data-range-end] {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* 주 단위 pill — 각 주의 첫/마지막 컬럼에서는 라운드를 살려서
+   in-range 밴드가 주마다 알약 모양으로 끊긴다. */
+.grid > .dayCell[data-in-range]:nth-child(7n+1),
+.grid > .dayCell[data-range-end]:nth-child(7n+1) {
+  border-top-left-radius: var(--radius-sm);
+  border-bottom-left-radius: var(--radius-sm);
+}
+
+.grid > .dayCell[data-in-range]:nth-child(7n),
+.grid > .dayCell[data-range-start]:nth-child(7n) {
+  border-top-right-radius: var(--radius-sm);
+  border-bottom-right-radius: var(--radius-sm);
+}
+
+.dayCell[data-today]:not([data-selected]):not([data-in-range]) {
+  color: var(--primary);
+  font-weight: var(--font-weight-medium);
+  box-shadow: inset 0 0 0 var(--hairline) var(--primary);
+}
+
+.dayCell[data-today][data-in-range] {
+  color: var(--primary);
+  font-weight: var(--font-weight-medium);
+}
+
+.dayCell[data-selected] {
+  background: var(--primary);
+  color: var(--bg);
+}
+
+.dayCell[data-selected]:hover:not(:disabled) {
+  background: var(--primary-hover);
+}
+
+/* range-start/end + selected 조합의 hover에서도 반쪽 알약 radius 유지. */
+.dayCell[data-range-start][data-selected]:hover {
+  border-top-left-radius: var(--radius-sm);
+  border-bottom-left-radius: var(--radius-sm);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.dayCell[data-range-end][data-selected]:hover {
+  border-top-right-radius: var(--radius-sm);
+  border-bottom-right-radius: var(--radius-sm);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.dayLabel {
+  line-height: var(--lh-sm);
+}
+
+/* Time area ──────────────────────────────────────────────── */
+/* 스크롤 규약: 이 wrapper엔 padding 없음. 안쪽 스크롤 컨테이너와 트랙이 담당.
+   왼쪽 구분선은 pseudo로 그려 상하 짧게(preset 영역과 맞물리지 않도록). */
+.timeArea {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+}
+
+.timeArea::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: var(--space-3);
+  bottom: var(--space-3);
+  width: var(--hairline);
+  background: var(--border);
+}
+
+.timeArea[data-mode="range"] {
+  flex-direction: row;
+  gap: 0;
+}
+
+
+.timeSection {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+}
+
+.timeLabel {
+  padding: var(--space-2) var(--space-4) 0;
+  font-family: var(--font-normal);
+  font-size: var(--text-xs);
+  color: var(--fg-muted);
+}
+
+.timeList {
+  min-width: calc(var(--control-h-md) * 3.5);
+  flex: 1 1 0;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.timeListTrack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-0_5);
+  padding: var(--space-2);
+}
+