From 205983bb21ed9ebf7612d00717c1c1c9ebfe5841 Mon Sep 17 00:00:00 2001 From: Jeongbowoon Date: Tue, 12 Nov 2024 09:53:11 -0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20timeline=20month=20=EB=84=98?= =?UTF-8?q?=EC=96=B4=EA=B0=80=EC=A7=80=20=EC=95=8A=EB=8A=94=20=EC=9D=B4?= =?UTF-8?q?=EC=8A=88=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC=EB=A1=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/page/dashboard/DashboardPage.tsx | 2 +- .../TimelineinDash.style.ts} | 0 .../TimelineinDash.tsx} | 18 ++++++++--------- .../dashboard/component/Timeline/index.tsx | 20 +++++++++++++++++++ 4 files changed, 29 insertions(+), 11 deletions(-) rename src/page/dashboard/component/Timeline/{TimelineSection.style.ts => Timeline/TimelineinDash.style.ts} (100%) rename src/page/dashboard/component/Timeline/{TimelineSection.tsx => Timeline/TimelineinDash.tsx} (79%) create mode 100644 src/page/dashboard/component/Timeline/index.tsx diff --git a/src/page/dashboard/DashboardPage.tsx b/src/page/dashboard/DashboardPage.tsx index 9eebae0f2..c8c04182a 100644 --- 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/Timeline/TimelineSection.style.ts b/src/page/dashboard/component/Timeline/Timeline/TimelineinDash.style.ts similarity index 100% rename from src/page/dashboard/component/Timeline/TimelineSection.style.ts rename to src/page/dashboard/component/Timeline/Timeline/TimelineinDash.style.ts diff --git a/src/page/dashboard/component/Timeline/TimelineSection.tsx b/src/page/dashboard/component/Timeline/Timeline/TimelineinDash.tsx similarity index 79% rename from src/page/dashboard/component/Timeline/TimelineSection.tsx rename to src/page/dashboard/component/Timeline/Timeline/TimelineinDash.tsx index 985b85f31..9aefc30a1 100644 --- a/src/page/dashboard/component/Timeline/TimelineSection.tsx +++ b/src/page/dashboard/component/Timeline/Timeline/TimelineinDash.tsx @@ -1,23 +1,22 @@ 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/TimelineinDash.style'; import { PATH } from '@/shared/constant/path'; -const TimelineSection = () => { +const TimelineinDash = () => { 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); @@ -25,8 +24,7 @@ const TimelineSection = () => { const blockFloors = alignBlocks(timeBlocks, endDay, currentMonth, currentYear); return ( - - + <>
{timeBlocks.map((block) => { @@ -54,8 +52,8 @@ const TimelineSection = () => { ); })}
- + ); }; -export default TimelineSection; +export default TimelineinDash; diff --git a/src/page/dashboard/component/Timeline/index.tsx b/src/page/dashboard/component/Timeline/index.tsx new file mode 100644 index 000000000..cf13f42d3 --- /dev/null +++ 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 TimelineinDash from '@/page/dashboard/component/Timeline/Timeline/TimelineinDash'; + +const TimelineSection = () => { + const teamId = localStorage.getItem('teamId'); + + return ( + + + + + + + ); +}; + +export default TimelineSection; From 030f620bc078ef01a1c42da5828ddd60a014388e Mon Sep 17 00:00:00 2001 From: Jeongbowoon Date: Tue, 12 Nov 2024 10:12:48 -0800 Subject: [PATCH 2/3] =?UTF-8?q?style:=20=EC=9D=B8=EC=88=98=EC=9D=B8?= =?UTF-8?q?=EA=B3=84sec=20cursor=20=EC=9D=B4=EC=8A=88=20=EB=B0=8F=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EA=B8=80=EC=9E=90=EC=88=98=20=EC=9D=B4?= =?UTF-8?q?=EC=8A=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Handover/ListItem/ListItem.style.ts | 16 +++++ .../component/Handover/ListItem/ListItem.tsx | 10 +--- src/page/dashboard/constant/notes.ts | 58 +++++++++---------- src/page/dashboard/util/alignTags.ts | 7 ++- 4 files changed, 53 insertions(+), 38 deletions(-) diff --git a/src/page/dashboard/component/Handover/ListItem/ListItem.style.ts b/src/page/dashboard/component/Handover/ListItem/ListItem.style.ts index 7c1cb240a..bc79a2018 100644 --- 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 index 4b8d0b160..b65d7b22c 100644 --- 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 { title: string; @@ -41,13 +41,7 @@ const ListItem = ({ title, content, date, tags = [], ...props }: ListItemProps)
{visibleTags.map((tag) => { return ( - + {tag.content} ); diff --git a/src/page/dashboard/constant/notes.ts b/src/page/dashboard/constant/notes.ts index 84062a10b..d0667552a 100644 --- 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,14 +45,14 @@ 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' }, ], }, { @@ -60,7 +60,7 @@ export const Notes: Note[] = [ title: '3차 정기 회의', content: '티키의 3번째 정기 회의록입니다.티키의 3번째 정기 회의록입니다.', date: new Date(), - tags: [{ tagId: 1, content: '시험기간', bgColor: '#F8E1F5' }], + tags: [{ tagId: 0, content: '시험기간', bgColor: '#F8E1F5' }], }, { noteId: 6, @@ -68,8 +68,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' }, ], }, { @@ -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 index 229a411d3..8def1944d 100644 --- 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); } From dc2c0ed4e1f5bb071c87da5765c48305e3cbdaa2 Mon Sep 17 00:00:00 2001 From: Jeongbowoon Date: Sun, 17 Nov 2024 23:06:55 -0800 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20timeline=20naming=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Timeline/{TimelineinDash.style.ts => Timeline.style.ts} | 0 .../Timeline/Timeline/{TimelineinDash.tsx => Timeline.tsx} | 6 +++--- src/page/dashboard/component/Timeline/index.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) rename src/page/dashboard/component/Timeline/Timeline/{TimelineinDash.style.ts => Timeline.style.ts} (100%) rename src/page/dashboard/component/Timeline/Timeline/{TimelineinDash.tsx => Timeline.tsx} (95%) diff --git a/src/page/dashboard/component/Timeline/Timeline/TimelineinDash.style.ts b/src/page/dashboard/component/Timeline/Timeline/Timeline.style.ts similarity index 100% rename from src/page/dashboard/component/Timeline/Timeline/TimelineinDash.style.ts rename to src/page/dashboard/component/Timeline/Timeline/Timeline.style.ts diff --git a/src/page/dashboard/component/Timeline/Timeline/TimelineinDash.tsx b/src/page/dashboard/component/Timeline/Timeline/Timeline.tsx similarity index 95% rename from src/page/dashboard/component/Timeline/Timeline/TimelineinDash.tsx rename to src/page/dashboard/component/Timeline/Timeline/Timeline.tsx index 9aefc30a1..bfcfb32fd 100644 --- a/src/page/dashboard/component/Timeline/Timeline/TimelineinDash.tsx +++ b/src/page/dashboard/component/Timeline/Timeline/Timeline.tsx @@ -7,11 +7,11 @@ import TimeBlock from '@/page/archiving/index/component/TimeLine/TimeBlock/TimeB import { useGetTimeBlockQuery } from '@/page/archiving/index/hook/api/useGetTimeBlockQuery'; import { Block } from '@/page/archiving/index/type/blockType'; import { alignBlocks, createTimeBlock } from '@/page/archiving/index/util/block'; -import { timelineContentStyle } from '@/page/dashboard/component/Timeline/Timeline/TimelineinDash.style'; +import { timelineContentStyle } from '@/page/dashboard/component/Timeline/Timeline/Timeline.style'; import { PATH } from '@/shared/constant/path'; -const TimelineinDash = () => { +const Timeline = () => { const navigate = useNavigate(); const teamId = localStorage.getItem('teamId'); @@ -56,4 +56,4 @@ const TimelineinDash = () => { ); }; -export default TimelineinDash; +export default Timeline; diff --git a/src/page/dashboard/component/Timeline/index.tsx b/src/page/dashboard/component/Timeline/index.tsx index cf13f42d3..31dd7a913 100644 --- a/src/page/dashboard/component/Timeline/index.tsx +++ b/src/page/dashboard/component/Timeline/index.tsx @@ -2,7 +2,7 @@ import { Suspense } from 'react'; import DateProvider from '@/page/archiving/index/DateProvider'; import TimeLineHeader from '@/page/archiving/index/component/TimeLine/TimeLineHeader/TimeLineHeader'; -import TimelineinDash from '@/page/dashboard/component/Timeline/Timeline/TimelineinDash'; +import Timeline from '@/page/dashboard/component/Timeline/Timeline/Timeline'; const TimelineSection = () => { const teamId = localStorage.getItem('teamId'); @@ -11,7 +11,7 @@ const TimelineSection = () => { - + );