Skip to content

feat(web): 가능 시간 관리 UI 개선 - #105

Merged
meteorqz6 merged 4 commits into
developfrom
feature/availability-ui
Jun 30, 2026
Merged

feat(web): 가능 시간 관리 UI 개선#105
meteorqz6 merged 4 commits into
developfrom
feature/availability-ui

Conversation

@ehlung

@ehlung ehlung commented Jun 30, 2026

Copy link
Copy Markdown
Contributor

개요

가능 시간 관리 화면의 근무 기간 설정과 근무자별 가능 시간 입력 UX를 개선합니다.


변경 사항

  • 근무 기간 설정을 Dialog 기반 기간 선택 UI로 변경
  • 근무자 선택을 칩 형태로 변경하고 가능 시간 입력 영역 구조 정리
  • 가능 시간 타임테이블에서 드래그 선택/해제 지원

변경 유형

  • feat — 새로운 기능
  • fix — 버그 수정
  • refactor — 리팩터링 (기능 변경 없음)
  • test — 테스트 코드
  • perf — 성능 개선
  • docs — 문서 수정
  • chore — 빌드·설정 변경

영향 범위

  • webapps/web
  • apiapps/api
  • dbpackages/database
  • sharedpackages/shared
  • repo — 루트 설정·CI/CD·문서

테스트 방법

  1. pnpm --filter @fragment/web typecheck
  2. 가능 시간 관리 화면에서 기간 선택, 근무자 전환, 가능 시간 클릭/드래그 선택을 확인

체크리스트

  • CI (테스트 + 린트) 통과 확인
  • 관련 테스트 코드 작성 또는 업데이트
  • 상태 분류 규칙(서버/전역/로컬/폼 상태) 준수
  • 에러 처리 및 Fallback UI 확인 (해당 시)
  • API 명세 업데이트 (API 변경 시)
  • 공유 타입·스키마(packages/shared) 업데이트 (타입 변경 시)

스크린샷 / 영상

UI 변경 사항은 로컬 화면에서 확인했습니다.


리뷰 포인트

  • 기간 선택 Dialog와 가능 시간 저장 플로우가 자연스러운지
  • 드래그 선택/해제 동작이 빠른 조작에서도 누락 없이 동작하는지

Summary by CodeRabbit

  • New Features

    • 근무 가능 기간 입력 방식을 월 단위 캘린더 다이얼로그로 개선했습니다.
    • 드래그로 근무 가능 시간을 한 번에 선택할 수 있게 되었습니다.
    • 익일 시간 표기가 익일 HH:MM 형식으로 더 직관적으로 표시됩니다.
  • Bug Fixes

    • 저장된 근무 기간에 맞춰 캘린더 표시 월이 자동으로 맞춰지도록 개선했습니다.
    • 스케줄 가능한 날짜만 타임테이블에 표시되도록 조정했습니다.
    • 휴무일 및 최소 인원 조건 미설정 상태를 요약 패널에서 확인할 수 있게 했습니다.

@vercel

vercel Bot commented Jun 30, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
final-project-web Ready Ready Preview, Comment Jun 30, 2026 4:51am

@coderabbitai

coderabbitai Bot commented Jun 30, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

@ehlung, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 45 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 9c0201f2-6ce1-473a-84e7-02c84c7a5b26

📥 Commits

Reviewing files that changed from the base of the PR and between 7735228 and 75f9423.

📒 Files selected for processing (1)
  • apps/web/src/features/availability/components/mvp-availability-page.tsx

Walkthrough

mvp-availability-page.tsx 단일 파일에서 근무 기간 입력 UI를 date input에서 월 단위 캘린더 다이얼로그로 교체하고, 타임테이블 셀 선택에 드래그 인터랙션(pointerdown/pointermove/pointerup)을 추가했다. visibleTimetableDates 파생 데이터로 타임테이블 컬럼을 제한하고, 익일 슬롯 표기를 "익일 HH:MM" 형식으로 변경했다.

