From ca676fbe8acf20b6ab37a7d89b8630004cd32578 Mon Sep 17 00:00:00 2001
From: Xena123kiki <ckdnwls1215@snu.ac.kr>
Date: Sat, 27 Nov 2021 13:52:48 +0900
Subject: [PATCH] #141 feature/css (#141)

* fix: setting

* fix: test errors

* fix: updated secrets

* fix: mypage, myreportedlogs page, myreportinglogs page axios code

* fix: apology api get axios

* fix: frontend test code upgrade

* fix: search page css and others

* fix: api key

* fix: front test upgrade

* fix: css searchpage reportauth page

* fix: testing enhancement

* fix: front src test 50 to 60

* fix: test error solve

* fix: frontend test error

* fix: report auth page css

* fix: login page css

* fix: signup and change password css

* fix: finduserinfo css

* fix: report action css(not done)
---
 .../ChangePassword/ChangePassword.css         | 116 +++++
 .../ChangePassword/ChangePassword.js          | 146 +++---
 .../Component/FindUserInfo/FindUserInfo.css   | 129 +++++
 .../Component/FindUserInfo/FindUserInfo.js    |  19 +-
 .../Component/ReportAction/ReportAction.css   | 482 ++++++++++--------
 .../Component/ReportAction/ReportAction.js    |   6 +
 .../ReportAction/ReportAction.test.js         |   7 -
 .../src/Component/ReportAuth/ReportAuth.css   | 130 +++--
 .../src/Component/ReportAuth/ReportAuth.js    |   6 +-
 .../Component/ReportAuth/ReportAuth.test.js   |   5 +-
 .../gaejosim/src/Component/Signup/Signup.css  | 147 ++++++
 .../gaejosim/src/Component/Signup/Signup.js   | 227 +++++----
 .../gaejosim/src/Container/Login/Login.css    | 125 +++++
 .../gaejosim/src/Container/Login/Login.js     | 132 ++---
 14 files changed, 1193 insertions(+), 484 deletions(-)
 create mode 100644 frontend/gaejosim/src/Component/ChangePassword/ChangePassword.css
 create mode 100644 frontend/gaejosim/src/Component/FindUserInfo/FindUserInfo.css
 create mode 100644 frontend/gaejosim/src/Component/Signup/Signup.css
 create mode 100644 frontend/gaejosim/src/Container/Login/Login.css

