✨ feat: 일정 일시 입력을 요약 칩 + 캘린더/시간 휠로 변경 by pcwadarong · Pull Request #265 · BandCo-House/BandCo

pcwadarong · 2026-10-11T07:42:31Z

⏱ 소요 시간

리뷰 예상 시간: 5분

📌 작업 요약

일정 폼의 시작·종료 일시 입력을 새 시안으로 바꿔요. #262에서 넣은 "시작 카드 / 종료 카드"는 휠이 네 벌이라 한눈에 안 읽혔고, 연도를 휠로 넣느냐 추론하느냐에서 규칙이 계속 붙었어요. 네 값을 한 줄에 요약하고 하나씩만 고치게 합니다.

	전 (#262)	후
구조	시작 카드 + 종료 카드, 각각 날짜 휠 + 시간 휠	요약 칩 네 개 + 아래 패널 하나
날짜 고르기	연·월·일 휠	월 캘린더 (시작~종료 기간을 칠해 보여줌)
종료 연도	고를 수 없고 추론값을 표시	캘린더에서 고르므로 추론 없음
날짜 순서 오류	저장 시 문구로 차단	종료를 고를 때 시작 이전 날짜가 비활성

프론트만 바뀌고, 일정 추가·수정 폼에만 적용돼요.

Figma: 날짜 선택 · 시간 선택

📝 작업 내용

커밋	내용
`ccf7b0c`	일정 일시를 요약 칩 + 캘린더/시간 휠로 변경

1. 요약 줄 + 패널 하나

 10월 11일(일)        10월 13일(화)      ← 네 값을 한 줄에 요약
  오전 5:00     >      오전 8:00         ← 누른 칩 하나만 아래에서 고침
┌──────────────────────────────────┐
│  날짜 칩 → 월 캘린더                │
│  시각 칩 → 시간 휠                  │
└──────────────────────────────────┘

전체는 요약 줄에서 보고, 조작은 한 번에 하나만 해요. 휠 네 벌을 펼쳐 두면 어느 휠이 어느 값인지 읽히지 않았습니다.

2. 날짜를 캘린더로 — 연도 문제가 사라진다

카드 두 장 방식은 연도에서 막혔어요.

연도를	결과
휠로 넣으면	폰 폭에서 날짜·시간이 두 줄로 쌓여 카드가 길어짐
빼면	종료 연도를 추론해야 함 → 규칙이 계속 붙음(12월→1월, 종료 월 < 시작 월…)

캘린더는 날짜를 통째로 주므로 연도를 묻지도 추론하지도 않아요. 그래서 resolveEndDate, 휠의 yearMode·dense 옵션, 컬럼 정렬용 구분자 폭을 모두 걷어냈습니다(wheel-column.tsx는 #262 이전 상태로 돌아가요).

#262 리뷰에서 나온 "종료 휠을 하루 앞에 놓으면 1년짜리 일정이 저장된다"는 문제도 이 구조에서는 생길 수 없어요. 종료를 고를 때 시작보다 앞선 날은 누를 수 없습니다.

3. `MonthCalendarShell` 분리

MonthCalendar에서 제목·달 이동을 떼어 냈어요. 선택 규칙만 각자 넘깁니다.

사용처	선택 규칙
일정 투표 (`MonthCalendar`)	여러 날짜 토글
일정 폼 (이번 PR)	시작~종료 범위 표시, 누르면 활성 칩의 날짜 변경

일정 투표 캘린더의 동작과 모양은 그대로예요.

🚨 주요 고민 및 해결 과정

시안에 없어서 정한 것

항목	결정	이유
처음 열었을 때	시작 날짜 칩이 선택돼 캘린더가 펼쳐짐	시안 첫 화면과 같음. 아무것도 안 열려 있으면 칩이 그냥 글자로 보여 누를 수 있는지 모름
칩을 다시 누르면	접히지 않음 (항상 하나가 열려 있음)	상태를 하나 줄임
칩의 연도	표시 안 함 (시안 그대로)	연도는 캘린더 제목에서 확인

유지한 것

시작 날짜를 옮기면 종료 날짜도 같은 일수만큼 따라가요(shiftStartDate).
지난 날짜를 막지 않아요. 이미 한 합주를 뒤늦게 기록하거나 고치는 경우가 있어서요.
같은 날 시각 순서가 뒤집히면 "종료는 시작보다 뒤여야 해요"가 뜨고 저장이 잠겨요.

의도적으로 안 한 것

항목	이유
일정 투표에 같은 패턴 적용	투표는 후보 날짜를 여러 개 고르는 화면이라 캘린더가 펼쳐져 있어야 함. 시간 범위 부분만 맞출지는 별도로 결정

💬 리뷰 요구사항

항상 칩 하나가 열려 있는 구조가 괜찮은지 — 폼이 길어지는 대신 접힘 상태가 없어요.
해를 넘기는 일정에서 칩에 연도가 안 보이는 것 — 12월 31일 → 1월 1일은 캘린더 제목으로만 구분돼요.

Test plan

pnpm exec tsc -b
pnpm run lint — 에러 0, 경고 1(기존 BandMemberSettings.tsx)
pnpm exec vitest run — 507 통과 / 1 스킵 (최신 dev 위에서)
pnpm run build
dev(MSW mock) 크로미움 393·320 폭 — 칩 전환, 범위 칠하기, 종료 선택 시 이전 날짜 비활성, 시작 날짜 변경 시 종료 따라오기, 저장 후 캘린더 이동, 가로 넘침 없음. dev에 다시 올리기 전 브랜치에서 확인했고, 옮긴 뒤에는 다시 열어보지 않았어요
실서버 연동 — 미실행
iOS 사파리 실기기 — 미실행

후속

일정 투표의 시간 범위 UI — 같은 칩 패턴으로 맞출지 결정이 먼저 필요해요.

🤖 Generated with Claude Code

Summary by CodeRabbit

새로운 기능
- 일정 생성 화면에서 시작·종료 날짜와 시간을 한곳에서 확인하고, 항목을 선택해 편집할 수 있습니다.
- 날짜를 선택하면 월간 달력이 열리며, 일정 기간을 표시하고 오늘 날짜를 구분합니다. 종료 날짜는 시작 날짜보다 앞선 날짜를 선택할 수 없습니다.
- 시각 항목을 선택하면 해당 시간의 휠 선택기가 표시됩니다. 연도도 휠로 선택할 수 있습니다.

시작·종료 카드 두 장(날짜 휠 + 시간 휠)을 새 시안으로 바꾼다. 위 줄에 네 값(시작 날짜·시각 → 종료 날짜·시각)을 요약하고, 누른 칩 하나만 아래에서 고친다 — 날짜면 월 캘린더, 시각이면 시간 휠. 카드 두 장 방식은 연도에서 막혔다. 연도 휠을 넣으면 폰 폭에서 두 줄로 쌓여 카드가 길어지고, 빼면 종료 연도를 추론해야 해 규칙이 계속 붙었다(12월→1월, 종료 월 < 시작 월). 날짜를 캘린더로 고르면 연도를 묻지도 추론하지도 않는다. 그래서 resolveEndDate와 휠의 yearMode·dense 옵션, 컬럼 정렬용 구분자 폭을 모두 걷어낸다. 캘린더는 시작~종료 사이를 모두 칠해 일정이 걸치는 기간을 보여준다. 종료 날짜를 고를 때는 시작보다 앞선 날을 비활성으로 둬, 날짜 순서 오류는 아예 만들 수 없게 한다. 같은 날의 시각 순서만 기존 검증이 잡는다. MonthCalendar에서 제목·달 이동을 MonthCalendarShell로 떼어 낸다. 여러 날짜 토글 (투표)과 범위 표시(일정)가 같은 뼈대를 쓰고 선택 규칙만 각자 넘긴다. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

vercel · 2026-10-11T07:42:39Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
band-co	Ready	Preview	Oct 11, 2026 7:42am UTC

coderabbitai · 2026-10-11T07:42:48Z

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: BandCo-House/BandCo/.coderabbit.yaml
Review profile: CHILL
Plan: Advanced
Run ID: fa759515-d51e-46e4-863a-e38cd1498986

📥 Commits

Reviewing files that changed from the base of the PR and between 1780fbd and ccf7b0c.

📒 Files selected for processing (7)

frontend/src/features/schedule-create/model/types.test.ts
frontend/src/features/schedule-create/model/types.ts
frontend/src/features/schedule-create/ui/ScheduleFormView.tsx
frontend/src/features/schedule-create/ui/components/ScheduleTimeSheet.tsx
frontend/src/shared/ui/month-calendar.tsx
frontend/src/shared/ui/wheel-date-picker.tsx
frontend/src/shared/ui/wheel-time-picker.tsx

💤 Files with no reviewable changes (2)

frontend/src/features/schedule-create/model/types.ts
frontend/src/features/schedule-create/model/types.test.ts

Included review availability: This review used your included allowance. Your plan provides up to 1 included review per hour; 0 remain after this review.

Walkthrough

일정 입력 화면의 시작·종료 날짜와 시간 편집을 하나의 시트로 통합했어용. 시트는 날짜 선택에 캘린더를 사용하고, 공유 캘린더와 휠 피커의 관련 API 및 표시 방식을 변경했어용. 종료 날짜 연도 추론 함수와 테스트도 제거했어용.

Changes

일정 날짜·시간 입력

Layer / File(s)	Summary
공유 캘린더와 휠 피커 `frontend/src/shared/ui/month-calendar.tsx`, `frontend/src/shared/ui/wheel-date-picker.tsx`, `frontend/src/shared/ui/wheel-time-picker.tsx`	`MonthCalendarShell`을 추가해 월 이동과 날짜 상태 처리를 사용처에서 전달하도록 변경했어용. 기존 `MonthCalendar`는 선택 상태, 오늘 표시, `minDate` 제한을 셸에 연결했어용. 날짜 휠은 연도 휠을 항상 표시하고, 날짜·시간 휠의 `dense` 옵션과 관련 스타일 분기를 제거했어용.
통합 시작·종료 입력 시트 `frontend/src/features/schedule-create/ui/components/ScheduleTimeSheet.tsx`	시작 날짜·시간과 종료 날짜·시간을 요약 항목으로 표시하고, 선택한 항목을 편집하도록 변경했어용. 날짜 항목은 캘린더를 표시하며, 종료 날짜 선택 시 시작 날짜보다 앞선 날짜를 비활성화해용. 시간 항목은 해당 시간의 휠 피커를 표시해용.
일정 폼 연결과 연도 추론 제거 `frontend/src/features/schedule-create/ui/ScheduleFormView.tsx`, `frontend/src/features/schedule-create/model/types.ts`, `frontend/src/features/schedule-create/model/types.test.ts`	별도로 표시하던 시작·종료 입력을 하나의 시트에 연결했어용. 시작 날짜 변경에는 `shiftStartDate`를 적용하고, 종료 날짜 변경은 선택값을 그대로 반영해용. `resolveEndDate` 함수와 해당 함수의 연도 추론 테스트를 제거했어용.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~20 minutes

Change: Feature

Sequence Diagram(s)

sequenceDiagram
  actor User
  participant ScheduleTimeSheet
  participant MonthCalendarShell
  participant ScheduleFormView
  User->>ScheduleTimeSheet: 날짜 항목 선택
  ScheduleTimeSheet->>MonthCalendarShell: 캘린더 표시
  User->>MonthCalendarShell: 날짜 선택
  MonthCalendarShell->>ScheduleTimeSheet: onSelect 날짜 전달
  ScheduleTimeSheet->>ScheduleFormView: 활성 날짜 변경 콜백 전달

Merge Risk: ⚪ Minimal · up to ccf7b

This change replaces the start/end cards with a unified date and time input sheet. No concrete merge-blocking problem was found in the supplied context. The author reports that type checks, lint, tests, and build pass.

Pre-merge checks | 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check		제목은 요약 칩과 캘린더·시간 휠을 사용한 일정 일시 입력 변경을 정확히 설명하므로 통과예용
Description check		작업 요약, 작업 내용, 주요 고민과 해결 과정, 리뷰 요구사항, 테스트 결과와 미실행 항목을 구체적으로 포함하므로 통과예용. 참고 문서 전용 제목은 없지만 Figma 링크가 작업 요약에 있어 핵심 정보는 확인 가능해용
Docstring Coverage		No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 5…
Linked Issues check		Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check		Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

Commit to this branch
Create a new PR

🧪 Generate unit tests (beta)

Commit to this branch
Create a new PR

Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands.}

## 포함된 PR - ✨ feat: 일정 일시 입력을 요약 칩 + 캘린더/시간 휠로 변경 (#265) - 리드미 수정 (#264) - 🚧 wip: 둥근 입력·버튼·카드를 유리 표면으로 (프로토타입) (#261) - ✨ feat: 합주 메인 월별 보기와 일정 날짜·합주 공간 수정 (#262) - ✨ feat: 유저 표시를 ProfileChip으로 통일하고 카드·검색 화면 정리 (#259)

github-actions Bot requested review from DevJunz, JichanPark12 and njm1250 October 11, 2026 07:42

github-actions Bot assigned pcwadarong Oct 11, 2026

pcwadarong merged commit d65170b into dev Oct 11, 2026
4 checks passed

pcwadarong deleted the feat/schedule-datetime-chips branch October 11, 2026 07:49

github-actions Bot mentioned this pull request Oct 11, 2026

Release: 글래스모피즘 적용, 유저 칩 통일, 합주공간 수정 및 일정 수정 추가, 리드미 반영 #266

Merged

Navigation Menu

Repository navigation

✨ feat: 일정 일시 입력을 요약 칩 + 캘린더/시간 휠로 변경 - #265

✨ feat: 일정 일시 입력을 요약 칩 + 캘린더/시간 휠로 변경#265
pcwadarong merged 1 commit into
devfrom
feat/schedule-datetime-chips

pcwadarong commented Oct 11, 2026 •

edited by coderabbitai Bot

Loading

Uh oh!

vercel Bot commented Oct 11, 2026

Uh oh!

coderabbitai Bot commented Oct 11, 2026 •

edited

Loading

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Conversation

pcwadarong commented Oct 11, 2026 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⏱ 소요 시간

📌 작업 요약

📝 작업 내용

1. 요약 줄 + 패널 하나

2. 날짜를 캘린더로 — 연도 문제가 사라진다

3. MonthCalendarShell 분리

🚨 주요 고민 및 해결 과정

시안에 없어서 정한 것

유지한 것

의도적으로 안 한 것

💬 리뷰 요구사항

Test plan

후속

Summary by CodeRabbit

Uh oh!

vercel Bot commented Oct 11, 2026

Uh oh!

coderabbitai Bot commented Oct 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Uh oh!

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

pcwadarong commented Oct 11, 2026 •

edited by coderabbitai Bot

Loading

3. `MonthCalendarShell` 분리

coderabbitai Bot commented Oct 11, 2026 •

edited

Loading