From f83d6138a96e1ed966104ff9a581ac3405038395 Mon Sep 17 00:00:00 2001
From: SEUNGHWA LEE <sw092311@cau.ac.kr>
Date: Thu, 3 Apr 2025 15:34:30 +0900
Subject: [PATCH 1/2] SignupPage#1

---
 src/pages/SignupPage.js | 46 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/src/pages/SignupPage.js b/src/pages/SignupPage.js
index e69de29..64afa45 100644
--- a/src/pages/SignupPage.js
+++ b/src/pages/SignupPage.js
@@ -0,0 +1,46 @@
+import React from "react";
+import Button from "../components/Button";
+
+const SignupPage = () => {
+    return(
+        <div style={styles.container}>
+            <img src="heart.png" alt="heart" style={styles.image} />
+            <h2 style={styles.title}>회원 정보 입력</h2>
+
+            <input style={styles.input} placeholder="보호자 이름을 입력하세요."/>
+            <input style={styles.input} placeholder="보호자 생일을 6글자로 입력하세요.."/>
+            <input style={styles.input} placeholder="피보호자 이름을 입력하세요."/>
+            <input style={styles.input} placeholder="피보호자 생일을 6글자로 입력하세요."/>
+
+            <Button text="넘어가기" color="#DABEC9" />
+        </div>
+    );
+};
+
+const styles = {
+    container: {
+        display : "flex",
+        flexDirection : "column",
+        alignItems: "center",
+        justifyContent: "center",
+        height: "100vh",
+        backgroundColor: "#F8EAD2",
+    },
+    image: {
+        width: "100px",
+        marginBottom: "20px",
+    },
+    title: {
+        fontSize: "24px",
+        marginBottom: "20px",
+    },
+    input: {
+        width: "80%",
+        padding: "10px",
+        marginBottom: "10px",
+        borderRadius: "10px",
+        border: "1px solid #ccc",
+    },
+};
+
+export default SignupPage;
\ No newline at end of file

From 984cd03ef20d56dff4eaf3b0114d7c3e98c8e13f Mon Sep 17 00:00:00 2001
From: SEUNGHWA LEE <sw092311@cau.ac.kr>
Date: Thu, 3 Apr 2025 15:46:29 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:Signuppage=20=EC=83=9D=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.js               | 14 ++++++++++----
 src/components/Button.js | 27 +++++++++++++++++++++++++++
 src/components/Logo.js   | 11 +++++++++++
 src/pages/LoginPage.js   |  3 +++
 src/pages/SignupPage.js  |  4 +++-
 5 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 src/components/Button.js
 create mode 100644 src/components/Logo.js

diff --git a/src/App.js b/src/App.js
index 20a3459..88a92e5 100755
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,17 @@
 import React from "react";
-import "./App.css";
+import {BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import LoginPage from "./pages/LoginPage";
+import SignupPage from "./pages/SignupPage";
 
 function App() {
   return (
-    <div className="App">
-    </div>
+    <Router>
+      <Routes>
+        <Route path="/" element={<LoginPage/>}/>
+        <Route path="/signup" element={<SignupPage/>} />
+      </Routes>
+    </Router>
   );
 }
 
-export default App;
+export default App;
\ No newline at end of file
diff --git a/src/components/Button.js b/src/components/Button.js
new file mode 100644
index 0000000..9b9ae19
--- /dev/null
+++ b/src/components/Button.js
@@ -0,0 +1,27 @@
+import React from "react";
+
+const Button = ({ text, color, onClick, icon }) => {
+    return (
+        <button onClick = {onClick}
+        style = {{
+            backgroundColor : color,
+            color : "#fff",
+            border : "none",
+            padding : "12px 16px",
+            borderRadius : "8px",
+            fontSize: "16px",
+            width: "250px",
+            display : "flex",
+            alignItems: "center",
+            justifyContent : "center",
+            gap : "8px",
+            cursor: "pointer"
+        }}
+        >
+            {icon && <img src ={icon} alt="icon" width="20" />}
+            {text}
+        </button>
+    );
+};
+
+export default Button;
\ No newline at end of file
diff --git a/src/components/Logo.js b/src/components/Logo.js
new file mode 100644
index 0000000..9b562aa
--- /dev/null
+++ b/src/components/Logo.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Logo = () => {
+    return (
+        <div style={{ textAlign: "center", marginBottom: "20px"}}>
+            <img src="/images/heart.png" alt="Heart Logo" width="100" />
+        </div>
+    );
+};
+
+export default Logo;
\ No newline at end of file
diff --git a/src/pages/LoginPage.js b/src/pages/LoginPage.js
index 8eeee7c..b16bba8 100644
--- a/src/pages/LoginPage.js
+++ b/src/pages/LoginPage.js
@@ -1,10 +1,13 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import Button from "../components/Button";
 import Logo from "../components/Logo";
 
 const LoginPage = () => {
+    const navigate = useNavigate();
     const handleKakaoLogin = () => {
         //window.location.href = "나중에 카카오 로그인 키. "
+        navigate("/signup");
     };
 
     return (
diff --git a/src/pages/SignupPage.js b/src/pages/SignupPage.js
index 64afa45..bfd40f1 100644
--- a/src/pages/SignupPage.js
+++ b/src/pages/SignupPage.js
@@ -1,10 +1,12 @@
 import React from "react";
+import { useNavigate } from "react-router-dom";
 import Button from "../components/Button";
+import Logo from "../components/Logo";
 
 const SignupPage = () => {
     return(
         <div style={styles.container}>
-            <img src="heart.png" alt="heart" style={styles.image} />
+            <Logo />
             <h2 style={styles.title}>회원 정보 입력</h2>
 
             <input style={styles.input} placeholder="보호자 이름을 입력하세요."/>