Merge pull request #19 from GU-99/feature/ui-header

Feat: #16 공용 Header 컴포넌트 UI 작성

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"
   },

src/components/common/Header.tsx

@@ -0,0 +1,30 @@
+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: 로그인 기능 구현 후, 로그아웃 로직 연결하기
+  // ToDo: 유저 정보를 토대로 응원 아이디 변경하기
+  return (
+    <header className="flex h-header items-center justify-between bg-main px-15">
+      <div>
+        <Link to="/" className="hover:brightness-90">
+          <img className="size-30 select-none" src={logo} alt="GrowUp Logo" />
+        </Link>
+      </div>
+      <nav className="flex items-center">
+        <div className="tracking-tight text-white">User 님의 Grow Up! 응원합니다.</div>
+        <NavLink to="/" className="ml-10 hover:brightness-90">
+          {({ isActive }) => <FiHome className={`size-20 ${isActive ? 'text-selected' : 'text-white'}`} />}
+        </NavLink>
+        <NavLink to="/setting/user" className="ml-10 hover:brightness-90">
+          {({ isActive }) => <FaUserCircle className={`size-20 ${isActive ? 'text-selected' : 'text-white'}`} />}
+        </NavLink>
+        <button type="button" className="ml-10 h-20 rounded-md bg-white px-4 tracking-tight hover:brightness-90">
+          Logout
+        </button>
+      </nav>
+    </header>
+  );
+}

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;
 

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 (
     <>
-      <h3>Default Layout</h3>
+      <Header />
       <Outlet />
     </>
   );

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)',
       },

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"