#205 refactor: 상태 변수명 변경

Team-Tiki · Aug 4, 2024 · 050f880 · 050f880
1 parent 0c22187
commit 050f880
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/src/page/archiving/index/ArchivingPage.tsx b/src/page/archiving/index/ArchivingPage.tsx
@@ -17,7 +17,7 @@ import { useDate } from '@/page/archiving/index/hook/common/useDate';
 import { Block } from '@/page/archiving/index/type/blockType';
 import { alignBlocks, createTimeBlock } from '@/page/archiving/index/util/block';
 
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 
 import Add from '@/common/asset/svg/add_btn.svg?react';
 import Button from '@/common/component/Button/Button';
@@ -56,15 +56,20 @@ const ArchivingPage = () => {
 
   const sideBarRef = useOutsideClick(handleClose, 'TimeBlock');
 
-  const { currentYear, selectedMonthType, setSelectedMonthType, handlePrevYear, handleNextYear, endDay } = useDate();
+  const { currentYear, selectedMonthString, setSelectedMonthString, handlePrevYear, handleNextYear, endDay } =
+    useDate();
 
-  const selectedMonth = parseInt(selectedMonthType.split('월')[0]);
+  const selectedMonth = parseInt(selectedMonthString.split('월')[0]);
 
   const { data } = useGetTimeBlockQuery(+teamId, 'executive', currentYear, selectedMonth);
 
   const [selectedBlock, setSelectedBlock] = useState<Block>();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const timeBlocks: Block[] = data?.timeBlocks || [];
-  const blockFloors = alignBlocks(timeBlocks, endDay, selectedMonthType, currentYear);
+  const blockFloors = useMemo(
+    () => alignBlocks(timeBlocks, endDay, selectedMonthString, currentYear),
+    [currentYear, endDay, selectedMonthString, timeBlocks]
+  );
 
   // 블록 생성 모달 관련 코드
   const { isOpen, openModal, closeModal, setCurrentContent, currentContent } = useModal();
@@ -84,8 +89,8 @@ const ArchivingPage = () => {
         <YearHeader handlePrevYear={handlePrevYear} handleNextYear={handleNextYear} currentYear={currentYear} />
         <Flex css={contentStyle}>
           <MonthHeader
-            currentMonth={selectedMonthType}
-            onMonthClick={(month) => setSelectedMonthType(month)}
+            currentMonth={selectedMonthString}
+            onMonthClick={setSelectedMonthString}
             selectedBlock={selectedBlock}
           />
           <div id="block_area" css={daySectionStyle}>

diff --git a/src/page/archiving/index/component/DaySection/DaySection.tsx b/src/page/archiving/index/component/DaySection/DaySection.tsx
@@ -37,7 +37,7 @@ const DottedDayLine = () => {
 };
 
 const DaySection = memo(({ endDay }: DaySectionProps) => {
-  const { currentDate, currentYear, selectedMonthType } = useDate();
+  const { currentDate, currentYear, selectedMonthString } = useDate();
 
   return (
     <>
@@ -46,7 +46,7 @@ const DaySection = memo(({ endDay }: DaySectionProps) => {
         const isToday =
           day + 1 === currentDate.getDate() &&
           currentYear === currentDate.getFullYear() &&
-          selectedMonthType === `${currentDate.getMonth() + 1}월`;
+          selectedMonthString === `${currentDate.getMonth() + 1}월`;
 
         return (
           <Flex css={dayStyle(isEven, isToday)}>

diff --git a/src/page/archiving/index/hook/common/useDate.ts b/src/page/archiving/index/hook/common/useDate.ts
@@ -8,9 +8,11 @@ export const useDate = () => {
   const currentDate = new Date();
 
   const [currentYear, setCurrentYear] = useState(currentDate.getFullYear());
-  const [selectedMonthType, setSelectedMonthType] = useState<MonthType>(`${currentDate.getMonth() + 1}월` as MonthType);
+  const [selectedMonthString, setSelectedMonthString] = useState<MonthType>(
+    `${currentDate.getMonth() + 1}월` as MonthType
+  );
 
-  const dateOfMonth = getMonthDate(selectedMonthType, currentYear);
+  const dateOfMonth = getMonthDate(selectedMonthString, currentYear);
   const endDay = endOfMonth(dateOfMonth);
 
   const handlePrevYear = () => {
@@ -24,8 +26,8 @@ export const useDate = () => {
   return {
     currentDate,
     currentYear,
-    selectedMonthType,
-    setSelectedMonthType,
+    selectedMonthString,
+    setSelectedMonthString,
     handlePrevYear,
     handleNextYear,
     dateOfMonth,