Feat: 메인 페이지 header, navigator 구현

src/App.module.scss

@@ -0,0 +1 @@
+

src/components/HomeLayout/HomeLayout.module.scss

@@ -0,0 +1,7 @@
+@import '../../styles/variables/colors.scss';
+@import '../../styles/variables/fonts.scss';
+
+.mainContainer {
+  display: flex;
+  margin-top: 80px;
+}

src/components/HomeLayout/HomeLayout.tsx

@@ -1,11 +1,17 @@
 import { Outlet } from 'react-router-dom';
+import MainHeader from '../headers/MainHeader/MainHeader';
+import styles from './HomeLayout.module.scss';
+import MainNav from '../navigators/MainNav/MainNav';
 
 const HomeLayout = () => {
   return (
-    <div>
-      HomeLayout
-      <Outlet />
-    </div>
+    <>
+      <MainHeader />
+      <main className={styles.mainContainer}>
+        <MainNav />
+        <Outlet />
+      </main>
+    </>
   );
 };
 

src/components/common/buttons/TabLink/TabLink.module.scss

@@ -0,0 +1,15 @@
+@import '../../../../styles/variables/colors.scss';
+@import '../../../../styles/variables/fonts.scss';
+
+.navItem {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  @include SemiBold;
+  font-size: 18px;
+  color: $light-gray_81;
+  text-decoration: none;
+  &.active {
+    color: $dark-orange_E5;
+  }
+}

src/components/common/buttons/TabLink/TabLink.tsx

@@ -0,0 +1,25 @@
+import { Link, useLocation } from 'react-router-dom';
+import styles from './TabLink.module.scss';
+
+interface IProps {
+  to: string;
+  activeIcon: React.ReactNode;
+  inactiveIcon: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const TabLink = ({ to, activeIcon, inactiveIcon, children }: IProps) => {
+  const location = useLocation();
+  const isActive = location.pathname === to;
+  return (
+    <Link
+      to={to}
+      className={`${styles.navItem} ${isActive ? styles.active : ''}`}
+    >
+      {isActive ? activeIcon : inactiveIcon}
+      <span>{children}</span>
+    </Link>
+  );
+};
+
+export default TabLink;

src/components/headers/MainHeader/MainHeader.module.scss

@@ -0,0 +1,33 @@
+@import '../../../styles/variables/colors.scss';
+@import '../../../styles/variables/fonts.scss';
+
+.wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  width: 100dvw;
+  height: 80px;
+  padding: 20px 10px;
+  background-color: white;
+}
+
+.dropDownsContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+  height: 100%;
+  .dropDownBtn {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    height: 100%;
+    background-color: white;
+    border: none;
+    cursor: pointer;
+    @include Regular;
+  }
+}

src/components/headers/MainHeader/MainHeader.tsx

@@ -0,0 +1,23 @@
+import styles from './MainHeader.module.scss';
+import Logo from '../../../assets/images/logo/logo-header.svg?react';
+import DownArrow from '../../../assets/images/arrow/down-arrow.svg?react';
+
+const MainHeader = () => {
+  return (
+    <header className={styles.wrapper}>
+      <Logo />
+      <div className={styles.dropDownsContainer}>
+        <button className={styles.dropDownBtn}>
+          이용 문의
+          <DownArrow />
+        </button>
+        <button className={styles.dropDownBtn}>
+          마이페이지
+          <DownArrow />
+        </button>
+      </div>
+    </header>
+  );
+};
+
+export default MainHeader;

src/components/navigators/MainNav/MainNav.module.scss

@@ -0,0 +1,33 @@
+@import '../../../styles/variables/colors.scss';
+@import '../../../styles/variables/fonts.scss';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  width: 250px;
+  padding: 20px;
+  padding-top: 20px;
+}
+.searchBar {
+  display: flex;
+  height: 36px;
+  padding: 10px;
+  padding-left: 35px;
+  background-color: $light-bg_F9;
+  border: none;
+  border-radius: 6px;
+  @include Regular;
+  color: $light-gray_81;
+}
+.searchIcon {
+  position: relative;
+  bottom: -46px;
+  left: 15px;
+}
+.linksContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 0 10px;
+}