present

hackersground-kr · Aug 26, 2024 · 02a5b1c · 02a5b1c
1 parent fb86b60
commit 02a5b1c
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 42 deletions.
diff --git a/crescendo-web/src/App.js b/crescendo-web/src/App.js
@@ -1,11 +1,20 @@
 import React, { useState, useEffect } from "react";
 import "./App.css";
-import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Link,
+  useLocation,
+} from "react-router-dom";
 import SignUp1 from "./SignUp1";
 import SignUp2 from "./SignUp2";
+import SignUp3 from "./SignUp3";
+import Login from "./Login";
 
 const App = () => {
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
+  const location = useLocation();
 
   useEffect(() => {
     const handleResize = () => {
@@ -24,29 +33,43 @@ const App = () => {
     return null;
   }
 
+  // 현재 경로에 따라 콘텐츠를 표시할지 결정. 빈 배열로 설정하면 모든 경로에서 콘텐츠가 표시되지 않음
+  const showContent = ["/"].includes(location.pathname);
+
   return (
-    <Router>
-      <div className="container">
-        <div className="box"></div>
-        <img
-          src={require("./image/flower.png")}
-          className="flower"
-          alt="flower"
-        />
-        <button className="button1" disabled>
-          로그인
-        </button>
-        <Link to="/signup1">
-          <button className="button2">회원가입</button>
-        </Link>
-
-        <Routes>
-          <Route path="/signup1" element={<SignUp1 />} />
-          <Route path="/signup2" element={<SignUp2 />} />
-        </Routes>
-      </div>
-    </Router>
+    <>
+      {showContent && (
+        <div className="container">
+          <div className="box"></div>
+          <img
+            src={require("./image/flower.png")}
+            className="flower"
+            alt="flower"
+          />
+          <Link to="/login">
+            <button className="button1">로그인</button>
+          </Link>
+
+          <Link to="/signup1">
+            <button className="button2">회원가입</button>
+          </Link>
+        </div>
+      )}
+
+      <Routes>
+        <Route path="/signup1" element={<SignUp1 />} />
+        <Route path="/signup2" element={<SignUp2 />} />
+        <Route path="/signup3" element={<SignUp3 />} />
+        <Route path="/login" element={<Login />} />
+      </Routes>
+    </>
   );
 };
 
-export default App;
+const AppWrapper = () => (
+  <Router>
+    <App />
+  </Router>
+);
+
+export default AppWrapper;
diff --git a/crescendo-web/src/Login.js b/crescendo-web/src/Login.js
@@ -0,0 +1,50 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+//import "./SignUp1.css";
+
+function Header() {
+  return (
+    <header>
+      <div className="line"></div>
+      <div id="idBox">
+        <h1>
+          로그인을 위해
+          <br />
+          아이디와 비밀번호를
+          <br />
+          정확하게 입력해주세요!
+        </h1>
+        <input id="inputId" type="text" placeholder="아이디 입력" />
+        <br />
+        <input id="inputPwd" type="text" placeholder="비밀번호 확인 입력" />
+      </div>
+    </header>
+  );
+}
+
+function Button() {
+  const navigate = useNavigate();
+
+  return (
+    <div>
+      <input
+        id="prevBtn"
+        type="button"
+        onClick={() => navigate(-1)}
+      />
+      <input id="nextBtn" type="button" />
+      <input id="helpBtn" type="button" />
+    </div>
+  );
+}
+
+function SignUp2() {
+  return (
+    <div>
+      <Header />
+      <Button />
+    </div>
+  );
+}
+
+export default SignUp2;
diff --git a/crescendo-web/src/SignUp1.css b/crescendo-web/src/SignUp1.css
@@ -40,10 +40,11 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-size: cover;
+  background-size: contain;
+  background-position: center; /* Center the image */
+  background-repeat: no-repeat;
   background-image: url("./image/goBack.png");
   border: none;
-  border-radius: 50%; /* 원형 버튼 */
   cursor: pointer;
 }
 
@@ -56,8 +57,8 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #895d3c; /* 배경색 (원하는 색상으로 변경 가능) */
-  color: white;
+  background-size: cover;
+  background-image: url("./image/help.png");
   border: none;
   border-radius: 50%; /* 원형 버튼 */
   cursor: pointer;
@@ -78,7 +79,18 @@ h1 {
   padding: 0;
 }
 
-input#inputId {
+#inputId {
+  border: none;
+  border-bottom: 2px solid #895d3c;
+  margin-top: 6rem;
+  padding: 0.5rem;
+  font-size: 16px;
+  background-color: #f8f4f3;
+  color: #eaddd8;
+  outline: none;
+}
+
+#inputPwd {
   border: none;
   border-bottom: 2px solid #895d3c;
   margin-top: 6rem;
@@ -88,3 +100,14 @@ input#inputId {
   color: #eaddd8;
   outline: none;
 }
+
+#inputRePwd {
+  border: none;
+  border-bottom: 2px solid #895d3c;
+  margin-top: 1rem;
+  padding: 0.5rem;
+  font-size: 16px;
+  background-color: #f8f4f3;
+  color: #eaddd8;
+  outline: none;
+}
diff --git a/crescendo-web/src/SignUp2.js b/crescendo-web/src/SignUp2.js
@@ -13,13 +13,9 @@ function Header() {
           비밀번호를 작성해주세요
         </h1>
         <div>정확한 확인을 위해 인증도 진행해 주세요</div>
-        <input id="inputPassword" type="text" placeholder="비밀번호 입력" />
+        <input id="inputPwd" type="text" placeholder="비밀번호 입력" />
         <br />
-        <input
-          id="inputRePassword"
-          type="text"
-          placeholder="비밀번호 확인 입력"
-        />
+        <input id="inputRePwd" type="text" placeholder="비밀번호 확인 입력" />
       </div>
     </header>
   );
@@ -30,14 +26,9 @@ function Button() {
 
   return (
     <div>
-      <input
-        id="prevBtn"
-        type="button"
-        value="⬅️"
-        onClick={() => navigate(-1)}
-      />
-      <input id="nextBtn" type="button" value="➡️" />
-      <input id="helpBtn" type="button" value="❓" />
+      <input id="prevBtn" type="button" onClick={() => navigate(-1)} />
+      <input id="nextBtn" type="button" onClick={() => navigate("/signup3")} />
+      <input id="helpBtn" type="button" />
     </div>
   );
 }

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