diff --git a/src/pages/SignupPage.js b/src/pages/SignupPage.js index 2991c51..5d43afd 100644 --- a/src/pages/SignupPage.js +++ b/src/pages/SignupPage.js @@ -1,49 +1,145 @@ -import React from "react"; +import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import Button from "../components/Button"; import Logo from "../components/Logo"; const SignupPage = () => { const navigate = useNavigate(); - return( + + const [guardianName, setGuardianName] = useState(""); + const [guardianBirth, setGuardianBirth] = useState(""); + const [patientName, setPatientName] = useState(""); + const [patientBirth, setPatientBirth] = useState(""); + const [showPopup, setShowPopup] = useState(false); // 팝업 상태 + + const handleSubmit = () => { + if (!guardianName || !guardianBirth || !patientName || !patientBirth) { + setShowPopup(true); + return; + } + + navigate("/voice-training"); + }; + + return (

회원 정보 입력

- - - - +
+ + setGuardianName(e.target.value)} + /> +
+ +
+ + setGuardianBirth(e.target.value)} + /> +
- +
+ + )} ); }; const styles = { container: { - display : "flex", - flexDirection : "column", + display: "flex", + flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100vh", backgroundColor: "#F8EAD2", - }, - image: { - width: "100px", - marginBottom: "20px", + padding: "0 20px", }, title: { fontSize: "24px", marginBottom: "20px", }, + inputGroup: { + width: "100%", + maxWidth: "400px", + marginBottom: "15px", + }, + label: { + display: "block", + marginBottom: "5px", + fontWeight: "bold", + }, input: { - width: "80%", + width: "100%", padding: "10px", - marginBottom: "10px", borderRadius: "10px", border: "1px solid #ccc", + boxSizing: "border-box", + }, + popupOverlay: { + position: "fixed", + top: 0, + left: 0, + width: "100vw", + height: "100vh", + backgroundColor: "rgba(0, 0, 0, 0.3)", + display: "flex", + alignItems: "center", + justifyContent: "center", + zIndex: 999, + }, + popup: { + backgroundColor: "#fff", + padding: "30px 40px", + borderRadius: "12px", + boxShadow: "0 4px 12px rgba(0, 0, 0, 0.2)", + textAlign: "center", + }, + popupButton: { + padding: "8px 16px", + borderRadius: "8px", + border: "none", + backgroundColor: "#DABEC9", + cursor: "pointer", }, }; -export default SignupPage; \ No newline at end of file +export default SignupPage;