[Feat] Route Nav 컴포넌트 구현 및 레이아웃 반영

package.json

@@ -20,6 +20,7 @@
     "@tanstack/react-query": "^5.49.2",
     "@tanstack/react-query-devtools": "^5.49.2",
     "axios": "^1.7.2",
+    "framer-motion": "^11.11.9",
     "mime": "^4.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/App.tsx

@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
 import * as Sentry from '@sentry/react';
 
-import { Outlet, useLocation, useNavigate } from 'react-router-dom';
+import { Outlet, useNavigate } from 'react-router-dom';
 
 import { useQueryErrorResetBoundary } from '@tanstack/react-query';
 
@@ -21,11 +21,6 @@ const App = () => {
 
   const { reset } = useQueryErrorResetBoundary();
 
-  const { pathname } = useLocation();
-
-  /** 아카이빙 페이지 DocumentBar를 위한 라우트별 동적 패딩 */
-  const isArchivingPage = pathname === '/archiving';
-
   Sentry.init({
     dsn: import.meta.env.VITE_SENTRY_DSN,
     integrations: [Sentry.browserTracingIntegration()],
@@ -55,7 +50,7 @@ const App = () => {
       <Login>
         <ModalContainer />
         <SNB />
-        <main css={layoutStyle(isArchivingPage)}>
+        <main css={layoutStyle}>
           <Header />
           <Outlet />
         </main>
@@ -64,19 +59,18 @@ const App = () => {
   );
 };
 
-const layoutStyle = (flag: boolean) =>
-  css({
-    display: 'flex',
-    flexDirection: 'column',
+const layoutStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
 
-    height: '100%',
-    width: 'calc(100% - 7.6rem)',
+  height: '100%',
+  width: 'calc(100% - 7.6rem)',
 
-    padding: flag ? '0' : '2rem 3.4rem 4.8rem 3.2rem',
+  padding: '2rem 3.4rem 4.8rem 3.2rem',
 
-    marginLeft: '7.6rem',
+  marginLeft: '7.6rem',
 
-    overflow: 'hidden',
-  });
+  overflow: 'hidden',
+});
 
 export default App;

src/common/router/Router.tsx

@@ -141,6 +141,14 @@ const router = createBrowserRouter([
           </Suspense>
         ),
       },
+      {
+        path: PATH.HANDOVER,
+        element: (
+          <Suspense>
+            <h1>HandOver</h1>
+          </Suspense>
+        ),
+      },
     ],
   },
 ]);

src/page/archiving/index/ArchivingPage.tsx

@@ -1,5 +1,4 @@
 import { Suspense } from 'react';
-import { useLocation } from 'react-router-dom';
 
 import Button from '@/common/component/Button/Button';
 import Flex from '@/common/component/Flex/Flex';
