Merge pull request #2 from Toy2-team10/TALK-20--feat/layout/nav

TALK-20--feat/layout/nav 하단 내비게이션 바 추가

components/Navigation/Navigation.module.scss

@@ -0,0 +1,32 @@
+@import '@/styles/index.scss';
+.nav {
+  width: 100%;
+  background: #fff;
+  position: fixed;
+  left: 50%;
+  transform: translate(-50%);
+  bottom: 0;
+  @include shadow-top;
+  background: #fff;
+  .inner {
+    max-width: 76.8rem;
+    width: 100%;
+    margin: 0 auto;
+    @include flex-center-row;
+    justify-content: space-between;
+    .menu {
+      display: block;
+      width: 25%;
+      text-align: center;
+      @include flex-center-col;
+      .icon {
+        font-size: 1.6rem;
+        padding-top: 1rem;
+        color: $black;
+      }
+      :hover {
+        color: $brand-pink;
+      }
+    }
+  }
+}

components/Navigation/Navigation.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Link from 'next/link';
+import {
+  BsHouses,
+  BsPersonCircle,
+  BsChatSquareHeart,
+  BsChatSquareQuote,
+} from 'react-icons/bs';
+import styles from './Navigation.module.scss';
+
+function Navigation() {
+  return (
+    <nav className={styles.nav}>
+      <ul className={styles.inner}>
+        <li className={styles.menu}>
+          <Link href="/">
+            <BsHouses className={styles.icon} />
+            <p>숙소목록</p>
+          </Link>
+        </li>
+        <li className={styles.menu}>
+          <Link href="/">
+            <BsChatSquareQuote className={styles.icon} />
+            <p>오픈채팅</p>
+          </Link>
+        </li>
+        <li className={styles.menu}>
+          <Link href="/">
+            <BsChatSquareHeart className={styles.icon} />
+            <p>나의 채팅목록</p>
+          </Link>
+        </li>
+        <li className={styles.menu}>
+          <Link href="/">
+            <BsPersonCircle className={styles.icon} />
+            <p>마이페이지</p>
+          </Link>
+        </li>
+      </ul>
+    </nav>
+  );
+}
+
+export default Navigation;

package.json

@@ -13,6 +13,7 @@
     "next": "14.0.1",
     "react": "^18",
     "react-dom": "^18",
+    "react-icons": "^4.11.0",
     "recoil": "^0.7.7",
     "socket.io": "^4.7.2",
     "socket.io-client": "^4.7.2"

pages/_app.tsx

@@ -2,10 +2,12 @@ import '../styles/normalize.scss';
 import '../assets/fonts/fonts.scss';
 import type { AppProps } from 'next/app';
 import { RecoilRoot } from 'recoil';
+import Navigation from '@/components/Navigation/Navigation';
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <RecoilRoot>
+      <Navigation />
       <Component {...pageProps} />
     </RecoilRoot>
   );