Skip to content

Conversation

@seong-hui
Copy link
Member

@seong-hui seong-hui commented Nov 19, 2025

변경사항

단일/범위 날짜 선택을 지원하는 Datepicker 컴포넌트를 구현했습니다.

주요 기능

  • 단일 날짜 선택 모드: 하나의 날짜를 선택할 수 있는 기본 모드
  • 범위 날짜 선택 모드: 시작일과 종료일을 선택할 수 있는 범위 모드
  • Day/Month 뷰 전환: 일별 캘린더와 월 선택 뷰 간 전환 가능
  • 직접 입력 지원: YYYY.MM.DD 형식으로 날짜를 직접 입력 가능

링크

시급한 정도

🏃‍♂️ 보통 : 최대한 빠르게 리뷰 부탁드립니다.

기타 사항

- Discriminated Union 패턴으로 Single/Range Props 타입 분리
- DatepickerMode 타입을 상수 기반으로 정의
- 공통 상수(DAYS_OF_WEEK, MONTHS, DATEPICKER_MODE) 추가
- 날짜 유틸리티 함수(generateCalendarDates, isSameDate, formatDate, parseDateInput) 구현
- DatepickerContext로 전역 상태 관리
- useDatepickerState Hook으로 단일/범위 모드 상태 로직 분리
- 입력 텍스트 파싱 및 유효성 검증 처리
- Portal 위치 계산 및 관리 로직 구현
- DatepickerInput: 단일/범위 입력 필드 및 아이콘 처리
- DatepickerModal: Portal 기반 모달 및 뷰 전환 로직
- DatepickerDayView: 일별 캘린더 그리드 및 범위 선택 UI
- DatepickerMonthView: 월 선택 그리드 뷰
- DatepickerHeader: 네비게이션 헤더 컴포넌트
- Datepicker 메인 컴포넌트 통합
- Public API export(DatePicker, DatepickerProps, SingleDatepickerProps, RangeDatepickerProps, DatepickerMode)
- Storybook 스토리 추가
@changeset-bot
Copy link

changeset-bot bot commented Nov 19, 2025

⚠️ No Changeset found

Latest commit: b761b3a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@seong-hui seong-hui changed the title Fea(UI): DatePicker Feat(ui): DatePicker Nov 19, 2025
@seong-hui seong-hui changed the title Feat(ui): DatePicker feat(ui): DatePicker Nov 19, 2025
Comment on lines +124 to +127
useEffect(() => {
if ('startDate' in args) setStartDate(toDateOrNull(args.startDate));
if ('endDate' in args) setEndDate(toDateOrNull(args.endDate));
}, [args]);
Copy link
Member

Choose a reason for hiding this comment

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

useEffect 없이 동작할 수 있어야할 것 같아요! startDate, endDate prop 만으로!

Copy link
Member

@namdaeun namdaeun left a comment

Choose a reason for hiding this comment

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

고생많으셨습니다 ~~

export function useDatepickerContext() {
const context = useContext(DatepickerContext);
if (!context) {
throw new Error('useDatepickerContext must be used within DatepickerContext.Provider');
Copy link
Member

Choose a reason for hiding this comment

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

다른 컴포넌트 에러 메시지에 맞게 문구 수정해주시면 좋을 것 같습니다!

Comment on lines +14 to +24
function DatepickerHeader({
title,
onTitleClick,
onPrevClick,
onNextClick,
isPrevDisabled = false,
isNextDisabled = false,
showTitleIcon = false,
}: DatepickerHeaderProps): JSX.Element {
return (
<div className={S.navigation}>
Copy link
Member

Choose a reason for hiding this comment

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

시맨틱 태그 활용해주시면 좋을 것 같아요 !

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants