logDesignEnd

hackersground-kr · Aug 26, 2024 · fa4d6aa · fa4d6aa
1 parent f432ae5
commit fa4d6aa
Show file tree

Hide file tree

Showing 6 changed files with 77 additions and 34 deletions.
diff --git a/crescendo-web/src/App.css b/crescendo-web/src/App.css
@@ -12,7 +12,7 @@
   }
 
   .box {
-    background-color: #895D3C;
+    background-color: #895d3c;
     width: 100%;
     height: 15px;
   }
@@ -27,22 +27,24 @@
 
   .button1 {
     color: #523522;
-    background-color: #FFDA2D;
+    background-color: #ffda2d;
     width: 337px;
     height: 62px;
     text-align: center;
     border: none;
+    font-weight: bold;
     font-size: 16px; /* 버튼 텍스트 크기 */
     margin-top: 20px; /* 버튼과 상단 요소 간의 여백 추가 */
     border-radius: 20px;
   }
   .button2 {
-    color: #895D3C;
+    color: #895d3c;
     background-color: white;
     width: 337px;
     height: 62px;
     text-align: center;
-    border: solid 1px #895D3C;
+    font-weight: bold;
+    border: solid 1px #895d3c;
     font-size: 16px; /* 버튼 텍스트 크기 */
     margin-top: 20px; /* 버튼과 상단 요소 간의 여백 추가 */
     border-radius: 20px;

diff --git a/crescendo-web/src/Login.js b/crescendo-web/src/Login.js
@@ -1,6 +1,6 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-//import "./SignUp1.css";
+import "./SignUp1.css";
 
 function Header() {
   return (
@@ -14,10 +14,11 @@ function Header() {
           <br />
           정확하게 입력해주세요!
         </h1>
-        <input id="inputId" type="text" placeholder="아이디 입력" />
-        <br />
-        <input id="inputPwd" type="text" placeholder="비밀번호 확인 입력" />
       </div>
+
+      <input id="inputId" type="text" placeholder="아이디 입력" />
+      <br />
+      <input id="inputPwd" type="text" placeholder="비밀번호 확인 입력" />
     </header>
   );
 }
@@ -26,13 +27,9 @@ function Button() {
   const navigate = useNavigate();
 
   return (
-    <div>
-      <input
-        id="prevBtn"
-        type="button"
-        onClick={() => navigate(-1)}
-      />
-      <input id="nextBtn" type="button" />
+    <div className="btns">
+      <input id="prevBtn" type="button" onClick={() => navigate(-1)} />
+      <input id="login" type="button" value="로그인" />
       <input id="helpBtn" type="button" />
     </div>
   );

diff --git a/crescendo-web/src/SignUp1.css b/crescendo-web/src/SignUp1.css
@@ -74,17 +74,16 @@ header {
   box-sizing: border-box;
 }
 
-h1 {
-  margin-bottom: 0;
-  padding: 0;
+#idBox {
+  margin-bottom: 6rem;
 }
 
 #inputId {
   border: none;
   border-bottom: 2px solid #895d3c;
-  margin-top: 6rem;
-  padding: 0.5rem;
-  font-size: 16px;
+  width: 90%;
+  font-size: 20px;
+  margin-bottom: 1rem;
   background-color: #f8f4f3;
   color: #eaddd8;
   outline: none;
@@ -93,21 +92,59 @@ h1 {
 #inputPwd {
   border: none;
   border-bottom: 2px solid #895d3c;
-  margin-top: 6rem;
-  padding: 0.5rem;
-  font-size: 16px;
+  width: 90%;
+  font-size: 20px;
   background-color: #f8f4f3;
   color: #eaddd8;
   outline: none;
 }
 
 #inputRePwd {
   border: none;
-  border-bottom: 2px solid #895d3c;
   margin-top: 1rem;
-  padding: 0.5rem;
-  font-size: 16px;
+  border-bottom: 2px solid #895d3c;
+  width: 90%;
+  font-size: 20px;
   background-color: #f8f4f3;
   color: #eaddd8;
   outline: none;
 }
+
+#startBtn {
+  color: #523522;
+  background-color: #ffda2d;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 337px;
+  height: 62px;
+  text-align: center;
+  font-weight: bold;
+  border: none;
+  font-size: 16px; /* 버튼 텍스트 크기 */
+  margin-top: 20px; /* 버튼과 상단 요소 간의 여백 추가 */
+  border-radius: 20px;
+
+  position: fixed; /* 화면에 고정 */
+  left: 50%; /* 화면의 가로 중앙에 위치 */
+  bottom: 4rem; /* 화면 하단에서 2rem 위에 위치 */
+  transform: translateX(-50%); /* 가로 중앙 정렬 */
+}
+
+#login {
+  color: #523522;
+  background-color: #ffda2d;
+  width: 337px;
+  height: 62px;
+  text-align: center;
+  font-weight: bold;
+  border: none;
+  font-size: 16px; /* 버튼 텍스트 크기 */
+  margin-top: 20px; /* 버튼과 상단 요소 간의 여백 추가 */
+  border-radius: 20px;
+
+  position: fixed; /* 화면에 고정 */
+  left: 50%; /* 화면의 가로 중앙에 위치 */
+  bottom: 4rem; /* 화면 하단에서 2rem 위에 위치 */
+  transform: translateX(-50%); /* 가로 중앙 정렬 */
+}
diff --git a/crescendo-web/src/SignUp1.js b/crescendo-web/src/SignUp1.js
@@ -13,8 +13,9 @@ function Header() {
           당신의 이름을 알려주세요
         </h1>
         <div>로그인시 사용할 아이디에요</div>
-        <input id="inputId" type="text" placeholder="아이디 입력" />
       </div>
+
+      <input id="inputId" type="text" placeholder="아이디 입력" />
     </header>
   );
 }

diff --git a/crescendo-web/src/SignUp2.js b/crescendo-web/src/SignUp2.js
@@ -13,10 +13,11 @@ function Header() {
           비밀번호를 작성해주세요
         </h1>
         <div>정확한 확인을 위해 인증도 진행해 주세요</div>
-        <input id="inputPwd" type="text" placeholder="비밀번호 입력" />
-        <br />
-        <input id="inputRePwd" type="text" placeholder="비밀번호 확인 입력" />
       </div>
+
+      <input id="inputPwd" type="text" placeholder="비밀번호 입력" />
+      <br />
+      <input id="inputRePwd" type="text" placeholder="비밀번호 확인 입력" />
     </header>
   );
 }

diff --git a/crescendo-web/src/SignUp3.js b/crescendo-web/src/SignUp3.js
@@ -1,13 +1,13 @@
 import React from "react";
 import { useNavigate } from "react-router-dom";
-//import "./SignUp1.css";
+import "./SignUp1.css";
 
 function Header() {
   return (
     <header>
       <div className="line"></div>
       <img src={require("./image/check.png")} className="check" alt="check" />
-      <div className="textArea">
+      <div ie="inBox">
         <h1>flower님, 반가워요!</h1>
         <h2>해바라기를 시작해볼까요?</h2>
       </div>
@@ -21,7 +21,12 @@ function Button() {
   return (
     <div>
       <input id="prevBtn" type="button" onClick={() => navigate(-1)} />
-      <input id="startBtn" type="button" onClick={() => navigate("/app")} />
+      <input
+        id="startBtn"
+        type="button"
+        value="시작하기"
+        onClick={() => navigate("/app")}
+      />
       <input id="helpBtn" type="button" />
     </div>
   );