Changes

캘린더 다이얼로그 기반 근무 기간 선택 및 드래그 셀 선택

Layer / File(s) Summary
캘린더 유틸 함수 및 포맷터 추가
apps/web/src/features/availability/components/mvp-availability-page.tsx
addMonths, createCalendarMonthDates 등 월 그리드 유틸과 MONTH_FORMATTER, formatDateWithWeekday 포맷터를 추가했다. formatSlotTime의 익일 표기를 "익일 HH:MM" 형식으로 변경했다.
컴포넌트 상태·파생 데이터 확장
apps/web/src/features/availability/components/mvp-availability-page.tsx
다이얼로그 오픈 상태, dragSelectionRef, suppressNextCellClickRef를 추가하고 visibleTimetableDates, closedDates, datesWithoutStaffingRules, calendarDates를 파생 메모로 분리했다.
드래그 셀 선택 로직 및 전역 포인터 이벤트 처리
apps/web/src/features/availability/components/mvp-availability-page.tsx
pointerup/pointercancel 전역 리스너로 드래그 상태를 정리하고, updateSlotSelections, applySlotDragRange, startSlotDrag, moveSlotDrag를 구현했다. suppressNextCellClickRef로 드래그 후 단일 클릭 중복 실행을 차단한다.
날짜 선택 핸들러 및 렌더링 전면 교체
apps/web/src/features/availability/components/mvp-availability-page.tsx
selectWorkDate로 시작일→종료일 단계 선택 후 savePlanningPeriod 호출 흐름을 구현했다. 렌더링에서 date input을 캘린더 다이얼로그로 교체하고, "입력 제외 날짜" 요약 패널 및 드래그 이벤트 바인딩을 추가했다.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed 제목이 가능 시간 관리 UI 개선이라는 핵심 변경을 정확히 요약해 PR 내용과 잘 맞습니다.
Description check ✅ Passed 개요, 변경 사항, 테스트, 체크리스트가 잘 채워졌고 Closes #이슈번호만 보완하면 더 완성적입니다.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch feature/availability-ui

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.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@apps/web/src/features/availability/components/mvp-availability-page.tsx`:
- Line 805: The `DialogContent` in `mvp-availability-page.tsx` uses an arbitrary
Tailwind width value (`max-w-[420px]`), which should be replaced with a standard
Tailwind size token or a shared `globals.css` token if that exact width is
required; update the `DialogContent` class accordingly and keep the width
consistent with the project’s sizing scale. Also review the nearby `text-[10px]`
usage in the same component for the same tokenization rule, and prefer a named
token or default scale where possible.
- Around line 438-446: The derived date arrays in mvp-availability-page.tsx are
being recomputed on every render, and repeated getSchedulableRanges calls in the
closedDates, datesWithoutStaffingRules, and visibleTimetableDates calculations
are causing unnecessary work during drag-driven rerenders. Move these three
filters into useMemo alongside the existing memoized
dateRange/timetableRange/timeSlots/calendarDates, and use the same
businessHours, staffingRules, and dateRange dependencies so the results are
reused when inputs haven’t changed. Keep the logic in the MVPAvailabilityPage
component, and preserve the current semantics while reducing the render hot-path
cost.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 7c660ada-cb15-47d4-9e3c-84afdd85afed

📥 Commits

Reviewing files that changed from the base of the PR and between 687f3f1 and 7735228.

📒 Files selected for processing (1)
  • apps/web/src/features/availability/components/mvp-availability-page.tsx

Comment thread apps/web/src/features/availability/components/mvp-availability-page.tsx Outdated
Comment thread apps/web/src/features/availability/components/mvp-availability-page.tsx Outdated
@meteorqz6
meteorqz6 merged commit da0f6b1 into develop Jun 30, 2026
4 checks passed
@meteorqz6
meteorqz6 deleted the feature/availability-ui branch June 30, 2026 06:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants