일정 맞추기 — UI Components

Colors

프로토타입 전역 토큰 — css/base.css

--blue

--blue-50

--bg

--grey-900

--red

--yellow

Layout & Spacing

4pt 그리드 · 화면 제목 블록 · 리스트 — 레이아웃 가이드

Spacing tokens

--s-1 · 4

--s-2 · 8

--s-4 · 16

--s-6 · 24

페이지 좌우 --page-x · 카드 gap --card-gap · 섹션 --section-gap

Type scale

h2 · --text-title팀 킥오프 미팅

screen-meta4 / 6명 입력 완료

sub · --text-sub모두 입력되면 가능한 시간을 확인해요

member-name김민수*

Buttons & Badges

create · merge CTA · 상태 뱃지 — css/base.css

CTA

create · screen 1

Badges

필수 선택 주최 완료 대기중 참석 조율중 불참

create · 검토 · merge · 입력 현황 · 확정

Progress & Week tabs

회의 만들기 단계 · 주간 전환

Progress bar (create)

create · screen 2

Week tabs

respond · 시간 입력 · merge · 히트맵

Field card

회의 이름 · 참석자 이름 입력

이름

회의 이름

create · screen 1 · respond · 이름

Calendar

평일만 · range 선택 — create.html screen 2와 동일

조율 기간 (최대 2주)

2026년 7월

월화수목금

7/7 (월) – 7/18 (금) 선택됨

create · screen 2

Member row · Role select

[필수/선택] → 이름 → 삭제 — create 3단계 실제 패턴

create · screen 3

Host · 입력 현황

screen-head + member-list — merge 1단계 기준 레이아웃

팀 킥오프 미팅

4 / 6명 입력 완료

모두 입력되면 가능한 시간을 확인해요

이지영*완료
정태호대기중

merge · screen 1

Day row

요일 전체 불가 — respond 3단계

respond · screen 3

Time grid

참석자 입력 · 주최자 히트맵

Input grid (respond)

월화수목금 14 15

respond · screen 2

Heatmap (merge)

월화수목금 14 전원 가능

박현우

전원 가능 15

merge · screen 2

Layer toggles

개별 일정 겹쳐보기 — merge 6단계

merge · screen 6

Validation & Overlay

토스트 · 인라인 에러 · 바텀시트 — js/ui.js

Toast · warning

! 참석자 이름을 입력해주세요

overlays/view.html

Inline error (respond)

이름

참석 명단에 없는 이름이에요

respond · 이름 불일치

Bottom sheet

배경 화면 + 딤 + 시트가 함께 떠야 맥락이 보여요. 정적 카드 대신 실제 오버레이 미리보기를 씁니다.

전체 화면 · 오버레이 목록 · merge · 히트맵

구현 현황

대표 상태만 요약 · 전체는 화면 상태

영역	상태	구현
create	role-select · 캘린더 · member-row	구현
respond	이름 불일치 인라인 에러	구현
merge	히트맵 · 일정 겹쳐보기 · 미제출 disabled	구현
merge	입력 집계 로딩 스켈레톤	설계
create	참석자 이름 중복	설계