[Fix] 연도가 다른 타임 블록 배치

package.json

@@ -17,7 +17,6 @@
     "@tanstack/react-query": "^5.49.2",
     "@tanstack/react-query-devtools": "^5.49.2",
     "axios": "^1.7.2",
-    "date-fns": "^3.6.0",
     "mime": "^4.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/page/archiving/index/ArchivingPage.tsx

@@ -15,9 +15,10 @@ import YearHeader from '@/page/archiving/index/component/YearHeader/YearHeader';
 import { useGetTimeBlockQuery } from '@/page/archiving/index/hook/api/useGetTimeBlockQuery';
 import { useDate } from '@/page/archiving/index/hook/common/useDate';
 import { Block } from '@/page/archiving/index/type/blockType';
+import { MonthType } from '@/page/archiving/index/type/monthType';
 import { alignBlocks, createTimeBlock } from '@/page/archiving/index/util/block';
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import Add from '@/common/asset/svg/add_btn.svg?react';
@@ -31,25 +32,27 @@ const ArchivingPage = () => {
   const [selectedTabId, setSelectedTabId] = useState('total');
   const [selectedBlock, setSelectedBlock] = useState<Block>();
 
+  const daySectionRef = useRef<HTMLDivElement>(null);
+
   const location = useLocation();
-  const teamId = new URLSearchParams(location.search).get('teamId');
 
+  const teamId = new URLSearchParams(location.search).get('teamId');
   if (!teamId) throw new Error('has no error');
 
   // 블록 생성 모달 관련 코드
   const { isOpen, openModal, closeModal, setCurrentContent, currentContent } = useModal();
 
-  const { currentYear, selectedMonthString, setSelectedMonthString, handlePrevYear, handleNextYear, endDay } =
-    useDate();
-
-  const handleClose = () => {
-    selectedBlock && setSelectedBlock(undefined);
-  };
-
-  const sideBarRef = useOutsideClick(handleClose, 'TimeBlock');
-
+  const {
+    currentDate,
+    currentYear,
+    selectedMonthString,
+    setSelectedMonthString,
+    handlePrevYear,
+    handleNextYear,
+    endDay,
+  } = useDate(daySectionRef);
   const selectedMonth = parseInt(selectedMonthString.split('월')[0]);
-
+  
   const { data } = useGetTimeBlockQuery(+teamId, 'executive', currentYear, selectedMonth);
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -59,10 +62,36 @@ const ArchivingPage = () => {
     [currentYear, endDay, selectedMonthString, timeBlocks]
   );
 
+  const handleClose = () => {
+    selectedBlock && setSelectedBlock(undefined);
+  };
+
+  const sideBarRef = useOutsideClick(handleClose, 'TimeBlock');
+
+  useEffect(() => {
+    setSelectedMonthString(`${currentDate.getMonth() + 1}월` as MonthType);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [teamId]);
+
   const handleSelectedId = (id: string) => {
     setSelectedTabId(id);
   };
 
+  const handleNext = (blockData: {
+    blockName: string;
+    blockType: string;
+    dates: { startDate: string; endDate: string };
+  }) => {
+    const type = 'executive';
+    setCurrentContent(<UploadModal onClose={closeModal} teamId={+teamId} type={type} blockData={blockData} />);
+  };
+
+  const handleMonthClick = (month: MonthType) => {
+    console.log('click');
+    daySectionRef.current?.scrollTo(0, 0);
+    setSelectedMonthString(month);
+  };
+
   const handleBlockClick = (
     e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
     block: Block
@@ -79,26 +108,17 @@ const ArchivingPage = () => {
     setSelectedTabId('selected');
   };
 
-  const handleNext = (blockData: {
-    blockName: string;
-    blockType: string;
-    dates: { startDate: string; endDate: string };
-  }) => {
-    const type = 'executive';
-    setCurrentContent(<UploadModal onClose={closeModal} teamId={+teamId} type={type} blockData={blockData} />);
-  };
-
   return (
     <Flex css={pageStyle}>
       <section css={timelineStyle}>
         <YearHeader handlePrevYear={handlePrevYear} handleNextYear={handleNextYear} currentYear={currentYear} />
         <Flex css={contentStyle}>
           <MonthHeader
             currentMonth={selectedMonthString}
-            onMonthClick={setSelectedMonthString}
+            onMonthClick={handleMonthClick}
             selectedBlock={selectedBlock}
           />
-          <div id="block_area" css={daySectionStyle}>
+          <div id="block_area" css={daySectionStyle} ref={daySectionRef}>
             <DaySection endDay={endDay} />
 
             {timeBlocks.map((block: Block) => {

src/page/archiving/index/component/DaySection/DaySection.tsx

@@ -1,5 +1,4 @@
 import {
-  bodyStyle,
   dayHeaderStyle,
   dayStyle,
   selectedDayStyle,
@@ -51,7 +50,6 @@ const DaySection = memo(({ endDay }: DaySectionProps) => {
         return (
           <Flex css={dayStyle(isEven, isToday)}>
             <Flex css={dayHeaderStyle(isToday)}>{day + 1}</Flex>
-            <Flex css={bodyStyle} />
             {isToday && (
               <>
                 <Circle width={8} height={8} css={selectedDayStyle} />

src/page/archiving/index/component/TimeBlock/TimeBlock.tsx

@@ -28,16 +28,19 @@ const TimeBlock = ({
   const blockWidth = (new Date(endDate).getDate() - new Date(startDate).getDate() + 1) * 6;
   const startPosition = (new Date(startDate).getDate() - 1) * 6;
 
+  const handleEnterBlock = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      onBlockClick(e);
+    }
+  };
+
   return (
-    /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
     <div
       role="tab"
       tabIndex={0}
       onKeyDown={(e) => {
-        if (e.key === 'Enter') {
-          e.preventDefault();
-          onBlockClick(e);
-        }
+        handleEnterBlock(e);
       }}
       css={blockStyle(blockWidth, startPosition, floor, color, isSelected)}
       onClick={onBlockClick}

src/page/archiving/index/hook/common/useDate.ts

@@ -4,7 +4,7 @@ import { endOfMonth } from 'date-fns';
 
 import { useState } from 'react';
 
-export const useDate = () => {
+export const useDate = (ref?: React.RefObject<HTMLDivElement>) => {
   const currentDate = new Date();
 
   const [currentYear, setCurrentYear] = useState(currentDate.getFullYear());
@@ -17,10 +17,14 @@ export const useDate = () => {
 
   const handlePrevYear = () => {
     setCurrentYear((prevYear) => prevYear - 1);
+    setSelectedMonthString('1월');
+    ref?.current?.scrollTo(0, 0);
   };
 
   const handleNextYear = () => {
     setCurrentYear((prevYear) => prevYear + 1);
+    setSelectedMonthString('1월');
+    ref?.current?.scrollTo(0, 0);
   };
 
   return {

src/page/archiving/index/util/block.ts

@@ -48,15 +48,21 @@ export const createTimeBlock = ({ startDate, endDate, currentYear, selectedMonth
 
   if (blockStartDate.getFullYear() === currentYear && blockEndDate.getFullYear() === currentYear) {
     if (startMonth < selectedMonth && selectedMonth < endMonth) {
-      // 타임블록이 3달 이상의 기간을 가질 때
       blockStartDate = firstDay;
       blockEndDate = lastDay;
-    } else if (startMonth !== selectedMonth) {
+    } else if (startMonth !== selectedMonth && endMonth === selectedMonth) {
       blockStartDate = firstDay;
-    } else if (endMonth !== selectedMonth) {
+    } else if (startMonth === selectedMonth && endMonth !== selectedMonth) {
       blockEndDate = lastDay;
     }
+  } else {
+    if (startMonth <= selectedMonth || selectedMonth <= endMonth) {
+      blockStartDate =
+        startMonth === selectedMonth && blockStartDate.getFullYear() === currentYear ? blockStartDate : firstDay;
+      blockEndDate = endMonth === selectedMonth && blockEndDate.getFullYear() === currentYear ? blockEndDate : lastDay;
+    }
   }
+
   return { startDate: blockStartDate, endDate: blockEndDate };
 };