style: top nav style migration

package.json

@@ -23,6 +23,7 @@
     "react-hot-toast": "^2.4.1",
     "react-router-dom": "^6.15.0",
     "react-select": "^5.7.4",
+    "react-use": "^17.4.0",
     "sass": "^1.66.1",
     "socket.io-client": "^4.7.2",
     "styled-components": "^6.0.7",

src/App.tsx

@@ -1,13 +1,13 @@
 import { BrowserRouter } from 'react-router-dom'
-import Header from './components/Header'
+import TopNav from './components/TopNav'
 import { type FC } from 'react'
 import { Toaster } from 'react-hot-toast'
 import Routers from './components/Routers'
 
 const App: FC = () =>
   <BrowserRouter>
-    <Header />
-    <Routers/>
+    <TopNav />
+    <Routers />
 
     <Toaster
       position="bottom-right"

src/components/Container/style.module.scss

@@ -3,4 +3,6 @@
   height: 100%; 
   position: relative;
   top: 0;
+
+  padding-top: 40px;
 }

src/components/TopNav/index.tsx

@@ -0,0 +1,64 @@
+import { useState, type FC, type FormEvent } from 'react'
+import { Link, useLocation, useNavigate } from 'react-router-dom'
+import style from './style.module.scss'
+import { useCookie } from 'react-use'
+
+const TopNav: FC = () => {
+  const [search, setSearch] = useState('')
+  const location = useLocation()
+  const navigate = useNavigate()
+  const [,, removeCookie] = useCookie('SESSION_TOKEN')
+  const isSearchablePage = location.pathname.includes('/instances')
+
+  if (location.pathname === '/login')
+    return <></>
+
+  const onSearch = (e: FormEvent): void => {
+    e.preventDefault()
+
+    if (search.length < 1) {
+      navigate('/instances/')
+      return
+    }
+
+    navigate(`/instances/search/${search}?page=0`)
+  }
+
+  const onLogout = (): void => {
+    removeCookie()
+    navigate('/login')
+  }
+
+  return (
+    <nav className={style.topNav}>
+      <div>
+        <Link to="/instances">
+          <img
+            src="/assets/images/logos/vector.svg"
+            alt="AWS Logo" className={style.logo} />
+        </Link>
+
+        {isSearchablePage && (
+          <form className={style.searchForm} onSubmit={onSearch}>
+            <label>
+              <img
+                src="/assets/icon/search.svg"
+                alt="Search" className={style.searchIcon} />
+
+              <input type="text" autoComplete="off" spellCheck="false" aria-haspopup="dialog" id="search" placeholder="검색" role="combobox" onChange={(e) => { setSearch(e.target.value) }} />
+            </label>
+          </form>
+        )}
+
+      </div>
+
+      <div>
+        <button className={style.logout} onClick={onLogout}>
+          로그아웃
+        </button>
+      </div>
+    </nav>
+  )
+}
+
+export default TopNav

src/components/TopNav/style.module.scss

@@ -0,0 +1,79 @@
+.topNav {
+  width: 100%;
+  height: 40px;
+
+  position: fixed;
+  top: 0;
+
+  border-bottom: 1px solid #545B64;
+  background-color: #232f3e;
+
+  display: flex;
+  gap: 20px;
+  padding: 0px 20px;
+
+  > div {
+    height: 100%;
+    display: flex;
+    gap: 20px;
+    align-items: center;
+
+    &:first-child {
+      flex-grow: 1;
+    }
+  }
+
+  a, .logo {
+    height: 100%;
+  }
+
+  .logo {
+    padding: 10px 0px;
+  }
+
+  .searchForm {
+    width: 100%;
+    max-width: 500px;
+
+    label {
+      height: 30px;
+      display: flex;
+      border: 1px solid rgb(135, 149, 150) !important;
+      padding: 0px 10px;
+      border-radius: 2px;
+      gap: 5px;
+
+      &:focus-within {
+        outline: 1px solid white;
+      }
+
+      .searchIcon {
+        width: 15px;
+      }
+
+      input {
+        background-color: transparent;
+        border: none;
+        width: 100%;
+        display: block;
+        color: white;
+
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+  }
+
+  .logout {
+    background-color: transparent;
+    border: none;
+    color: white;
+    cursor: pointer;
+    text-decoration: underline dashed rgb(135, 149, 150);
+
+    &:hover {
+      text-decoration-color: white;
+    }
+  }
+}