Merge branch 'develop' into FE/#90

techeer-sv · Nov 22, 2023 · b5364ea · b5364ea
2 parents 526bfbf + 8f1d73e
commit b5364ea
Show file tree

Hide file tree

Showing 8 changed files with 509 additions and 232 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -2,6 +2,8 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import MainPage from './pages/MainPage';
 import DetailPage from './pages/DetailPage';
+import LoginPage from './pages/LoginPage';
+import SignupPage from './pages/SignUpPage';
 
 function App() {
   return (
@@ -10,6 +12,8 @@ function App() {
         <Routes>
           <Route path="/" element={<MainPage />} />
           <Route path="/detail/:id" element={<DetailPage />} />
+          <Route path="/signup" element={<SignupPage />} />
+          <Route path="/login" element={<LoginPage />} />
         </Routes>
       </BrowserRouter>
     </RecoilRoot>

diff --git a/frontend/src/assets/images/png/Logo.png b/frontend/src/assets/images/png/Logo.png
diff --git a/frontend/src/assets/images/png/signImg.png b/frontend/src/assets/images/png/signImg.png
diff --git a/frontend/src/components/NavBar.tsx b/frontend/src/components/NavBar.tsx
@@ -72,7 +72,7 @@ function NavBar() {
     <div className="sticky top-0 z-50">
       <div className="flex h-14 w-full items-center justify-between border-b-[1px] border-solid border-[#C6C6C6] bg-white md:h-16">
         {/* 로고 */}
-        <div className="flex basis-1/4">
+        <div className="flex basis-1/4 justify-center">
           <button
             className="ml-5 text-left font-LexendDeca text-xl font-bold md:text-2xl"
             type="button"
@@ -95,7 +95,19 @@ function NavBar() {
             onKeyDown={handleKeyDown}
           />
         </div>
-        <div className="flex basis-1/4" />
+        <div className="flex basis-1/4 justify-center">
+          <button
+            onClick={() => {
+              navigate('/login');
+            }}
+            className="duration-400 rounded-md border-2 border-[#06439F] px-3 py-2 font-LexendDeca text-[#06439F] hover:border-[#06439F] hover:bg-[#f7f7f7]"
+          >
+            Login
+          </button>
+          {/* <button className="duration-400 rounded-md border-2 border-[#FFDB59] px-3 py-2 font-LexendDeca text-[#FFDB59] hover:border-[#EDC431] hover:bg-[#fffdfd] hover:text-[#EDC431]">
+          Logout
+        </button> */}
+        </div>
       </div>
     </div>
   );

diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
@@ -0,0 +1,48 @@
+import LogoImg from '../assets/images/png/Logo.png';
+import { useNavigate } from 'react-router-dom';
+
+function LoginPage() {
+  const navigate = useNavigate();
+
+  return (
+    <div className="bg-loginimg w-full bg-[#fdfdfd]">
+      <div className="flex justify-center">
+        <div className="">
+          <img
+            src={LogoImg}
+            alt="login"
+            className="flex max-h-screen items-center justify-center"
+          />
+        </div>
+        <div className="ml-10 flex w-72 flex-col justify-center space-y-4 font-LexendDeca">
+          <div className="mb-3 text-[30pt] font-medium text-[#06439F]">
+            Login
+          </div>
+          <input
+            className="rounded-md bg-[#EAF0F7] px-2 py-2 font-light outline-none "
+            type="text"
+            placeholder="ID"
+          />
+          <input
+            className="rounded-md bg-[#EAF0F7] px-2 py-2 font-light outline-none "
+            type="password"
+            placeholder="PassWord"
+          />
+          <button className="rounded-md bg-[#06439F] py-2 font-light text-white">
+            Login
+          </button>
+          <button
+            className="rounded-md border border-[#06439F] bg-[#ffffff] py-2 font-light text-[#06439F]"
+            onClick={() => {
+              navigate('/signup');
+            }}
+          >
+            Sign up
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default LoginPage;
diff --git a/frontend/src/pages/SignupPage.tsx b/frontend/src/pages/SignupPage.tsx
@@ -0,0 +1,40 @@
+import LogoImg from '../assets/images/png/Logo.png';
+
+function SignupPage() {
+  return (
+    <div className="bg-loginimg w-full bg-[#fdfdfd]">
+      <div className="flex justify-center font-LexendDeca">
+        <img
+          src={LogoImg}
+          alt="signup"
+          className="flex max-h-screen items-center justify-center"
+        />
+        <div className="ml-10 flex w-72 flex-col justify-center space-y-4">
+          <div className="mb-3 text-[30pt] font-medium text-[#FFD600]">
+            Sign up
+          </div>
+          <input
+            className="rounded-md bg-[#f5f5f5] px-2 py-2 font-light outline-none "
+            type="text"
+            placeholder="Nickname"
+          />
+          <input
+            className="rounded-md bg-[#f5f5f5] px-2 py-2 font-light outline-none "
+            type="text"
+            placeholder="ID"
+          />
+          <input
+            className="mb-4 rounded-md bg-[#f5f5f5] px-2 py-2 font-light outline-none"
+            type="password"
+            placeholder="PassWord"
+          />
+          <button className="rounded-md bg-[#FFD600] py-2 font-light text-[#667085]">
+            Sign up
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default SignupPage;