diff --git a/frontend/gaejosim/src/Component/ChangePassword/ChangePassword.css b/frontend/gaejosim/src/Component/ChangePassword/ChangePassword.css
new file mode 100644
index 0000000..2e5ca7d
--- /dev/null
+++ b/frontend/gaejosim/src/Component/ChangePassword/ChangePassword.css
@@ -0,0 +1,116 @@
+.ChangePWTitle {
+  position: absolute;
+  /* width: 67px; */
+  /* height: 36px; */
+  left: 35.4%;
+  top: 30.6%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 25px;
+  line-height: 36px;
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.ChangePW_inputField1 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 36.5%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.ChangePW_inputField2 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 43.9%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.ChangePW_inputField3 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 51.3%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.ChangePW_Login_text {
+  position: absolute;
+  /* width: 53px; */
+  /* height: 22px; */
+  left: 35.4%;
+  top: 59%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.ChangePW_Finduserinfo_text {
+  position: absolute;
+  /* width: 53px; */
+  /* height: 22px; */
+  right: 34.5%;
+  top: 59%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.ChangePWButton {
+  position: absolute;
+  width: 120px;
+  height: 39.81px;
+  left: 50%;
+  transform: translateX(-50%);
+  /* left: 45.8%; */
+  top: 78%;
+  background: #fc0174;
+  border-radius: 40px;
+  color: white;
+  font-weight: bold;
+
+  outline: 0;
+  border: 0;
+}
diff --git a/frontend/gaejosim/src/Component/ChangePassword/ChangePassword.js b/frontend/gaejosim/src/Component/ChangePassword/ChangePassword.js
index 0eb87c0..3c99e65 100644
--- a/frontend/gaejosim/src/Component/ChangePassword/ChangePassword.js
+++ b/frontend/gaejosim/src/Component/ChangePassword/ChangePassword.js
@@ -1,78 +1,96 @@
 import React, { Component } from "react";
 // import { connect } from 'react-redux';
-import { NavLink, withRouter } from 'react-router-dom'
-import axios from 'axios';
+import { NavLink, withRouter } from "react-router-dom";
+import axios from "axios";
+
+import "./ChangePassword.css";
 
 // TODO: post 요청을 put으로 back에서 바꾸면 axios 코드 변경
 
 class ChangePassword extends Component {
-    state = {
-        oldPW : '',
-        newPW : '', 
-        newPWConfirm : '',
-    }
+  state = {
+    oldPW: "",
+    newPW: "",
+    newPWConfirm: "",
+  };
 
-    putChangePWData = async () => {
-        console.log("postchangePWData")
+  putChangePWData = async () => {
+    console.log("postchangePWData");
 
-        axios.defaults.xsrfCookieName = 'csrftoken';
-        axios.defaults.xsrfHeaderName = 'X-CSRFToken';
+    axios.defaults.xsrfCookieName = "csrftoken";
+    axios.defaults.xsrfHeaderName = "X-CSRFToken";
 
-        axios.get('/api/token/').then()
-       
-        const response = await axios.post('/api/change/password/', {
-            "old_password" : this.state.oldPW,
-            "new_password" : this.state.newPW,
-            "password_confirm" : this.state.newPWConfirm,
-        })
-        .then((response) => {
-            alert(response.data.message)
-            this.props.history.push('/login')
-        })
-        .catch((error) => {
-            alert(error.response.data.error)
-            if(error.response.status === 401) this.props.history.push('/login')
-        })
-    }
+    axios.get("/api/token/").then();
 
-    // TODO: password confirm을 back에서 수행하므로 해당 if 문 삭제 필요?
-    onClickChangePWButton = () => {
-        if(!this.state.oldPW || !this.state.newPW || !this.state.newPWConfirm){
-            alert('모든 필드 값을 다 입력해주셔야 비밀번호를 변경할 수 있습니다.')
-            return
-        }
-        else {
-            this.putChangePWData()
-        }
-    }
+    const response = await axios
+      .post("/api/change/password/", {
+        old_password: this.state.oldPW,
+        new_password: this.state.newPW,
+        password_confirm: this.state.newPWConfirm,
+      })
+      .then((response) => {
+        alert(response.data.message);
+        this.props.history.push("/login");
+      })
+      .catch((error) => {
+        alert(error.response.data.error);
+        if (error.response.status === 401) this.props.history.push("/login");
+      });
+  };
 
-    render() {
-        return (
-            <div className = 'ChangePW'> 
-                <NavLink exact to = '/login'>로그인</NavLink>
-                <NavLink exact to = '/finduserinfo'>아이디 비밀번호 찾기</NavLink>
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '기존 비밀번호'
-                    onChange={(event) => this.setState({ oldPW : event.target.value })} />
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '신규 비밀번호'
-                    onChange={(event) => this.setState({ newPW : event.target.value })} />
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '신규 비밀번호 확인'
-                    onChange={(event) => this.setState({ newPWConfirm : event.target.value })} />
-                <button className = 'ChangePWButton'
-                onClick={() => this.onClickChangePWButton()}>
-                비밀번호 변경하기
-                </button>
-            </div>
-        )
+  // TODO: password confirm을 back에서 수행하므로 해당 if 문 삭제 필요?
+  onClickChangePWButton = () => {
+    if (!this.state.oldPW || !this.state.newPW || !this.state.newPWConfirm) {
+      alert("모든 필드 값을 다 입력해주셔야 비밀번호를 변경할 수 있습니다.");
+      return;
+    } else {
+      this.putChangePWData();
     }
+  };
+
+  render() {
+    return (
+      <div className="ChangePW">
+        <text className="ChangePWTitle">비밀번호 변경</text>
+        <NavLink exact to="/login">
+          {/* 로그인 */}
+          <text className="ChangePW_Login_text">로그인</text>
+        </NavLink>
+        <NavLink exact to="/finduserinfo">
+          <text className="ChangePW_Finduserinfo_text">
+            아이디 비밀번호 찾기
+          </text>
+          {/* 아이디 비밀번호 찾기 */}
+        </NavLink>
+        <input
+          className="ChangePW_inputField1"
+          type="string"
+          placeholder="기존 비밀번호"
+          onChange={(event) => this.setState({ oldPW: event.target.value })}
+        />
+        <input
+          className="ChangePW_inputField2"
+          type="string"
+          placeholder="신규 비밀번호"
+          onChange={(event) => this.setState({ newPW: event.target.value })}
+        />
+        <input
+          className="ChangePW_inputField3"
+          type="string"
+          placeholder="신규 비밀번호 확인"
+          onChange={(event) =>
+            this.setState({ newPWConfirm: event.target.value })
+          }
+        />
+        <button
+          className="ChangePWButton"
+          onClick={() => this.onClickChangePWButton()}
+        >
+          비밀번호 변경하기
+        </button>
+      </div>
+    );
+  }
 }
 
-export default ChangePassword;
\ No newline at end of file
+export default ChangePassword;
diff --git a/frontend/gaejosim/src/Component/FindUserInfo/FindUserInfo.css b/frontend/gaejosim/src/Component/FindUserInfo/FindUserInfo.css
new file mode 100644
index 0000000..c80de1f
--- /dev/null
+++ b/frontend/gaejosim/src/Component/FindUserInfo/FindUserInfo.css
@@ -0,0 +1,129 @@
+.FindIDTitle {
+  position: absolute;
+  /* width: 67px; */
+  /* height: 36px; */
+  left: 35.4%;
+  top: 34.5%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 25px;
+  line-height: 36px;
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.FindIDTitle {
+  position: absolute;
+  /* width: 67px; */
+  /* height: 36px; */
+  left: 17.4%;
+  top: 34.5%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 25px;
+  line-height: 36px;
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.FindPWTitle {
+  position: absolute;
+  /* width: 67px; */
+  /* height: 36px; */
+  left: 52%;
+  top: 34.5%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 25px;
+  line-height: 36px;
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.FindID_inputField {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 17.4%;
+  top: 40.4%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.FindPW_inputField1 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 52%;
+  top: 40.4%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.FindPW_inputField2 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 52%;
+  top: 47.8%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.FindIDButton {
+  position: absolute;
+  width: 120px;
+  height: 39.81px;
+  /* right: 75%;
+  transform: translateX(125%); */
+  left: 28.5%;
+  top: 78%;
+  background: #fc0174;
+  border-radius: 40px;
+  color: white;
+  font-weight: bold;
+
+  outline: 0;
+  border: 0;
+}
+
+.FindPWButton {
+  position: absolute;
+  width: 120px;
+  height: 39.81px;
+  /* left: 75%;
+  transform: translateX(-125%); */
+  left: 63.2%;
+  top: 78%;
+  background: #fc0174;
+  border-radius: 40px;
+  color: white;
+  font-weight: bold;
+
+  outline: 0;
+  border: 0;
+}
diff --git a/frontend/gaejosim/src/Component/FindUserInfo/FindUserInfo.js b/frontend/gaejosim/src/Component/FindUserInfo/FindUserInfo.js
index ddb6278..6b380ca 100644
--- a/frontend/gaejosim/src/Component/FindUserInfo/FindUserInfo.js
+++ b/frontend/gaejosim/src/Component/FindUserInfo/FindUserInfo.js
@@ -5,6 +5,9 @@ import React, { Component } from "react";
 import { NavLink, withRouter } from "react-router-dom";
 import axios from "axios";
 
+import "./FindUserInfo.css";
+
+
 class FindUserInfo extends Component {
   state = {
     emailForID: "",
@@ -88,9 +91,11 @@ class FindUserInfo extends Component {
           비밀번호 변경
         </NavLink>
         <div className="FindID">
-          <label>아이디 찾기</label>
+
+          <label className="FindIDTitle">아이디 찾기</label>
           <input
-            className="inputField"
+            className="FindID_inputField"
+
             type="string"
             placeholder="이메일"
             onChange={(event) =>
@@ -105,9 +110,11 @@ class FindUserInfo extends Component {
           </button>
         </div>
         <div className="FindPW">
-          <label>비밀번호 찾기</label>
+
+          <label className="FindPWTitle">비밀번호 찾기</label>
           <input
-            className="inputField"
+            className="FindPW_inputField1"
+
             type="string"
             placeholder="이메일"
             onChange={(event) =>
@@ -115,7 +122,9 @@ class FindUserInfo extends Component {
             }
           />
           <input
-            className="inputField"
+
+            className="FindPW_inputField2"
+
             type="string"
             placeholder="아이디"
             onChange={(event) => this.setState({ IDforPW: event.target.value })}
diff --git a/frontend/gaejosim/src/Component/ReportAction/ReportAction.css b/frontend/gaejosim/src/Component/ReportAction/ReportAction.css
index d749741..ec4f165 100644
--- a/frontend/gaejosim/src/Component/ReportAction/ReportAction.css
+++ b/frontend/gaejosim/src/Component/ReportAction/ReportAction.css
@@ -8,217 +8,275 @@
     bottom: 1227px;
 } */
 
-.ReportAction{
-    background-color: aquamarine;
+.LeftBarStyle1 {
+  position: absolute;
+  width: 14.6%;
+  height: 8px;
+  left: 34.7%;
+  top: 30.3%;
+  background: #fc0174;
+  border-radius: 40px;
 }
 
-.Box1{
-    position: absolute;
-    height: 240px;
-    width: 840px;
-    left: 300px;
-    right: 300px;
-    border-radius: 32px;
-    top: 278px;
-    bottom: 1227px;
-    background-color: #FFFFFF;
-}
-.Box1 #MannerPoint{
-    position : absolute;
-    height: 50px;
-    width: 1000px;
-    top: 20px;
-    left: 54px;
-    right: 863px;
-    bottom: 1510px;
-
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 50px;
-    letter-spacing: 0px;
-    text-align: left;
-}
-
-.Box1 #MannerPointDescription{
-    position : absolute;
-    height: 50px;
-    width: 1000px;
-    top: 425px;
-    left: 380px;
-    right: 863px;
-    bottom: 1510px;
-
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 50px;
-    letter-spacing: 0px;
-    text-align: left;
-}
-
-.Box1 #MannerPointInput{
-    position : absolute;
-    height: 80px;
-    width: 691px;
-    left: 74px;
-    top: 88px;
-    border-radius: 16px;
-    outline:0;
-    border:0;
-    background-color: #EFF0F7;
-
-    font-size: 20px;
-    font-weight: 700;
-}
-
-.Box2{
-    position: absolute;
-    height: 240px;
-    width: 840px;
-    border-radius: 32px;
-    left: 300px;
-    right: 300px;
-    top: 577px;
-    bottom: 688px;
-    background-color: #FFFFFF;
-}
-
-.Box2 #Tag{
-    position : absolute;
-    height: 50px;
-    width: 1000px;
-    top: 20px;
-    left: 54px;
-    right: 863px;
-    bottom: 1510px;
-
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 50px;
-    letter-spacing: 0px;
-    text-align: left;
-}
-.Box2 .tags{
-    position : absolute;
-    height: 120px;
-    width: 750px;
-    top: 80px;
-    left: 54px;
-    right: 863px;
-    bottom: 1510px;
-
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 50px;
-    letter-spacing: 0px;
-    text-align: left;
-}
-
-.Box2 #button{
-    position : relative;
-    height: 44px;
-    width: 140px;
-    left: 10px;
-    right: 10px;
-    top: 0px;
-    border-radius: 16px;
-    background-color: #5F2EEA;
-    outline:0;
-    border:0;
-    padding: 3px;
-    margin-left:6px;
-
-    font-size: 14px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 28px;
-    letter-spacing: 0.75px;
-    text-align: center;
-    color: #FFFFFF;
-}
-
-.Box3{
-    position: absolute;
-    height: 240px;
-    width: 840px;
-    border-radius: 32px;
-    left: 300px;
-    right: 300px;
-    top: 876px;
-    bottom: 149px;
-    background-color: #FFFFFF;
-}
-
-.Box3 #Comment{
-    position : absolute;
-    height: 50px;
-    width: 1000px;
-    top: 20px;
-    left: 54px;
-    right: 863px;
-    bottom: 1510px;
-
-    font-size: 20px;
-    font-style: normal;
-    font-weight: 700;
-    line-height: 50px;
-    letter-spacing: 0px;
-    text-align: left;
-}
-
-.Box3 #CommentInput{
-    position : absolute;
-    height: 80px;
-    width: 691px;
-    left: 74px;
-    top: 88px;
-    border-radius: 16px;
-    outline:0;
-    border:0;
-    background-color: #EFF0F7;
-
-}
-
-#submit{
-    position: absolute;
-    height: 38.4px;
-    width: 108px;
-    left: 596px;
-    top: 1150px;
-    border-radius: 16px;
-    background-color: #5F2EEA;
-    outline:0;
-    border:0;
-
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 28px;
-    letter-spacing: 0.75px;
-    text-align: center;
-    color: #FFFFFF;
-
-}
-
-#cancel{
-    position: absolute;
-    height: 38.4px;
-    width: 108px;
-    left: 740px;
-    top: 1150px;
-    border-radius: 16px;
-    background-color: #5F2EEA;
-    outline:0;
-    border:0;
-
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 600;
-    line-height: 28px;
-    letter-spacing: 0.75px;
-    text-align: center;
-    color: #FFFFFF;
-}
\ No newline at end of file
+.RightBarStyle1 {
+  position: absolute;
+  width: 14.6%;
+  height: 8px;
+  left: 50.1%;
+  top: 30.3%;
+  background: #767676;
+  border-radius: 40px;
+}
+
+.LeftBarText1 {
+  position: absolute;
+  /* width: 14.6%; */
+  /* height: 8px; */
+  left: 46%;
+  top: 27%;
+  /* background: #fc0174; */
+  /* border-radius: 40px; */
+
+  /* font-family: Poppins; */
+  font-style: normal;
+  font-weight: normal;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.RightBarText1 {
+  position: absolute;
+  /* width: 14.6%; */
+  /* height: 8px; */
+  left: 61.2%;
+  top: 27%;
+  /* background: #fc0174; */
+  /* border-radius: 40px; */
+
+  /* font-family: Poppins; */
+  font-style: normal;
+  font-weight: normal;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.ReportAction {
+  background-color: aquamarine;
+}
+
+.Box1 {
+  position: absolute;
+  height: 240px;
+  width: 840px;
+  left: 300px;
+  right: 300px;
+  border-radius: 32px;
+  top: 278px;
+  bottom: 1227px;
+  background-color: #ffffff;
+}
+.Box1 #MannerPoint {
+  position: absolute;
+  height: 50px;
+  width: 1000px;
+  top: 20px;
+  left: 54px;
+  right: 863px;
+  bottom: 1510px;
+
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 50px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+.Box1 #MannerPointDescription {
+  position: absolute;
+  height: 50px;
+  width: 1000px;
+  top: 425px;
+  left: 380px;
+  right: 863px;
+  bottom: 1510px;
+
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 50px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+.Box1 #MannerPointInput {
+  position: absolute;
+  height: 80px;
+  width: 691px;
+  left: 74px;
+  top: 88px;
+  border-radius: 16px;
+  outline: 0;
+  border: 0;
+  background-color: #eff0f7;
+
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.Box2 {
+  position: absolute;
+  height: 240px;
+  width: 840px;
+  border-radius: 32px;
+  left: 300px;
+  right: 300px;
+  top: 577px;
+  bottom: 688px;
+  background-color: #ffffff;
+}
+
+.Box2 #Tag {
+  position: absolute;
+  height: 50px;
+  width: 1000px;
+  top: 20px;
+  left: 54px;
+  right: 863px;
+  bottom: 1510px;
+
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 50px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+.Box2 .tags {
+  position: absolute;
+  height: 120px;
+  width: 750px;
+  top: 80px;
+  left: 54px;
+  right: 863px;
+  bottom: 1510px;
+
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 50px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+.Box2 #button {
+  position: relative;
+  height: 44px;
+  width: 140px;
+  left: 10px;
+  right: 10px;
+  top: 0px;
+  border-radius: 16px;
+  background-color: #5f2eea;
+  outline: 0;
+  border: 0;
+  padding: 3px;
+  margin-left: 6px;
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 28px;
+  letter-spacing: 0.75px;
+  text-align: center;
+  color: #ffffff;
+}
+
+.Box3 {
+  position: absolute;
+  height: 240px;
+  width: 840px;
+  border-radius: 32px;
+  left: 300px;
+  right: 300px;
+  top: 876px;
+  bottom: 149px;
+  background-color: #ffffff;
+}
+
+.Box3 #Comment {
+  position: absolute;
+  height: 50px;
+  width: 1000px;
+  top: 20px;
+  left: 54px;
+  right: 863px;
+  bottom: 1510px;
+
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 50px;
+  letter-spacing: 0px;
+  text-align: left;
+}
+
+.Box3 #CommentInput {
+  position: absolute;
+  height: 80px;
+  width: 691px;
+  left: 74px;
+  top: 88px;
+  border-radius: 16px;
+  outline: 0;
+  border: 0;
+  background-color: #eff0f7;
+}
+
+.submitButton {
+  position: absolute;
+  width: 120px;
+  height: 39.81px;
+  left: 50%;
+  transform: translateX(-50%);
+  /* left: 45.8%; */
+  top: 78%;
+  background: #fc0174;
+  border-radius: 40px;
+  color: white;
+  font-weight: bold;
+
+  outline: 0;
+  border: 0;
+}
+
+.cancelButton {
+  position: absolute;
+  width: 120px;
+  height: 39.81px;
+  left: 50%;
+  transform: translateX(-50%);
+  /* left: 45.8%; */
+  top: 78%;
+  background: #fc0174;
+  border-radius: 40px;
+  color: white;
+  font-weight: bold;
+
+  outline: 0;
+  border: 0;
+}
diff --git a/frontend/gaejosim/src/Component/ReportAction/ReportAction.js b/frontend/gaejosim/src/Component/ReportAction/ReportAction.js
index cd2db15..de7fdbf 100644
--- a/frontend/gaejosim/src/Component/ReportAction/ReportAction.js
+++ b/frontend/gaejosim/src/Component/ReportAction/ReportAction.js
@@ -166,6 +166,12 @@ class ReportAction extends Component {
     return (
       <div className="ReportAction">
         {redirect}
+
+        <div className="LeftBarStyle1" />
+        <div className="RightBarStyle1" />
+        <text className="LeftBarText1">step1</text>
+        <text className="RightBarText1">step2</text>
+
         <div className="Box1">
           <h3 id="MannerPoint">매너포인트</h3>
           <Box id="MannerPointInput" sx={{ width: 700 }}>
diff --git a/frontend/gaejosim/src/Component/ReportAction/ReportAction.test.js b/frontend/gaejosim/src/Component/ReportAction/ReportAction.test.js
index eada813..02929b8 100644
--- a/frontend/gaejosim/src/Component/ReportAction/ReportAction.test.js
+++ b/frontend/gaejosim/src/Component/ReportAction/ReportAction.test.js
@@ -20,7 +20,6 @@ describe("<ReportAction />", () => {
   });
 
   xit("should handle tag1_1", () => {
-
     const mockClickTag1_1 = jest.fn();
     const component = shallow(
       // <Router>
@@ -130,12 +129,6 @@ describe("<ReportAction />", () => {
     expect(wrapper).toBeDefined();
   });
 
-  it("should change clickTag1_1 state", () => {
-    const component = shallow(<ReportAction />);
-    component.setState({ clickTag1_1: true });
-    expect(component.length).toBe(1);
-  });
-
   it("router search page", () => {
     const history = createMemoryHistory({ initialEntries: ["/"] });
     const { getAllByText } = render(
diff --git a/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.css b/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.css
index 2cce87b..54c3c86 100644
--- a/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.css
+++ b/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.css
@@ -26,27 +26,80 @@ height: 36px; */
   color: #ffffff;
 }
 
-/* .boxStyle {
-  width: 840px;
-  height: 360px;
-  background: #f8f8f8;
-  border-radius: 32px;
+.LeftBarStyle1 {
   position: absolute;
-  left: 20.83%;
-  right: 20.83%;
-  top: 200px;
-  filter: drop-shadow(0px 8px 16px rgba(17, 17, 17, 0.04));
-} */
+  width: 14.6%;
+  height: 8px;
+  left: 34.7%;
+  top: 30.3%;
+  background: #fc0174;
+  border-radius: 40px;
+}
+
+.RightBarStyle1 {
+  position: absolute;
+  width: 14.6%;
+  height: 8px;
+  left: 50.1%;
+  top: 30.3%;
+  background: #767676;
+  border-radius: 40px;
+}
+
+.LeftBarText1 {
+  position: absolute;
+  /* width: 14.6%; */
+  /* height: 8px; */
+  left: 46%;
+  top: 27%;
+  /* background: #fc0174; */
+  /* border-radius: 40px; */
+
+  /* font-family: Poppins; */
+  font-style: normal;
+  font-weight: normal;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.RightBarText1 {
+  position: absolute;
+  /* width: 14.6%; */
+  /* height: 8px; */
+  left: 61.2%;
+  top: 27%;
+  /* background: #fc0174; */
+  /* border-radius: 40px; */
+
+  /* font-family: Poppins; */
+  font-style: normal;
+  font-weight: normal;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
 
 .reportSummoner {
   position: relative;
   width: 30.6%;
-  height: 6%;
+  /* height: 6%; */
   left: 34.7%;
+  /* height: 100px; */
   /* top: 45.9%; */
-  /* margin-top: 10px;  */
-  /* bottom: 45.9%; */
-  /* top: 50%; */
+  top: 350px;
 
   background: #ffffff;
   border: 1px solid #fc0174;
@@ -57,32 +110,47 @@ height: 36px; */
 .authStyle {
   position: absolute;
   width: 120px;
-  height: 38.4px;
-  background: #76747c;
+  height: 20px;
+  left: 63%;
+  transform: translateX(-50%);
+  top: 56%;
+  background: transparent;
   border-radius: 40px;
-  color: #ffffff;
-  bottom: 800px;
-  left: 810px;
+  color: white;
+  font-weight: bold;
+
+  outline: 0;
+  border: 0;
 }
 
-.buttonStyle {
+.buttonAuthStyle {
   position: absolute;
   width: 120px;
-  height: 38.4px;
-  background: #5f2eea;
+  height: 20px;
+  left: 63%;
+  transform: translateX(-50%);
+  top: 56%;
+  background: transparent;
   border-radius: 40px;
-  color: #ffffff;
-  bottom: 800px;
-  left: 950px;
+  color: white;
+  font-weight: bold;
+
+  outline: 0;
+  border: 0;
 }
 
-.buttonAuthStyle {
+.buttonStyle {
   position: absolute;
   width: 120px;
-  height: 38.4px;
-  background: #5f2eea;
+  height: 39.81px;
+  left: 50%;
+  transform: translateX(-50%);
+  top: 78%;
+  background: #fc0174;
   border-radius: 40px;
-  color: #ffffff;
-  bottom: 800px;
-  left: 810px;
+  color: white;
+  font-weight: bold;
+
+  outline: 0;
+  border: 0;
 }
diff --git a/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.js b/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.js
index 56b1c26..93a541b 100644
--- a/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.js
+++ b/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.js
@@ -106,7 +106,11 @@ class ReportAuth extends Component {
     return (
       <div className="ReportAuth">
         {/* <text className='titleTextStyle'>Report</text> */}
-        {/* <div className='boxStyle' /> */}
+        <div className="LeftBarStyle1" />
+        <div className="RightBarStyle1" />
+        <text className="LeftBarText1">step1</text>
+        <text className="RightBarText1">step2</text>
+
         <div className="subtitleTextStyle">트롤을 골라주세요</div>
 
         <Select
diff --git a/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.test.js b/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.test.js
index 28cfea1..1ab53f3 100644
--- a/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.test.js
+++ b/frontend/gaejosim/src/Component/ReportAuth/ReportAuth.test.js
@@ -1,6 +1,5 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-
 // import { Router } from "react-router-dom";
 import { BrowserRouter as Router } from "react-router-dom";
 // import { createMemoryHistory } from "history";
@@ -9,7 +8,6 @@ import { shallow, mount } from "enzyme";
 import ReportAuth from "./ReportAuth";
 // import ReportActionPage from "../../Page/ReportActionPage";
 
-
 describe("<ReportAuth />", () => {
   it("should render without errors", () => {
     const component = shallow(<ReportAuth />);
@@ -26,7 +24,6 @@ describe("<ReportAuth />", () => {
     expect(wrapper.exists()).toEqual(true);
   });
 
-
   xit("should handle NextButton", () => {
     const mockNext = jest.fn();
     const component = shallow(<ReportAuth clickDone={mockNext} />);
@@ -34,6 +31,7 @@ describe("<ReportAuth />", () => {
     wrapper.simulate("change");
     expect(mockNext).toHaveBeenCalledTimes(0);
     // expect(wrapper.exists()).toEqual(true);
+  });
 
   it("properly change the value of clickNext", () => {
     const wrapper = shallow(<ReportAuth />);
@@ -60,4 +58,3 @@ describe("<ReportAuth />", () => {
 
   //todo: input, redirect to reportaction, setState true/false, axios with user
 });
-
diff --git a/frontend/gaejosim/src/Component/Signup/Signup.css b/frontend/gaejosim/src/Component/Signup/Signup.css
new file mode 100644
index 0000000..7394147
--- /dev/null
+++ b/frontend/gaejosim/src/Component/Signup/Signup.css
@@ -0,0 +1,147 @@
+.SignupTitle {
+  position: absolute;
+  /* width: 67px; */
+  /* height: 36px; */
+  left: 35.4%;
+  top: 23.2%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 25px;
+  line-height: 36px;
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.Signup_inputField1 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 29.1%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.Signup_inputField2 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 36.5%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.Signup_inputField3 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 43.9%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.Signup_inputField4 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 51.3%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.Signup_inputField5 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 59%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.Signup_Login_text {
+  position: absolute;
+  /* width: 53px; */
+  /* height: 22px; */
+  left: 35.4%;
+  top: 66.4%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.AgreeButton {
+  position: absolute;
+  /* width: 53px; */
+  height: 22px;
+  right: 34.5%;
+  top: 66.7%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: normal;
+  font-size: 10px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+  background-color: #fc0174;
+  border-radius: 40px;
+
+  color: #ffffff;
+
+  outline: 0;
+  border: 0;
+}
+
+.SignUpButton {
+  position: absolute;
+  width: 120px;
+  height: 39.81px;
+  left: 50%;
+  transform: translateX(-50%);
+  /* left: 45.8%; */
+  top: 78%;
+  background: #fc0174;
+  border-radius: 40px;
+  color: white;
+  font-weight: bold;
+
+  outline: 0;
+  border: 0;
+}
diff --git a/frontend/gaejosim/src/Component/Signup/Signup.js b/frontend/gaejosim/src/Component/Signup/Signup.js
index b8d2007..fbd48a3 100644
--- a/frontend/gaejosim/src/Component/Signup/Signup.js
+++ b/frontend/gaejosim/src/Component/Signup/Signup.js
@@ -1,117 +1,144 @@
 import React, { Component } from "react";
 // import { connect } from 'react-redux';
-import { NavLink, withRouter } from 'react-router-dom';
-import axios from 'axios';
+import { NavLink, withRouter } from "react-router-dom";
+import axios from "axios";
+
+import "./Signup.css";
 
 // TODO: reducer 연결해 로그인시 접근 불가하게 수정
 // TODO: 각 필드 값 형식 제한하는 validate 함수 추가하기
 
 class SignUp extends Component {
-    state = {
-        id : '', 
-        email : '', 
-        summonerID : '', 
-        password : '', 
-        passwordConfirm : false,
-        agreePolicy : false,
-    }
+  state = {
+    id: "",
+    email: "",
+    summonerID: "",
+    password: "",
+    passwordConfirm: false,
+    agreePolicy: false,
+  };
 
-    passwordHandler = (passwordCheck) => {
-        if(this.state.password === passwordCheck) this.setState({ passwordConfirm : true})
-        else return
-    }
+  passwordHandler = (passwordCheck) => {
+    if (this.state.password === passwordCheck)
+      this.setState({ passwordConfirm: true });
+    else return;
+  };
 
-    onClickAgreeButton = () => {
-        this.setState({ agreePolicy : !this.state.agreePolicy })
-    }
+  onClickAgreeButton = () => {
+    this.setState({ agreePolicy: !this.state.agreePolicy });
+  };
 
-    onClickSignUpButton = () => {
-        if(!this.state.id || !this.state.email || !this.state.summonerID || !this.state.password) {
-            alert('모든 필드의 값들을 다 기입해주셔야 회원가입이 가능합니다.')
-            return
-        }
-        if(!this.state.passwordConfirm) {
-            alert('기입한 비밀번호와 비밀번호 체크 영역의 값이 동일하지 않습니다.')
-            return
-        }
-        else if(!this.state.agreePolicy) {
-            alert('회원가입을 위해서는 웹 규약 조항에 동의해주셔야 합니다.')
-            return
-        }
-        else {
-            console.log('call post call')
-            this.postSignUpData()
-        }
+  onClickSignUpButton = () => {
+    if (
+      !this.state.id ||
+      !this.state.email ||
+      !this.state.summonerID ||
+      !this.state.password
+    ) {
+      alert("모든 필드의 값들을 다 기입해주셔야 회원가입이 가능합니다.");
+      return;
     }
+    if (!this.state.passwordConfirm) {
+      alert("기입한 비밀번호와 비밀번호 체크 영역의 값이 동일하지 않습니다.");
+      return;
+    } else if (!this.state.agreePolicy) {
+      alert("회원가입을 위해서는 웹 규약 조항에 동의해주셔야 합니다.");
+      return;
+    } else {
+      console.log("call post call");
+      this.postSignUpData();
+    }
+  };
 
-    postSignUpData = async () => {
-        console.log("postSignUpData")
+  postSignUpData = async () => {
+    console.log("postSignUpData");
 
-        axios.defaults.xsrfCookieName = 'csrftoken';
-        axios.defaults.xsrfHeaderName = 'X-CSRFToken';
+    axios.defaults.xsrfCookieName = "csrftoken";
+    axios.defaults.xsrfHeaderName = "X-CSRFToken";
 
-        axios.get('/api/token/').then()
-       
-        const response = await axios.post('/api/signup/', {
-            "username" : this.state.id,
-	        "email" : this.state.email, 
-	        "summoner_name" : this.state.summonerID,
-	        "password" : this.state.password,
-        })
-        .then((response) => {
-            alert(`${response.data.message}\n로그인 페이지로 이동합니다.`)
-            this.props.history.push('/login')
-        })
-        .catch((error) => {
-            alert(error.response.data.error)
-        })
-    }
+    axios.get("/api/token/").then();
 
-    render() {
-        return (
-            <div className = 'SignUp'>
-                <h3>회원가입</h3>
-                <NavLink exact to = '/login'>로그인하기</NavLink>
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '아이디'
-                    onChange={(event) => this.setState({ id : event.target.value })} />
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '이메일'
-                    onChange={(event) => this.setState({ email : event.target.value })} />
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '소환사 이름'
-                    onChange={(event) => this.setState({ summonerID : event.target.value })} />
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '비밀번호'
-                    onChange={(event) => this.setState({ password : event.target.value })} />
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '비밀번호 확인'
-                    onChange={(event) => this.passwordHandler(event.target.value)} />
-                {(!this.state.agreePolicy) && <button className = 'AgreeButton'
-                    onClick={() => this.onClickAgreeButton()}>
-                    웹규약조항
-                </button>}
-                {(this.state.agreePolicy) && <button className = 'AgreeButton'
-                    onClick={() => this.onClickAgreeButton()}>
-                    웹규약조항 V
-                </button>}
-                <button className = 'SignUpButton'
-                    onClick={() => this.onClickSignUpButton()}>
-                    회원가입
-                </button>
-            </div>
-        )
-    }
+    const response = await axios
+      .post("/api/signup/", {
+        username: this.state.id,
+        email: this.state.email,
+        summoner_name: this.state.summonerID,
+        password: this.state.password,
+      })
+      .then((response) => {
+        alert(`${response.data.message}\n로그인 페이지로 이동합니다.`);
+        this.props.history.push("/login");
+      })
+      .catch((error) => {
+        alert(error.response.data.error);
+      });
+  };
+
+  render() {
+    return (
+      <div className="SignUp">
+        <text className="SignupTitle">회원가입</text>
+        <NavLink exact to="/login">
+          <text className="Signup_Login_text">로그인하기</text>
+          {/* 로그인하기 */}
+        </NavLink>
+        <input
+          className="Signup_inputField1"
+          type="string"
+          placeholder="아이디"
+          onChange={(event) => this.setState({ id: event.target.value })}
+        />
+        <input
+          className="Signup_inputField2"
+          type="string"
+          placeholder="이메일"
+          onChange={(event) => this.setState({ email: event.target.value })}
+        />
+        <input
+          className="Signup_inputField3"
+          type="string"
+          placeholder="소환사 이름"
+          onChange={(event) =>
+            this.setState({ summonerID: event.target.value })
+          }
+        />
+        <input
+          className="Signup_inputField4"
+          type="string"
+          placeholder="비밀번호"
+          onChange={(event) => this.setState({ password: event.target.value })}
+        />
+        <input
+          className="Signup_inputField5"
+          type="string"
+          placeholder="비밀번호 확인"
+          onChange={(event) => this.passwordHandler(event.target.value)}
+        />
+        {!this.state.agreePolicy && (
+          <button
+            className="AgreeButton"
+            onClick={() => this.onClickAgreeButton()}
+          >
+            웹규약조항
+          </button>
+        )}
+        {this.state.agreePolicy && (
+          <button
+            className="AgreeButton"
+            onClick={() => this.onClickAgreeButton()}
+          >
+            웹규약조항 V
+          </button>
+        )}
+        <button
+          className="SignUpButton"
+          onClick={() => this.onClickSignUpButton()}
+        >
+          회원가입
+        </button>
+      </div>
+    );
+  }
 }
 
-export default withRouter(SignUp)
\ No newline at end of file
+export default withRouter(SignUp);
diff --git a/frontend/gaejosim/src/Container/Login/Login.css b/frontend/gaejosim/src/Container/Login/Login.css
new file mode 100644
index 0000000..8585305
--- /dev/null
+++ b/frontend/gaejosim/src/Container/Login/Login.css
@@ -0,0 +1,125 @@
+.LoginTitle {
+  position: absolute;
+  /* width: 67px; */
+  /* height: 36px; */
+  left: 35.4%;
+  top: 34.5%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 25px;
+  line-height: 36px;
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.Login_Signup_text {
+  position: absolute;
+  /* width: 53px; */
+  /* height: 22px; */
+  /* left: 62%; */
+  right: 34.5%;
+  top: 36%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.Login_Finduserinfo_text {
+  position: absolute;
+  /* width: 53px; */
+  /* height: 22px; */
+  left: 35.4%;
+  top: 55.8%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.Login_Changepassword_text {
+  position: absolute;
+  /* width: 53px; */
+  /* height: 22px; */
+  right: 34.5%;
+  top: 55.8%;
+
+  /* font-family: Noto Sans KR; */
+  font-style: normal;
+  font-weight: bold;
+  font-size: 15px;
+  line-height: 22px;
+  /* identical to box height */
+
+  display: flex;
+  align-items: center;
+  letter-spacing: -0.05em;
+
+  color: #ffffff;
+}
+
+.Login_inputField1 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 40.4%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.Login_inputField2 {
+  position: absolute;
+  width: 30.6%;
+  height: 6.5%;
+  left: 35.1%;
+  top: 47.8%;
+
+  background: #ffffff;
+  border: 1px solid #fc0174;
+  box-sizing: border-box;
+  border-radius: 12px;
+}
+
+.LoginButton {
+  position: absolute;
+  width: 120px;
+  height: 39.81px;
+  left: 50%;
+  transform: translateX(-50%);
+  /* left: 45.8%; */
+  top: 78%;
+  background: #fc0174;
+  border-radius: 40px;
+  color: white;
+  font-weight: bold;
+
+  outline: 0;
+  border: 0;
+}
diff --git a/frontend/gaejosim/src/Container/Login/Login.js b/frontend/gaejosim/src/Container/Login/Login.js
index 3e651ea..fbe2704 100644
--- a/frontend/gaejosim/src/Container/Login/Login.js
+++ b/frontend/gaejosim/src/Container/Login/Login.js
@@ -1,75 +1,87 @@
 import React, { Component } from "react";
 // import { connect } from 'react-redux';
-import { NavLink, withRouter } from 'react-router-dom'
-import axios from 'axios';
+import { NavLink, withRouter } from "react-router-dom";
+import axios from "axios";
+
+import "./Login.css";
 
 // TODO: login 유저 스토어에 저장하기
 
 class Login extends Component {
-    state = {
-        id : '',  
-        password : '', 
-    }
+  state = {
+    id: "",
+    password: "",
+  };
 
-    postLoginData = async () => {
-        console.log("postSignUpData")
+  postLoginData = async () => {
+    console.log("postSignUpData");
 
-        axios.defaults.xsrfCookieName = 'csrftoken';
-        axios.defaults.xsrfHeaderName = 'X-CSRFToken';
+    axios.defaults.xsrfCookieName = "csrftoken";
+    axios.defaults.xsrfHeaderName = "X-CSRFToken";
 
-        axios.get('/api/token/').then()
+    axios.get("/api/token/").then();
 
-        const response = await axios.post('/api/signin/', {
-            "username" : this.state.id,
-	        "password" : this.state.password,
-        })
-        .then((response) => {
-            console.log("로그인 완료")
-            this.props.history.push('/search')
-        })
-        .catch((error) => {
-            alert(error.response.data.error)
-        })
-    }
+    const response = await axios
+      .post("/api/signin/", {
+        username: this.state.id,
+        password: this.state.password,
+      })
+      .then((response) => {
+        console.log("로그인 완료");
+        this.props.history.push("/search");
+      })
+      .catch((error) => {
+        alert(error.response.data.error);
+      });
+  };
 
-    onClickLoginButton = () => {
-        if(!this.state.id) {
-            alert('아이디를 입력해야합니다.')
-            return
-        }
-        else if(!this.state.password) {
-            alert('패스워드를 입력해야합니다.')
-            return
-        }
-        else {
-            this.postLoginData()
-        }
+  onClickLoginButton = () => {
+    if (!this.state.id) {
+      alert("아이디를 입력해야합니다.");
+      return;
+    } else if (!this.state.password) {
+      alert("패스워드를 입력해야합니다.");
+      return;
+    } else {
+      this.postLoginData();
     }
+  };
 
-    render() {
-        return (
-            <div className = 'Login'>
-                <NavLink exact to = '/signup'>회원가입</NavLink>
-                <NavLink exact to = '/finduserinfo'>아이디 비밀번호 찾기</NavLink>
-                <NavLink exact to = '/changepassword'>비밀번호 변경</NavLink>
-                
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '아이디'
-                    onChange={(event) => this.setState({ id : event.target.value })} />
-                <input
-                    className = 'inputField'
-                    type = 'string'
-                    placeholder = '비밀번호'
-                    onChange={(event) => this.setState({ password : event.target.value })} />
-                <button className = 'LoginButton'
-                    onClick={() => this.onClickLoginButton()}>
-                    로그인
-                </button>
-            </div>
-        )
-    }
+  render() {
+    return (
+      <div className="Login">
+        <text className="LoginTitle">로그인</text>
+        <NavLink exact to="/signup">
+          <text className="Login_Signup_text">회원가입</text>
+        </NavLink>
+        <NavLink exact to="/finduserinfo">
+          <text className="Login_Finduserinfo_text">아이디 비밀번호 찾기</text>
+        </NavLink>
+        <NavLink exact to="/changepassword">
+          <text className="Login_Changepassword_text">비밀번호 변경</text>
+        </NavLink>
+
+        <input
+          className="Login_inputField1"
+          type="string"
+          placeholder="아이디"
+          onChange={(event) => this.setState({ id: event.target.value })}
+        />
+        <input
+          className="Login_inputField2"
+          type="string"
+          placeholder="비밀번호"
+          onChange={(event) => this.setState({ password: event.target.value })}
+        />
+        <button
+          className="LoginButton"
+          onClick={() => this.onClickLoginButton()}
+        >
+          로그인
+        </button>
+      </div>
+    );
+  }
 }
 
-export default withRouter(Login)
\ No newline at end of file
+export default withRouter(Login);