diff --git a/src/app/_common/navBar.module.scss b/src/app/_common/navBar.module.scss new file mode 100644 index 0000000..fce19f8 --- /dev/null +++ b/src/app/_common/navBar.module.scss @@ -0,0 +1,19 @@ +@use '../../lib/styles/palette' as *; + + +.navbar { + display: flex; + padding: 12px 60px; + justify-content: space-between; + align-items: center; + width: 390px; + + position: absolute; + bottom: 0; + + + border: 1px solid $light-gray-color; + background-color: $white-color; + + z-index: 2; +} \ No newline at end of file diff --git a/src/app/_common/navBar.tsx b/src/app/_common/navBar.tsx index f20cb30..08f7c5a 100644 --- a/src/app/_common/navBar.tsx +++ b/src/app/_common/navBar.tsx @@ -1,28 +1,56 @@ -import Image from "next/image"; +import { useRouter } from 'next/navigation'; + +import styles from './navBar.module.scss' +import { useState } from 'react'; export default function NavBar() { + const mainColor = "#95cc3c"; + const blackColor = "#2C2C2C"; + + const [ nowPage, setNowPage ] = useState("home"); + + const router = useRouter(); + const clickHome = () => { + setNowPage("home"); + router.push("/home"); + }; + const clickLog = () => { + setNowPage("log"); + router.push("/log") + }; + const clickShop = () => { + setNowPage("shop"); + router.push("/shop") + }; + const clickMypage = () => { + setNowPage("mypage"); + router.push("/mypage") + }; + return ( -
- - - +
+ + + - - + + - - - - + + + + - - + +
); - } +} \ No newline at end of file diff --git a/src/app/home/page.module.scss b/src/app/home/page.module.scss index f75c6fd..d39ca60 100644 --- a/src/app/home/page.module.scss +++ b/src/app/home/page.module.scss @@ -116,7 +116,7 @@ } .background { - height: 40vw; + height: 40vh; position: static; .floor { diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index b1e2343..57457a4 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -3,6 +3,7 @@ import styles from "./page.module.scss"; import HomeView from "./homeView"; +import NavBar from "../_common/navBar"; export default function HomePage() { @@ -60,6 +61,7 @@ export default function HomePage() {
+ ); }