give

crescendo-web/package.json

@@ -8,7 +8,9 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-scripts": "5.0.1",
+    "react-responsive": "^10.0.0",
+    "react-router-dom": "^6.26.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

crescendo-web/src/App.js

@@ -1,49 +1,51 @@
-import React, { useState, useEffect } from 'react';
-import './App.css'; // 별도의 CSS 파일을 사용합니다.
-import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
-import './App.css';
-import login from './login';
-import signup from './signup';
-
+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 컴포넌트를 불러옵니다.
 
 const App = () => {
   const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
 
   useEffect(() => {
-    // 화면 크기를 체크하여 상태를 업데이트하는 함수
     const handleResize = () => {
       setIsMobile(window.innerWidth <= 768);
     };
 
-    handleResize(); // 초기 체크
-    window.addEventListener('resize', handleResize);
+    handleResize();
+    window.addEventListener("resize", handleResize);
 
     return () => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
     };
   }, []);
 
-  // 버튼 클릭 시 호출되는 함수
-  const handleClick = () => {
-    <Link to='login'></Link>
-  };
-  const handleClick2 = () => {
-    <Link to='signup'></Link>
-  };
-
   if (!isMobile) {
-    // 모바일 화면이 아닐 경우 아무것도 렌더링하지 않음
     return null;
   }
 
   return (
-    <div className="container">
-      <div className="box"></div>
-      <img src={require("./image/flower.png")} className="flower" alt="flower" />
-      <button className="button1" onClick={handleClick}>로그인</button>
-      <button className="button2" onClick={handleClick2}>회원가입</button>
-    </div>
+    <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="/signup">
+          <button className="button2">회원가입</button>
+        </Link>
+
+        <Routes>
+          <Route path="/signup" element={<SignUp1 />} />{" "}
+          {/* 회원가입 경로 설정 */}
+        </Routes>
+      </div>
+    </Router>
   );
 };
 
-export default App;
+export default App;

crescendo-web/src/SignUp1.css

@@ -0,0 +1,90 @@
+.line {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 15px;
+  background-color: #895d3c; /* 선의 색상 */
+  position: fixed;
+  margin: 0 auto; /* 화면 중앙에 배치 */
+}
+
+body {
+  background-color: #f8f4f3; /* 원하는 배경색으로 변경 */
+  margin: 0;
+  padding: 0;
+  font-family: Arial, sans-serif;
+}
+
+#nextBtn {
+  position: fixed;
+  right: 3rem;
+  bottom: 3rem;
+  width: 3rem;
+  height: 3rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #895d3c; /* 배경색 (원하는 색상으로 변경 가능) */
+  color: white;
+  border: none;
+  border-radius: 50%; /* 원형 버튼 */
+  cursor: pointer;
+}
+
+#prevBtn {
+  position: fixed;
+  left: 1rem;
+  top: 2rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #895d3c; /* 배경색 (원하는 색상으로 변경 가능) */
+  color: white;
+  border: none;
+  border-radius: 50%; /* 원형 버튼 */
+  cursor: pointer;
+}
+
+#helpBtn {
+  position: fixed;
+  right: 1rem;
+  top: 2rem;
+  width: 2rem;
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #895d3c; /* 배경색 (원하는 색상으로 변경 가능) */
+  color: white;
+  border: none;
+  border-radius: 50%; /* 원형 버튼 */
+  cursor: pointer;
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 50vh; /* 화면 전체 높이 사용 */
+  padding: 1rem; /* 여백 추가 */
+  box-sizing: border-box;
+}
+
+h1 {
+  margin-bottom: 0;
+  padding: 0;
+}
+
+input#inputId {
+  border: none;
+  border-bottom: 2px solid #895d3c;
+  margin-top: 6rem;
+  padding: 0.5rem;
+  font-size: 16px;
+  background-color: #f8f4f3;
+  color: #eaddd8;
+  outline: none;
+}

crescendo-web/src/SignUp1.js

@@ -0,0 +1,48 @@
+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="inputId" 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 SignUp1() {
+  return (
+    <div>
+      <Header />
+      <Button />
+    </div>
+  );
+}
+
+export default SignUp1;

crescendo-web/src/index.js

@@ -1,10 +1,10 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+import reportWebVitals from "./reportWebVitals";
 
-const root = ReactDOM.createRoot(document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <App />