[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

@@ -9,9 +9,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 { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 
 import AddIc from '@/common/asset/svg/add_btn.svg?react';
 import Button from '@/common/component/Button/Button';
@@ -24,13 +25,39 @@ import { useTeamStore } from '@/shared/store/team';
 
 const ArchivingPage = () => {
   const [selectedId, setSelectedId] = useState('total');
+  const [selectedBlock, setSelectedBlock] = useState<Block>();
+  const isMounted = useRef(false);
+  const daySectionRef = useRef<HTMLDivElement>(null);
 
   const { teamId } = useTeamStore();
 
+  const { currentDate, currentYear, selectedMonth, setSelectedMonth, handlePrevYear, handleNextYear, endDay } =
+    useDate(daySectionRef);
+
+  // 블록 생성 모달 관련 코드
+  const { isOpen, openModal, closeModal, setCurrentContent, currentContent } = useModal();
+
   const handleClose = () => {
     selectedBlock && setSelectedBlock(undefined);
   };
 
+  const sideBarRef = useOutsideClick(handleClose, 'TimeBlock');
+
+  const selectedMonthNumber = parseInt(selectedMonth.split('월')[0]);
+
+  const { data } = useGetTimeBlockQuery(+teamId, 'executive', currentYear, selectedMonthNumber);
+
+  const timeBlocks: Block[] = data?.timeBlocks || [];
+  const blockFloors = alignBlocks(timeBlocks, endDay, selectedMonth, currentYear);
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+    setSelectedMonth(`${currentDate.getMonth() + 1}월` as MonthType);
+  }, [teamId]);
+
   const handleSelectedId = (id: string) => {
     setSelectedId(id);
   };
@@ -48,22 +75,6 @@ const ArchivingPage = () => {
     setSelectedId('selected');
   };
 
-  const sideBarRef = useOutsideClick(handleClose, 'TimeBlock');
-
-  const { currentDate, currentYear, selectedMonth, setSelectedMonth, handlePrevYear, handleNextYear, endDay } =
-    useDate();
-
-  const selectedMonthNumber = parseInt(selectedMonth.split('월')[0]);
-
-  const { data } = useGetTimeBlockQuery(+teamId, 'executive', currentYear, selectedMonthNumber);
-
-  const [selectedBlock, setSelectedBlock] = useState<Block>();
-  const timeBlocks: Block[] = data?.timeBlocks || [];
-  const blockFloors = alignBlocks(timeBlocks, endDay, selectedMonth, currentYear);
-
-  // 블록 생성 모달 관련 코드
-  const { isOpen, openModal, closeModal, setCurrentContent, currentContent } = useModal();
-
   const handleNext = (blockData: {
     blockName: string;
     blockType: string;
@@ -73,6 +84,11 @@ const ArchivingPage = () => {
     setCurrentContent(<UploadModal onClose={closeModal} teamId={+teamId} type={type} blockData={blockData} />);
   };
 
+  const handleMonthClick = (month: MonthType) => {
+    setSelectedMonth(month);
+    daySectionRef.current?.scrollTo(0, 0);
+  };
+
   return (
     <Flex
       styles={{
@@ -86,12 +102,8 @@ const ArchivingPage = () => {
       <section css={timelineStyle}>
         <YearHeader handlePrevYear={handlePrevYear} handleNextYear={handleNextYear} currentYear={currentYear} />
         <Flex css={contentStyle}>
-          <MonthHeader
-            currentMonth={selectedMonth}
-            onMonthClick={(month) => setSelectedMonth(month)}
-            selectedBlock={selectedBlock}
-          />
-          <div id="block_area" css={daySectionStyle}>
+          <MonthHeader currentMonth={selectedMonth} onMonthClick={handleMonthClick} selectedBlock={selectedBlock} />
+          <div id="block_area" css={daySectionStyle} ref={daySectionRef}>
             {Array.from({ length: endDay.getDate() }, (_, index) => {
               const day = index + 1;
               const isEven = day % 2 === 0;

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

@@ -1,5 +1,4 @@
 import {
-  bodyStyle,
   dayHeaderStyle,
   dayStyle,
   selectedDayStyle,
@@ -37,9 +36,8 @@ const DottedDayLine = () => {
 
 const DaySection = ({ day, isEven, isToday }: DaySectionProps) => {
   return (
-    <Flex css={dayStyle(isEven, isToday)}>
+    <Flex tag="section" css={dayStyle(isEven, isToday)}>
       <Flex css={dayHeaderStyle(isToday)}>{day}</Flex>
-      <Flex css={bodyStyle} />
       {isToday && (
         <>
           <Circle width={8} height={8} css={selectedDayStyle} />

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());
@@ -14,10 +14,14 @@ export const useDate = () => {
 
   const handlePrevYear = () => {
     setCurrentYear((prevYear) => prevYear - 1);
+    setSelectedMonth('1월');
+    ref.current?.scrollTo(0, 0);
   };
 
   const handleNextYear = () => {
     setCurrentYear((prevYear) => prevYear + 1);
+    setSelectedMonth('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 };
 };