From e1367bae73858bb3e2338de8f25288519efb0b3d Mon Sep 17 00:00:00 2001 From: Seok93 Date: Tue, 18 Jun 2024 23:31:33 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Feat:=20#16=20=EA=B3=B5=EC=9A=A9=20Header?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20UI=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/assets/logo.svg | 4 ++++ src/components/common/Header.tsx | 29 +++++++++++++++++++++++++++++ src/layouts/DefaultLayout.tsx | 3 ++- yarn.lock | 5 +++++ 5 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 src/assets/logo.svg create mode 100644 src/components/common/Header.tsx diff --git a/package.json b/package.json index 39fcad25..918fdcb6 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.51.4", + "react-icons": "^5.2.1", "react-router-dom": "^6.23.1", "zustand": "^4.5.2" }, diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 00000000..348b4414 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx new file mode 100644 index 00000000..339f92f8 --- /dev/null +++ b/src/components/common/Header.tsx @@ -0,0 +1,29 @@ +import { Link, NavLink } from 'react-router-dom'; +import logo from '@assets/logo.svg'; +import { FaUserCircle } from 'react-icons/fa'; +import { FiHome } from 'react-icons/fi'; + +export default function Header() { + // ToDo: 로그인 기능 구현 후, 로그아웃 로직 연결하기 + return ( +
+
+ + GrowUp Logo + +
+ +
+ ); +} diff --git a/src/layouts/DefaultLayout.tsx b/src/layouts/DefaultLayout.tsx index 99ca7bc1..5de02882 100644 --- a/src/layouts/DefaultLayout.tsx +++ b/src/layouts/DefaultLayout.tsx @@ -1,9 +1,10 @@ import { Outlet } from 'react-router-dom'; +import Header from '@/components/common/Header'; export default function DefaultLayout() { return ( <> -

Default Layout

+
); diff --git a/yarn.lock b/yarn.lock index 026c68cb..1d6a3404 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3538,6 +3538,11 @@ react-hook-form@^7.51.4: resolved "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.4.tgz" integrity sha512-V14i8SEkh+V1gs6YtD0hdHYnoL4tp/HX/A45wWQN15CYr9bFRmmRdYStSO5L65lCCZRF+kYiSKhm9alqbcdiVA== +react-icons@^5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.2.1.tgz#28c2040917b2a2eda639b0f797bff1888e018e4a" + integrity sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw== + react-is@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" From ac10b24fedfd037808fdbe40ed62c0d0209d338f Mon Sep 17 00:00:00 2001 From: Seok93 Date: Wed, 19 Jun 2024 23:15:23 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Fix:=20#16=20tailwind=20CSS=20=EC=A4=91?= =?UTF-8?q?=EB=B3=B5=EB=90=9C=20=EC=86=8D=EC=84=B1=EB=AA=85=20=EA=B5=AC?= =?UTF-8?q?=EB=B3=84=EC=9D=84=20=EC=9C=84=ED=95=9C=20=EB=84=A4=EC=9D=B4?= =?UTF-8?q?=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/globals.css | 2 +- tailwind.config.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/globals.css b/src/globals.css index b87074e1..ba7dc3fe 100644 --- a/src/globals.css +++ b/src/globals.css @@ -54,7 +54,7 @@ /* text color */ --text-color-default: #2c2c2c; - --text-color-bold: #5e5e5e; + --text-color-emphasis: #5e5e5e; --text-color-error: #be0000; --text-color-blue: #0909e7; diff --git a/tailwind.config.js b/tailwind.config.js index 6d7b30c0..b897e147 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -23,7 +23,7 @@ export default { }, fontSize: { regular: 'var(--font-size-regular)', - bold: 'var(--font-size-bold)', + large: 'var(--font-size-large)', 404: 'var(--font-size-404)', }, fontWeight: { @@ -41,7 +41,7 @@ export default { }, textColor: { default: 'var(--text-color-default)', - bold: 'var(--text-color-bold)', + emphasis: 'var(--text-color-emphasis)', error: 'var(--text-color-error)', blue: 'var(--text-color-blue)', }, From 3b703ace39e0af9aad1bab8dfb3fe79dc8a0b422 Mon Sep 17 00:00:00 2001 From: Seok93 Date: Wed, 19 Jun 2024 23:17:22 +0900 Subject: [PATCH 3/3] =?UTF-8?q?UI:=20#16=20=EA=B3=B5=EC=9A=A9=20Header=20C?= =?UTF-8?q?SS=20=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Header.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx index 339f92f8..e229fb2d 100644 --- a/src/components/common/Header.tsx +++ b/src/components/common/Header.tsx @@ -5,6 +5,7 @@ import { FiHome } from 'react-icons/fi'; export default function Header() { // ToDo: 로그인 기능 구현 후, 로그아웃 로직 연결하기 + // ToDo: 유저 정보를 토대로 응원 아이디 변경하기 return (
@@ -13,7 +14,7 @@ export default function Header() {