@@ -16,19 +15,15 @@ import ContentBox from '@/shared/component/ContentBox/ContentBox';
 import { useOpenModal } from '@/shared/store/modal';
 
 const ArchivingPage = () => {
-  const location = useLocation();
-
   const sideBarRef = useOutsideClick(() => setSelectedBlock(undefined));
 
   const { selectedBlock, setSelectedBlock, handleBlockClick } = useInteractTimeline();
 
   const openModal = useOpenModal();
 
-  const teamId = new URLSearchParams(location.search).get('teamId');
-
-  if (!teamId) throw new Error('has no teamId');
+  const teamId = localStorage.getItem('teamId');
 
-  const { ref, currentYear, currentMonth, handlePrevMonth, handleNextMonth, handleToday, endDay } = useDate(teamId);
+  const { ref, currentYear, currentMonth, handlePrevMonth, handleNextMonth, handleToday, endDay } = useDate(teamId!);
 
   const handleOpenBlockModal = () => {
     openModal('create-block');
@@ -40,7 +35,7 @@ const ArchivingPage = () => {
         variant="timeline"
         title="타임라인"
         headerOption={
-          <Button variant="secondary" size="small" onClick={handleOpenBlockModal}>
+          <Button variant="secondary" onClick={handleOpenBlockModal}>
             타임블록 추가
           </Button>
         }

src/page/archiving/index/component/DocumentBar/DocumentBar.style.ts

@@ -4,7 +4,8 @@ import { theme } from '@/common/style/theme/theme';
 
 export const containerStyle = (blockSelected: string) =>
   css({
-    position: 'relative',
+    position: 'absolute',
+    right: 0,
 
     zIndex: theme.zIndex.overlayMiddle,
 

src/page/archiving/index/component/TimeLine/index.tsx

@@ -19,10 +19,9 @@ const TimeLine = (
   { selectedBlock, onBlockClick, currentYear, currentMonth, endDay }: TimeLineProps,
   ref: ForwardedRef<HTMLDivElement>
 ) => {
-  const teamId = new URLSearchParams(location.search).get('teamId');
-  if (!teamId) throw new Error('has no teamId');
+  const teamId = localStorage.getItem('teamId');
 
-  const { data } = useGetTimeBlockQuery(+teamId, 'executive', currentYear, currentMonth);
+  const { data } = useGetTimeBlockQuery(+teamId!, 'executive', currentYear, currentMonth);
 
   const timeBlocks: Block[] = data.timeBlocks;
   const blockFloors = alignBlocks(timeBlocks, endDay, currentMonth, currentYear);

src/shared/component/ContentBox/ContentBox.style.ts

@@ -6,10 +6,11 @@ export const sectionStyle = css({
   position: 'relative',
 
   width: '100%',
-  height: 'calc(100vh - 4.8rem - 6rem)',
 
-  padding: '1.6rem',
-  paddingTop: '0',
+  minHeight: 'calc(100vh - 11.6rem - 4.8rem - 2rem)',
+  height: 'calc(100vh - 11.6rem - 4.8rem - 2rem)',
+
+  padding: '0 1.6rem',
 
   border: `1px solid ${theme.colors.gray_300}`,
   borderRadius: '16px',
@@ -50,6 +51,8 @@ export const headerStyle = css({
   position: 'sticky',
   top: 0,
 
+  height: '7.2rem',
+
   zIndex: theme.zIndex.overlayBottom,
 
   padding: '1.6rem 0rem',
@@ -68,7 +71,7 @@ export const contentOptionStyle = css({
 
 export const contentStyle = css({
   width: '100%',
-  height: 'calc(100% - 12rem)',
+  height: '100%',
 
   marginTop: '0.8rem',
 

src/shared/component/Header/Header.style.ts

@@ -3,6 +3,10 @@ import { css } from '@emotion/react';
 import { theme } from '@/common/style/theme/theme';
 
 export const headerStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2rem',
+
   width: 'fit-content',
 
   paddingBottom: '2rem',

src/shared/component/Header/Header.tsx

@@ -1,23 +1,18 @@
-import { useLocation } from 'react-router-dom';
-
 import Heading from '@/common/component/Heading/Heading';
 
 import { headerStyle } from '@/shared/component/Header/Header.style';
+import RouteNav from '@/shared/component/RouteNav/RouteNav';
 
 const Header = () => {
   /** TODO: 추후 global State 혹은 localStorage에 저장 */
   const title = 'TIKI 워크스페이스';
 
-  const { pathname } = useLocation();
-
-  const hasNoSidebar = pathname !== '/archiving';
-
   return (
-    hasNoSidebar && (
-      <header css={headerStyle}>
-        <Heading tag="H1">{title}</Heading>
-      </header>
-    )
+    <header css={headerStyle}>
+      <Heading tag="H1">{title}</Heading>
+
+      <RouteNav />
+    </header>
   );
 };
 

src/shared/component/RouteNav/RouteNav.style.ts

@@ -0,0 +1,63 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/common/style/theme/theme';
+
+export const iconFillActiveStyle = (isActive: boolean) =>
+  css({
+    '& > path': {
+      fill: isActive ? theme.colors.gray_800 : theme.colors.gray_500,
+    },
+  });
+
+export const iconStrokeActiveStyle = (isActive: boolean) =>
+  css({
+    '& > path': {
+      stroke: isActive ? theme.colors.gray_800 : theme.colors.gray_500,
+    },
+  });
+
+export const navListStyle = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+
+  width: 'max-content',
+
+  padding: '0.4rem',
+
+  borderRadius: '8px',
+  backgroundColor: theme.colors.gray_100,
+});
+
+export const itemStyle = (isActive: boolean) =>
+  css({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.6rem',
+
+    position: 'relative',
+    padding: '0.6rem 0.8rem',
+
+    backgroundColor: 'transparent',
+
+    ...theme.text.body08,
+    color: isActive ? theme.colors.black : theme.colors.gray_500,
+
+    whiteSpace: 'nowrap',
+
+    zIndex: 2,
+  });
+
+export const indicatorStyle = css({
+  position: 'absolute',
+  top: -2,
+
+  width: '100%',
+  height: '3.2rem',
+
+  backgroundColor: theme.colors.white,
+
+  borderRadius: '4px',
+
+  zIndex: 1,
+});

src/shared/component/RouteNav/RouteNav.tsx

@@ -0,0 +1,54 @@
+import { motion } from 'framer-motion';
+
+import { Link, useLocation } from 'react-router-dom';
+
+import IcFolder from '@/common/asset/svg/ic_folder_copy.svg?react';
+import IcHandOver from '@/common/asset/svg/ic_handover_empty.svg?react';
+import IcTimeLine from '@/common/asset/svg/ic_nav_timeline.svg?react';
+
+import {
+  iconFillActiveStyle,
+  iconStrokeActiveStyle,
+  indicatorStyle,
+  itemStyle,
+  navListStyle,
+} from '@/shared/component/RouteNav/RouteNav.style';
+import { PATH } from '@/shared/constant/path';
+
+const RouteNav = () => {
+  const { pathname } = useLocation();
+
+  const isDrivePage = pathname === PATH.DRIVE;
+  const isArchivingPage = pathname === PATH.ARCHIVING;
+  const isHandoverPage = pathname === PATH.HANDOVER;
+
+  return (
+    <nav>
+      <ul css={navListStyle}>
+        <li css={{ position: 'relative' }}>
+          <Link css={itemStyle(isDrivePage)} to={PATH.DRIVE}>
+            <IcFolder css={iconFillActiveStyle(isDrivePage)} width={16} height={16} />
+            파일
+          </Link>
+          {isDrivePage && <motion.div layoutId="nav_indicator" css={indicatorStyle} />}
+        </li>
+        <li css={{ position: 'relative' }}>
+          <Link css={itemStyle(isArchivingPage)} to={PATH.ARCHIVING}>
+            <IcTimeLine css={iconStrokeActiveStyle(isArchivingPage)} width={16} height={16} />
+            타임라인
+          </Link>
+          {isArchivingPage && <motion.div layoutId="nav_indicator" css={indicatorStyle} />}
+        </li>
+        <li css={{ position: 'relative' }}>
+          <Link css={itemStyle(isHandoverPage)} to={PATH.HANDOVER}>
+            <IcHandOver css={iconFillActiveStyle(isHandoverPage)} width={16} height={16} />
+            인수인계 노트
+          </Link>
+          {isHandoverPage && <motion.div layoutId="nav_indicator" css={indicatorStyle} />}
+        </li>
+      </ul>
+    </nav>
+  );
+};
+
+export default RouteNav;