Refactor: 코드 리뷰 피드백 반영 (동혁)

src/components/Calendar/Calendar-header.jsx

@@ -1,8 +1,9 @@
-import useCalendar from '@hooks/useCalendar'
+// import useCalendar from '@hooks/useCalendar'
 import styled from 'styled-components'
+import { WEEKDAY } from '@constants/calendar'
 
 function CalendarHeader() {
-  const { calendarHeader } = useCalendar()
+  const calendarHeader = WEEKDAY
 
   return (
     <>

src/constants/calendar.js

@@ -2,6 +2,8 @@ export const WEEKDAY = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT']
 
 export const MONTHS = Array.from({ length: 12 }, (_, i) => i + 1)
 
+export const FIRSTDAY = (year, month) => new Date(year, month, 1).getDay()
+
 export const HOLIDAYS = [
   { date: '2024-01-01', name: '신정' },
   { date: '2024-02-09', name: '설날 연휴' },

src/hooks/useCalendar.jsx

@@ -1,15 +1,12 @@
-import { WEEKDAY } from '@constants/calendar'
 import { useState, useEffect } from 'react'
+import { FIRSTDAY } from '@constants/calendar'
 
 const useCalendar = (year, month) => {
-  const calendarHeader = WEEKDAY
-
   const [calendarDays, setCalendarDays] = useState([])
 
-  const firstDayIndex = new Date(year, month, 1).getDay()
+  const firstDayIndex = FIRSTDAY(year, month)
 
   useEffect(() => {
-    // 이번달의 1일이 일요일이 아닌 경우에 지난달 마지막 주 추가
     let previousMonthDays = []
     if (firstDayIndex !== 0) {
       previousMonthDays = getLastWeekOfPreviousMonth(year, month)
@@ -20,13 +17,13 @@ const useCalendar = (year, month) => {
     setCalendarDays([...previousMonthDays, ...currentMonthDays])
   }, [year, month, firstDayIndex])
 
-  return { calendarHeader, calendarDays, firstDayIndex }
+  return { calendarDays }
 }
 
 //helper
 const getLastWeekOfPreviousMonth = (year, month) => {
-  const lastDayOfPreviousMonth = new Date(year, month, 0) // 전달의 마지막 날
-  const lastDayOfWeek = lastDayOfPreviousMonth.getDay() // 전달의 마지막 날의 요일
+  const lastDayOfPreviousMonth = new Date(year, month, 0)
+  const lastDayOfWeek = lastDayOfPreviousMonth.getDay()
 
   return Array.from(
     { length: lastDayOfWeek + 1 },

src/pages/salary-management/ScheduleList.jsx

@@ -1,15 +1,15 @@
 import { CalendarContext } from '@components/Container/calendar-context'
 import useAttendance from '@hooks/useAttandance'
-import useCalendar from '@hooks/useCalendar'
 import { colors } from '@styles/Colors'
 import { format } from 'date-fns/format'
 import { useContext } from 'react'
 import styled from 'styled-components'
+import { FIRSTDAY } from '@constants/calendar'
 
 function ScheduleList({ idx }) {
   const { month, year } = useContext(CalendarContext)
   const { data } = useAttendance({ month })
-  const { firstDayIndex } = useCalendar(year, month)
+  const firstDayIndex = FIRSTDAY(year, month)
 
   const hasAttendance = !!data && Object.keys(data).length !== 0
   if (!hasAttendance) return <Container />

src/pages/task-management/TaskList.jsx

@@ -1,20 +1,19 @@
 import { CalendarContext } from '@components/Container/calendar-context'
 import { DIVISION_COLORS } from '@constants/Task'
 import useAuthState from '@hooks/useAuthState'
-import useCalendar from '@hooks/useCalendar'
 import { fetchTasks } from '@reducers/taskSlice'
 import { colors } from '@styles/Colors'
 import { useContext, useEffect } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import styled from 'styled-components'
+import { FIRSTDAY } from '@constants/calendar'
 
 const TaskList = ({ idx }) => {
   const { month, year } = useContext(CalendarContext)
-  const { firstDayIndex } = useCalendar(year, month)
+  const firstDayIndex = FIRSTDAY(year, month)
   const dispatch = useDispatch()
   const { data: tasks, error } = useSelector(({ tasks }) => tasks)
 
-  // console.log('task', tasks)
   const { user } = useAuthState()
 
   useEffect(() => {

src/reducers/userListSlice.js

@@ -32,7 +32,6 @@ export const fetchEmployeeList = createAsyncThunk('user/fetchEmployee', async ()
   const employeesList = docSnap.docs.map((doc) => ({
     ...doc.data(),
   }))
-  // console.log('list', employeesList)
 
   return employeesList
 })