Merge pull request #4 from Gachon-Univ-Creative-Code-Innovation/feat/GUC-45-login-page

로그인 페이지 디자인 및 구현

Author: KyeongJooni

package-lock.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "prop-types": "^15.8.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.4.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",

package.json

@@ -1,12 +1,17 @@
 import React from "react";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import MainPageBefore from "./components/MainPageLoginBefore/MainPageLoginBefore";
+import Login from "./components/Login/Login";
 
 const router = createBrowserRouter([
   {
     path: "/*",
     element: <MainPageBefore />,
   },
+  {
+    path: "/login",
+    element: <Login />,
+  },
 ]);
 
 export const App = () => {

public/img/kakaotalk-sharing-btn-medium-ov-1.png

@@ -0,0 +1,38 @@
+import PropTypes from "prop-types";
+import React from "react";
+
+export const Checked = ({ color = "#D9D9D9", className }) => {
+  return (
+    <svg
+      className={`property-1-unchecked ${className}`}
+      fill="none"
+      height="22"
+      viewBox="0 0 22 22"
+      width="22"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        className="path"
+        d="M1 1H21V21H1V1Z"
+        stroke="black"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+
+      <path
+        className="path"
+        d="M5.5 11L9.09988 15.3999C9.53822 15.9356 10.3752 15.8747 10.7313 15.2811L16 6.5"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+};
+
+Checked.propTypes = {
+  color: PropTypes.string,
+};
+
+export default Checked;

public/img/vector-2.svg

@@ -0,0 +1,73 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import Checked from "../Checked/Checked";
+import "./Loginstyle.css";
+
+export const Login = () => {
+  return (
+    <div className="login">
+      <div className="div-3">
+        <div className="overlap-13">
+          <button className="login-button">
+            <div className="LOGIN">LOGIN</div>
+          </button>
+        </div>
+
+        <div className="overlap-14">
+          <div className="menu">
+            <div className="overlap-group-6">
+              <div className="sign-up">
+                <div className="text-wrapper-37">Sign up</div>
+              </div>
+
+              <div className="forgot-username">
+                <div className="text-wrapper-37">Forgot username?</div>
+              </div>
+
+              <div className="forgot-password">
+                <div className="text-wrapper-37">Forgot password?</div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="overlap-15">
+          <div className="overlap-16">
+            <div className="id">
+              <div className="text-wrapper-38">id</div>
+            </div>
+
+            <div className="password">
+              <div className="text-wrapper-38">password</div>
+            </div>
+
+            <Checked className="component" color="#D9D9D9" />
+          </div>
+
+          <div className="text-wrapper-39">Keep me logged in</div>
+        </div>
+
+        <div className="overlap-17">
+          <Link to="/MainPageLoginBefore">
+            <img className="vector" alt="Vector" src="/img/vector-2.svg" />
+          </Link>
+        </div>
+        <div className="overlap-18">
+          <img
+            className="kakaotalk-sharing"
+            alt="Kakaotalk sharing"
+            src="/img/kakaotalk-sharing-btn-medium-ov-1.png"
+          />
+
+          <img
+            className="web-light-rd-na"
+            alt="Web light rd na"
+            src="/img/web-light-rd-na-2x-1.png"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Login;