[신규][회원] 로그인 및 회원가입 기초 UI 작성

booking-beacon/package.json

@@ -3,12 +3,18 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/material": "^5.15.20",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.25.1",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.12",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

booking-beacon/src/App.css

@@ -1,3 +1,8 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
 .App {
   text-align: center;
 }
@@ -36,3 +41,8 @@
     transform: rotate(360deg);
   }
 }
+
+.header {
+  height: 120px;
+  border-bottom: 1px solid #dddddd;
+}

booking-beacon/src/App.js

@@ -1,10 +1,24 @@
 import logo from "./logo.svg";
+import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./App.css";
+import Signin from "./pages/Signin/Signin";
+import Signup from "./pages/Signup/Signup";
+import NotFound from "./pages/NotFound/NotFound";
 
 function App() {
   return (
     <div className="App">
-      <div>HI HYUKJIN</div>
+      <BrowserRouter>
+        <header className="header">
+          <div></div>
+        </header>
+        <Routes>
+          <Route path="/" element={<div />}></Route>
+          <Route path="/Signin" element={<Signin />}></Route>
+          <Route path="/Signup" element={<Signup />}></Route>
+          <Route path="*" element={<NotFound />}></Route>
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

booking-beacon/src/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />

booking-beacon/src/pages/NotFound/NotFound.jsx

@@ -0,0 +1,9 @@
+function NotFound() {
+  return (
+    <div className="signin-container">
+      <div>404 ERROR</div>
+    </div>
+  );
+}
+
+export default NotFound;

booking-beacon/src/pages/Signin/Signin.css

@@ -0,0 +1,9 @@
+.selected-type {
+  color: #100538;
+  border-bottom: 3px solid #100538;
+}
+
+.non-selected-type {
+  color: #777777;
+  border-bottom: 3px solid white;
+}

booking-beacon/src/pages/Signin/Signin.jsx

@@ -0,0 +1,82 @@
+import { useState } from "react";
+import {
+  SigninContainer,
+  SigninFormContainer,
+  SigninInputContainer,
+  SigninInput,
+  SigninInputWrapper,
+  SigninButton,
+  SigninTypeContainer,
+  TypeTab,
+} from "./SigninStyle";
+import "./Signin.css";
+import { Link } from "react-router-dom";
+
+function Signin() {
+  const [userType, setUserType] = useState("A");
+  const [userId, setUserId] = useState("");
+  const [password, setPassword] = useState("");
+
+  const setUser = () => {
+    setUserType("A");
+  };
+
+  const setPartner = () => {
+    setUserType("B");
+  };
+
+  const handleUserIdInput = (event) => {
+    setUserId(event.target.value);
+  };
+
+  const handlePasswordInput = (event) => {
+    setPassword(event.target.value);
+  };
+
+  const onclickSigninButton = () => {
+    console.log(userType, userId, password);
+  };
+
+  return (
+    <SigninContainer>
+      <div className="DD">로그인 화면입니다</div>
+      <SigninTypeContainer>
+        <TypeTab
+          className={userType == "A" ? "selected-type" : "non-selected-type"}
+          onClick={setUser}
+        >
+          기본회원
+        </TypeTab>
+        <TypeTab
+          className={userType == "B" ? "selected-type" : "non-selected-type"}
+          onClick={setPartner}
+        >
+          파트너회원
+        </TypeTab>
+      </SigninTypeContainer>
+      <SigninFormContainer>
+        <SigninInputContainer>
+          <SigninInputWrapper className="signin-input-wrapper">
+            <SigninInput
+              value={userId}
+              onChange={handleUserIdInput}
+              placeholder="아이디"
+            ></SigninInput>
+          </SigninInputWrapper>
+          <SigninInputWrapper className="signin-input-wrapper">
+            <SigninInput
+              value={password}
+              onChange={handlePasswordInput}
+              placeholder="비밀번호"
+              type="password"
+            ></SigninInput>
+          </SigninInputWrapper>
+        </SigninInputContainer>
+        <SigninButton onClick={onclickSigninButton}>로그인</SigninButton>
+      </SigninFormContainer>
+      <Link to={"/signup"}>회원가입</Link>
+    </SigninContainer>
+  );
+}
+
+export default Signin;

booking-beacon/src/pages/Signin/SigninStyle.jsx

@@ -0,0 +1,72 @@
+import styled from "styled-components";
+
+export const SigninContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  margin-top: 100px;
+`;
+
+export const SigninFormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 600px;
+  height: 400px;
+`;
+
+export const SigninInputContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const SigninInputWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  border: 1px solid #a9a9a9;
+  border-radius: 0;
+  padding: 6px 15px;
+`;
+
+export const SigninInput = styled.input`
+  width: 100%;
+  border: none;
+  outline: none;
+
+  &:focus {
+    outline: none;
+    border: none;
+  }
+
+  &:focus ~ .signin-input-wrapper {
+    border: 1px solid #000000;
+  }
+`;
+
+export const SigninButton = styled.button`
+  width: 100%;
+  height: 40px;
+  font-size: 14px;
+  font-weight: 900;
+  background-color: #03062b;
+  color: white;
+  border: none;
+  border-radius: 10px;
+  cursor: pointer;
+`;
+
+export const SigninTypeContainer = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin: 16px 0 16px 0;
+`;
+
+export const TypeTab = styled.div`
+  padding: 6px 14px;
+  font-weight: 800;
+  cursor: pointer;
+`;

booking-beacon/src/pages/Signup/Signup.css

@@ -0,0 +1,39 @@
+.signup-form-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.selected-type {
+  color: #100538;
+  border-bottom: 3px solid #100538;
+}
+
+.non-selected-type {
+  color: #777777;
+  border-bottom: 3px solid white;
+}
+
+.show-form {
+  display: block;
+}
+
+.hide-form {
+  display: none;
+}
+
+p {
+  margin: 0;
+  margin-bottom: 4px;
+  display: flex;
+  align-items: center;
+}
+
+.password-check {
+  font-size: 10px;
+  color: grey;
+}
+
+.full-width-input {
+  width: 432px;
+}