+
+
+
+
+ );
+};
+
+const ApplicationForm = () =>{
+ return(
+
+
+
+
+
안녕하세요!
+
와 함께하는 입점을 고려해 주셔서 감사합니다.
+
아래의 문서들을 미리 준비해 주시면
+
입점 신청이 더욱 수월하게 진행됩니다.
+
+
사업자등록증 (jpg 또는 jpeg 형식)
+
영업신고증 (jpg 또는 jpeg 형식)
+
신분증 (jpg 또는 jpeg 형식)
+
통장사본 (jpg 또는 jpeg 형식)
+
+
작성 중 어움이 있으시면 아래 카카오톡 채팅방으로 연락 주세요.
+
+
+
+
+
+
레디베이 상담
+
매일 00:00 ~ 24:00
+
+
+
+
+ 확인
+
+
+ )
+}
+
+export default ApplicationForm;
\ No newline at end of file
diff --git a/src/components/signup/CircleNumBar/CircleNumBar.css b/src/components/signup/CircleNumBar/CircleNumBar.css
new file mode 100644
index 0000000..94b2fa1
--- /dev/null
+++ b/src/components/signup/CircleNumBar/CircleNumBar.css
@@ -0,0 +1,126 @@
+/* 안의 내용 */
+.circle-num-ber-wrapper{
+ display: flex;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+}
+/* .circle-num-ber-wrapper1{
+ display: flex;
+ width: 22.4rem;
+ justify-content: center;
+} */
+
+/* 원 */
+.circle-num-wapper{
+ min-width: 1.15rem;
+ min-height: 1.15rem;
+ border-radius: 50%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-family: "Pretendard";
+ /* font-size: 0.72rem; */
+ font-weight: 800;
+}
+/* 원 색상 */
+.circle-num-wapper-point{
+ border: 0.2rem solid rgba(79, 79, 79, 1);
+ color: rgba(79, 79, 79, 1);
+}
+.circle-num-wapper-not-point{
+ border: 0.2rem solid rgba(217, 217, 217, 1);
+ color:rgba(217, 217, 217, 1);
+}
+
+/* 바 */
+.bar-wapper{
+ min-width: 3.8rem;
+ height: 0.2rem;
+ margin: 0 0.33rem 0 0.33rem;
+ border-radius: 0.1rem;
+}
+/* 바 색상 */
+.bar-wapper-point{
+ background-color: rgba(79, 79, 79, 1);
+}
+.bar-wapper-not-point{
+ background-color:rgba(217, 217, 217, 1);
+}
+
+/* 글자 */
+.circle-num-ber-text-wrapper{
+ position: absolute;
+ bottom: -1rem;
+ display: flex;
+ transform: translateX(-51%);
+ width: 100%;
+ align-items: center;
+ justify-content: center;
+}
+
+.circle-num-bar-text-content{
+ color: rgba(217, 217, 217, 1);
+ text-align: center;
+ font-family: "Pretendard";
+ font-size: 0.6rem;
+ font-weight: 800;
+}
+/* 글자 색 */
+.circle-num-bar-text-point{
+ color: rgba(79, 79, 79, 1);
+}
+.circle-num-bar-text-not-point{
+ color:rgba(217, 217, 217, 1);
+}
+
+
+/* w:768, h:1024일 때 */
+@media screen and (min-width: 481px) and (max-width: 768px) {
+ .circle-num-wapper{
+ width: 2rem;
+ height: 2rem;
+ font-size: 1.2rem;
+ }
+ .bar-wapper{
+ width: 6rem;
+ height: 0.2rem;
+ margin: 0 0.33rem 0 0.33rem;
+ border-radius: 0.1rem;
+ }
+ .circle-num-bar-text-content{
+ font-size: 0.8rem;
+ }
+ .circle-num-ber-text-wrapper{
+ bottom: -1.35rem;
+ }
+}
+
+/* w:1024, h:1024일 때 */
+@media screen and (min-width: 769px) {
+ .circle-num-wapper{
+ width: 2rem;
+ height: 2rem;
+ font-size: 1.2rem;
+ }
+ .bar-wapper{
+ width: 6rem;
+ height: 0.2rem;
+ margin: 0 0.33rem 0 0.33rem;
+ border-radius: 0.1rem;
+ }
+ .circle-num-bar-text-content{
+ font-size: 0.8rem;
+ }
+ .circle-num-ber-text-wrapper{
+ bottom: -1.35rem;
+ }
+}
+
+/* w:480, h:800일 때 */
+@media screen and (max-width: 480px) {
+ .circle-num-wapper{
+ font-size: 0.72rem;
+ }
+}
diff --git a/src/components/signup/CircleNumBar/CircleNumBar.jsx b/src/components/signup/CircleNumBar/CircleNumBar.jsx
new file mode 100644
index 0000000..5ca26f9
--- /dev/null
+++ b/src/components/signup/CircleNumBar/CircleNumBar.jsx
@@ -0,0 +1,49 @@
+import "./CircleNumBar.css";
+const CircleNumBar = ({ step }) => {
+ const NumBar = ({ isPoint }) => {
+ const barClassName = isPoint ? 'bar-wapper-point' : 'bar-wapper-not-point';
+ return(
+
+ )
+ }
+ const CircleNumWrapper = ({ text, isPoint, children }) => {
+ const wrapperClassName = isPoint ? 'circle-num-wapper-point' : 'circle-num-wapper-not-point';
+ return (
+
+ {text}
+
+ {children}
+
+
+ );
+ }
+ const CircleNumText = ({ bartext, isPoint}) => {
+ const textClassName = isPoint ? 'circle-num-bar-text-point' : 'circle-num-bar-text-not-point';
+ return(
+
+ )
+ }
+ return (
+
+
+ = 1}>
+ = 1}/>
+
+ = 2} />
+ = 2}>
+ = 2}/>
+
+ = 3} />
+ = 3} >
+ = 3}/>
+
+
+
+ );
+};
+
+export default CircleNumBar;
\ No newline at end of file
diff --git a/src/components/signup/UserInput/UserInputId/UserInputId.css b/src/components/signup/UserInput/UserInputId/UserInputId.css
new file mode 100644
index 0000000..93fee5a
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputId/UserInputId.css
@@ -0,0 +1,96 @@
+/* UserInPutId */
+.signup-page-content-id-wrapper{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.signup-page-content-id-label-style{
+ color: #2E2D2D;
+ font-family: "Pretendard";
+ font-weight: 600;
+}
+
+.signup-page-content-id-label-plus-text{
+ display: flex;
+ color: #838383;
+ font-size: 0.6rem;
+ font-weight: 500;
+ align-items: center;
+ justify-content: space-between;
+}
+
+.signup-page-content-id-input{
+ margin-top: 0.3rem; /* 0.6 -0.3 = 0.3 */
+ margin-bottom: 0.35rem;
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ padding: 0.8rem 1rem 0.7rem 1.2rem;
+ font-family: "Pretendard";
+}
+
+/* UserInputId button */
+.duplication-check-button{
+ border-radius: 1.5rem;
+ background: #D82356;
+ border: none;
+ color: rgb(255, 255, 255);
+ font-family: "Pretendard";
+ font-weight: 700;
+}
+
+/* w:768이상~ h:1024일 때 */
+@media screen and (min-width: 481px) {
+ .signup-page-content-id-wrapper{
+ margin-bottom: 1.5rem;
+ }
+
+ .signup-page-content-id-label-style{
+ font-size: 1rem;
+ }
+
+ .signup-page-content-id-label-plus-text{
+ width: 23rem;
+ }
+
+ .signup-page-content-id-input{
+ font-size: 1rem;
+ width: 21rem;/*23.2rem-2.2rem*/
+ height: 1rem; /*2.5rem-1.5rem*/
+ }
+
+ /* UserInputId button */
+ .duplication-check-button{
+ width: 4rem;
+ height: 1rem;
+ font-size: 0.6rem;
+ }
+}
+
+/* w:480, h:800일 때 */
+@media screen and (max-width: 480px) {
+ .signup-page-content-id-wrapper{
+ margin-bottom: 1.5rem;
+ }
+
+ .signup-page-content-id-label-style{
+ font-size: 0.8rem;
+ }
+
+ .signup-page-content-id-label-plus-text{
+ width: 17rem;
+ }
+
+ .signup-page-content-id-input{
+ font-size: 0.8rem;
+ width: 15rem;/*23.2rem-2.2rem*/
+ height: 0.6rem; /*2.5rem-1.5rem*/
+ }
+
+ /* UserInputId button */
+ .duplication-check-button{
+ width: 2.7rem;
+ height: 0.8rem;
+ font-size: 0.4rem;
+ }
+}
\ No newline at end of file
diff --git a/src/components/signup/UserInput/UserInputId/UserInputId.jsx b/src/components/signup/UserInput/UserInputId/UserInputId.jsx
new file mode 100644
index 0000000..9943b8d
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputId/UserInputId.jsx
@@ -0,0 +1,63 @@
+import LoginChkAlrm from "../../../login/LoginChkAlrm/LoginChkAlrm";
+import "./UserInputId.css";
+import { useState } from "react";
+
+const UserInputId = () => {
+ // 아이디 입력 값 처리
+ const [inputId, setInputId] = useState("");
+ const [inputIdError, setInputIdError] = useState(false);
+ const isInputIdLength = (inputId) => {
+ const minLength = 8;
+ return inputId.length >= minLength;
+ };
+ const isInputIdCombinationValid = (inputId) => {
+ const hasLetter = /[a-zA-Z]/.test(inputId);
+ const hasNumber = /\d/.test(inputId);
+ return hasLetter && hasNumber;
+ };
+ const handleInputChange = (e) => {
+ const userInputId = e.target.value;
+ setInputId(userInputId);
+ validateUserInputId(userInputId);
+ };
+ const validateUserInputId = (userInputId) => {
+ if (!isInputIdLength(userInputId)) {
+ setInputIdError(true);
+ } else if (!isInputIdCombinationValid(userInputId)) {
+ setInputIdError(true);
+ } else {
+ setInputIdError(false);
+ }
+ };
+
+ return(
+
+
+
+
영문+숫자+특수기호 8자 이상
+
+
+
+
+
+ {inputIdError ? (
+
+ { !isInputIdLength(inputId)
+ ? "8자 이상 입력해야 합니다."
+ : !isInputIdCombinationValid(inputId)
+ ? "영문+숫자의 조합이어야 합니다."
+ : null}
+
+ ) :
+ }
+
+ )
+}
+export default UserInputId;
\ No newline at end of file
diff --git a/src/components/signup/UserInput/UserInputName/UserInputName.css b/src/components/signup/UserInput/UserInputName/UserInputName.css
new file mode 100644
index 0000000..9ecddbe
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputName/UserInputName.css
@@ -0,0 +1,26 @@
+/* UserInputName */
+.signup-page-content-name-wrapper{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.signup-page-content-name-label-style{
+ color: #2E2D2D;
+ font-family: "Pretendard";
+ font-size: 1rem;
+ font-weight: 600;
+ /* margin-bottom: 0.4rem; */
+}
+
+.signup-page-content-name-input{
+ margin-top: 0.3rem; /* 0.6 -0.3 = 0.3 */
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ font-size: 0.8rem;
+ margin-bottom: 0.35rem;
+ width: 21rem;/*17.55rem-2.2rem*/
+ height: 1rem; /*2.5rem-1.5rem*/
+ padding: 0.8rem 1rem 0.7rem 1.2rem;
+ font-family: "Pretendard";
+}
\ No newline at end of file
diff --git a/src/components/signup/UserInput/UserInputName/UserInputName.jsx b/src/components/signup/UserInput/UserInputName/UserInputName.jsx
new file mode 100644
index 0000000..e89b20f
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputName/UserInputName.jsx
@@ -0,0 +1,50 @@
+import LoginChkAlrm from "../../../login/LoginChkAlrm/LoginChkAlrm";
+import "./UserInputName.css";
+import { useState } from "react";
+
+const UserInputName = () => {
+ // 아이디 입력 값 처리
+ const [inputName, setInputName] = useState("");
+ const [inputNameError, setInputNameError] = useState(false);
+ const isInputNameLength = (inputName) => {
+ const minLength = 0;
+ return inputName.length > minLength;
+ };
+
+ const handleInputChange = (e) => {
+ const userInputName = e.target.value;
+ setInputName(userInputName);
+ validateUserInputName(userInputName);
+ };
+ const validateUserInputName = (userInputName) => {
+ if (!isInputNameLength(userInputName)) {
+ setInputNameError(true);
+ }else {
+ setInputNameError(false);
+ }
+ };
+ return(
+
+
+
+
+
+ {inputNameError ? (
+
+ { !isInputNameLength(inputName)
+ ? "공백이 아니여야합니다."
+ : null}
+
+ ) :
+ }
+
+ )
+}
+export default UserInputName;
\ No newline at end of file
diff --git a/src/components/signup/UserInput/UserInputNumber/UserInputNumber.css b/src/components/signup/UserInput/UserInputNumber/UserInputNumber.css
new file mode 100644
index 0000000..5244ace
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputNumber/UserInputNumber.css
@@ -0,0 +1,58 @@
+/* UserInputPassword */
+.user-input-phone-number-content-number-wrapper{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ position: relative;
+}
+
+.user-input-phone-number-content-number-label-style{
+ color: #2E2D2D;
+ font-family: "Pretendard";
+ font-size: 1rem;
+ font-weight: 600;
+ margin-top: 4rem;
+}
+
+.user-input-phone-number-wrapper{
+ display: flex;
+ align-items: center;
+ width: 22.3rem;
+}
+
+.user-input-phone-number-input{
+ margin-top: 0.3rem; /* 0.6 -0.3 = 0.3 */
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ font-size: 0.8rem;
+ margin-bottom: 0.35rem;
+ width: 15rem;/*17.55rem-2.2rem*/
+ height: 1rem; /*2.5rem-1.5rem*/
+ padding: 0.8rem 1rem 0.7rem 1.2rem;
+ font-family: "Pretendard";
+}
+
+.user-input-phone-number-button{
+ width: 5.2rem;/*4.3rem-2.2rem*/
+ height: 2.5rem; /*2.5rem-1.5rem*/
+ margin-left: 0.25rem;
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ background-color: white;
+ font-family: "Pretendard";
+ font-size: 0.8rem;
+ font-weight: 500;
+}
+
+.user-input-phone-number-button-clicked{
+ background-color: #FFEAEF;
+}
+
+.user-input-phone-number-auth-button{
+ width: 100%;
+ justify-items: center;
+ align-items: center;
+ /* margin-top: 2.1rem; */
+ position: absolute;
+ bottom: -50%;
+}
\ No newline at end of file
diff --git a/src/components/signup/UserInput/UserInputNumber/UserInputNumber.jsx b/src/components/signup/UserInput/UserInputNumber/UserInputNumber.jsx
new file mode 100644
index 0000000..5f3150e
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputNumber/UserInputNumber.jsx
@@ -0,0 +1,63 @@
+import "./UserInputNumber.css";
+import { useState } from "react";
+import UserInputNumberMessage from "./UserInputNumberMessage/UserInputNumberMessage";
+import RedButton from "../../../login/redButton/RedButton";
+
+function PhoneCertificationInput({ id, type, placeholder, requiredname, text, buttonText }) {
+ const [chkButton, setChkButton] = useState(false); // 인증버튼 클릭 여부
+
+ const handleButtonClick = () => {
+ setChkButton(true);
+ };
+
+ const renderUserInputNumberMessage = () => {
+ if (type === "tel" && chkButton) {
+ return
;
+ }
+ return null;
+ };
+
+ return (
+ <>
+
+
+
+
+ {renderUserInputNumberMessage()}
+
+ {buttonText}
+
+
+ );
+}
+
+
+const UserInputNumber = () => {
+
+ return(
+
+ )
+}
+export default UserInputNumber;
\ No newline at end of file
diff --git a/src/components/signup/UserInput/UserInputNumber/UserInputNumberMessage/UserInputNumberMessage.css b/src/components/signup/UserInput/UserInputNumber/UserInputNumberMessage/UserInputNumberMessage.css
new file mode 100644
index 0000000..4bf8b28
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputNumber/UserInputNumberMessage/UserInputNumberMessage.css
@@ -0,0 +1,26 @@
+.user-input-number-message-wrapper{
+ position: relative;
+ align-items: center;
+ display: flex;
+}
+
+.user-input-number-message-input{
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ font-size: 0.8rem;
+ margin: 0.4375rem 0;
+ width: 21.3rem;
+ height: 1rem;
+ padding: 0.8rem 0rem 0.7rem 1rem;
+ font-family: "Pretendard";
+}
+
+.user-input-number-message-timer{
+ display: flex;
+ position: absolute;
+ right: 1rem;
+ top: 35%;
+ font-family: "Pretendard";
+ font-size: 0.8rem;
+ color: #838383;
+}
\ No newline at end of file
diff --git a/src/components/signup/UserInput/UserInputNumber/UserInputNumberMessage/UserInputNumberMessage.jsx b/src/components/signup/UserInput/UserInputNumber/UserInputNumberMessage/UserInputNumberMessage.jsx
new file mode 100644
index 0000000..a3a3794
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputNumber/UserInputNumberMessage/UserInputNumberMessage.jsx
@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from "react";
+
+import "./UserInputNumberMessage.css";
+import LoginChkAlrm from "../../../../login/LoginChkAlrm/LoginChkAlrm";
+
+const AUTH_CODE = "1234";//서버에서 받아오는 값
+const TIMER_DURATION = 600;//타이머 시간 설정(600초)
+
+const Timer = ({ minutes, seconds }) => (
+
+ {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
+
+);
+
+
+function UserInputNumberMessage(){
+ const [chkNum, setChkNum] = useState("");
+ const [timer, setTimer] = useState(TIMER_DURATION);
+ const [isAuth, setIsAuth] = useState();
+
+ useEffect(() => {
+ const interval = setInterval(() => {
+ setTimer((prevTimer) => prevTimer - 1);
+ }, 1000);
+
+ return () => clearInterval(interval);
+ }, [setTimer]);
+
+ const handleInputText = (e) => {
+ const newChkNum = e.target.value;
+ setChkNum(newChkNum);
+ equlChknum(newChkNum, AUTH_CODE);
+ };
+
+ const equlChknum = (inputNum, serverNum) => {
+ if (serverNum === inputNum) {
+ setIsAuth(true);
+ } else if (serverNum !== inputNum) {
+ setIsAuth(false);
+ } else {
+ setIsAuth(null);
+ }
+ };
+
+ const renderMessage = () => {
+ if (timer <= 0) {
+ return
인증 시간이 초과되었습니다.;
+ } else if (timer > 0 && !isAuth) {
+ return
인증번호가 일치하지 않습니다.;
+ } else if (timer > 0 && isAuth) {
+ return
인증이 완료되었습니다.;
+ }
+ };
+
+ return (
+ <>
+
+
+ {timer > 0 && (
+
+
+
+ )}
+
+
{renderMessage()}
+
+ );
+};
+
+export default UserInputNumberMessage;
diff --git a/src/components/signup/UserInput/UserInputPassword/UserInputPassword.css b/src/components/signup/UserInput/UserInputPassword/UserInputPassword.css
new file mode 100644
index 0000000..bc4e80a
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputPassword/UserInputPassword.css
@@ -0,0 +1,70 @@
+/* UserInputPassword */
+.signup-page-content-password-wrapper{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.signup-page-content-password-label-style{
+ color: #2E2D2D;
+ font-family: "Pretendard";
+ font-weight: 600;
+}
+
+.signup-page-content-password-label-plus-text{
+ display: flex;
+ color: #838383;
+ font-weight: 500;
+ align-items: center;
+}
+
+.signup-page-content-password-input{
+ margin-top: 0.3rem; /* 0.6 -0.3 = 0.3 */
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ margin-bottom: 0.35rem;
+ padding: 0.8rem 1rem 0.7rem 1.2rem;
+ font-family: "Pretendard";
+}
+
+/* w:768이상~ h:1024일 때 */
+@media screen and (min-width: 481px) {
+ .signup-page-content-password-wrapper{
+ margin-bottom: 1.5rem;
+ }
+
+ .signup-page-content-password-label-style{
+ font-size: 1rem;
+ }
+ .signup-page-content-password-label-plus-text{
+ font-size: 0.6rem;
+ width: 23rem;
+ }
+
+ .signup-page-content-password-input{
+ font-size: 1rem;
+ width: 21rem;/*23.2rem-2.2rem*/
+ height: 1rem; /*2.5rem-1.5rem*/
+ }
+}
+
+/* w:480, h:800일 때 */
+@media screen and (max-width: 480px) {
+ .signup-page-content-password-wrapper{
+ margin-bottom: 1.5rem;
+ }
+
+ .signup-page-content-password-label-style{
+ font-size: 0.8rem;
+ }
+
+ .signup-page-content-password-label-plus-text{
+ width: 17rem;
+ font-size: 0.6rem;
+ }
+ .signup-page-content-password-input{
+ font-size: 0.8rem;
+ width: 15rem;/*23.2rem-2.2rem*/
+ height: 0.6rem; /*2.5rem-1.5rem*/
+ }
+}
\ No newline at end of file
diff --git a/src/components/signup/UserInput/UserInputPassword/UserInputPassword.jsx b/src/components/signup/UserInput/UserInputPassword/UserInputPassword.jsx
new file mode 100644
index 0000000..4a92fba
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputPassword/UserInputPassword.jsx
@@ -0,0 +1,92 @@
+import LoginChkAlrm from "../../../login/LoginChkAlrm/LoginChkAlrm";
+import "./UserInputPassword.css";
+import { useState } from "react";
+
+
+
+const UserInputPassword = () => {
+ const [password, setPassword] = useState("");
+ const [passwordCheck, setPasswordCheck] = useState("");
+ const [passwordError, setPasswordError] = useState(false);
+
+ // 비밀번호 일치 여부 확인
+ const handlePasswordChange = (e) => {
+ const newPassword = e.target.value;
+ setPassword(newPassword);
+ validatePassword(newPassword, passwordCheck);
+ };
+
+ const handlePasswordCheckChange = (e) => {
+ const newPasswordCheck = e.target.value;
+ setPasswordCheck(newPasswordCheck);
+ validatePassword(password, newPasswordCheck);
+ };
+
+ const isPasswordLength = (password) => {
+ const minLength = 8;
+ return password.length >= minLength;
+ };
+
+ const isPasswordCombinationValid = (password) => {
+ const hasLetter = /[a-zA-Z]/.test(password);
+ const hasNumber = /\d/.test(password);
+ const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+ return hasLetter && hasNumber && hasSpecialChar;
+ };
+
+ const validatePassword = (newPassword, newPasswordCheck) => {
+ if (newPassword !== newPasswordCheck) {
+ setPasswordError(true);
+ } else if (!isPasswordLength(newPassword)) {
+ setPasswordError(true);
+ } else if (!isPasswordCombinationValid(newPassword)) {
+ setPasswordError(true);
+ } else {
+ setPasswordError(false);
+ }
+ };
+ return(
+
+
+
+ 영문+숫자+특수문자 8자 이상
+
+
+
+
+
+
+ {/* 비밀번호 일치 여부에 따른 에러 메시지 */}
+ {passwordError ? (
+
+ {password !== passwordCheck
+ ? "비밀번호가 일치하지 않습니다."
+ : !isPasswordLength(password)
+ ? "8자 이상 입력해야 합니다."
+ : !isPasswordCombinationValid(password)
+ ? "영문+숫자+특수문자의 조합이어야 합니다."
+ : null}
+
+ ) :
+ }
+
+
+ )
+}
+
+export default UserInputPassword;
\ No newline at end of file
diff --git a/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation.css b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation.css
new file mode 100644
index 0000000..5f03434
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation.css
@@ -0,0 +1,65 @@
+/* UserInPutId */
+.signup-page-content-id-wrapper{
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ margin-bottom: 1.5rem;
+}
+
+.signup-page-content-id-label-style{
+ display: flex;
+ color: #2E2D2D;
+ font-family: "Pretendard";
+ font-size: 1rem;
+ font-weight: 600;
+}
+
+.signup-page-content-id-label-plus-text{
+ display: flex;
+ /* margin-bottom: 0.4rem; */
+ color: #838383;
+ font-size: 0.6rem;
+ font-weight: 500;
+ align-items: center;
+}
+
+.signup-page-content-id-input{
+ margin-top: 0.3rem; /* 0.6 -0.3 = 0.3 */
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ font-size: 0.8rem;
+ margin-bottom: 0.35rem;
+ width: 21rem;/*23.2rem-2.2rem*/
+ height: 1rem; /*2.5rem-1.5rem*/
+ padding: 0.8rem 1rem 0.7rem 1.2rem;
+ font-family: "Pretendard";
+}
+
+/* UserInputId button */
+.duplication-check-button{
+ border-radius: 1.5rem;
+ background: #D82356;
+ border: none;
+ color: rgb(255, 255, 255);
+ width: 4rem;
+ height: 1rem;
+ font-family: "Pretendard";
+ font-size: 0.6rem;
+ font-weight: 700;
+ margin-left: 11rem;
+}
+
+.signup-page-content-id-input2{
+ margin-top: 0.3rem; /* 0.6 -0.3 = 0.3 */
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ font-size: 0.8rem;
+ margin-bottom: 0.35rem;
+ width: 21rem;/*23.2rem-2.2rem*/
+ height: 1rem; /*2.5rem-1.5rem*/
+ padding: 0.8rem 1rem 0.7rem 1.2rem;
+ font-family: "Pretendard";
+ border: none;
+ outline: none;
+ background-color: inherit ;
+}
\ No newline at end of file
diff --git a/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation.jsx b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation.jsx
new file mode 100644
index 0000000..d4caf39
--- /dev/null
+++ b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation.jsx
@@ -0,0 +1,198 @@
+import React, { useState } from "react";
+import { Modal } from "antd";
+import "./UserInputStoreInformation";
+import DaumPostcode from "react-daum-postcode";
+
+const InputStoreInformationText = ({ title, id, placeholder, requiredname }) => {
+ return (
+
+ );
+};
+
+const InputStoreAddressWrapper = () => {
+ const [postAddress, setPostAddress] = useState("");
+ const [openModal, setOpenModal] = useState(false);
+
+ const handleComplete = (data) => {
+ setPostAddress(data.address);
+ onOpenPostModal();
+ };
+
+ const onOpenPostModal = () => {
+ setOpenModal((prev) => !prev);
+ };
+
+ return (
+
+ );
+};
+
+const InputStoreInformationflie = ({ title, id, requiredname }) => {
+ const [selectedFile, setSelectedFile] = useState(null);
+ const [fileSizeError, setFileSizeError] = useState(false);
+ if(fileSizeError){
+ console.log("파일크기 에러");
+ }
+ const InputFilesss = () => {
+ const handleFileChange = (event) => {
+ const file = event.target.files[0];
+
+ if (file && file.size <= 10 * 1024 * 1024) {
+ setSelectedFile(file);
+ setFileSizeError(false);
+ } else {
+ setFileSizeError(true);
+ setSelectedFile(null);
+ }
+ };
+
+ return (
+
+ );
+ };
+
+ return (
+
+
+
+
+ {
+ const inputFile = document.getElementById(id);
+ if (inputFile) {
+ inputFile.click();
+ }
+ }}
+ className="signup-page-content-id-input"
+ />
+
+
+ );
+};
+
+const ConsentForm = () => {
+ const [personalInfoConsent, setPersonalInfoConsent] = useState(false);
+
+ const handlePersonalInfoConsentChange = () => {
+ setPersonalInfoConsent((prev) => !prev);
+ };
+
+ return (
+
+ {/* 약관 나오면 입히기 */}
+
+
+
+ );
+};
+
+const UserInputStoreInformation = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default UserInputStoreInformation;
diff --git a/src/pages/Find/FindIdPage/FindIdPage.jsx b/src/pages/Find/FindIdPage/FindIdPage.jsx
new file mode 100644
index 0000000..1bd1fcb
--- /dev/null
+++ b/src/pages/Find/FindIdPage/FindIdPage.jsx
@@ -0,0 +1,20 @@
+import React from "react";
+import Container from "../../../components/login/Container/Container";
+import CertificationInput from "../../../components/login/Certification/CertificationInput/CertificationInput";
+
+function FindIdPage () {
+ return(
+
+
+
+
+ )
+}
+export default FindIdPage;
\ No newline at end of file
diff --git a/src/pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.css b/src/pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.css
new file mode 100644
index 0000000..1f019b3
--- /dev/null
+++ b/src/pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.css
@@ -0,0 +1,33 @@
+.none-find-id-page-frame{
+ width:100%;
+ max-width: 17rem;
+ margin-top: 2.35rem;/* 4.7-2.35 */
+}
+
+.none-find-id-page-text{
+ font-family: "Pretendard";
+ font-size: 1.2rem;
+ font-weight: 500;
+}
+
+.none-find-id-page-link-wrapper{
+ margin: 4.15rem 0;
+ text-decoration: none;
+ color: rgba(131, 131, 131, 1);
+}
+
+.none-find-id-page-login-link{
+ text-decoration: none;
+ color: rgba(131, 131, 131, 1);
+}
+
+.none-find-id-page-link-button{
+ border: none;
+ background-color: white;
+ cursor: pointer;
+ font-family: "Pretendard";
+ font-size: 0.8rem;
+ font-weight: 500;
+ text-align: center;
+ margin: 1.35rem 0;
+}
\ No newline at end of file
diff --git a/src/pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.jsx b/src/pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.jsx
new file mode 100644
index 0000000..8b38872
--- /dev/null
+++ b/src/pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.jsx
@@ -0,0 +1,24 @@
+import React from "react";
+import Container from "../../../../components/login/Container/Container";
+import "./NoneFindIdPage.css";
+import RedButton from "../../../../components/login/redButton/RedButton";
+import { Link } from "react-router-dom";
+function NoneFindIdPage () {
+ return(
+
+
+
존재하지 않는 아이디입니다.
+
+
+ 회원가입
+
+
+
+
+ )
+}
+
+export default NoneFindIdPage;
\ No newline at end of file
diff --git a/src/pages/Find/FindIdPage/UserFindIdPage/UserFindIdPage.css b/src/pages/Find/FindIdPage/UserFindIdPage/UserFindIdPage.css
new file mode 100644
index 0000000..3e0fdaf
--- /dev/null
+++ b/src/pages/Find/FindIdPage/UserFindIdPage/UserFindIdPage.css
@@ -0,0 +1,44 @@
+.user-find-id-page-frame{
+ width:100%;
+ max-width: 17rem;
+}
+
+.user-find-id-page-text-output{
+ font-family: "Pretendard";
+ font-size: 0.8rem;
+ font-weight: 500;
+}
+
+.user-find-id-page-text-output{
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ font-size: 0.8rem;
+ margin: 2.75rem 0;
+ width: 15rem;/*17rem-2rem*/
+ height: 1rem; /*3.8rem-2.8rem*/
+ padding: 1.4rem 1rem 1.4rem 1rem;
+ font-family: "Pretendard";
+ background-color: #FFEAEF;
+}
+
+.user-find-id-page-link-wrapper{
+ margin: 0.9rem 0; /* 3.65-2.75 */
+ text-decoration: none;
+ color: rgba(131, 131, 131, 1);
+}
+
+.user-find-id-page-login-link{
+ text-decoration: none;
+ color: rgba(131, 131, 131, 1);
+}
+
+.user-find-id-page-login-link-button{
+ border: none;
+ background-color: white;
+ cursor: pointer;
+ font-family: "Pretendard";
+ font-size: 0.8rem;
+ font-weight: 500;
+ text-align: center;
+ margin: 1.35rem 0;
+}
\ No newline at end of file
diff --git a/src/pages/Find/FindIdPage/UserFindIdPage/UserFindIdPage.jsx b/src/pages/Find/FindIdPage/UserFindIdPage/UserFindIdPage.jsx
new file mode 100644
index 0000000..d358a51
--- /dev/null
+++ b/src/pages/Find/FindIdPage/UserFindIdPage/UserFindIdPage.jsx
@@ -0,0 +1,33 @@
+import React from "react";
+import Container from "../../../../components/login/Container/Container";
+import "./UserFindIdPage.css";
+import RedButton from "../../../../components/login/redButton/RedButton";
+import { Link } from "react-router-dom";
+
+function UserFindIdPage () {
+ const idText ="kjwoo0121@naver.com";//서버에서 값 가져오기
+ return(
+
+
+
+ 가입하신 아이디는 아래와 같습니다.
+
+
+
+
+ 로그인
+
+
+
+
+ )
+}
+
+export default UserFindIdPage;
\ No newline at end of file
diff --git a/src/pages/Find/FindPasswordPage/ChangePasswordPage/ChangeNewPasswordPage/ChangeNewPasswordPage.css b/src/pages/Find/FindPasswordPage/ChangePasswordPage/ChangeNewPasswordPage/ChangeNewPasswordPage.css
new file mode 100644
index 0000000..8f9524d
--- /dev/null
+++ b/src/pages/Find/FindPasswordPage/ChangePasswordPage/ChangeNewPasswordPage/ChangeNewPasswordPage.css
@@ -0,0 +1,63 @@
+.password-changepage-qualification-text{
+ display: flex;
+ font-family: "Pretendard";
+ font-size: 0.6rem;
+ font-weight: 500;
+ margin: 0 0 0.2rem 1.14rem;
+ color: rgba(131, 131, 131, 1);
+}
+
+.password-changepage-form{
+ line-height: 1.2rem;
+ height: 12.6rem;
+ min-width: 15rem;
+ position: relative;
+}
+
+.password-changepage-password-input{
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ font-size: 0.8rem;
+ margin-bottom: 0.35rem;
+ min-width: 13rem;/*17rem-2rem*/
+ height: 1rem; /*2.5rem-1.5rem*/
+ padding: 0.7rem 1rem 0.7rem 0.9rem;
+ font-family: "Pretendard";
+}
+
+.password-changepage-submit-wrapper{
+ position: absolute;
+ top: 10.25rem;
+ transform: translateX(0%);
+}
+
+
+/* w:768, h:1024일 때 */
+@media screen and (min-width: 481px) and (max-width: 768px) {
+ .password-changepage-password-input {
+ width: 15rem;
+ }
+ .password-changepage-form{
+ width: 17rem;
+ }
+}
+
+/* w:1024, h:1024일 때 */
+@media screen and (min-width: 769px) {
+ .password-changepage-password-input {
+ width: 15rem;
+ }
+ .password-changepage-form{
+ width: 17rem;
+ }
+}
+
+/* w:480, h:800일 때 */
+@media screen and (max-width: 480px) {
+ .loginpage-findId-form-submit{
+ max-width: 4.4rem;
+ }
+ .password-changepage-form{
+ width: 15rem;
+ }
+}
diff --git a/src/pages/Find/FindPasswordPage/ChangePasswordPage/ChangeNewPasswordPage/ChangeNewPasswordPage.jsx b/src/pages/Find/FindPasswordPage/ChangePasswordPage/ChangeNewPasswordPage/ChangeNewPasswordPage.jsx
new file mode 100644
index 0000000..52532a5
--- /dev/null
+++ b/src/pages/Find/FindPasswordPage/ChangePasswordPage/ChangeNewPasswordPage/ChangeNewPasswordPage.jsx
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import Container from "../../../../../components/login/Container/Container";
+import LoginChkAlrm from "../../../../../components/login/LoginChkAlrm/LoginChkAlrm";
+import RedButton from "../../../../../components/login/redButton/RedButton";
+import "./ChangeNewPasswordPage.css";
+
+function ChangeNewPasswordPage() {
+ const [password, setPassword] = useState("");
+ const [passwordCheck, setPasswordCheck] = useState("");
+ const [passwordError, setPasswordError] = useState(false);
+
+ // 비밀번호 일치 여부 확인
+ const handlePasswordChange = (e) => {
+ const newPassword = e.target.value;
+ setPassword(newPassword);
+ validatePassword(newPassword, passwordCheck);
+ };
+
+ const handlePasswordCheckChange = (e) => {
+ const newPasswordCheck = e.target.value;
+ setPasswordCheck(newPasswordCheck);
+ validatePassword(password, newPasswordCheck);
+ };
+
+ const isPasswordLength = (password) => {
+ const minLength = 8;
+ return password.length >= minLength;
+ };
+
+ const isPasswordCombinationValid = (password) => {
+ const hasLetter = /[a-zA-Z]/.test(password);
+ const hasNumber = /\d/.test(password);
+ const hasSpecialChar = /[!@#$%^&*(),.?":{}|<>]/.test(password);
+ return hasLetter && hasNumber && hasSpecialChar;
+ };
+
+ const validatePassword = (newPassword, newPasswordCheck) => {
+ if (newPassword !== newPasswordCheck) {
+ setPasswordError(true);
+ } else if (!isPasswordLength(newPassword)) {
+ setPasswordError(true);
+ } else if (!isPasswordCombinationValid(newPassword)) {
+ setPasswordError(true);
+ } else {
+ setPasswordError(false);
+ }
+ };
+
+ const handleSubmit = (event) => {
+ event.preventDefault(); // 폼 제출 방지
+ };
+
+ return (
+
+
+
+ );
+}
+
+export default ChangeNewPasswordPage;
diff --git a/src/pages/Find/FindPasswordPage/ChangePasswordPage/ChangePasswordPage.jsx b/src/pages/Find/FindPasswordPage/ChangePasswordPage/ChangePasswordPage.jsx
new file mode 100644
index 0000000..29caffd
--- /dev/null
+++ b/src/pages/Find/FindPasswordPage/ChangePasswordPage/ChangePasswordPage.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import Container from "../../../../components/login/Container/Container";
+import CertificationInput from "../../../../components/login/Certification/CertificationInput/CertificationInput";
+
+function ChangePasswordPage () {
+ return(
+
+
+
+
+
+ )
+}
+export default ChangePasswordPage;
\ No newline at end of file
diff --git a/src/pages/Find/FindPasswordPage/FindPasswordPage.jsx b/src/pages/Find/FindPasswordPage/FindPasswordPage.jsx
new file mode 100644
index 0000000..a187baf
--- /dev/null
+++ b/src/pages/Find/FindPasswordPage/FindPasswordPage.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import Container from "../../../components/login/Container/Container";
+import CertificationInput from "../../../components/login/Certification/CertificationInput/CertificationInput";
+
+function FindPasswordPage () {
+ return(
+
+
+
+
+
+ )
+}
+export default FindPasswordPage;
\ No newline at end of file
diff --git a/src/pages/Login/LoginPage.css b/src/pages/Login/LoginPage.css
new file mode 100644
index 0000000..1e46ff2
--- /dev/null
+++ b/src/pages/Login/LoginPage.css
@@ -0,0 +1,116 @@
+.loginpage-form{
+ line-height: 1.2rem;
+ min-height: 12.6rem;
+ min-width: 15rem;
+ position: relative;
+ justify-content: center;
+}
+
+.loginpage-user-id{
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ font-size: 0.8rem;
+ margin-bottom: 0.35rem;
+ min-width: 13rem;/*17rem-2rem*/
+ height: 1rem; /*2.5rem-1.5rem*/
+ padding: 0.8rem 1rem 0.7rem 1rem;
+ font-family: "Pretendard";
+}
+
+.loginpage-user-password{
+ border-radius: 0.25rem;
+ border: 0.05rem solid rgba(131, 131, 131, 1);
+ font-size: 0.8rem;
+ min-width: 13rem;/*17rem-2rem*/
+ height: 1rem; /*2.5rem-1.5rem*/
+ margin-bottom: 0.35rem;
+ padding: 0.8rem 1rem 0.7rem 1rem;
+ font-family: "Pretendard";
+}
+
+.loginpage-find-user-id-and-password{
+ margin: 0.7rem 0;
+ color: rgba(131, 131, 131, 1);
+}
+
+.loginpage-form-remember-text{
+ font-size: 0.8rem;
+}
+
+.loginpage-form-find{
+ font-size: 0.8rem;
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+}
+
+.loginpage-form-find-id{
+ text-decoration: none;
+ color: rgba(131, 131, 131, 1);
+ margin-right: 0.25rem;
+}
+
+.loginpage-form-find-password{
+ text-decoration: none;
+ color: rgba(131, 131, 131, 1);
+ margin-left: 0.25rem;
+}
+
+.loginpage-form-login-wrapper{
+ position: absolute;
+ top: 10.25rem;
+ transform: translateX(0%);
+}
+
+.loginpage-sign-button{
+ border: none;
+ background-color: white;
+ cursor: pointer;
+ font-family: "Pretendard";
+ font-size: 0.8rem;
+ font-weight: 500;
+ margin-top: 3.9rem;
+}
+
+.loginpage-sign-link{
+ text-decoration: none;
+ color: rgba(131, 131, 131, 1);
+}
+
+/* w:768, h:1024일 때 */
+@media screen and (min-width: 481px) and (max-width: 768px) {
+ .loginpage-form{
+ min-height: 12.6rem;
+ width: 17rem;
+ }
+ .loginpage-user-id{
+ width: 15rem;/*17rem-2rem*/
+ }
+
+ .loginpage-user-password{
+ width: 15rem;/*17rem-2rem*/
+ }
+}
+
+/* w:1024, h:1024일 때 */
+@media screen and (min-width: 769px) {
+ .loginpage-form{
+ min-height: 12.6rem;
+ width: 17rem;
+ }
+ .loginpage-user-id{
+ width: 15rem;/*17rem-2rem*/
+ }
+
+ .loginpage-user-password{
+ width: 15rem;/*17rem-2rem*/
+ }
+}
+
+/* w:480, h:800일 때 */
+@media screen and (max-width: 480px) {
+ .loginpage-form{
+ height: 10.3rem;
+ width: 15rem;
+ }
+}
diff --git a/src/pages/Login/LoginPage.jsx b/src/pages/Login/LoginPage.jsx
new file mode 100644
index 0000000..8c7760a
--- /dev/null
+++ b/src/pages/Login/LoginPage.jsx
@@ -0,0 +1,41 @@
+import Container from "../../components/login/Container/Container";
+import "./LoginPage.css";
+import { useState } from "react";
+import RedButton from "../../components/login/redButton/RedButton";
+import { Link } from "react-router-dom";
+import LoginChkAlrm from "../../components/login/LoginChkAlrm/LoginChkAlrm";
+
+const LoginFindUserIdAndPassword=()=>{
+ return(
+
+
+ 아이디 찾기
+ •
+ 비밀번호 찾기
+
+
+ )
+}
+function LoginPage () {
+ // 로그인값 받아오기..
+ // const [userData, setUserData] = useState(true);
+ const userData = useState(true);
+ return(
+
+
+
+
+ )
+}
+
+export default LoginPage;
\ No newline at end of file
diff --git a/src/pages/Mypage/MainMypage.css b/src/pages/Mypage/MainMypage.css
index bcb4945..4e32789 100644
--- a/src/pages/Mypage/MainMypage.css
+++ b/src/pages/Mypage/MainMypage.css
@@ -28,7 +28,7 @@
}
.mypage-top-txt__wrapper{
- text-align: start;
+ text-align: flex-start;
white-space: nowrap;
}
@@ -53,7 +53,7 @@
.mypage-kakao__txt{
display: flex;
flex-direction: column;
- text-align: start;
+ text-align: flex-start;
margin: 0 3.4375rem 0 0.6875rem;
white-space: nowrap;
}
@@ -85,7 +85,7 @@
.mypage-content__wrapper{
width: 100%;
- text-align: start;
+ text-align: flex-start;
}
.mypage-content__wrapper p{
diff --git a/src/pages/Signup/JudgeResults/JudgeResultsBeforePage.css b/src/pages/Signup/JudgeResults/JudgeResultsBeforePage.css
new file mode 100644
index 0000000..b4869fc
--- /dev/null
+++ b/src/pages/Signup/JudgeResults/JudgeResultsBeforePage.css
@@ -0,0 +1,61 @@
+.judge-results-before-page-content-container{
+ margin-top: 2.24rem;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ max-width: 22.4rem;
+}
+
+.judge-results-before-page-top-positon-icon{
+ width: 4.4rem;
+ height: 4.4rem;
+ display: flex;
+ position: absolute;
+ top: -2rem;
+ left: 43%;
+}
+
+.judge-results-before-page-content-text-style{
+ margin-top: 5.62rem;
+ font-size: 1rem;
+ font-weight: 800;
+ font-family: "Pretendard";
+}
+.judge-results-before-page-content-main-text-style{
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ margin-top: 2.24rem;
+ max-width: 22.4rem;
+ font-family: "Pretendard";
+ font-size: 0.8rem;
+ font-weight: 500;
+}
+.judge-results-before-page-content-main-text-tab{
+ margin-top: 0.8rem;
+ margin-bottom: 2.2rem ;
+}
+
+.judge-results-before-page-next-button{
+ margin-top: 2.1rem;
+}
+
+.redyvery-linked-message-for-kakao{
+ width: 14.79rem;
+ height: 3.12rem;
+ border-radius: 7.5rem;
+ border: 0.06rem solid #838383;
+ background: #FFF;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ justify-content:space-around;
+ font-family: "Pretendard";
+ font-weight: 500;
+ font-size: 0.6rem;
+}
+
+.redyvery-linked-message-for-kakao-time{
+ color: #838383;
+ margin-top: 0.092rem;
+}
\ No newline at end of file
diff --git a/src/pages/Signup/JudgeResults/JudgeResultsBeforePage.jsx b/src/pages/Signup/JudgeResults/JudgeResultsBeforePage.jsx
new file mode 100644
index 0000000..8f2cc68
--- /dev/null
+++ b/src/pages/Signup/JudgeResults/JudgeResultsBeforePage.jsx
@@ -0,0 +1,39 @@
+import CircleNumBar from "../../../components/signup/CircleNumBar/CircleNumBar";
+import RedButton from "../../../components/login/redButton/RedButton"
+import Container from "../../../components/login/Container/Container";
+import logo from "../../../assets/icons/Big_LOGO.svg";
+import redyveryicon from "../../../assets/icons/img_readyVery.svg";
+import kakaolinkedicon from "../../../assets/icons/icon_kakao.svg";
+// import basketicon from "../../../assets/icons/icon_basket.svg"; 크기 에러 해결되면 업로드
+import "./JudgeResultsBeforePage.css";
+function JudgeResultsBeforePage () {
+
+ return(
+
+ {/* 
*/}
+
+
+
입점 신청이 완료되었습니다
+
+
1~2일 이내로 담당자가 사장님께 전화를 드리거나
+
가게를 방문하여 입점을 도와드립니다.
+
궁금한 사항이나 도움이 필요하면 언제든지 문의해 주세요.
+
+
+
+
+
레디베이 상담
+
매일 00:00 ~ 24:00
+
+
+
+
+
+ 확인
+
+
+ )
+}
+
+export default JudgeResultsBeforePage;
\ No newline at end of file
diff --git a/src/pages/Signup/JudgeResults/JudgeResultsReject/JudgeResultsRejectPage.css b/src/pages/Signup/JudgeResults/JudgeResultsReject/JudgeResultsRejectPage.css
new file mode 100644
index 0000000..66ed15b
--- /dev/null
+++ b/src/pages/Signup/JudgeResults/JudgeResultsReject/JudgeResultsRejectPage.css
@@ -0,0 +1,40 @@
+.judge-results-reject-page-content-container{
+ margin-top: 2.24rem;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ max-width: 22.4rem;
+}
+
+.judge-results-reject-page-top-positon-icon{
+ width: 4.4rem;
+ height: 4.4rem;
+ display: flex;
+ position: absolute;
+ top: -2rem;
+ left: 43%;
+}
+
+.judge-results-reject-page-content-text-style{
+ margin-top: 2.9rem;
+ font-size: 1rem;
+ font-weight: 800;
+ font-family: "Pretendard";
+}
+.judge-results-reject-page-content-main-text-style{
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ margin-top: 1rem;
+ max-width: 22.4rem;
+ font-family: "Pretendard";
+ font-size: 0.8rem;
+ font-weight: 500;
+}
+.judge-results-reject-page-content-main-text-tab{
+ margin-top: 0.8rem;
+}
+
+.judge-results-reject-page-next-button{
+ margin-top: 5.45rem;
+}
\ No newline at end of file
diff --git a/src/pages/Signup/JudgeResults/JudgeResultsReject/JudgeResultsRejectPage.jsx b/src/pages/Signup/JudgeResults/JudgeResultsReject/JudgeResultsRejectPage.jsx
new file mode 100644
index 0000000..3cbc1b8
--- /dev/null
+++ b/src/pages/Signup/JudgeResults/JudgeResultsReject/JudgeResultsRejectPage.jsx
@@ -0,0 +1,25 @@
+import RedButton from "../../../../components/login/redButton/RedButton"
+import Container from "../../../../components/login/Container/Container";
+// import deleteicon from "../../../../assets/icons/icon_delete.svg"; 크기 에러, 해결 후 업로드
+import "./JudgeResultsRejectPage.css";
+function JudgeResultsRejectPage () {
+
+ return(
+
+ {/* 
*/}
+
+
심사가 반려되었습니다
+
+ 반려 사유는 회원가입 시 작성한
+ 이메일(아이디)를 통해 확인하실 수 있습니다.
+
+
+
+ 재신청하기
+
+
+ )
+}
+
+export default JudgeResultsRejectPage;
\ No newline at end of file
diff --git a/src/pages/Signup/PhoneAuth/PhoneAuthPage.css b/src/pages/Signup/PhoneAuth/PhoneAuthPage.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Signup/PhoneAuth/PhoneAuthPage.jsx b/src/pages/Signup/PhoneAuth/PhoneAuthPage.jsx
new file mode 100644
index 0000000..99f0a5d
--- /dev/null
+++ b/src/pages/Signup/PhoneAuth/PhoneAuthPage.jsx
@@ -0,0 +1,18 @@
+import "./PhoneAuthPage.css";
+import CircleNumBar from "../../../components/signup/CircleNumBar/CircleNumBar";
+import Container from "../../../components/login/Container/Container";
+import UserInputNumber from "../../../components/signup/UserInput/UserInputNumber/UserInputNumber";
+
+function PhoneAuthPage () {
+
+ return(
+
+
+
+
+
+
+ )
+}
+
+export default PhoneAuthPage;
\ No newline at end of file
diff --git a/src/pages/Signup/SignupPage.css b/src/pages/Signup/SignupPage.css
new file mode 100644
index 0000000..ea1280c
--- /dev/null
+++ b/src/pages/Signup/SignupPage.css
@@ -0,0 +1,12 @@
+/* SignupPage */
+.signup-page-content-container{
+ margin-top: 2.24rem;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ max-width: 22.4rem;
+}
+
+.signup-page-next-button{
+ margin-top: 2.1rem;
+}
diff --git a/src/pages/Signup/SignupPage.jsx b/src/pages/Signup/SignupPage.jsx
new file mode 100644
index 0000000..f834bb9
--- /dev/null
+++ b/src/pages/Signup/SignupPage.jsx
@@ -0,0 +1,27 @@
+import "./SignupPage.css";
+import CircleNumBar from "../../components/signup/CircleNumBar/CircleNumBar";
+import UserInputId from "../../components/signup/UserInput/UserInputId/UserInputId";
+import UserInputPassword from "../../components/signup/UserInput/UserInputPassword/UserInputPassword";
+import UserInputName from "../../components/signup/UserInput/UserInputName/UserInputName";
+import RedButton from "../../components/login/redButton/RedButton"
+import Container from "../../components/login/Container/Container";
+
+function SignupPage () {
+
+ return(
+
+
+
+
+ )
+}
+
+export default SignupPage;
\ No newline at end of file
diff --git a/src/pages/Signup/Terms/TermsPage.css b/src/pages/Signup/Terms/TermsPage.css
new file mode 100644
index 0000000..8605619
--- /dev/null
+++ b/src/pages/Signup/Terms/TermsPage.css
@@ -0,0 +1,40 @@
+/* SignupPage */
+.terms-page-container{
+ margin-top: 2.24rem;
+ display: flex;
+ align-items:center;
+ flex-direction: column;
+ max-width: 22.4rem;
+}
+
+.terms-page-next-button{
+ margin-top: 6.2rem;
+}
+
+/* checkBox */
+.terms-page-check-box-wrapper{
+ font-family: "Pretendard";
+ font-weight: 500;
+ display: flex;
+ margin-bottom: 0.8rem;
+ width: 100%;
+ align-items:center;
+ justify-content: space-between;
+}
+
+.terms-page-check-box-wrapper-inner{
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ padding: 0.65rem;
+}
+
+.terms-page-check-box-font-style-1{
+ font-size: 1rem;
+ background-color: rgba(255, 234, 239, 1);
+}
+
+.terms-page-check-box-font-style-2{
+ font-size: 0.8rem;
+}
+
diff --git a/src/pages/Signup/Terms/TermsPage.jsx b/src/pages/Signup/Terms/TermsPage.jsx
new file mode 100644
index 0000000..1ea0c83
--- /dev/null
+++ b/src/pages/Signup/Terms/TermsPage.jsx
@@ -0,0 +1,99 @@
+import "./TermsPage.css";
+import RedButton from "../../../components/login/redButton/RedButton";
+import Container from "../../../components/login/Container/Container";
+import { useState } from "react";
+
+function TermsPage() {
+ const [consents, setConsents] = useState({
+ itemall: false,
+ item1: false,
+ item2: false,
+ item3: false,
+ item4: false,
+ });
+
+ const handleConsentChange = (id) => {
+ setConsents((prev) => ({
+ ...prev,
+ [id]: !prev[id],
+ }));
+ };
+
+ const handleAllConsentsChange = () => {
+ setConsents((prev) => {
+ const allChecked = !prev.itemall;
+
+ return {
+ itemall: allChecked,
+ item1: allChecked,
+ item2: allChecked,
+ item3: allChecked,
+ item4: allChecked,
+ };
+ });
+ };
+
+ if (consents.item1 && consents.item2 && consents.item3 && consents.item4) {
+ consents.itemall = true;
+ } else {
+ consents.itemall = false;
+ }
+
+ const ConsentForm = ({ title, id }) => {
+ const isChecked = consents[id];
+
+ const handleCheckboxChange = () => {
+ handleConsentChange(id);
+ };
+
+ const isAllItem = id === "itemall";
+ const labelClassName = isAllItem
+ ? "terms-page-check-box-font-style-1"
+ : "terms-page-check-box-font-style-2";
+
+ const handleCheckboxAllChange = isAllItem
+ ? handleAllConsentsChange
+ : handleCheckboxChange;
+
+ return (
+
+
+ {/* 약관 나오면 입히기 */}
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+ );
+}
+
+export default TermsPage;
diff --git a/src/pages/Signup/Verification/VerificationPage.css b/src/pages/Signup/Verification/VerificationPage.css
new file mode 100644
index 0000000..ea1280c
--- /dev/null
+++ b/src/pages/Signup/Verification/VerificationPage.css
@@ -0,0 +1,12 @@
+/* SignupPage */
+.signup-page-content-container{
+ margin-top: 2.24rem;
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+ max-width: 22.4rem;
+}
+
+.signup-page-next-button{
+ margin-top: 2.1rem;
+}
diff --git a/src/pages/Signup/Verification/VerificationPage.jsx b/src/pages/Signup/Verification/VerificationPage.jsx
new file mode 100644
index 0000000..bad4ff9
--- /dev/null
+++ b/src/pages/Signup/Verification/VerificationPage.jsx
@@ -0,0 +1,24 @@
+import "./VerificationPage.css";
+import CircleNumBar from "../../../components/signup/CircleNumBar/CircleNumBar";
+import RedButton from "../../../components/login/redButton/RedButton"
+import Container from "../../../components/login/Container/Container";
+import UserInputStoreInformation from "../../../components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation";
+
+function VerificationPage () {
+
+ return(
+
+
+
+
+ )
+}
+
+export default VerificationPage;
+
+