newOne

crescendo-web/src/App.js

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from "react";
 import "./App.css";
 import { BrowserRouter as Router, Route, Routes, Link } from "react-router-dom";
-import SignUp1 from "./SignUp1"; // SignUp1 컴포넌트를 불러옵니다.
+import SignUp1 from "./SignUp1";
+import SignUp2 from "./SignUp2";
 
 const App = () => {
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
@@ -35,13 +36,13 @@ const App = () => {
         <button className="button1" disabled>
           로그인
         </button>
-        <Link to="/signup">
+        <Link to="/signup1">
           <button className="button2">회원가입</button>
         </Link>
 
         <Routes>
-          <Route path="/signup" element={<SignUp1 />} />{" "}
-          {/* 회원가입 경로 설정 */}
+          <Route path="/signup1" element={<SignUp1 />} />
+          <Route path="/signup2" element={<SignUp2 />} />
         </Routes>
       </div>
     </Router>

crescendo-web/src/SignUp1.css

@@ -24,10 +24,10 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #895d3c; /* 배경색 (원하는 색상으로 변경 가능) */
-  color: white;
   border: none;
-  border-radius: 50%; /* 원형 버튼 */
+  border-radius: 50%;
+  background-size: cover;
+  background-image: url("./image/right_arrow.png");
   cursor: pointer;
 }
 
@@ -40,8 +40,8 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: #895d3c; /* 배경색 (원하는 색상으로 변경 가능) */
-  color: white;
+  background-size: cover;
+  background-image: url("./image/goBack.png");
   border: none;
   border-radius: 50%; /* 원형 버튼 */
   cursor: pointer;

crescendo-web/src/SignUp1.js

@@ -24,14 +24,13 @@ function Button() {
 
   return (
     <div>
-      <input
-        id="prevBtn"
-        type="button"
-        value="⬅️"
-        onClick={() => navigate(-1)}
+      <button id="prevBtn" onClick={() => navigate(-1)} aria-label="Previous" />
+      <button
+        id="nextBtn"
+        onClick={() => navigate("/signup2")}
+        aria-label="Next"
       />
-      <input id="nextBtn" type="button" value="➡️" />
-      <input id="helpBtn" type="button" value="❓" />
+      <button id="helpBtn" aria-label="Help" />
     </div>
   );
 }

crescendo-web/src/SignUp2.js

@@ -0,0 +1,54 @@
+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 />
+          비밀번호를 작성해주세요
+        </h1>
+        <div>정확한 확인을 위해 인증도 진행해 주세요</div>
+        <input id="inputPassword" type="text" placeholder="비밀번호 입력" />
+        <br />
+        <input
+          id="inputRePassword"
+          type="text"
+          placeholder="비밀번호 확인 입력"
+        />
+      </div>
+    </header>
+  );
+}
+
+function Button() {
+  const navigate = useNavigate();
+
+  return (
+    <div>
+      <input
+        id="prevBtn"
+        type="button"
+        value="⬅️"
+        onClick={() => navigate(-1)}
+      />
+      <input id="nextBtn" type="button" value="➡️" />
+      <input id="helpBtn" type="button" value="❓" />
+    </div>
+  );
+}
+
+function SignUp2() {
+  return (
+    <div>
+      <Header />
+      <Button />
+    </div>
+  );
+}
+
+export default SignUp2;