Merge pull request #22 from GU-99/feature/ui-project-management-kanban

UI: #21 프로젝트 레이아웃 작성

src/globals.css

@@ -9,6 +9,7 @@
     /* contents size */
     --height-header: 4rem;
     --height-contents: calc(100vh - var(--height-header));
+    --max-width-contents: 90rem;
 
     /* font-family */
     --font-family-roboto: 'Roboto', sans-serif;
@@ -55,6 +56,7 @@
     /* text color */
     --text-color-default: #2c2c2c;
     --text-color-emphasis: #5e5e5e;
+    --text-color-category: #b1b1b1;
     --text-color-error: #be0000;
     --text-color-blue: #0909e7;
 
@@ -68,6 +70,28 @@
     font-family: var(--font-family-roboto);
     font-size: var(--font-size-regular);
     font-weight: var(--font-weight-regular);
+    color: var(--text-color-default);
     font-style: normal;
   }
+
+  /* ========= Scrollbar Custom ========= */
+  ::-webkit-scrollbar {
+    width: 10px;
+  }
+  ::-webkit-scrollbar-track {
+    border: 1px solid var(--border-scroll);
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-scroll);
+  }
+  ::-webkit-scrollbar-thumb:hover {
+    cursor: pointer;
+    background: #e5e5e5;
+  }
+}
+
+@layer components {
+  .selected::before {
+    @apply absolute left-0 top-0 block h-30 w-4 bg-main content-[''];
+  }
 }

src/layouts/DefaultLayout.tsx

@@ -1,11 +1,13 @@
 import { Outlet } from 'react-router-dom';
-import Header from '@/components/common/Header';
+import Header from '@components/common/Header';
 
 export default function DefaultLayout() {
   return (
     <>
       <Header />
-      <Outlet />
+      <main className="m-auto h-contents max-w-contents">
+        <Outlet />
+      </main>
     </>
   );
 }

src/layouts/ProjectLayout.tsx

@@ -1,10 +1,83 @@
-import { Outlet, useParams } from 'react-router-dom';
+import { useMemo } from 'react';
+import { RiSettings5Fill } from 'react-icons/ri';
+import { Link, NavLink, Outlet, useParams } from 'react-router-dom';
 
+const dummy = [
+  { id: '1', title: '캘린더 만들기1' },
+  { id: '2', title: '캘린더 만들기2' },
+  { id: '3', title: '캘린더 만들기3' },
+  { id: '4', title: '캘린더 만들기4' },
+  { id: '5', title: '캘린더 만들기5' },
+  { id: '6', title: '캘린더 만들기6' },
+  { id: '7', title: '캘린더 만들기7' },
+  { id: '8', title: '캘린더 만들기8' },
+  { id: '9', title: '캘린더 만들기9' },
+  { id: '10', title: '캘린더 만들기10' },
+];
+
+// ToDo: 사이드바 공용 컴포넌트로 추출하기
 export default function ProjectLayout() {
+  const { teamId, projectId } = useParams();
+  const target = useMemo(() => dummy.find((d) => d.id === projectId), [projectId]);
+
   return (
-    <>
-      <h3>Project Layout</h3>
-      <Outlet />
-    </>
+    <section className="flex h-full p-15">
+      <aside className="mr-10 flex w-1/3 flex-col border border-list bg-contents-box">
+        <div className="flex min-h-30 items-center justify-between bg-sub px-10">
+          <div>
+            <small className="mr-5 font-bold text-main">team</small>
+            <span className="text-emphasis">김찌와소주</span>
+          </div>
+        </div>
+        <ul className="grow overflow-auto">
+          {dummy.map((v) => (
+            <li
+              key={v.id}
+              className={`relative cursor-pointer border-b bg-white hover:brightness-90 ${projectId === v.id && 'selected'}`}
+            >
+              <Link
+                to={`/teams/${teamId}/projects/${v.id}/calendar`}
+                className="flex h-30 flex-col justify-center px-10"
+              >
+                <small className="font-bold text-category">project</small>
+                <span>{v.title}</span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </aside>
+      <section className="flex w-2/3 flex-col border border-list bg-contents-box">
+        <header className="flex h-30 items-center justify-between border-b p-10">
+          <div>
+            <small className="mr-5 font-bold text-category">project</small>
+            <span className="text-emphasis">{target?.title}</span>
+          </div>
+          <div className="flex cursor-pointer items-center text-sm text-main">
+            <RiSettings5Fill /> Project Setting
+          </div>
+        </header>
+        <div className="grow p-10">
+          <ul className="flex border-b *:mr-15">
+            <li>
+              <NavLink
+                to={`/teams/${teamId}/projects/${projectId}/calendar`}
+                className={({ isActive }) => (isActive ? 'text-main' : 'text-emphasis')}
+              >
+                Calendar
+              </NavLink>
+            </li>
+            <li>
+              <NavLink
+                to={`/teams/${teamId}/projects/${projectId}/kanban`}
+                className={({ isActive }) => (isActive ? 'text-main' : 'text-emphasis')}
+              >
+                Kanban
+              </NavLink>
+            </li>
+          </ul>
+          <Outlet />
+        </div>
+      </section>
+    </section>
   );
 }

tailwind.config.js

@@ -18,6 +18,9 @@ export default {
         header: 'var(--height-header)',
         contents: 'var(--height-contents)',
       },
+      maxWidth: {
+        contents: 'var(--max-width-contents)',
+      },
       fontFamily: {
         roboto: 'var(--font-family-roboto)',
       },
@@ -42,6 +45,7 @@ export default {
       textColor: {
         default: 'var(--text-color-default)',
         emphasis: 'var(--text-color-emphasis)',
+        category: 'var(--text-color-category)',
         error: 'var(--text-color-error)',
         blue: 'var(--text-color-blue)',
       },