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,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 (
+    <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="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/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 />
     </>
   );

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"