[Feat] 대시보드 페이지 timeline date issue 및 css 수정 (#326)

* fix: timeline month 넘어가지 않는 이슈 컴포넌트 분리로 해결 * style: 인수인계sec cursor 이슈 및 태그 글자수 이슈 수정 * refactor: timeline naming 수정 --------- Co-authored-by: Jeongbowoon <happyanne200212@gmail/com>
Team-Tiki · Nov 19, 2024 · dc57735 · dc57735
1 parent 2fcad8f
commit dc57735
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 49 deletions.
diff --git a/src/page/dashboard/DashboardPage.tsx b/src/page/dashboard/DashboardPage.tsx
@@ -6,7 +6,7 @@ import Flex from '@/common/component/Flex/Flex';
 import { contentBoxStyle, handoverBoxStyle } from '@/page/dashboard/DashboardPage.style';
 import FileSection from '@/page/dashboard/component/File/FileSection';
 import HandoverSection from '@/page/dashboard/component/Handover/HandoverSection';
-import TimelineSection from '@/page/dashboard/component/Timeline/TimelineSection';
+import TimelineSection from '@/page/dashboard/component/Timeline';
 
 import ContentBox from '@/shared/component/ContentBox/ContentBox';
 import { PATH } from '@/shared/constant/path';

diff --git a/src/page/dashboard/component/Handover/ListItem/ListItem.style.ts b/src/page/dashboard/component/Handover/ListItem/ListItem.style.ts
@@ -2,6 +2,8 @@ import { css } from '@emotion/react';
 
 import { theme } from '@/common/style/theme/theme';
 
+import { alignColor } from '@/page/dashboard/util/color';
+
 export const containerStyle = css({
   flexDirection: 'column',
   alignItems: 'center',
@@ -12,6 +14,8 @@ export const containerStyle = css({
   backgroundColor: theme.colors.gray_100,
   borderRadius: '8px',
 
+  cursor: 'pointer',
+
   ':hover': {
     backgroundColor: theme.colors.gray_200,
 
@@ -51,3 +55,15 @@ export const detailStyle = css({
 
   gap: '0.4rem',
 });
+
+export const tagStyle = (color: string) =>
+  css({
+    maxWidth: '18rem',
+
+    color: alignColor(color),
+
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+
+    textOverflow: 'ellipsis',
+  });
diff --git a/src/page/dashboard/component/Handover/ListItem/ListItem.tsx b/src/page/dashboard/component/Handover/ListItem/ListItem.tsx
@@ -11,11 +11,11 @@ import {
   contentStyle,
   detailContainerStyle,
   detailStyle,
+  tagStyle,
   titleStyle,
 } from '@/page/dashboard/component/Handover/ListItem/ListItem.style';
 import { ListTag } from '@/page/dashboard/type/listTag';
 import { getVisibleTags } from '@/page/dashboard/util/alignTags';
-import { alignColor } from '@/page/dashboard/util/color';
 
 export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
   title: string;
@@ -41,13 +41,7 @@ const ListItem = ({ title, content, date, tags = [], ...props }: ListItemProps)
         <div ref={tagContanierRef} css={[detailStyle, { display: 'flex', overflow: 'hidden' }]}>
           {visibleTags.map((tag) => {
             return (
-              <Tag
-                key={tag.tagId}
-                css={{
-                  color: alignColor(tag.bgColor),
-                  whiteSpace: 'nowrap',
-                }}
-                bgColor={tag.bgColor}>
+              <Tag key={tag.tagId} css={tagStyle(tag.bgColor)} bgColor={tag.bgColor}>
                 {tag.content}
               </Tag>
             );

diff --git a/...mponent/Timeline/TimelineSection.style.ts → ...onent/Timeline/Timeline/Timeline.style.ts b/...mponent/Timeline/TimelineSection.style.ts → ...onent/Timeline/Timeline/Timeline.style.ts
diff --git a/...rd/component/Timeline/TimelineSection.tsx → .../component/Timeline/Timeline/Timeline.tsx b/...rd/component/Timeline/TimelineSection.tsx → .../component/Timeline/Timeline/Timeline.tsx
@@ -1,32 +1,30 @@
 import { useNavigate } from 'react-router-dom';
 
-import DateProvider from '@/page/archiving/index/DateProvider';
+import { useDateContext } from '@/page/archiving/index/DateProvider';
 import Day from '@/page/archiving/index/component/TimeLine/Day/Day';
 import { dayBodyStyle } from '@/page/archiving/index/component/TimeLine/Day/Day.style';
 import TimeBlock from '@/page/archiving/index/component/TimeLine/TimeBlock/TimeBlock';
-import TimeLineHeader from '@/page/archiving/index/component/TimeLine/TimeLineHeader/TimeLineHeader';
 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 { alignBlocks, createTimeBlock } from '@/page/archiving/index/util/block';
-import { timelineContentStyle } from '@/page/dashboard/component/Timeline/TimelineSection.style';
+import { timelineContentStyle } from '@/page/dashboard/component/Timeline/Timeline/Timeline.style';
 
 import { PATH } from '@/shared/constant/path';
 
-const TimelineSection = () => {
+const Timeline = () => {
   const navigate = useNavigate();
 
   const teamId = localStorage.getItem('teamId');
-  const { currentYear, currentMonth, endDay } = useDate(teamId!);
+
+  const { currentYear, currentMonth, endDay } = useDateContext();
 
   const { data } = useGetTimeBlockQuery(+teamId!, 'executive', currentYear, currentMonth);
 
   const timeBlocks: Block[] = data.timeBlocks;
   const blockFloors = alignBlocks(timeBlocks, endDay, currentMonth, currentYear);
 
   return (
-    <DateProvider teamId={teamId!}>
-      <TimeLineHeader />
+    <>
       <Day />
       <div css={[dayBodyStyle(endDay.getDate()), timelineContentStyle]}>
         {timeBlocks.map((block) => {
@@ -54,8 +52,8 @@ const TimelineSection = () => {
           );
         })}
       </div>
-    </DateProvider>
+    </>
   );
 };
 
-export default TimelineSection;
+export default Timeline;
diff --git a/src/page/dashboard/component/Timeline/index.tsx b/src/page/dashboard/component/Timeline/index.tsx
@@ -0,0 +1,20 @@
+import { Suspense } from 'react';
+
+import DateProvider from '@/page/archiving/index/DateProvider';
+import TimeLineHeader from '@/page/archiving/index/component/TimeLine/TimeLineHeader/TimeLineHeader';
+import Timeline from '@/page/dashboard/component/Timeline/Timeline/Timeline';
+
+const TimelineSection = () => {
+  const teamId = localStorage.getItem('teamId');
+
+  return (
+    <DateProvider teamId={teamId!}>
+      <TimeLineHeader />
+      <Suspense>
+        <Timeline />
+      </Suspense>
+    </DateProvider>
+  );
+};
+
+export default TimelineSection;
diff --git a/src/page/dashboard/constant/notes.ts b/src/page/dashboard/constant/notes.ts
@@ -7,10 +7,10 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: 'OT준비', bgColor: '#E2E8F8' },
-      { tagId: 2, content: '먀옹', bgColor: '#F8E2CB' },
-      { tagId: 3, content: '매옹', bgColor: '#F8E2CB' },
-      { tagId: 4, content: '난나난', bgColor: '#F8E2CB' },
+      { tagId: 0, content: 'OT준비', bgColor: '#E2E8F8' },
+      { tagId: 1, content: '먀옹', bgColor: '#F8E2CB' },
+      { tagId: 2, content: '매옹', bgColor: '#F8E2CB' },
+      { tagId: 3, content: '난나난', bgColor: '#F8E2CB' },
     ],
   },
   {
@@ -19,10 +19,10 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: '고양이', bgColor: '#F8E2CB' },
-      { tagId: 2, content: 'D.C.', bgColor: '#F8E1F5' },
-      { tagId: 3, content: 'DormCat', bgColor: '#C4F2E5' },
-      { tagId: 4, content: 'I love', bgColor: '#F8E2CB' },
+      { tagId: 0, content: '고양이고양이고양이고양이고양이고양이고양이고양이', bgColor: '#F8E2CB' },
+      { tagId: 1, content: 'D.C.', bgColor: '#F8E1F5' },
+      { tagId: 2, content: 'DormCat', bgColor: '#C4F2E5' },
+      { tagId: 3, content: 'I love', bgColor: '#F8E2CB' },
     ],
   },
   {
@@ -31,12 +31,12 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: '귀여운', bgColor: '#F8E1F5' },
-      { tagId: 2, content: '봄 MT', bgColor: '#F8E1F5' },
-      { tagId: 3, content: '가을 MT', bgColor: '#F8E1F5' },
-      { tagId: 4, content: '학과 엠티', bgColor: '#F8E1F5' },
-      { tagId: 5, content: '집부 엠티', bgColor: '#F8E1F5' },
-      { tagId: 6, content: '공대 엠티', bgColor: '#F8E1F5' },
+      { tagId: 0, content: '귀여운', bgColor: '#F8E1F5' },
+      { tagId: 1, content: '봄 MT', bgColor: '#F8E1F5' },
+      { tagId: 2, content: '가을 MT', bgColor: '#F8E1F5' },
+      { tagId: 3, content: '학과 엠티', bgColor: '#F8E1F5' },
+      { tagId: 4, content: '집부 엠티', bgColor: '#F8E1F5' },
+      { tagId: 5, content: '공대 엠티', bgColor: '#F8E1F5' },
     ],
   },
   {
@@ -45,31 +45,31 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: '낄낄', bgColor: '#DCD8FA' },
-      { tagId: 2, content: '엠티 기간', bgColor: '#F8E2CB' },
-      { tagId: 3, content: '엠티 준비 위원회 회의', bgColor: '#DCD8FA' },
-      { tagId: 4, content: '엠엠', bgColor: '#F8E2CB' },
-      { tagId: 5, content: 'study', bgColor: '#DCD8FA' },
-      { tagId: 6, content: 'event', bgColor: '#F8E2CB' },
-      { tagId: 7, content: 'study', bgColor: '#DCD8FA' },
-      { tagId: 8, content: 'event', bgColor: '#F8E2CB' },
+      { tagId: 0, content: '낄낄', bgColor: '#DCD8FA' },
+      { tagId: 1, content: '엠티 기간', bgColor: '#F8E2CB' },
+      { tagId: 2, content: '엠티 준비 위원회 회의', bgColor: '#DCD8FA' },
+      { tagId: 3, content: '엠엠', bgColor: '#F8E2CB' },
+      { tagId: 4, content: 'study', bgColor: '#DCD8FA' },
+      { tagId: 5, content: 'event', bgColor: '#F8E2CB' },
+      { tagId: 6, content: 'study', bgColor: '#DCD8FA' },
+      { tagId: 7, content: 'event', bgColor: '#F8E2CB' },
     ],
   },
   {
     noteId: 5,
     title: '3차 정기 회의',
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
-    tags: [{ tagId: 1, content: '시험기간', bgColor: '#F8E1F5' }],
+    tags: [{ tagId: 0, content: '시험기간', bgColor: '#F8E1F5' }],
   },
   {
     noteId: 6,
     title: '3차 정기 회의',
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: 'study', bgColor: '#F8E1F5' },
-      { tagId: 2, content: 'notice', bgColor: '#C4F2E5' },
+      { tagId: 0, content: 'study', bgColor: '#F8E1F5' },
+      { tagId: 1, content: 'notice', bgColor: '#C4F2E5' },
     ],
   },
   {
@@ -78,10 +78,10 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: 'recruiting', bgColor: '#E2E8F8' },
+      { tagId: 0, content: 'recruiting', bgColor: '#E2E8F8' },
+      { tagId: 1, content: 'event', bgColor: '#F8E2CB' },
       { tagId: 2, content: 'event', bgColor: '#F8E2CB' },
       { tagId: 3, content: 'event', bgColor: '#F8E2CB' },
