Merge pull request #266 from techeer-sv/FE/#265

feat : NavBar 마이그레이션
techeer-sv · Oct 9, 2023 · 6bb0308 · 6bb0308
2 parents 5551cf1 + 8e4fc8a
commit 6bb0308
Show file tree

Hide file tree

Showing 2 changed files with 151 additions and 1 deletion.
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
@@ -2,6 +2,7 @@ import './globals.css'
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import Provider from '../components/general/Provider'
+import NavBar from '../components/general/NavBar'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -18,7 +19,9 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className}>
-        <Provider>{children}</Provider>
+        <Provider>
+          <NavBar>{children}</NavBar>
+        </Provider>
       </body>
     </html>
   )

diff --git a/frontend/src/components/general/NavBar.tsx b/frontend/src/components/general/NavBar.tsx
@@ -0,0 +1,147 @@
+'use client'
+
+import { ChangeEvent, useState, useEffect } from 'react'
+import { useRouter, usePathname } from 'next/navigation'
+import { useRecoilState } from 'recoil'
+import Image from 'next/image'
+
+import WriteIcon from '../../../public/images/svg/pencil-square.svg'
+import ProfileIcon from '../../../public/images/svg/profileIcon.svg'
+import SearchIcon from '../../../public/images/png/searchIcon.png'
+import { searchTextState } from '../../utils/atoms'
+
+export default function NavBar({ children }: { children: React.ReactNode }) {
+  const accessToken =
+    typeof window !== 'undefined' ? sessionStorage.getItem('accessToken') : null
+  const persistToken =
+    typeof window !== 'undefined' ? localStorage.getItem('persistToken') : null
+  const [searchText, SetSearchText] = useRecoilState(searchTextState)
+  const [btnText, setBtnText] = useState<string>('로그인')
+
+  const router = useRouter()
+  const pathname = usePathname()
+
+  const getSearchData = (e: ChangeEvent<HTMLInputElement>) => {
+    SetSearchText(e.target.value)
+  }
+
+  function signOut() {
+    if (accessToken) {
+      sessionStorage.removeItem('accessToken')
+    } else {
+      localStorage.removeItem('persistToken')
+    }
+  }
+
+  const handleSearch = () => {
+    if (searchText === '' || searchText === '@') {
+      router.push('/')
+    } else if (searchText.charAt(0) === '@') {
+      const username = searchText.substring(1)
+      router.push(`/search-user/${username}`)
+    } else {
+      router.push(`/search-post/${searchText}`)
+    }
+  }
+
+  const handleLogin = () => {
+    if (accessToken || persistToken) {
+      signOut()
+      setBtnText('로그인')
+    } else {
+      router.push('/login')
+    }
+  }
+
+  useEffect(() => {
+    if (accessToken || persistToken) {
+      setBtnText('로그아웃')
+    } else {
+      setBtnText('로그인')
+    }
+  }, [pathname])
+
+  if (pathname === '/login' || pathname === '/registration') {
+    return children
+  }
+
+  return (
+    <div>
+      <div className="fixed z-20 mb-5 flex w-screen flex-row content-center overflow-hidden border-b border-zinc-400 bg-white pt-3 pb-3 align-middle font-ng-eb">
+        {/* 로고 */}
+        <button
+          onClick={() => router.push('/')}
+          className="ml-8 hidden font-lato-b text-4xl text-graphyblue sm:block"
+          type="button"
+        >
+          Graphy
+        </button>
+        <button
+          onClick={() => router.push('/')}
+          className="ml-8 font-lato-b text-4xl text-graphyblue sm:hidden"
+          type="button"
+        >
+          G
+        </button>
+
+        {/* 검색창 */}
+        <div className="relative mx-4 flex h-auto w-full items-center rounded-xl border">
+          <input
+            value={searchText}
+            onChange={getSearchData}
+            type="text"
+            alt="search"
+            placeholder="search"
+            className="h-auto w-full appearance-none pl-2 outline-none"
+            onKeyPress={(e) => {
+              if (e.key === 'Enter') {
+                handleSearch()
+              }
+            }}
+          />
+          <button
+            className="mr-2"
+            onClick={handleSearch}
+            aria-label="SearchButton"
+            type="button"
+          >
+            <Image className="h-6 w-auto" src={SearchIcon} alt="SearchIcon" />
+          </button>
+        </div>
+        <button
+          className=" mr-4 whitespace-nowrap rounded-full bg-graphyblue px-4 text-white"
+          type="button"
+          onClick={() => handleLogin()}
+        >
+          {btnText}
+        </button>
+
+        {/* 프로젝트 작성 버튼 */}
+        <button
+          className="invisible mx-auto mr-4 flex h-0 w-0 shrink-0 flex-row flex-nowrap items-center rounded-full bg-graphyblue text-white sm:visible sm:mr-5
+        sm:h-auto sm:w-auto sm:px-4 sm:py-1"
+          onClick={() => router.push('/new-post')}
+          aria-label="toWritePage"
+          type="button"
+        >
+          <Image className="mr-2 h-5 w-5" src={WriteIcon} alt="WriteIcon" />
+          <span className="font-semibold">프로젝트 공유</span>
+        </button>
+
+        {/* 마이페이지 아이콘 */}
+        <button
+          className="mr-12"
+          type="button"
+          onClick={() => router.push('/my')}
+        >
+          <Image
+            className="fixed top-4 right-4 h-8 w-8 appearance-none"
+            src={ProfileIcon}
+            alt="ProfileIcon"
+          />
+        </button>
+      </div>
+      {children}
+    </div>
+  )
+}