[feat] #26 NavBar 구현

kdt-8-4 · Feb 15, 2024 · 8b14dee · 8b14dee
2 parents e2a2e76 + b8a4987
commit 8b14dee
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 30 deletions.
diff --git a/weatherfit_refactoring/src/Components/Molecules/LoginLogo.tsx b/weatherfit_refactoring/src/Components/Molecules/LoginLogo.tsx
@@ -1,6 +1,5 @@
 import ButtonStore from '@/Components/Atoms/Button/ButtonStore'
 import { ButtonStyle } from '@/Components/Atoms/Button/ButtonStore'
-import BoxStore, { BoxStyle } from '../Atoms/Box/BoxStore'
 import { useRouter } from 'next/navigation'
 
 export default function LoginLogo() {
@@ -10,7 +9,7 @@ export default function LoginLogo() {
     router.push('/')
   }
   return (
-    <div className="font-semibold mb-[40px]">
+    <div className="font-semibold mb-[40px] cursor-pointer">
       <p
         className="text-center font-NanumSquareRound mb-[5px]
 ">

diff --git a/weatherfit_refactoring/src/Components/Molecules/NavBar.tsx b/weatherfit_refactoring/src/Components/Molecules/NavBar.tsx
@@ -1,26 +1,14 @@
-import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+import NavBarBox from './NavBarBox'
 
 export default function NavBar() {
   return (
     <div
-      className="flex w-[370px] justify-around items-center bg-white border border-black rounded-[30px] z-10 py-[5px]"
+      className="fixed bottom-[45px] mx-[5px] flex justify-around items-center bg-white w-[360px] border border-black rounded-[30px] z-10 py-[5px]"
       style={{ boxShadow: '7px 7px 1px' }}>
-      <div className="flex flex-col items-center">
-        <IconStore iconStyle={IconStyle.HOME} size={22} />
-        <p className="font-Cafe24SsurroundAir text-[12px]">홈</p>
-      </div>
-      <div className="flex flex-col items-center">
-        <IconStore iconStyle={IconStyle.SEARCH} size={22} />
-        <p className="font-Cafe24SsurroundAir text-[12px]">구경</p>
-      </div>
-      <div className="flex flex-col items-center">
-        <IconStore iconStyle={IconStyle.UPLOAD} size={22} />
-        <p className="font-Cafe24SsurroundAir text-[12px]">업로드</p>
-      </div>
-      <div className="flex flex-col items-center">
-        <IconStore iconStyle={IconStyle.MY_PROFILE} size={22} />
-        <p className="font-Cafe24SsurroundAir text-[12px]">마이페이지</p>
-      </div>
+      <NavBarBox iconStyle="HOME" title="홈" url="/" />
+      <NavBarBox iconStyle="SEARCH" title="구경" url="/feed" />
+      <NavBarBox iconStyle="UPLOAD" title="업로드" url="/upload" />
+      <NavBarBox iconStyle="MY_PROFILE" title="마이페이지" url="/mypage" />
     </div>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Molecules/NavBarBox.tsx b/weatherfit_refactoring/src/Components/Molecules/NavBarBox.tsx
@@ -0,0 +1,37 @@
+'use client'
+import { usePathname, useRouter } from 'next/navigation'
+import IconStore, { IconStyle } from '../Atoms/Icon/IconStore'
+import { useEffect, useState } from 'react'
+import Link from 'next/link'
+
+interface Props {
+  iconStyle: keyof typeof IconStyle
+  title: string
+  url: string
+}
+
+export default function NavBarBox({ iconStyle, title, url }: Props) {
+  const router = useRouter()
+  const pathname = usePathname()
+  const [isActive, setIsActive] = useState<boolean>(false)
+
+  useEffect(() => {
+    console.log('pathname: ', pathname)
+    setIsActive(pathname === url)
+  }, [pathname])
+  console.log('isActive: ', isActive)
+
+  const activeIconStyle = isActive
+    ? IconStyle[`${iconStyle}_FILL` as keyof typeof IconStyle]
+    : IconStyle[iconStyle]
+  const activeTextStyle = isActive
+    ? 'font-Cafe24SsurroundAir text-[11px] font-bold'
+    : 'font-Cafe24SsurroundAir text-[11px]'
+
+  return (
+    <Link href={url} className="flex flex-col items-center cursor-pointer">
+      <IconStore iconStyle={activeIconStyle} size={22} />
+      <p className={activeTextStyle}>{title}</p>
+    </Link>
+  )
+}
diff --git a/weatherfit_refactoring/src/app/login/page.tsx b/weatherfit_refactoring/src/app/login/page.tsx
@@ -8,16 +8,18 @@ import NavBar from '@/Components/Molecules/NavBar'
 
 export default function Login() {
   return (
-    <div className="flex flex-col items-center mt-[75px]">
-      <LoginLogo />
-      <LoginForm />
-      <ButtonStore
-        buttonStyle={ButtonStyle.TEXT_BTN}
-        style="font-NanumSquareRound text-[gray]"
-        btnText="회원가입"
-      />
-      <EasyLogin />
+    <>
+      <div className="flex flex-col items-center mt-[75px]">
+        <LoginLogo />
+        <LoginForm />
+        <ButtonStore
+          buttonStyle={ButtonStyle.TEXT_BTN}
+          style="font-NanumSquareRound text-[gray]"
+          btnText="회원가입"
+        />
+        <EasyLogin />
+      </div>
       <NavBar />
-    </div>
+    </>
   )
 }
diff --git a/weatherfit_refactoring/src/app/page.tsx b/weatherfit_refactoring/src/app/page.tsx
@@ -3,6 +3,7 @@ import InputStore, { InputStyle } from '@/Components/Atoms/Input/InputStore'
 import ButtonStore, { ButtonStyle } from '@/Components/Atoms/Button/ButtonStore'
 import ImageUpload from '@/Components/Organisms/ImageUpload'
 import MainOrganism from '@/Components/Organisms/MainOrganism'
+import NavBar from '@/Components/Molecules/NavBar'
 
 export default function Home() {
   return (
@@ -47,6 +48,7 @@ export default function Home() {
         btnText="회원가입"
       />
       <MainOrganism />
+      <NavBar />
     </>
   )
 }