-      { tagId: 4, content: 'event', bgColor: '#F8E2CB' },
     ],
   },
   {
@@ -90,8 +90,8 @@ export const Notes: Note[] = [
     content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.',
     date: new Date(),
     tags: [
-      { tagId: 1, content: 'study', bgColor: '#F8E1F5' },
-      { tagId: 2, content: 'notice', bgColor: '#C4F2E5' },
+      { tagId: 0, content: 'study', bgColor: '#F8E1F5' },
+      { tagId: 1, content: 'notice', bgColor: '#C4F2E5' },
     ],
   },
 ];
diff --git a/src/page/dashboard/util/alignTags.ts b/src/page/dashboard/util/alignTags.ts
@@ -18,7 +18,12 @@ export const getVisibleTags = (tags: ListTag[], maxWidth: number, tagGap: number
     document.body.removeChild(tempElement);
 
     //현재 태그까지 추가 후 너비 초과 검사
-    if (totalWidth + tagWidth * 2 + tagGap > maxWidth) break;
+    if (totalWidth + tagWidth * 2 + tagGap > maxWidth) {
+      if (tag.tagId == 0) {
+        visibleTags.push(tag);
+      }
+      break;
+    }
     totalWidth += tagWidth * 2 + tagGap;
     visibleTags.push(tag);
   }