Merge pull request #208 from Team-Tiki/refactor/archiving/#187-refact…

…or-archiving-page [Refactor] 아카이빙 페이지 리팩토링
Team-Tiki · Aug 7, 2024 · bc92416 · bc92416
2 parents 94ec460 + 818af30
commit bc92416
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 91 deletions.
diff --git a/src/page/archiving/index/ArchivingPage.style.ts b/src/page/archiving/index/ArchivingPage.style.ts
@@ -3,6 +3,19 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
+export const pageStyle = () =>
+  css({
+    justifyContent: 'center',
+    alignItems: 'center',
+
+    width: '100%',
+    height: '100%',
+
+    paddingLeft: '6rem',
+
+    overflow: 'hidden',
+  });
+
 export const timelineStyle = () =>
   css({
     flexDirection: 'column',

diff --git a/src/page/archiving/index/ArchivingPage.tsx b/src/page/archiving/index/ArchivingPage.tsx
@@ -1,6 +1,12 @@
 import BlockModal from '@/page/archiving/createTimeBlock/component/Block/BlockModal';
 import UploadModal from '@/page/archiving/createTimeBlock/component/Upload/UploadModal';
-import { buttonStyle, contentStyle, daySectionStyle, timelineStyle } from '@/page/archiving/index/ArchivingPage.style';
+import {
+  buttonStyle,
+  contentStyle,
+  daySectionStyle,
+  pageStyle,
+  timelineStyle,
+} from '@/page/archiving/index/ArchivingPage.style';
 import DaySection from '@/page/archiving/index/component/DaySection/DaySection';
 import DocumentBar from '@/page/archiving/index/component/DocumentBar/DocumentBar';
 import MonthHeader from '@/page/archiving/index/component/MonthHeader/MonthHeader';
@@ -11,10 +17,10 @@ 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 { useLocation } from 'react-router-dom';
 
-import AddIc from '@/common/asset/svg/add_btn.svg?react';
+import Add from '@/common/asset/svg/add_btn.svg?react';
 import Button from '@/common/component/Button/Button';
 import Flex from '@/common/component/Flex/Flex';
 import Modal from '@/common/component/Modal/Modal';
@@ -27,23 +33,40 @@ const ArchivingPage = () => {
 
   const location = useLocation();
   const teamId = new URLSearchParams(location.search).get('teamId');
-
+  
   if (!teamId) throw new Error('has no error');
 
-  const { currentDate, currentYear, selectedMonth, setSelectedMonth, handlePrevYear, handleNextYear, endDay } =
-    useDate();
   // 블록 생성 모달 관련 코드
   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 selectedMonth = parseInt(selectedMonthString.split('월')[0]);
+
+  const { data } = useGetTimeBlockQuery(+teamId, 'executive', currentYear, selectedMonth);
+
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const timeBlocks: Block[] = data?.timeBlocks || [];
+  const blockFloors = useMemo(
+    () => alignBlocks(timeBlocks, endDay, selectedMonthString, currentYear),
+    [currentYear, endDay, selectedMonthString, timeBlocks]
+  );
+
   const handleSelectedId = (id: string) => {
     setSelectedId(id);
   };
-
-  const handleBlockClick = (e: React.MouseEvent<HTMLDivElement>, block: Block) => {
+
+  const handleBlockClick = (
+    e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>,
+    block: Block
+  ) => {
     e.stopPropagation();
 
     e.currentTarget.scrollIntoView({
@@ -56,15 +79,6 @@ const ArchivingPage = () => {
     setSelectedId('selected');
   };
 
-  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);
-
   const handleNext = (blockData: {
     blockName: string;
     blockType: string;
@@ -75,49 +89,25 @@ const ArchivingPage = () => {
   };
 
   return (
-    <Flex
-      styles={{
-        justify: 'center',
-        align: 'center',
-        width: '100%',
-        height: '100%',
-        paddingLeft: '6rem',
-      }}
-      css={{ overflowY: 'hidden', overflowX: 'hidden' }}>
+    <Flex css={pageStyle}>
       <section css={timelineStyle}>
         <YearHeader handlePrevYear={handlePrevYear} handleNextYear={handleNextYear} currentYear={currentYear} />
         <Flex css={contentStyle}>
           <MonthHeader
-            currentMonth={selectedMonth}
-            onMonthClick={(month) => setSelectedMonth(month)}
+            currentMonth={selectedMonthString}
+            onMonthClick={setSelectedMonthString}
             selectedBlock={selectedBlock}
           />
           <div id="block_area" css={daySectionStyle}>
-            {Array.from({ length: endDay.getDate() }, (_, index) => {
-              const day = index + 1;
-              const isEven = day % 2 === 0;
-
-              return (
-                <DaySection
-                  key={day}
-                  day={day}
-                  isEven={isEven}
-                  isToday={
-                    day === currentDate.getDate() &&
-                    currentYear === currentDate.getFullYear() &&
-                    selectedMonth === `${currentDate.getMonth() + 1}월`
-                  }
-                />
-              );
-            })}
+            <DaySection endDay={endDay} />
 
             {timeBlocks.map((block: Block) => {
               const { startDate, endDate } = block;
               const { startDate: blockStartDate, endDate: blockEndDate } = createTimeBlock({
                 startDate: new Date(startDate),
                 endDate: new Date(endDate),
                 currentYear,
-                selectedMonth: selectedMonthNumber,
+                selectedMonth: selectedMonth,
               });
 
               return (
@@ -142,7 +132,7 @@ const ArchivingPage = () => {
             variant="action"
             css={buttonStyle(selectedBlock)}
             onClick={() => openModal(<BlockModal onNext={handleNext} />)}>
-            <AddIc width={24} height={24} />
+            <Add width={24} height={24} />
             블록 생성
           </Button>
         </Flex>

diff --git a/src/page/archiving/index/component/DaySection/DaySection.tsx b/src/page/archiving/index/component/DaySection/DaySection.tsx
@@ -4,15 +4,16 @@ import {
   dayStyle,
   selectedDayStyle,
 } from '@/page/archiving/index/component/DaySection/DaySection.style';
+import { useDate } from '@/page/archiving/index/hook/common/useDate';
+
+import { memo } from 'react';
 
 import Circle from '@/common/asset/svg/circle.svg?react';
 import Flex from '@/common/component/Flex/Flex';
 import { theme } from '@/common/style/theme/theme';
 
 interface DaySectionProps {
-  day: number;
-  isEven: boolean;
-  isToday: boolean;
+  endDay: Date;
 }
 const DottedDayLine = () => {
   return (
@@ -35,19 +36,33 @@ const DottedDayLine = () => {
   );
 };
 
-const DaySection = ({ day, isEven, isToday }: DaySectionProps) => {
+const DaySection = memo(({ endDay }: DaySectionProps) => {
+  const { currentDate, currentYear, selectedMonthString } = useDate();
+
   return (
-    <Flex css={dayStyle(isEven, isToday)}>
-      <Flex css={dayHeaderStyle(isToday)}>{day}</Flex>
-      <Flex css={bodyStyle} />
-      {isToday && (
-        <>
-          <Circle width={8} height={8} css={selectedDayStyle} />
-          <DottedDayLine />
-        </>
-      )}
-    </Flex>
+    <>
+      {Array.from({ length: endDay.getDate() }, (_, day) => {
+        const isEven = (day + 1) % 2 === 0;
+        const isToday =
+          day + 1 === currentDate.getDate() &&
+          currentYear === currentDate.getFullYear() &&
+          selectedMonthString === `${currentDate.getMonth() + 1}월`;
+
+        return (
+          <Flex css={dayStyle(isEven, isToday)}>
+            <Flex css={dayHeaderStyle(isToday)}>{day + 1}</Flex>
+            <Flex css={bodyStyle} />
+            {isToday && (
+              <>
+                <Circle width={8} height={8} css={selectedDayStyle} />
+                <DottedDayLine />
+              </>
+            )}
+          </Flex>
+        );
+      })}
+    </>
   );
-};
+});
 
 export default DaySection;
diff --git a/src/page/archiving/index/component/TimeBlock/TimeBlock.style.ts b/src/page/archiving/index/component/TimeBlock/TimeBlock.style.ts
@@ -9,7 +9,7 @@ export const blockStyle = (width: number, startPosition: number, floor: number,
 
     zIndex: theme.zIndex.overlayBottom,
 
-    top: `${floor * 6 - 2.4}rem`,
+    top: `${floor * 6 - 1.6}rem`,
     left: `${startPosition + 0.2}rem`,
 
     width: `${width - 0.4}rem`,
@@ -28,11 +28,9 @@ export const blockStyle = (width: number, startPosition: number, floor: number,
     cursor: 'pointer',
   });
 
-export const spanStyle = {
+export const blockNameStyle = {
   margin: 'auto 0.7rem',
 
-  lineHeight: '120%',
-
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',

diff --git a/src/page/archiving/index/component/TimeBlock/TimeBlock.tsx b/src/page/archiving/index/component/TimeBlock/TimeBlock.tsx
@@ -1,4 +1,4 @@
-import { blockStyle, spanStyle } from '@/page/archiving/index/component/TimeBlock/TimeBlock.style';
+import { blockNameStyle, blockStyle } from '@/page/archiving/index/component/TimeBlock/TimeBlock.style';
 import { BLOCK_TYPE } from '@/page/archiving/index/constant/blockIcon';
 
 import React, { HTMLAttributes, ReactNode } from 'react';
@@ -11,7 +11,7 @@ interface TimeBlockProps extends HTMLAttributes<HTMLDivElement> {
   floor: number;
   blockType: string;
   isSelected?: boolean;
-  onBlockClick: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onBlockClick: (e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
 }
 
 const TimeBlock = ({
@@ -30,9 +30,20 @@ const TimeBlock = ({
 
   return (
     /* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */
-    <div css={blockStyle(blockWidth, startPosition, floor, color, isSelected)} onClick={onBlockClick} {...props}>
+    <div
+      role="tab"
+      tabIndex={0}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          onBlockClick(e);
+        }
+      }}
+      css={blockStyle(blockWidth, startPosition, floor, color, isSelected)}
+      onClick={onBlockClick}
+      {...props}>
       {BLOCK_TYPE.find((icon) => icon.name === blockType)?.icon}
-      <p css={spanStyle}>{children}</p>
+      <span css={blockNameStyle}>{children}</span>
     </div>
   );
 };

diff --git a/src/page/archiving/index/component/YearHeader/YearHeader.tsx b/src/page/archiving/index/component/YearHeader/YearHeader.tsx
@@ -27,7 +27,7 @@ const YearHeader = ({ handlePrevYear, handleNextYear, currentYear }: YearHeaderP
           onClick={() => handlePrevYear(currentYear)}
           css={{ cursor: 'pointer' }}
         />
-        <Text tag="body1" css={{ marginTop: '0.4rem', lineHeight: '' }}>
+        <Text tag="body1" css={{ marginTop: '0.4rem' }}>
           {currentYear}
         </Text>
         <NextYearArrow width={16} height={16} onClick={() => handleNextYear(currentYear)} css={{ cursor: 'pointer' }} />

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

diff --git a/src/story/page/archiving/DaySection.stories.tsx b/src/story/page/archiving/DaySection.stories.tsx
@@ -8,22 +8,12 @@ const meta = {
     layout: 'centered',
   },
   args: {
-    day: 1,
+    endDay: new Date(),
   },
   argTypes: {
-    day: {
+    endDay: {
       control: {
-        type: 'number',
-      },
-    },
-    isEven: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    isToday: {
-      control: {
-        type: 'boolean',
+        type: 'date',
       },
     },
   },
@@ -34,8 +24,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    day: 1,
-    isEven: false,
-    isToday: false,
+    endDay: new Date(2024, 0, 2),
   },
 };