[FE-Feat] 캘린더 드래그 또는 클릭으로 시간 선택 구현 #95
Conversation
WalkthroughThis pull request revises multiple calendar-related components, hooks, and styles. It removes obsolete week-change handlers and replaces a holiday boolean with date objects across components. New functionalities include a time selection mechanism with associated context and hooks, an outside-click detector for resetting selections, and an added Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant CD as CalendarDetailCell
participant TTC as TimeTableContext (useSelectTime)
participant Reducer as Time Selection Reducer
U->>CD: Click on a detail cell
CD->>TTC: Trigger mouse event handler (SELECT_START/PROGRESS/END)
TTC->>Reducer: Dispatch action to update selection state
Reducer-->>TTC: Return updated time selection state
TTC-->>CD: Update cell state (selected/done/default)
sequenceDiagram
participant U as User
participant DT as Document (click event)
participant CC as CalendarTable
participant UC as useClickOutside Hook
participant Reset as TimeTableContext.reset
U->>DT: Click event occurs
DT->>UC: Capture click event
alt Click is outside calendar table
UC->>Reset: Invoke reset function
Reset-->>CC: Clear time selection state
else Click is inside calendar table
UC-->>CC: No action taken
end
Assessment against linked issues
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used📓 Learnings (1)frontend/src/components/Calendar/Core/WeekCell.tsx (1)🔇 Additional comments (2)
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (15)
frontend/src/theme/animation.css.ts (2)
34-47: LGTM! Consider performance optimization for the animation.The highlight animation sequence is well-implemented and aligns with the PR objectives. However, consider using
transforminstead ofbox-shadowfor better performance, as box-shadow animations can be computationally expensive.export const fadeHighlight = keyframes({ '0%': { backgroundColor: vars.color.Ref.Netural.White }, '5%': { backgroundColor: vars.color.Ref.Primary[50], - boxShadow: `inset 0 0 0 0.5px ${vars.color.Ref.Primary[100]}`, + transform: 'scale(1.01)', }, '50%': { backgroundColor: vars.color.Ref.Primary[50], - boxShadow: `inset 0 0 0 0.5px ${vars.color.Ref.Primary[100]}`, + transform: 'scale(1.01)', }, '100%': { backgroundColor: vars.color.Ref.Netural.White, + transform: 'scale(1)', }, });
49-53: Consider reducing the animation duration for better UX.A 2-second duration might feel too long for a highlight effect. Consider reducing it to 0.5-1s for a snappier user experience, especially since this is used for calendar cell interactions.
export const fadeHighlightProps: CSSProperties = { animationName: fadeHighlight, - animationDuration: '2s', + animationDuration: '0.8s', animationFillMode: 'forwards', };frontend/src/components/Calendar/context/TimeTableContext.ts (1)
1-8: LGTM! Consider adding JSDoc comments.The context implementation follows React best practices with proper type safety. Consider adding JSDoc comments to document the purpose and usage of the context and hook.
+/** + * Context for managing time-related information in the calendar. + * @type {React.Context<TimeInfo | null>} + */ export const TimeTableContext = createContext<TimeInfo | null>(null); +/** + * Hook to safely consume the TimeTableContext. + * @throws {Error} When used outside of TimeTableContext.Provider + * @returns {TimeInfo} The current time information + */ export const useTimeTableContext = (): TimeInfo => useSafeContext(TimeTableContext);frontend/src/constants/date.ts (2)
5-7: Simplify array generation.The TIMES array generation can be simplified using Array.from().
-export const TIMES: readonly number[] = Object.freeze( - new Array(24).fill(0) - .map((_, i) => i)); +export const TIMES: readonly number[] = Object.freeze( + Array.from({ length: 24 }, (_, i) => i));
20-22: Simplify MINUTES array generation.Similar to TIMES, the MINUTES array generation can be simplified.
-export const MINUTES = Object.freeze( - new Array(4).fill(0) - .map((_, i) => i * 15)); +export const MINUTES = Object.freeze( + Array.from({ length: 4 }, (_, i) => i * 15));frontend/src/components/Calendar/Table/CalendarDay.tsx (1)
24-31: Fix map function syntax.Remove the unnecessary trailing comma in the map function.
- {TIMES.map((time) => ( - <CalendarCell - date={date} - key={time} - selected={selected} - time={time} - /> - ), + {TIMES.map((time) => ( + <CalendarCell + date={date} + key={time} + selected={selected} + time={time} + /> + ) )}frontend/src/hooks/useClickOutside.ts (1)
4-26: LGTM! Well-implemented custom hook with proper cleanup.The hook effectively handles outside clicks and properly cleans up event listeners.
Consider adding error handling for cases where the ref is not properly initialized:
export const useClickOutside = <T extends HTMLElement>( onClickOutside: (event: MouseEvent) => void, ) => { const notClickableRef: RefObject<T | null> = useRef<T>(null); useEffect(() => { const handleClickOutside = (e: MouseEvent) => { + if (!notClickableRef.current) { + console.warn('useClickOutside: ref not initialized'); + return; + } const target = e.target as Node; - const isOutside = - notClickableRef.current && !notClickableRef.current.contains(target); + const isOutside = !notClickableRef.current.contains(target); if (!isOutside) return; onClickOutside(e); }; document.addEventListener('click', handleClickOutside, true); return () => { document.removeEventListener('click', handleClickOutside, true); }; }, [notClickableRef, onClickOutside]); return notClickableRef; };frontend/src/components/Calendar/Table/CalendarDetailCell.tsx (2)
20-24: Consider memoizing the state style calculation.The state style calculation could be memoized to prevent unnecessary recalculations.
- const stateStyle = (() => { + const stateStyle = useMemo(() => { if (done) return 'done'; if (selected) return 'selected'; return 'default'; - })(); + }, [done, selected]);
26-35: Consider memoizing event handlers.The mouse event handlers could be memoized to prevent unnecessary re-renders.
+ const memoizedHandlers = useMemo(() => ({ + onClick: () => handleClick(date), + onMouseDown: () => handleMouseDown(date), + onMouseEnter: () => handleMouseEnter(date), + onMouseUp: handleMouseUp, + }), [date, handleClick, handleMouseDown, handleMouseEnter, handleMouseUp]); return ( <div className={cellDetailStyle({ state: stateStyle })} key={date.getTime()} - onClick={()=>handleClick(date)} - onMouseDown={()=>handleMouseDown(date)} - onMouseEnter={()=>handleMouseEnter(date)} - onMouseUp={handleMouseUp} + {...memoizedHandlers} /> );frontend/src/components/Calendar/Table/CalendarCell.tsx (1)
33-42: Consider memoizing time slots rendering.The mapping over MINUTES array could be memoized to prevent unnecessary recalculations.
+ const timeSlots = useMemo(() => { + if (time === 'empty' || time === 'all') return null; + return ( + <Flex direction='column' height='100%'> + {MINUTES.map((minute) => { + const newDate = new Date(date); + newDate.setHours(time); + newDate.setMinutes(minute); + return <CalendarDetailCell date={newDate} key={newDate.getTime()} />; + })} + </Flex> + ); + }, [date, time]); return ( <div aria-selected={selected} className={cellStyle({ day: isWeekend(date) ? 'holiday' : 'default', time: formatTimeToStyle(time), state: selected ? 'selected' : 'default', })} role='gridcell' tabIndex={0} > - {(time === 'empty' || time === 'all') ? null : ( - <Flex direction='column' height='100%'> - {MINUTES.map((minute) => { - const newDate = new Date(date); - newDate.setHours(time); - newDate.setMinutes(minute); - return <CalendarDetailCell date={newDate} key={newDate.getTime()} />; - })} - </Flex> - )} + {timeSlots} </div> );frontend/src/hooks/useSelectTime.ts (1)
82-100: Consider adding memoization for event handlersThe event handlers are recreated on every render. Consider using
useCallbackto memoize them for better performance.Apply this diff:
+import { useCallback, useReducer } from 'react'; export const useSelectTime = (): TimeInfo => { const [state, dispatch] = useReducer(selectReducer, { selectedTime: { startTime: null, endTime: null }, doneTime: { startTime: null, endTime: null }, isSelecting: false }, ); + const handleMouseDown = useCallback((date: Date) => + dispatch({ type: 'SELECT_START', date }), []); + const handleMouseEnter = useCallback((date: Date) => + dispatch({ type: 'SELECT_PROGRESS', date }), []); + const handleMouseUp = useCallback(() => + dispatch({ type: 'SELECT_END' }), []); + const handleClick = useCallback((date: Date) => + dispatch({ type: 'SELECT_END', date }), []); + const reset = useCallback(() => + dispatch({ type: 'SELECT_CANCEL' }), []); return { selectedStartTime: state.selectedTime.startTime, selectedEndTime: state.selectedTime.endTime, doneStartTime: state.doneTime.startTime, doneEndTime: state.doneTime.endTime, - handleMouseDown: (date: Date) => dispatch({ type: 'SELECT_START', date }), - handleMouseEnter: (date: Date) => dispatch({ type: 'SELECT_PROGRESS', date }), - handleMouseUp: () => dispatch({ type: 'SELECT_END' }), - handleClick: (date: Date) => dispatch({ type: 'SELECT_END', date }), - reset: () => dispatch({ type: 'SELECT_CANCEL' }), + handleMouseDown, + handleMouseEnter, + handleMouseUp, + handleClick, + reset, }; };frontend/src/components/Calendar/Table/index.css.ts (1)
68-86: Consider adding transition properties for smoother state changesThe cellDetailStyle could benefit from smooth transitions between states.
Apply this diff:
base: { width: '100%', flexGrow: 1, cursor: 'pointer', + transition: 'background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out', },frontend/src/utils/date/date.ts (3)
108-127: Add input validation for invalid Date objects.The function handles null cases well, but it should also validate that the input Date objects are valid to prevent potential runtime errors.
Consider adding validation like this:
export const sortDate = (date1: Date | null, date2: Date | null): { startDate: Date | null; endDate: Date | null; } => { if (!date1 || !date2) { return { startDate: date1 || date2, endDate: date1 || date2, }; } + if (isNaN(date1.getTime()) || isNaN(date2.getTime())) { + throw new Error('Invalid Date object provided'); + } const [startDate, endDate] = [date1, date2].sort((a, b) => a.getTime() - b.getTime()); return { startDate, endDate }; };
129-135: Complete the function documentation.The function's documentation is missing its description.
Add a description like this:
/** - + * Checks if a target date falls within a date range (inclusive). * @param target - 비교할 날짜 * @param startDate - 시작 날짜 * @param endDate - 종료 날짜 * @returns - 날짜가 범위 내에 있는지 여부 */
136-151: Add input validation for the target date.The function should validate that the target date is a valid Date object.
Consider adding validation like this:
export const isDateInRange = ( target: Date, startDate: Date | null, endDate: Date | null, ): boolean => { + if (isNaN(target.getTime())) { + throw new Error('Invalid target Date object provided'); + } if (!startDate || !endDate) return false; const { startDate: start, endDate: end } = sortDate(startDate, endDate); if (!start || !end) return false; const targetTime = target.getTime(); const startTime = start.getTime(); const endTime = end.getTime(); return targetTime >= startTime && targetTime <= endTime; };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (19)
frontend/src/components/Calendar/Core/SelectedWeek.tsx(1 hunks)frontend/src/components/Calendar/Core/TimeControlButton.tsx(2 hunks)frontend/src/components/Calendar/Core/WeekCell.tsx(2 hunks)frontend/src/components/Calendar/Core/index.css.ts(2 hunks)frontend/src/components/Calendar/Header/CalendarHeader.tsx(2 hunks)frontend/src/components/Calendar/Table/CalendarCell.tsx(2 hunks)frontend/src/components/Calendar/Table/CalendarDay.tsx(1 hunks)frontend/src/components/Calendar/Table/CalendarDetailCell.tsx(1 hunks)frontend/src/components/Calendar/Table/index.css.ts(3 hunks)frontend/src/components/Calendar/Table/index.tsx(1 hunks)frontend/src/components/Calendar/context/TimeTableContext.ts(1 hunks)frontend/src/components/Calendar/context/TimeTableProvider.tsx(1 hunks)frontend/src/components/Calendar/index.tsx(2 hunks)frontend/src/components/Notification/GlobalNotification.tsx(2 hunks)frontend/src/constants/date.ts(2 hunks)frontend/src/hooks/useClickOutside.ts(1 hunks)frontend/src/hooks/useSelectTime.ts(1 hunks)frontend/src/theme/animation.css.ts(2 hunks)frontend/src/utils/date/date.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- frontend/src/components/Notification/GlobalNotification.tsx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Send PR Notification to Reviewers
🔇 Additional comments (13)
frontend/src/theme/animation.css.ts (2)
6-6: Address the TODO comment about token magic numbers.Consider moving the following magic numbers to design tokens:
- Animation durations (0.3s)
- Animation delays (2.7s)
- Box shadow sizes (0.5px)
This will improve maintainability and consistency across animations.
30-32: LGTM! Clear naming improvement.The rename from
fadeInAndOuttofadeInAndOutStylebetter indicates this is a style object.frontend/src/components/Calendar/context/TimeTableProvider.tsx (1)
1-14: LGTM! Clean provider implementation.The TimeTableProvider implementation follows React best practices with proper typing and clean component structure.
frontend/src/components/Calendar/index.tsx (1)
1-19: LGTM! Verify provider dependencies.The component hierarchy is well-structured. The TimeTableProvider is correctly placed to provide time-related context to both CalendarHeader and CalendarTable.
Please verify that CalendarHeader and CalendarTable don't have any dependencies that require them to be direct children of CalendarProvider.
frontend/src/components/Calendar/Header/CalendarHeader.tsx (1)
15-20: LGTM! Clean refactor of CalendarCell props.The changes effectively move the weekend logic to CalendarCell component, making it more self-contained and reusable.
frontend/src/components/Calendar/Table/CalendarDay.tsx (1)
7-10: LGTM! Clean interface update.The CalendarDayProps interface update aligns well with the broader refactoring of date handling across components.
frontend/src/components/Calendar/Core/SelectedWeek.tsx (1)
9-11: LGTM! Aligned with PR objectives.The removal of handleChangeWeek aligns with preventing direct selection from calendar header.
frontend/src/components/Calendar/Table/index.tsx (2)
2-3: LGTM! Good use of hooks and context for managing time selection.The implementation correctly:
- Uses
useClickOutsidehook to handle deselection when clicking outside.- Integrates
TimeTableContextfor managing time selection state.Also applies to: 5-6, 13-14
18-18: LGTM! Clean up of CalendarDay props.Good simplification by removing the
holidayprop in favor of passing thedateobject directly.Also applies to: 21-25
frontend/src/components/Calendar/Table/CalendarDetailCell.tsx (1)
6-19: LGTM! Well-structured time slot selection implementation.The component correctly implements the required functionality for time slot selection through both drag and click actions.
frontend/src/components/Calendar/Core/WeekCell.tsx (1)
13-13: LGTM! Made onClickHandler optional.Good change to make the click handler optional, aligning with the requirement to prevent direct selection from calendar header.
frontend/src/components/Calendar/Core/index.css.ts (1)
82-86: LGTM! Consistent use of fadeHighlight animationThe fadeHighlight animation is consistently applied across components, providing a unified user experience.
frontend/src/components/Calendar/Core/TimeControlButton.tsx (1)
18-18: LGTM! Enhanced button interactivityThe addition of the
clickableprop to chevron icons improves visual feedback for user interactions.Also applies to: 28-28
애플 캘린더에서는 저희 서비스랑 비슷하게 최상단 빈칸을 표시해주고 있는데, 마찬가지로 선택되지 않아서 저희도 하이라이팅 하지 않아도 큰 문제는 없을 것 같습니다. 
|
#️⃣ 연관된 이슈>
📝 작업 내용> 이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)
Date객체를 상태로 들고 있도록 합니다.아래 UI (새 일정 표시 및 시간범위 렌더링) 제외하고 구현했습니다.
🙏 여기는 꼭 봐주세요! > 리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요
Summary by CodeRabbit
New Features
CalendarDetailCellcomponent for enhanced time cell interactivity.TimeTableProviderfor improved context management within the calendar.Bug Fixes
Style
Refactor