Merge pull request #168 from super-waffle/footer

Footer

src/components/signup.js

@@ -1,11 +1,12 @@
 import axios from "axios";
 import React, { useState, useCallback } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import Modal from "./modal";
 import "../statics/css/signup.css";
 
 function SignUp() {
   // const router = useRouter();
+  const navigate = useNavigate();
   const [email, setEmail] = useState("");
   const [nickname, setNickname] = useState("");
   const [password, setPassword] = useState("");
@@ -46,7 +47,6 @@ function SignUp() {
   const onSubmit = useCallback(
     (event) => {
       // event.preventDefault();
-      console.log(email, nickname, password);
       setSignupSuccess(false);
       axios
         .post(
@@ -62,7 +62,6 @@ function SignUp() {
         )
         .then((res) => {
           if (res.data.statusCode === 200) {
-            console.log(res);
             setSignupSuccess(true);
           } else {
             setSignupSuccess(false);
@@ -90,44 +89,34 @@ function SignUp() {
   }, []);
 
   // 이메일 인증 검사(메일 발송)
-  const onClickEmail = useCallback(
-    (event) => {
-      // event.preventDefault();
-      console.log(email);
-      axios
-        .post(process.env.REACT_APP_SERVER_URL + "/emails", {
-          email: email,
-        })
-        .then((res) => {
-          if (res.data.statusCode === 200) {
-            console.log(res.data);
-            setEmailExist(false);
-          } else {
-            setEmailExist(true);
-            setEmailAuthMsg("이미 가입된 이메일입니다");
-          }
-        })
-        .catch((err) => {
-          console.log(err);
-          console.log("hi");
+  const onClickEmail = useCallback(() => {
+    axios
+      .post(process.env.REACT_APP_SERVER_URL + "/emails", {
+        email: email,
+      })
+      .then((res) => {
+        if (res.data.statusCode === 200) {
+          setEmailExist(false);
+        } else {
           setEmailExist(true);
           setEmailAuthMsg("이미 가입된 이메일입니다");
-        });
-    },
-    [email]
-  );
+        }
+      })
+      .catch((err) => {
+        setEmailExist(true);
+        setEmailAuthMsg("이미 가입된 이메일입니다");
+      });
+  }, [email]);
 
   // 이메일 인증 코드 검증
   const onClickAuthEmail = useCallback(
     (event) => {
-      console.log(emailAuth);
       axios
         .post(process.env.REACT_APP_SERVER_URL + "/emails/auth", {
           email: email,
           authCode: emailAuth,
         })
         .then((res) => {
-          console.log(res);
           if (res.data.statusCode === 200) {
             setIsEmailAuth(true);
             setEmailMessage("이메일 인증이 완료되었습니다");
@@ -159,15 +148,14 @@ function SignUp() {
           nickname: nicknameCurrent,
         })
         .then((res) => {
-          console.log(res);
+          // console.log(res);
           if (res.data.statusCode === 200) {
             checkExNickname(true);
             setExNicknameMsg("사용 가능한 닉네임입니다");
             setNicknameMessage("");
             setIsNickname(true);
           } else {
             checkExNickname(false);
-            console.log("hi");
             setExNicknameMsg("이미 사용중인 닉네임입니다");
             setIsNickname(false);
           }
@@ -429,10 +417,10 @@ function SignUp() {
             </span>
             <span className="signup-success-heading1">
               <img src="icons/_paper-plane.svg" alt=""></img>
-              <img src="icons/_paper-plane-darkmode.svg" alt=""></img>
+              {/* <img src="icons/_paper-plane-darkmode.svg" alt=""></img> */}
               공습에 오신 걸 환영합니다
             </span>
-            <button to="/login">로그인</button>
+            <button onClick={() => navigate("/login")}>로그인</button>
           </div>
         )}
       </div>

src/statics/scss/app.scss

@@ -1,8 +1,9 @@
 @import "main.css";
 
+.main {
+  background-color: var(--htmlbgColor);
+}
 .outlet {
   min-height: calc(100vh - 180px);
-  // padding-bottom: 120px;
-  // position: absolute;
-  // bottom: 0;
+  background-color: var(--htmlbgColor);
 }

src/statics/scss/modal.scss

@@ -35,7 +35,7 @@
       padding: 5px 16px 40px 16px;
       text-align: center;
       .body-heading1 {
-        font-size: 20px;
+        font-size: 18px;
         line-height: 19px;
         color: #434343;
         margin-bottom: 10px;
@@ -85,6 +85,7 @@
         color: white;
         margin-left: 6px;
         margin-bottom: 1.5px;
+        font-size: 12px;
       }
       .btn-m {
         cursor: pointer;
@@ -95,7 +96,7 @@
         width: 20%;
         border: none;
         background: #6667ab;
-        border-radius: 10px;
+        border-radius: 7px;
         // margin: 20px;
       }
     }
@@ -117,3 +118,26 @@
   align-items: center;
   animation: modal-bg-show 0.3s;
 }
+.btn-xs {
+  cursor: pointer;
+  height: 32px;
+  width: 15%;
+  border: 1px solid $mainColor;
+  background-color: $mainColor;
+  border-radius: 5px;
+  color: white;
+  margin-left: 6px;
+  margin-bottom: 1.5px;
+}
+.btn-m {
+  cursor: pointer;
+  color: white;
+  font-size: 16px;
+  line-height: 17px;
+  height: 36px;
+  width: 20%;
+  border: none;
+  background: #6667ab;
+  border-radius: 7px;
+  // margin: 20px;
+}

src/statics/scss/signup.scss

@@ -97,7 +97,7 @@
         border: 1px solid $mainColor;
         background-color: $mainColor;
         border-radius: 5px;
-        color: var(--textColor);
+        color: #eeeeee;
         margin-left: 6px;
         margin-bottom: 1.5px;
       }
@@ -179,6 +179,7 @@
             .content {
               display: flex;
               justify-content: center;
+              align-items: center;
               padding-bottom: 25px;
               img {
                 height: 20px;
@@ -276,3 +277,27 @@
     }
   }
 }
+.btn-xs {
+  cursor: pointer;
+  height: 32px;
+  width: 15%;
+  border: 1px solid $mainColor;
+  background-color: $mainColor;
+  border-radius: 5px;
+  color: white;
+  margin-left: 6px;
+  margin-bottom: 1.5px;
+  font-size: 12px;
+}
+.btn-m {
+  cursor: pointer;
+  color: white;
+  font-size: 16px;
+  line-height: 17px;
+  height: 36px;
+  width: 20%;
+  border: none;
+  background: #6667ab;
+  border-radius: 7px;
+  // margin: 20px;
+}