Add login page

frontend/.env

@@ -1,3 +1,3 @@
-REACT_APP_GOOGLE_REST_API_KEY={type_your_key}
-REACT_APP_NAVER_REST_API_KEY={type_your_key}
-REACT_APP_KAKAO_REST_API_KEY={type_your_key}
+REACT_APP_GOOGLE_REST_API_KEY=
+REACT_APP_NAVER_REST_API_KEY=
+REACT_APP_KAKAO_REST_API_KEY=

frontend/src/App.jsx

@@ -8,6 +8,7 @@
 import React from 'react';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Home from './pages/Home';
+import Login from './pages/Login';
 
 function App() {
   return (
@@ -16,6 +17,7 @@ function App() {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/home" element={<Home />} />
+          <Route path="/login" element={<Login />} />
         </Routes>
       </div>
     </BrowserRouter>

frontend/src/css/Home_style.css

@@ -15,109 +15,160 @@
 
 .home .div {
   background-color: #ffffff;
+  border: 1px none;
   height: 1080px;
-  width: 1920px;
   position: relative;
+  width: 1920px;
 }
 
 .home .LPVS-info {
   height: 896px;
-  width: 1273px;
-  position: absolute;
-  top: 120px;
   left: 593px;
+  position: absolute;
+  top: 140px;
+  width: 1273px;
 }
 
 .home .overlap-group {
   background-color: #000000ba;
-  height: 896px;
-  width: 1271px;
+  height: 800px;
   position: relative;
+  width: 1265px;
+  top: -10px;
 }
 
-.home .open-source-code {
+.home .user-guide {
   color: #ffffff;
   font-family: "Inter-Medium", Helvetica;
   font-size: 24px;
   font-weight: 400;
+  left: 42px;
   letter-spacing: 0;
   line-height: normal;
   position: absolute;
-  top: 35px;
-  left: 42px;
+  top: 15px;
   width: 1195px;
 }
 
-.home .text-wrapper,
-.home .span {
+.home .text-wrapper {
   font-weight: 500;
 }
 
+.home .span {
+  font-family: "Inter-Regular", Helvetica;
+}
+
 .home .LPVS-logo {
   height: 885px;
-  width: 574px;
+  left: 15px;
   position: absolute;
-  top: 139px;
-  left: 0;
+  top: 125px;
+  width: 574px;
 }
 
-.home .LPVS-remove {
+.home .LPVS-github {
   height: 407px;
-  width: 472px;
-  position: absolute;
-  top: 446px;
-  left: 0;
+  left: 30px;
   object-fit: cover;
+  position: absolute;
+  top: 400px;
+  width: 472px;
 }
 
-.home .license-pre {
+.home .license-explain {
   color: #00057b;
   font-family: "Inter-Bold", Helvetica;
   font-size: 60px;
   font-weight: 700;
+  left: 56px;
   letter-spacing: 0;
   line-height: normal;
   position: absolute;
-  top: 88px;
-  left: 56px;
+  top: 80px;
 }
 
 .home .text-wrapper-2 {
   color: #80808275;
   font-family: "Inter-Bold", Helvetica;
   font-size: 70px;
   font-weight: 700;
+  left: 56px;
   letter-spacing: 0;
   line-height: normal;
   position: absolute;
-  top: 0;
-  left: 56px;
+  top: -10px;
   white-space: nowrap;
   width: 217px;
 }
 
 .home .menubar-top {
   height: 101px;
-  width: 1842px;
+  left: 39px;
   position: absolute;
   top: 8px;
-  left: 39px;
+  width: 1842px;
 }
 
 .home .menu-line {
   background-color: #0057b8;
   height: 3px;
-  width: 1842px;
+  left: 0;
   position: absolute;
   top: 98px;
-  left: 0;
+  width: 1842px;
+}
+
+.home .menu {
+  height: 43px;
+  left: 1270px;
+  position: absolute;
+  top: 37px;
+  width: 578px;
 }
 
-.home .LPVS {
-  height: 96px;
-  width: 309px;
+.home .overlap {
+  height: 43px;
+  left: 302px;
   position: absolute;
   top: 0;
-  left: 0;
+  width: 272px;
+}
+
+.home .profile {
+  height: 43px;
+  left: 136px;
+  position: absolute;
+  top: 0;
+  width: 135px;
+}
+
+.home .overlap-group-2 {
+  background-color: #d9d9d9;
+  border-radius: 50px;
+  height: 43px;
+  position: relative;
+  width: 133px;
+}
+
+.home .image {
+  height: 31px;
+  left: 11px;
   object-fit: cover;
+  position: absolute;
+  top: 7px;
+  width: 35px;
+}
+
+.home .text-wrapper-3 {
+  color: #000000;
+  font-family: "Inter-SemiBold", Helvetica;
+  font-size: 20px;
+  font-weight: 600;
+  left: 56px;
+  letter-spacing: 0;
+  line-height: normal;
+  position: absolute;
+  top: 8px;
+  white-space: nowrap;
+  width: 71px;
 }

frontend/src/css/Login_style.css

@@ -0,0 +1,163 @@
+/**
+ * Copyright 2023 kyudori, Basaeng, hwan5180, quswjdgma83
+ *
+ * Use of this source code is governed by a MIT license that can be
+ * found in the LICENSE file.
+ */
+
+.login {
+    background-color: #ffffff;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    width: 100%;
+}
+
+.login .div {
+    background-color: #ffffff;
+    height: 1080px;
+    position: relative;
+    width: 1920px;
+}
+
+.login .SNS-login {
+    height: 500px;
+    left: 560px;
+    position: absolute;
+    top: 290px;
+    width: 800px;
+}
+
+.login .overlap {
+    background-image: url(../../public/image/svg/SNSWrapper.svg);
+    background-size: 100% 100%;
+    height: 510px;
+    left: -5px;
+    position: relative;
+    top: -1px;
+    width: 810px;
+}
+
+.login .login-header {
+    height: 58px;
+    left: 36px;
+    position: absolute;
+    top: 27px;
+    width: 752px;
+}
+
+.login .overlap-group {
+    height: 58px;
+    position: relative;
+    width: 750px;
+}
+
+.login .line {
+    height: 1px;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 57px;
+    width: 750px;
+}
+
+.login .text-wrapper {
+    color: #000000;
+    font-family: "Inter-Bold", Helvetica;
+    font-size: 40px;
+    font-weight: 700;
+    left: 10px;
+    letter-spacing: 0;
+    line-height: normal;
+    position: absolute;
+    top: 0;
+    width: 249px;
+}
+
+/* Common SNS item styling */
+.sns-item {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: absolute;
+    width: 500px; /* adjust based on content size */
+    left: 150px; /* generic left alignment */
+}
+
+.sns-item .text-wrapper-2 {
+    font-family: "Inter-Bold", Helvetica;
+    font-size: 30px;
+    font-weight: 500;  
+    margin-right: 20px; 
+}
+
+.sns-item .text-wrapper-3 {
+    font-family: "Inter-Bold", Helvetica;
+    font-size: 30px;
+    font-weight: 500;  
+    margin-right: 20px; 
+}
+
+.sns-item .text-wrapper-4 {
+    font-family: "Inter-Bold", Helvetica;
+    font-size: 30px;
+    font-weight: 500;  
+    margin-right: 20px; 
+}
+.login .google .sns-logo {
+    margin-left: -10px;
+}
+
+.sns-logo {
+    width: 366px;
+    height: 90px;
+    position: relative;
+}
+
+/* Adjust positioning for each sns item */
+.login .naver {
+    top: 125px;
+}
+
+.login .kakao {
+    top: 250px;
+}
+
+.login .google {
+    top: 375px;
+}
+
+/* Rest of your styling remains the same */
+.login .menubar-top {
+    height: 101px;
+    left: 39px;
+    position: absolute;
+    top: 8px;
+    width: 1842px;
+}
+
+.login .menu-line {
+    background-color: #0057b8;
+    height: 3px;
+    left: 0;
+    position: absolute;
+    top: 98px;
+    width: 1842px;
+}
+
+.login .menu {
+    height: 43px;
+    left: 1708px;
+    position: absolute;
+    top: 37px;
+    width: 133px;
+}
+
+.login .LPVS {
+    height: 96px;
+    left: 0;
+    object-fit: cover;
+    position: absolute;
+    top: 0;
+    width: 222px;
+}