From 927aa9965f5674cc6266125b04799eb760e2e768 Mon Sep 17 00:00:00 2001 From: Seok93 Date: Thu, 20 Jun 2024 15:57:38 +0900 Subject: [PATCH 1/3] =?UTF-8?q?UI:=20#21=20Default=20Layout=EC=9D=98=20con?= =?UTF-8?q?tents=20=EB=B6=80=EB=B6=84=EC=9D=98=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=EC=A0=9C=ED=95=9C=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/globals.css | 1 + src/layouts/DefaultLayout.tsx | 6 ++++-- tailwind.config.js | 3 +++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/src/globals.css b/src/globals.css index ba7dc3fe..78d22a6e 100644 --- a/src/globals.css +++ b/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; diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx index 5de02882..c9925e73 100644 --- a/src/layouts/DefaultLayout.tsx +++ b/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 ( <>
- +
+ +
); } diff --git a/tailwind.config.js b/tailwind.config.js index b897e147..66806687 100644 --- a/tailwind.config.js +++ b/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)', }, From 892c3ca575c997e8a22b035e1f39239e94907411 Mon Sep 17 00:00:00 2001 From: Seok93 Date: Thu, 20 Jun 2024 16:00:53 +0900 Subject: [PATCH 2/3] =?UTF-8?q?UI:=20#21=20Project=20Layout=20UI=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/layouts/ProjectLayout.tsx | 83 ++++++++++++++++++++++++++++++++--- tailwind.config.js | 1 + 2 files changed, 79 insertions(+), 5 deletions(-) diff --git a/src/layouts/ProjectLayout.tsx b/src/layouts/ProjectLayout.tsx index e86ef4b5..f6cef207 100644 --- a/src/layouts/ProjectLayout.tsx +++ b/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 ( - <> -

Project Layout

- - +
+ +
+
+
+ project + {target?.title} +
+
+ Project Setting +
+
+
+
    +
  • + (isActive ? 'text-main' : 'text-emphasis')} + > + Calendar + +
    • +
  • + (isActive ? 'text-main' : 'text-emphasis')} + > + Kanban + +
    • +
+ +
+
+
); } diff --git a/tailwind.config.js b/tailwind.config.js index 66806687..e839b5d3 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -45,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)', }, From 3b6a63ca606d6738a04db752035081127a7790e8 Mon Sep 17 00:00:00 2001 From: Seok93 Date: Thu, 20 Jun 2024 16:09:33 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Config:=20#21=20tailwind=20=EC=86=8D?= =?UTF-8?q?=EC=84=B1/=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/globals.css | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/src/globals.css b/src/globals.css index 78d22a6e..297c5a4d 100644 --- a/src/globals.css +++ b/src/globals.css @@ -56,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; @@ -69,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-['']; + } }