diff --git a/package.json b/package.json index b4331856..6faa74ab 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1b63680f..d18a7a83 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,9 +20,6 @@ importers: axios: specifier: ^1.7.2 version: 1.7.2 - date-fns: - specifier: ^3.6.0 - version: 3.6.0 mime: specifier: ^4.0.4 version: 4.0.4 @@ -105,6 +102,9 @@ importers: chromatic: specifier: ^11.5.4 version: 11.5.4 + date-fns: + specifier: ^3.6.0 + version: 3.6.0 eslint: specifier: ^8.57.0 version: 8.57.0 diff --git a/src/page/archiving/index/ArchivingPage.tsx b/src/page/archiving/index/ArchivingPage.tsx index 0528c92e..77f1cf4b 100644 --- a/src/page/archiving/index/ArchivingPage.tsx +++ b/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(); + const daySectionRef = useRef(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(); + }; + + const handleMonthClick = (month: MonthType) => { + console.log('click'); + daySectionRef.current?.scrollTo(0, 0); + setSelectedMonthString(month); + }; + const handleBlockClick = ( e: React.MouseEvent | React.KeyboardEvent, block: Block @@ -79,15 +108,6 @@ const ArchivingPage = () => { setSelectedTabId('selected'); }; - const handleNext = (blockData: { - blockName: string; - blockType: string; - dates: { startDate: string; endDate: string }; - }) => { - const type = 'executive'; - setCurrentContent(); - }; - return (
@@ -95,10 +115,10 @@ const ArchivingPage = () => { -
+
{timeBlocks.map((block: Block) => { diff --git a/src/page/archiving/index/component/DaySection/DaySection.tsx b/src/page/archiving/index/component/DaySection/DaySection.tsx index 0ca50954..778d460c 100644 --- a/src/page/archiving/index/component/DaySection/DaySection.tsx +++ b/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 ( {day + 1} - {isToday && ( <> diff --git a/src/page/archiving/index/component/TimeBlock/TimeBlock.tsx b/src/page/archiving/index/component/TimeBlock/TimeBlock.tsx index 6ac55e04..f4723ab6 100644 --- a/src/page/archiving/index/component/TimeBlock/TimeBlock.tsx +++ b/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) => { + 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 */
{ - if (e.key === 'Enter') { - e.preventDefault(); - onBlockClick(e); - } + handleEnterBlock(e); }} css={blockStyle(blockWidth, startPosition, floor, color, isSelected)} onClick={onBlockClick} diff --git a/src/page/archiving/index/hook/common/useDate.ts b/src/page/archiving/index/hook/common/useDate.ts index 7b94cb1d..e22044c2 100644 --- a/src/page/archiving/index/hook/common/useDate.ts +++ b/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) => { 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 { diff --git a/src/page/archiving/index/util/block.ts b/src/page/archiving/index/util/block.ts index 31f161e2..372b88a2 100644 --- a/src/page/archiving/index/util/block.ts +++ b/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 }; };