Skip to content

Bug/#169 MonthPicker 날짜 역전 방지 기능 추가 - #170

Merged
optshj merged 3 commits into
devfrom
bug/#169
Aug 13, 2026
Merged

optshj merged 3 commits into
devfrom
bug/#169

Conversation

@optshj

@optshj optshj commented Aug 13, 2026 •

Copy link
Copy Markdown
Member

#️⃣연관된 이슈

📝작업 내용

  • MonthPicker에서 시작일 종료일이 역전되지 않도록 수정했습니다.
  • 시작일 MonthPicker에는 max로 종료일을, 종료일 MonthPicker에는 min으로 시작일을 전달하여 날짜 역전을 방지했습니다.

💬리뷰 요구사항(선택)

  • DatePicker는 아직까지 단일 날짜만 선택하도록 되어있어, 추후 기간 선택 기능이 필요해질 경우비슷한 방식으로 적용하면 좋아보입니다!

Summary by CodeRabbit

  • 새 기능
    • 월 선택기에 시작월·종료월 범위를 제한하는 기능을 추가했습니다.
    • 경력, 학력, 프로젝트, 경험 및 이력서 기간 입력에서 유효하지 않은 월을 선택할 수 없습니다.
    • 범위를 벗어난 월은 비활성화되며 hover 및 현재 월 강조 표시가 적용되지 않습니다.
  • 개선
    • 시작월은 종료월 이후로, 종료월은 시작월 이전으로 설정되지 않아 기간 입력의 정확성이 향상되었습니다.

@optshj
optshj requested a review from leeleeleeleejun August 13, 2026 00:50
@optshj optshj self-assigned this Aug 13, 2026
@optshj optshj added the 🐞 BugFix 디버깅 label Aug 13, 2026
@vercel

vercel Bot commented Aug 13, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
28th-web-team-1-fe Ready Ready Preview Aug 13, 2026 2:26am

@coderabbitai

coderabbitai Bot commented Aug 13, 2026 •

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

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

Next review available in: 25 minutes

You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository.

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: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: d20bf73e-0563-4c63-aacb-26842946fe50

📥 Commits

Reviewing files that changed from the base of the PR and between e4fe508 and 833de58.

📒 Files selected for processing (11)
  • src/shared/ui/month_picker/MonthPicker.stories.tsx
  • src/shared/ui/month_range_picker/MonthRangePicker.stories.tsx
  • src/shared/ui/month_range_picker/MonthRangePicker.tsx
  • src/shared/ui/month_range_picker/index.ts
  • src/views/experiences_detail/ui/ExperienceDetailPanel.tsx
  • src/views/experiences_detail/ui/ProjectInfo.tsx
  • src/views/mypage/ui/profile/CareerSection.tsx
  • src/views/mypage/ui/profile/EducationSection.tsx
  • src/views/onboarding/ui/ResumeFieldInput.tsx
  • src/views/resume_edit/ui/form/FormPeriodPicker.tsx
  • src/widgets/resume_preview/ui/ResumeSectionView.tsx

Walkthrough

MonthPicker에 min과 max 범위를 추가했습니다. 범위를 벗어난 월은 비활성화됩니다. 경험, 프로젝트, 경력, 학력, 이력서 기간 입력은 시작 월과 종료 월을 서로의 범위로 제한합니다.

Changes

월 범위 제한

