-
Notifications
You must be signed in to change notification settings - Fork 4
feat(ui): DatePicker #323
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
feat(ui): DatePicker #323
Conversation
- 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 스토리 추가
|
| useEffect(() => { | ||
| if ('startDate' in args) setStartDate(toDateOrNull(args.startDate)); | ||
| if ('endDate' in args) setEndDate(toDateOrNull(args.endDate)); | ||
| }, [args]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useEffect 없이 동작할 수 있어야할 것 같아요! startDate, endDate prop 만으로!
namdaeun
left a comment
There was a problem hiding this 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'); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
다른 컴포넌트 에러 메시지에 맞게 문구 수정해주시면 좋을 것 같습니다!
| function DatepickerHeader({ | ||
| title, | ||
| onTitleClick, | ||
| onPrevClick, | ||
| onNextClick, | ||
| isPrevDisabled = false, | ||
| isNextDisabled = false, | ||
| showTitleIcon = false, | ||
| }: DatepickerHeaderProps): JSX.Element { | ||
| return ( | ||
| <div className={S.navigation}> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
시맨틱 태그 활용해주시면 좋을 것 같아요 !
변경사항
단일/범위 날짜 선택을 지원하는 Datepicker 컴포넌트를 구현했습니다.
주요 기능
링크
시급한 정도
🏃♂️ 보통 : 최대한 빠르게 리뷰 부탁드립니다.
기타 사항