diff --git a/src/App.tsx b/src/App.tsx
index d4c8e13cf20317d6cc3b801d5ffdb2149e18e86d..480fbe258997de84047b73e0bbbd2fe51ea91ab6 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import './App.css';
import Layout from './components/Layout'
import { BrowserRouter, Routes, Route } from "react-router-dom";
import AboutPage from './pages/AboutPage';
+import AuthPage from './pages/AuthPage';
function App() {
return (
@@ -27,6 +28,8 @@ function App() {
<Routes>
<Route path="/" element={<Layout />}>
<Route index element={<AboutPage />} />
+ <Route path="login" element={<AuthPage />} />
+ <Route path="register" element={<AuthPage/>}/>
{/* <Route path="myprofile" element={<MyProfile />} />
<Route path="product" element={<Product />} /> */}
{/* TODO: Make a not found page (like below) */}
diff --git a/src/assets/styles/Button/Button.css b/src/assets/styles/Button/Button.css
index c503a1b2da9fbbd8ee779be95dc68e8144a0b4c9..cdd0002386ef21113ef7ed7d14fecde9146ba680 100644
--- a/src/assets/styles/Button/Button.css
+++ b/src/assets/styles/Button/Button.css
@@ -4,6 +4,6 @@
@layer components {
.btn-primary {
- @apply hover:bg-black/[0.1] transition ease-in-out duration-150 p-1
+ @apply hover:backdrop-brightness-[70%] transition duration-150 p-1 text-center
}
}
diff --git a/src/components/NavigationBar/index.tsx b/src/components/NavigationBar/index.tsx
index e0a898563d0bc263f9553826e696287bb06d44f1..80fdc9b2902d9c8eb7144466ccbbfe3b60929c8b 100644
--- a/src/components/NavigationBar/index.tsx
+++ b/src/components/NavigationBar/index.tsx
@@ -3,50 +3,63 @@ import ReactDOM from 'react-dom/client';
import { Bars3Icon , ShoppingCartIcon, UserIcon, MagnifyingGlassIcon, BookOpenIcon} from '@heroicons/react/24/solid';
import logo from '../../assets/images/logo.svg';
import '../../assets/styles/Button/Button.css'
+import { useLocation } from "react-router-dom";
const NavigationBar = () => {
+ const location = useLocation();
+ const NavbarExcludedPages = ["/login", "/register"]
+ if (NavbarExcludedPages.indexOf(location.pathname) != -1) {
+ return null;
+ }
return (
- <div className=
- "bg-quaternary flex p-3 items-center gap-2 justify-start">
- <div className="btn-primary flex items-stretch">
- <button >
- <Bars3Icon className="h-6 w-6 text-tertiary "/>
- </button>
- </div>
- <div className="ml-0 btn-primary">
- <a href="/">
- <img
- src={logo}
- className="h-6"
- ></img>
- </a>
- </div>
- <div className="sm:grow max-w-sm bg-black/10 rounded-full text-center ml-auto sm:mx-auto btn-primary hover:bg-black/20">
- <div className="text-white gap-1 flex">
- <MagnifyingGlassIcon className="text-inherit inline h-6 w-6"/>
- <input className="placeholder:italic bg-transparent placeholder:text-inherit text-inherit inline" placeholder="Search..">
- </input>
+ <>
+ <div className=
+ "fixed w-full bg-quaternary flex p-3 items-center gap-2 justify-start">
+ <div className="btn-primary flex items-stretch">
+ <button >
+ <Bars3Icon className="h-6 w-6 text-tertiary "/>
+ </button>
+ </div>
+ <div className="ml-0 btn-primary">
+ <a href="/">
+ <img
+ src={logo}
+ className="h-6"
+ ></img>
+ </a>
+ </div>
+ <div className="sm:grow max-w-sm bg-black/10 rounded-full text-center ml-auto sm:mx-auto btn-primary">
+ <div className="text-white gap-1 flex">
+ <MagnifyingGlassIcon className="text-inherit inline h-6 w-6"/>
+ <input className="placeholder:italic bg-transparent placeholder:text-inherit text-inherit inline grow" placeholder="Search..">
+ </input>
+ </div>
+ </div>
+ <div className="sm:ml-auto btn-primary text-tertiary">
+ <a>
+ <BookOpenIcon className="h-6 w-6 inline"/>
+ <p className="text-inherit hidden md:inline">Catalog</p>
+ </a>
+ </div>
+ <div className="btn-primary text-tertiary">
+ <a>
+ <ShoppingCartIcon className="h-6 w-6 inline"/>
+ <p className="text-inherit hidden md:inline">Cart</p>
+ </a>
+ </div>
+ <div className="btn-primary text-tertiary">
+ <button>
+ <UserIcon className="h-6 w-6 inline"/>
+ <p className="text-inherit hidden md:inline">Account</p>
+ </button>
+ </div>
+ <div className="bg-secondary btn-primary text-tertiary rounded px-4 hover:bg-quinary">
+ <a href="/login">
+ <p className="text-inherit inline">Log In</p>
+ </a>
</div>
</div>
- <div className="sm:ml-auto btn-primary text-tertiary">
- <button>
- <BookOpenIcon className="h-6 w-6 inline"/>
- <p className="text-inherit hidden sm:inline">Catalog</p>
- </button>
- </div>
- <div className="btn-primary text-tertiary">
- <button>
- <ShoppingCartIcon className="h-6 w-6 inline"/>
- <p className="text-inherit hidden sm:inline">Cart</p>
- </button>
- </div>
- <div className="btn-primary text-tertiary">
- <button>
- <UserIcon className="h-6 w-6 inline"/>
- <p className="text-inherit hidden sm:inline">Account</p>
- </button>
- </div>
- </div>
+ </>
)
}
diff --git a/src/components/Popup/index.tsx b/src/components/Popup/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8da0fdee333aa790851c6ae4f8da117dbc60f7ce
--- /dev/null
+++ b/src/components/Popup/index.tsx
@@ -0,0 +1,31 @@
+import React, { useEffect } from 'react';
+
+const Popup = ({ isOpen, onClose, children } : any) => {
+ useEffect(() => {
+ const handleOutsideClick = (event : any) => {
+ if (isOpen && event.target === event.currentTarget) {
+ onClose();
+ }
+ };
+
+ document.addEventListener('click', handleOutsideClick);
+
+ return () => {
+ document.removeEventListener('click', handleOutsideClick);
+ };
+ }, [isOpen, onClose]);
+
+ return (
+ <>
+ {isOpen && (
+ <div className="fixed w-full h-full bg-[#2E3137]/70 flex justify-center items-center">
+ <div className="rounded ring-4 ring-quaternary bg-white">
+ {children}
+ </div>
+ </div>
+ )}
+ </>
+ );
+};
+
+export default Popup;
diff --git a/src/pages/AboutPage/view/index.tsx b/src/pages/AboutPage/view/index.tsx
index 6ce3dd5e889d5d5d6bd70933986e4d2c5a9c7cab..8822d8cc961df09580f8745250e97d80c71f294d 100644
--- a/src/pages/AboutPage/view/index.tsx
+++ b/src/pages/AboutPage/view/index.tsx
@@ -6,7 +6,7 @@ import "../../../assets/styles/L2RWipeReveal/L2RWipeReveal.css"
function AboutPageView() {
return (
<div className =
- "flex flex-col flex-nowrap justify-center items-center text-tertiary text-center">
+ "flex flex-col flex-nowrap justify-center items-center text-tertiary text-center pt-14">
<title>
About Saranghaengbok
</title>
diff --git a/src/pages/AuthPage/index.tsx b/src/pages/AuthPage/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0948b2f7df6b16a79a5723adab6807106baab05a
--- /dev/null
+++ b/src/pages/AuthPage/index.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import LoginView from "./view/Login";
+import logo from '../../assets/images/logo.svg'
+import { useLocation } from "react-router-dom";
+import RegisterView from "./view/Register";
+
+const AuthPage = () => {
+ const location = useLocation();
+ var view;
+ if (location.pathname === "/login") {
+ view = (<LoginView/>)
+ } else if (location.pathname === "/register") {
+ view = (<RegisterView />)
+ }
+ return (
+ <div className="flex flex-col items-center gap-12">
+ <a href="/" className="w-[25%] my-12 ">
+ <img src={logo}
+ className="bg-primary rounded"/>
+ </a>
+ <>
+ {view}
+ </>
+ </div>
+ )
+}
+
+export default AuthPage
\ No newline at end of file
diff --git a/src/pages/AuthPage/view/Login/index.tsx b/src/pages/AuthPage/view/Login/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..77d1a4315e1c02f26874815600f86efb15766515
--- /dev/null
+++ b/src/pages/AuthPage/view/Login/index.tsx
@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import ReactDOM from "react-dom/client"
+const LoginView = () => {
+ return (
+ <div className="rounded ring-quaternary ring-1 shadow-2xl bg-white w-fit pb-4">
+ <h1
+ className="px-4 py-6 text-3xl font-bold">
+ Login
+ </h1>
+ <form className="text-black flex flex-col px-12 gap-2">
+ <label
+ htmlFor="username"
+ className="font-bold">
+ Username
+ </label>
+ <input
+ type="text"
+ id="username"
+ className="ring-1 ring-black p-1 rounded"
+ required>
+ </input>
+ <label
+ htmlFor="password"
+ className="font-bold mt-4">
+ Password
+ </label>
+ <input
+ type="password"
+ id="password"
+ className="ring-1 ring-black p-1 rounded"
+ required>
+ </input>
+ <button
+ type="submit"
+ className="bg-secondary text-white rounded-full min-h-fit h-8 mx-6 my-4">
+ Log In
+ </button>
+ <p>
+ Don't have an account? <strong><a href="/register">Register</a></strong></p>
+ </form>
+ </div>
+ )
+}
+
+export default LoginView
\ No newline at end of file
diff --git a/src/pages/AuthPage/view/Register/index.tsx b/src/pages/AuthPage/view/Register/index.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9f7aeadbe7ad92102905789430d466e22ac1505e
--- /dev/null
+++ b/src/pages/AuthPage/view/Register/index.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import ReactDOM from "react-dom"
+
+const RegisterView = () => {
+ return (
+ <div className="rounded ring-quaternary ring-1 shadow-2xl bg-white w-fit pb-4">
+ <h1
+ className="px-4 py-6 text-3xl font-bold">
+ Register
+ </h1>
+ <form className="text-black flex flex-col px-12 gap-4">
+ <label
+ htmlFor="email"
+ className="font-bold">
+ Email
+ </label>
+ <input
+ type="text"
+ id="email"
+ className="ring-1 ring-black p-1 rounded invalid:ring-red-600 invalid:ring-2"
+ required
+ pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
+ </input>
+ <label
+ htmlFor="username"
+ className="font-bold">
+ Username
+ </label>
+ <input
+ type="text"
+ id="username"
+ className="ring-1 ring-black p-1 rounded"
+ required>
+ </input>
+ <label
+ htmlFor="password"
+ className="font-bold">
+ Password
+ </label>
+ <input
+ type="password"
+ id="password"
+ className="ring-1 ring-black p-1 rounded"
+ required>
+ </input>
+ <button
+ type="submit"
+ className="bg-secondary text-white rounded-full min-h-fit h-8 mx-6 my-4">
+ Register
+ </button>
+ <p>
+ Already have an account? <strong><a href="/login">Login</a></strong>
+ </p>
+ </form>
+ </div>
+ )
+}
+
+export default RegisterView;
\ No newline at end of file