[Feat] Dashboard Page 퍼블리싱 (#310)

* #244 init:초기세팅

* feat: list item의 tag 컴포넌트

* feat: tag storybook 생성

* feat: listItem 폴더 추가

* feat: ListItem 대충 틀 잡기

* feat: tag line 로직 구현

* feat: date 부분 구현

* feat: ListItem 전체 스타일링

* feat: ListItem storybook update

* feat: fileGrid small size 적용

* feat: folderGrid small size 적용

* chore: root 설정

* feat: fileGrid width 조wjd

* refactor: ContentBox minHeight 제거

* feat: content box로 구조잡기

* feat: contentBox variant handover 추가 및 fileGrid minWidht설정

* feat: fileView publishing

* style: 잔잔바리 수정

* feat:인수인계노트 content 추가

* style: contentBox 조정

* style: handover scroll 조정

* chore: Dashboard naming 수정

* feat: timeline section 구현

* style: 인수인계노트 부분 height 안 맞는 문제 css 선택자로 해결

* feat: ListItem의 tag logic 마지막 tag 확인안하는 이슈 해결

* feat: timeline 부분 헤더 버튼 덮어쓰기

* fix: 쓸데없는 임포트 제거

* refactor: fileGrid variant 생성

* refactor: key 설정(+타입), 로직 분리

* fix: build error 해결

* refactor/fix: tags 너비 초과 로직 구현

* refactor: ArchivingPage 제거

* fix: tag 너비 초과 로직에서 너비 이슈 수정

* feat: timeline 제작 및 드로어 오픈 설정

* fix: build error 수정

* refactor: 각 section 컴포넌트로 분리

* fix: build error 잡기!

---------

Co-authored-by: Jeongbowoon <happyanne200212@gmail/com>

package.json

@@ -22,6 +22,7 @@
     "axios": "^1.7.2",
     "framer-motion": "^11.11.11",
     "mime": "^4.0.4",
+    "framer-motion": "^11.11.11",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.1",

src/common/router/Router.tsx

@@ -19,6 +19,8 @@ import {
   TermPage,
 } from '@/common/router/lazy';
 
+import DashboardPage from '@/page/dashboard/DashboardPage';
+
 import { PATH } from '@/shared/constant/path';
 
 const Public = () => {
@@ -114,7 +116,7 @@ const router = createBrowserRouter([
         path: PATH.DASHBOARD,
         element: (
           <Suspense>
-            <h1>대쉬보드 페이지입니다.</h1>
+            <DashboardPage />
           </Suspense>
         ),
       },

src/page/archiving/index/ArchivingPage.tsx

@@ -1,4 +1,5 @@
-import { Suspense } from 'react';
+import { Suspense, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
 
 import Button from '@/common/component/Button/Button';
 import Flex from '@/common/component/Flex/Flex';
@@ -8,8 +9,10 @@ import DateProvider from '@/page/archiving/index/DateProvider';
 import TimeLine from '@/page/archiving/index/component/TimeLine';
 import TimeLineHeader from '@/page/archiving/index/component/TimeLine/TimeLineHeader/TimeLineHeader';
 import { useInteractTimeline } from '@/page/archiving/index/hook/common/useInteractTimeline';
+import { Block } from '@/page/archiving/index/type/blockType';
 
 import ContentBox from '@/shared/component/ContentBox/ContentBox';
+import { useDrawerAction } from '@/shared/store/drawer';
 import { useOpenModal } from '@/shared/store/modal';
 
 const ArchivingPage = () => {
@@ -18,6 +21,24 @@ const ArchivingPage = () => {
 
   const openModal = useOpenModal();
 
+  const location = useLocation();
+  const selectedBlockFromDashboard: Block = location.state?.selectedBlock;
+  const finalSelectedBlock = selectedBlockFromDashboard || selectedBlock;
+
+  const { openDrawer } = useDrawerAction();
+
+  useEffect(() => {
+    if (selectedBlockFromDashboard) {
+      /** TODO: 추후 block id에 따른 API 응답으로 데이터 넣기 */
+      openDrawer({
+        title: selectedBlockFromDashboard.name,
+        startDate: '2024-09-13',
+        endDate: '2024-09-24',
+        files: [],
+      });
+    }
+  }, [openDrawer, selectedBlockFromDashboard]);
+
   const handleOpenBlockModal = () => {
     openModal('create-block');
   };
@@ -38,7 +59,7 @@ const ArchivingPage = () => {
             <Flex css={contentStyle}>
               <Suspense>
                 {/** fallback UI 디자인 나올 시에 TimeLine 크기만큼 채워서 Layout 안움직이도록 */}
-                <TimeLine selectedBlock={selectedBlock} onBlockClick={handleBlockClick} />
+                <TimeLine selectedBlock={finalSelectedBlock} onBlockClick={handleBlockClick} />
               </Suspense>
             </Flex>
           </section>

src/page/dashboard/DashboardPage.style.ts

@@ -0,0 +1,24 @@
+import { css } from '@emotion/react';
+
+export const contentBoxStyle = css({
+  '& > header': { height: '6.1rem' },
+  '& > div': { marginTop: '0' },
+});
+
+export const dashboradScrollStyle = css({
+  '::-webkit-scrollbar': {
+    width: '0.6rem',
+    height: '0.6rem',
+  },
+});
+
+export const handoverBoxStyle = css({
+  width: '30%',
+  height: '64rem',
+
+  paddingRight: '1rem',
+
+  '&>div:last-child': {
+    height: '85%',
+  },
+});

src/page/dashboard/DashboardPage.tsx

@@ -0,0 +1,64 @@
+import { useNavigate } from 'react-router-dom';
+
+import Button from '@/common/component/Button/Button';
+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 ContentBox from '@/shared/component/ContentBox/ContentBox';
+import { PATH } from '@/shared/constant/path';
+
+const DashboardPage = () => {
+  const navigate = useNavigate();
+
+  const handleNav = (path: string) => {
+    navigate(path);
+  };
+
+  return (
+    <Flex styles={{ gap: '2.4rem' }}>
+      <Flex styles={{ direction: 'column', gap: '2.4rem', width: '65%' }}>
+        <ContentBox
+          variant={'file'}
+          title={'파일'}
+          headerOption={
+            <Button variant="outline" onClick={() => handleNav(PATH.DRIVE)}>
+              전체보기
+            </Button>
+          }
+          css={[{ height: '21.6rem' }, contentBoxStyle]}>
+          <FileSection />
+        </ContentBox>
+
+        <ContentBox
+          variant={'timeline'}
+          title={'타임라인'}
+          headerOption={
+            <Button variant="outline" onClick={() => handleNav(PATH.ARCHIVING)}>
+              전체보기
+            </Button>
+          }
+          css={[{ height: '40rem' }, contentBoxStyle]}>
+          <TimelineSection />
+        </ContentBox>
+      </Flex>
+
+      <ContentBox
+        variant={'handover'}
+        title={'인수인계 노트'}
+        headerOption={
+          <Button variant="outline" onClick={() => handleNav(PATH.HANDOVER)}>
+            전체보기
+          </Button>
+        }
+        css={[handoverBoxStyle, contentBoxStyle]}>
+        <HandoverSection />
+      </ContentBox>
+    </Flex>
+  );
+};
+
+export default DashboardPage;

src/page/dashboard/component/File/FileSection.tsx

@@ -0,0 +1,22 @@
+import Flex from '@/common/component/Flex/Flex';
+import { scrollStyle } from '@/common/style/scroll';
+
+import { dashboradScrollStyle } from '@/page/dashboard/DashboardPage.style';
+
+import FileGrid from '@/shared/component/FileGrid/FileGrid';
+
+import { FileData } from '@/mock/data/drive';
+
+const FileSection = () => {
+  return (
+    <Flex css={[{ gap: '1.4rem', padding: '0 0 0.7rem', overflowX: 'scroll' }, scrollStyle, dashboradScrollStyle]}>
+      {FileData.map((file) => {
+        return (
+          <FileGrid key={file.fileId} variant="secondary" title={file.title} type={file.type} volume={file.volume} />
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default FileSection;

src/page/dashboard/component/Handover/HandoverSection.style.ts

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+
+import { scrollStyle } from '@/common/style/scroll';
+
+import { dashboradScrollStyle } from '@/page/dashboard/DashboardPage.style';
+
+export const listItemStyle = css(
+  {
+    flexDirection: 'column',
+    gap: '0.8rem',
+    padding: '0 0.4rem',
+    height: '100%',
+
+    overflowY: 'scroll',
+  },
+  scrollStyle,
+  dashboradScrollStyle
+);

src/page/dashboard/component/Handover/HandoverSection.tsx

@@ -0,0 +1,19 @@
+import Flex from '@/common/component/Flex/Flex';
+
+import { listItemStyle } from '@/page/dashboard/component/Handover/HandoverSection.style';
+import ListItem from '@/page/dashboard/component/Handover/ListItem/ListItem';
+import { Notes } from '@/page/dashboard/constant/notes';
+
+const HandoverSection = () => {
+  return (
+    <Flex css={listItemStyle}>
+      {Notes.map((note) => {
+        return (
+          <ListItem key={note.noteId} title={note.title} content={note.content} date={note.date} tags={note.tags} />
+        );
+      })}
+    </Flex>
+  );
+};
+
+export default HandoverSection;

src/page/dashboard/component/Handover/ListItem/ListItem.style.ts

@@ -0,0 +1,53 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/common/style/theme/theme';
+
+export const containerStyle = css({
+  flexDirection: 'column',
+  alignItems: 'center',
+
+  width: '100%',
+  padding: '1.6rem',
+
+  backgroundColor: theme.colors.gray_100,
+  borderRadius: '8px',
+
+  ':hover': {
+    backgroundColor: theme.colors.gray_200,
+
+    transition: 'all ease 0.5s',
+  },
+});
+
+export const titleStyle = css({
+  width: '100%',
+  paddingBottom: '0.6rem',
+
+  color: theme.colors.black,
+});
+
+export const contentStyle = css({
+  width: '100%',
+  paddingBottom: '1.6rem',
+
+  color: theme.colors.gray_800,
+
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});
+
+export const detailContainerStyle = css({
+  justifyContent: 'space-between',
+  alignItems: 'center',
+
+  width: '100%',
+
+  overflow: 'hidden',
+});
+
+export const detailStyle = css({
+  alignItems: 'center',
+
+  gap: '0.4rem',
+});

src/page/dashboard/component/Handover/ListItem/ListItem.tsx

@@ -0,0 +1,72 @@
+import { HTMLAttributes, useRef } from 'react';
+
+import Calender from '@/common/asset/svg/ic_calendar_ver2.svg?react';
+import Flex from '@/common/component/Flex/Flex';
+import Tag from '@/common/component/Tag/Tag';
+import Text from '@/common/component/Text/Text';
+import { theme } from '@/common/style/theme/theme';
+
+import {
+  containerStyle,
+  contentStyle,
+  detailContainerStyle,
+  detailStyle,
+  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;
+  content: string;
+  date: Date;
+  tags?: ListTag[];
+}
+
+const ListItem = ({ title, content, date, tags = [], ...props }: ListItemProps) => {
+  const tagContanierRef = useRef<HTMLDivElement>(null);
+  const visibleTags = getVisibleTags(tags, 210, 4);
+
+  return (
+    <Flex tag="li" css={containerStyle} {...props}>
+      <Text tag="body6" css={titleStyle}>
+        {title}
+      </Text>
+      <Text tag="body8" css={contentStyle}>
+        {content}
+      </Text>
+
+      <Flex css={detailContainerStyle}>
+        <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.content}
+              </Tag>
+            );
+          })}
+          {visibleTags.length < tags.length && (
+            <Text tag="body8" css={{ color: theme.colors.gray_500 }}>
+              +{tags.length - visibleTags.length}
+            </Text>
+          )}
+        </div>
+        <Flex css={detailStyle}>
+          <Calender width={16} height={16} />
+          <Text tag="body8" css={{ color: theme.colors.gray_800 }}>
+            {`${date.getFullYear()}.${date.getMonth() + 1}.${date.getDate()}`}
+          </Text>
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ListItem;

src/page/dashboard/component/Timeline/TimelineSection.style.ts

@@ -0,0 +1,18 @@
+import { css } from '@emotion/react';
+
+import { scrollStyle } from '@/common/style/scroll';
+
+import { dashboradScrollStyle } from '@/page/dashboard/DashboardPage.style';
+
+export const timelineContentStyle = css(
+  {
+    minHeight: '23.6rem',
+    height: '23.6rem',
+
+    padding: '0.6rem 0',
+
+    borderRadius: '8px',
+  },
+  scrollStyle,
+  dashboradScrollStyle
+);