Layer / File(s) Summary
MonthPicker 범위 검증 및 비활성화
src/shared/ui/month_picker/MonthPicker.tsx
MonthPickerProps에 min과 max를 추가했습니다. 범위를 벗어난 월 버튼을 비활성화하고 hover 및 현재 월 강조 스타일을 제거합니다.
기간 입력 화면의 범위 연결
src/views/experiences_detail/ui/ExperienceDetailPanel.tsx, src/views/experiences_detail/ui/ProjectInfo.tsx, src/views/mypage/ui/profile/*Section.tsx, src/views/onboarding/ui/ResumeFieldInput.tsx, src/views/resume_edit/ui/form/FormPeriodPicker.tsx
시작 월에 종료 월을 max로 전달하고, 종료 월에 시작 월을 min으로 전달합니다.

Estimated code review effort: 2 (Simple) | ~15 minutes

Mergeability Score: 🔵 Low · up to e4fe5

The month range restriction prevents reversed dates, but some empty pickers can initially open on a year where every month is unavailable when the other date is far in the past or future. The PR is mergeable with owner awareness and a follow-up to initialize the view within the valid date range.

Possibly related PRs

Suggested reviewers: leeleeleeleejun

Poem

깡충 뛰는 토끼가 월을 고르고
시작은 끝을 넘지 않게,
끝은 시작보다 앞서지 않게,
비활성 월은 살짝 쉬게 했어요.
🐇 범위 안에서 즐겁게 기록해요!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed 제목은 MonthPicker의 날짜 역전 방지 기능이라는 변경 사항을 명확하고 구체적으로 요약합니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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 docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch bug/#169

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: 1

🤖 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 `@src/shared/ui/month_picker/MonthPicker.tsx`:
- Around line 98-101: Update the MonthPicker initialization and handleOpenChange
logic to derive the initial view year from minMonth or maxMonth when value is
empty, clamping the year to the allowed range instead of always using the
current year. Preserve the current-year behavior when it falls within the range,
and ensure the popover opens directly on a valid year.
🪄 Autofix

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: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c9600e34-a2e0-4f72-934c-7d4206c340af

📥 Commits

Reviewing files that changed from the base of the PR and between ba63c34 and e4fe508.

📒 Files selected for processing (7)
  • src/shared/ui/month_picker/MonthPicker.tsx
  • src/views/experiences_detail/ui/ExperienceDetailPanel.tsx
  • src/views/experiences_detail/ui/ProjectInfo.tsx
  • src/views/mypage/ui/profile/CareerSection.tsx
  • src/views/mypage/ui/profile/EducationSection.tsx
  • src/views/onboarding/ui/ResumeFieldInput.tsx
  • src/views/resume_edit/ui/form/FormPeriodPicker.tsx

Comment on lines +98 to +101
const cellMonth = dayjs(`${viewYear}-${String(monthIndex + 1).padStart(2, '0')}-01`)
const isSelected = selected?.year() === viewYear && selected?.month() === monthIndex
const isCurrent = today.year() === viewYear && today.month() === monthIndex
const isOutOfRange = (Boolean(minMonth) && cellMonth.isBefore(minMonth, 'month')) || (Boolean(maxMonth) && cellMonth.isAfter(maxMonth, 'month'))

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

범위 안의 연도로 팝오버를 초기화하세요.

value가 비어 있고 반대쪽 월이 과거 또는 미래에 있으면 기존 viewYear 초기화가 현재 연도를 사용합니다. 그러면 현재 연도의 12개 월이 모두 isOutOfRange가 됩니다. 사용자는 유효한 연도까지 여러 번 이동해야 합니다. 초기화와 handleOpenChange 모두 minMonth 또는 maxMonth를 사용해 연도를 허용 범위 안으로 보정하세요.

수정 방향
-  const [viewYear, setViewYear] = useState(() => (selected ?? today).year())
+  const fallbackMonth = minMonth ?? maxMonth ?? today
+  const [viewYear, setViewYear] = useState(() => (selected ?? fallbackMonth).year())

-    if (next) setViewYear((parseMonth(value) ?? today).year())
+    if (next) setViewYear((parseMonth(value) ?? fallbackMonth).year())
🤖 Prompt for 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.

In `@src/shared/ui/month_picker/MonthPicker.tsx` around lines 98 - 101, Update the
MonthPicker initialization and handleOpenChange logic to derive the initial view
year from minMonth or maxMonth when value is empty, clamping the year to the
allowed range instead of always using the current year. Preserve the
current-year behavior when it falls within the range, and ensure the popover
opens directly on a valid year.

@leeleeleeleejun leeleeleeleejun left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

고생하셨습니다!
현재 기간 컴포넌트가 동일하게 3번 이상 반복되고
컴포넌트가 변경되면 모든 파일이 동일하게 변경되는데
PeriodPicker 컴포넌트로 만드는시는 건 어떠신가요!

@optshj

optshj commented Aug 13, 2026

Copy link
Copy Markdown
Member Author

고생하셨습니다! 현재 기간 컴포넌트가 동일하게 3번 이상 반복되고 컴포넌트가 변경되면 모든 파일이 동일하게 변경되는데 PeriodPicker 컴포넌트로 만드는시는 건 어떠신가요!

좋습니당
그렇게 설계한다면 PeriodPicker에 type을 month | date 로 만들어서 날짜 또는 월로 선택하도록 구현하겠습니다~

@leeleeleeleejun

Copy link
Copy Markdown
Member

고생하셨습니다! 현재 기간 컴포넌트가 동일하게 3번 이상 반복되고 컴포넌트가 변경되면 모든 파일이 동일하게 변경되는데 PeriodPicker 컴포넌트로 만드는시는 건 어떠신가요!

좋습니당 그렇게 설계한다면 PeriodPicker에 type을 month | date 로 만들어서 날짜 또는 월로 선택하도록 구현하겠습니다~

date 기간 설정은 DateRangePicker라는 일반화된 UI 컴포넌트가 있어서 함께 처리하지 않아도 될 듯합니다!

image

지금은 PeriodMonthPicker만 만들고, 나중에 DateRangePicker가 필요할 때 만들면 좋을 거 같아요
네이밍도 PeriodMonthPicker 보다 MonthRangePicker 어떨까요!

@optshj

optshj commented Aug 13, 2026

Copy link
Copy Markdown
Member Author

넵 좋습니다! 반영해서 올리겠습니다

@github-actions

github-actions Bot commented Aug 13, 2026 •

Copy link
Copy Markdown

Comment on lines +7 to +17
interface MonthRangePickerProps {
start: string | null
end: string | null
onChangeStart: (value: string | null) => void
onChangeEnd: (value: string | null) => void
startPlaceholder?: string
endPlaceholder?: string
label?: string
className?: string
separatorClassName?: string
}

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

input, textarea와 동일하게 label을 입력하면 상단에 노출됩니다.

return <CoreSkillSection title={displayText} items={payloadsOf(items, 'coreSkill')} />
case 'CAREER':
return <CareerSection title={`${displayText} / 활동`} items={payloadsOf(items, 'career')} />
return <CareerSection title={displayText} items={payloadsOf(items, 'career')} />

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

오탈자 수정
(기존) 경력 / 활동 / 활동 -> (수정) 경력 / 활동

@leeleeleeleejun leeleeleeleejun left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

굳 좋습니다!!! 👍🏻

Comment on lines 299 to 301
<Text variant="label1" weight="semibold" color="text-basic" className="w-6.25 shrink-0">
기간
</Text>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

MonthRangePicker 의 label 과 스타일이 다른가요??

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

네 이부분은 세로 배치가 아니라 가로 배치여서
[라벨] [MonthPicker] 처럼 되어있습니다

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

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

이 두 경우 밖에 가로 배치가 없어서 컴포넌트화 시키기보다는 예외상황에서만 저렇게 하는게 나아보여 저렇게 구현했습니다!

Comment on lines 181 to 183
<Text variant="label1" weight="semibold" color="text-basic" className="w-6.25 shrink-0">
기간
</Text>

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

요기도 라벨 사용 확인하면 좋을 거 같아요

@optshj
optshj merged commit 137e11b into dev Aug 13, 2026
5 of 6 checks passed

This branch was successfully deployed

1 active deployment
Preview — 833de587 Deployed Aug 13, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

🐞 BugFix 디버깅

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[BUG] 기간 필드에서 시작일이 종료일을 넘지 못하도록 수정

2 participants