diff --git a/src/components/signup/CircleNumBar/CircleNumBar.css b/src/components/signup/CircleNumBar/CircleNumBar.css index 070e2da..ca7c5d8 100644 --- a/src/components/signup/CircleNumBar/CircleNumBar.css +++ b/src/components/signup/CircleNumBar/CircleNumBar.css @@ -44,7 +44,7 @@ position: absolute; bottom: -1rem; display: flex; - transform: translateX(-51%); + transform: translateX(-52%); width: 100%; align-items: center; justify-content: center; diff --git a/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation.jsx b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation.jsx index ab09344..8726cca 100644 --- a/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation.jsx +++ b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation.jsx @@ -1,175 +1,77 @@ -import { Modal } from "antd"; +import { message } from "antd"; import React, { useState } from "react"; -import DaumPostcode from "react-daum-postcode"; +import { useNavigate } from "react-router-dom"; +import RedButton from "../../../login/redButton/RedButton"; import "./UserInputStoreInformation.css"; +import CheckConsentForm from "./UserInputStoreInformationInputComponents/CheckConsentForm"; +import InputStoreAddress from "./UserInputStoreInformationInputComponents/InputStoreAddress"; +import InputStoreInformationText from "./UserInputStoreInformationInputComponents/InputStoreInformationText"; +import InputStoreInformationflie from "./UserInputStoreInformationInputComponents/InputStoreInformationflie"; -const InputStoreInformationText = ({ - title, - id, - placeholder, - requiredname, -}) => { - return ( -
- -
- -
-
- ); -}; - -const InputStoreAddressWrapper = () => { +const UserInputStoreInformation = () => { + const navigate = useNavigate(); + const [storeName, setStoreName] = useState(""); const [zonecode, setZonecode] = useState(""); const [zoneAddress, setZoneAddress] = useState(""); - const [openModal, setOpenModal] = useState(false); + const [zoneAddressDetail, setZoneAddressDetail] = useState(""); + const [storeBusinessNumber, setStoreBusinessNumber] = useState(""); + const [storeBusinessRegistration, setStoreBusinessRegistration] = + useState(null); + const [storeBusinessLicense, setStoreBusinessLicense] = useState(null); + const [userIdentification, setUserIdentification] = useState(null); + const [userPassbook, setUserPassbook] = useState(null); + const [personalInfoConsent, setPersonalInfoConsent] = useState(false); - const handleComplete = (data) => { - setZonecode(data.zonecode); - setZoneAddress(data.address); - onOpenPostModal(); + const handleStoreNameChange = (event) => { + setStoreName(event.target.value); }; - const onOpenPostModal = () => { - setOpenModal((prev) => !prev); + const handleZonecodeChange = (zonecode) => { + setZonecode(zonecode); }; - return ( -
- - {openModal && ( - - - - )} -
-
- - -
- -
-
- -
- ); -}; - -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); - } - }; + const handleZoneAddressChange = (zoneAddress) => { + setZoneAddress(zoneAddress); + }; + const handleZoneAddressDetailChange = (zoneAddressDetail) => { + setZoneAddressDetail(zoneAddressDetail); + }; - return ( - - ); + const handleStoreBusinessNumberChange = (event) => { + setStoreBusinessNumber(event.target.value); }; - return ( -
- -
- - { - const inputFile = document.getElementById(id); - if (inputFile) { - inputFile.click(); - } - }} - className="signup-page-content-store-input" - /> -
-
- ); -}; + const checkInputsCompletion = () => { + const isComplete = + storeName && + zonecode && + zoneAddress && + zoneAddressDetail && + storeBusinessNumber && + storeBusinessRegistration && + storeBusinessLicense && + userIdentification && + userPassbook && + personalInfoConsent; -const ConsentForm = () => { - const [personalInfoConsent, setPersonalInfoConsent] = useState(false); + return isComplete; + }; const handlePersonalInfoConsentChange = () => { setPersonalInfoConsent((prev) => !prev); }; - return ( -
- {/* 약관 나오면 입히기 */} - - -
- ); -}; + const handleSubmission = () => { + const isComplete = checkInputsCompletion(); -const UserInputStoreInformation = () => { + if (isComplete) { + message.success("입력이 완료되었습니다."); + // 여기서 try.. + navigate("/signup/auth/results/before"); + } else { + message.error("필수 입력 항목을 모두 입력하세요."); + } + }; return (
{ id="storename" placeholder="상호명 입력" requiredname="storename" + onChange={handleStoreNameChange} + /> + - { + setStoreBusinessRegistration(file); + }} /> { + setStoreBusinessLicense(file); + }} /> { + setUserIdentification(file); + }} /> { + setUserPassbook(file); + }} + /> + - + + 승인요청 신청 +
); }; diff --git a/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/CheckConsentForm.jsx b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/CheckConsentForm.jsx new file mode 100644 index 0000000..d024fce --- /dev/null +++ b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/CheckConsentForm.jsx @@ -0,0 +1,21 @@ +const CheckConsentForm = ({ + personalInfoConsent, + onPersonalInfoConsentChange, +}) => { + return ( +
+ {/* 약관 나오면 입히기 */} + + +
+ ); +}; + +export default CheckConsentForm; diff --git a/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/InputStoreAddress.jsx b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/InputStoreAddress.jsx new file mode 100644 index 0000000..d3c178a --- /dev/null +++ b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/InputStoreAddress.jsx @@ -0,0 +1,79 @@ +import { Modal } from "antd"; +import { useState } from "react"; +import DaumPostcode from "react-daum-postcode"; + +const InputStoreAddress = ({ + onZonecodeChange, + onZoneAddressChange, + onZoneAddressDetailChange, +}) => { + const [zonecode, setZonecode] = useState(""); + const [zoneAddress, setZoneAddress] = useState(""); + const [openModal, setOpenModal] = useState(false); + + const handleComplete = (data) => { + setZonecode(data.zonecode); + setZoneAddress(data.address); + onZonecodeChange(data.zonecode); // onZonecodeChange 함수를 호출하여 값 전달 + onZoneAddressChange(data.address); // onZoneAddressChange 함수를 호출하여 값 전달 + onOpenPostModal(); + }; + + const onOpenPostModal = () => { + setOpenModal((prev) => !prev); + }; + + return ( +
+ + {openModal && ( + + + + )} +
+
+ + +
+ +
+
+ onZoneAddressDetailChange(e.target.value)} + /> +
+ ); +}; +export default InputStoreAddress; diff --git a/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/InputStoreInformationText.jsx b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/InputStoreInformationText.jsx new file mode 100644 index 0000000..e22fde7 --- /dev/null +++ b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/InputStoreInformationText.jsx @@ -0,0 +1,26 @@ +const InputStoreInformationText = ({ + title, + id, + placeholder, + requiredname, + onChange, +}) => { + return ( +
+ +
+ +
+
+ ); +}; + +export default InputStoreInformationText; diff --git a/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/InputStoreInformationflie.jsx b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/InputStoreInformationflie.jsx new file mode 100644 index 0000000..28f37d1 --- /dev/null +++ b/src/components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformationInputComponents/InputStoreInformationflie.jsx @@ -0,0 +1,59 @@ +import { useState } from "react"; + +const InputStoreInformationflie = ({ title, id, requiredname, onChange }) => { + 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); + onChange(file); + setFileSizeError(false); + } else { + setFileSizeError(true); + setSelectedFile(null); + onChange(null); + } + }; + + return ( + + ); + }; + + return ( +
+ +
+ + { + const inputFile = document.getElementById(id); + if (inputFile) { + inputFile.click(); + } + }} + className="signup-page-content-store-input" + /> +
+
+ ); +}; + +export default InputStoreInformationflie; diff --git a/src/pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.jsx b/src/pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.jsx index e7f36b1..0de273a 100644 --- a/src/pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.jsx +++ b/src/pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.jsx @@ -9,17 +9,17 @@ function NoneFindIdPage() { const containerSize = is480 ? ["25rem", "37.5rem", "4.13rem", "1.06rem"] : ["31.3rem", "37.5rem", "5.56rem", "1.38rem"]; - useEffect(() => { - const handleResize = () => { - setIs480(window.innerWidth <= 480); - }; - - window.addEventListener("resize", handleResize); - - return () => { - window.removeEventListener("resize", handleResize); - }; - }, []); + useEffect(() => { + const handleResize = () => { + setIs480(window.innerWidth <= 480); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); return ( { function LoginPage() { const [is480, setIs480] = useState(window.innerWidth <= 480); const containerSize = is480 - ? ["25rem", "37.5rem", "4.12rem", "3.63rem"] - : ["31.3rem", "37.5rem", "5.69rem", "3.25rem"]; + ? ["25rem", "37.5rem", "4.12rem", "3.63rem"] + : ["31.3rem", "37.5rem", "5.69rem", "3.25rem"]; useEffect(() => { const handleResize = () => { @@ -156,7 +156,7 @@ function LoginPage() { diff --git a/src/pages/Signup/JudgeResults/JudgeResultsBeforePage.jsx b/src/pages/Signup/JudgeResults/JudgeResultsBeforePage.jsx index 486f809..77a395a 100644 --- a/src/pages/Signup/JudgeResults/JudgeResultsBeforePage.jsx +++ b/src/pages/Signup/JudgeResults/JudgeResultsBeforePage.jsx @@ -1,43 +1,84 @@ -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 redyveryicon from "../../../assets/icons/img_readyVery.svg"; +import Container from "../../../components/login/Container/Container"; +import RedButton from "../../../components/login/redButton/RedButton"; +import CircleNumBar from "../../../components/signup/CircleNumBar/CircleNumBar"; // import basketicon from "../../../assets/icons/icon_basket.svg"; 크기 에러 해결되면 업로드 +import { useEffect, useState } from "react"; import "./JudgeResultsBeforePage.css"; -function JudgeResultsBeforePage () { - const is480 = window.innerWidth <= 480; - const containerSize = is480 - ? ["20rem", "30rem", "2.4rem"] - : ["30rem", "40rem", "4.1rem"]; - - return( - - {/* basketicon */} - -
- 입점 신청이 완료되었습니다 -
- 1~2일 이내로 logo담당자가 사장님께 전화를 드리거나 - 가게를 방문하여 입점을 도와드립니다. - 궁금한 사항이나 도움이 필요하면 언제든지 문의해 주세요. -
-
- redyveryicon -
-
레디베이 상담
-
매일 00:00 ~ 24:00
-
- kakaolinkedicon -
+function JudgeResultsBeforePage() { + const [is480, setIs480] = useState(window.innerWidth <= 480); + const containerSize = is480 + ? ["25rem", "37.5rem", "3rem", "2.28rem"] + : ["37.5rem", "50rem", "5.25rem", "3rem"]; + useEffect(() => { + const handleResize = () => { + setIs480(window.innerWidth <= 480); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + return ( + + {/* basketicon */} + +
+ + 입점 신청이 완료되었습니다 + +
+ + 1~2일 이내로{" "} + logo + 담당자가 사장님께 전화를 드리거나 + + 가게를 방문하여 입점을 도와드립니다. + + 궁금한 사항이나 도움이 필요하면 언제든지 문의해 주세요. + +
+
+ redyveryicon +
+
+ 레디베이 상담 +
+
+ 매일 00:00 ~ 24:00 +
+
+ kakaolinkedicon +
-
- 확인 -
-
-
- ) +
+ 확인 +
+
+
+ ); } -export default JudgeResultsBeforePage; \ No newline at end of file +export default JudgeResultsBeforePage; diff --git a/src/pages/Signup/Terms/TermsPage.jsx b/src/pages/Signup/Terms/TermsPage.jsx index 0103976..167ff46 100644 --- a/src/pages/Signup/Terms/TermsPage.jsx +++ b/src/pages/Signup/Terms/TermsPage.jsx @@ -1,9 +1,11 @@ import { useEffect, useState } from "react"; +import { useNavigate } from "react-router-dom"; import Container from "../../../components/login/Container/Container"; import RedButton from "../../../components/login/redButton/RedButton"; import "./TermsPage.css"; function TermsPage() { + const navigate = useNavigate(); const [is480, setIs480] = useState(window.innerWidth <= 480); const containerSize = is480 ? ["20rem", "30rem", "2.4rem"] @@ -104,7 +106,9 @@ function TermsPage() {
- 확인 + navigate(`/signup`)}> + 확인 +
diff --git a/src/pages/Signup/Verification/VerificationPage.css b/src/pages/Signup/Verification/VerificationPage.css index 106d3c3..6fe6a4c 100644 --- a/src/pages/Signup/Verification/VerificationPage.css +++ b/src/pages/Signup/Verification/VerificationPage.css @@ -12,6 +12,7 @@ } .signup-page-verification-next-button { margin-top: 1rem; + width: 100%; } } @@ -23,5 +24,6 @@ } .signup-page-verification-next-button { margin-top: 0.49rem; + width: 100%; } } diff --git a/src/pages/Signup/Verification/VerificationPage.jsx b/src/pages/Signup/Verification/VerificationPage.jsx index efc5c80..92f4c72 100644 --- a/src/pages/Signup/Verification/VerificationPage.jsx +++ b/src/pages/Signup/Verification/VerificationPage.jsx @@ -1,27 +1,26 @@ import { useEffect, useState } from "react"; import Container from "../../../components/login/Container/Container"; -import RedButton from "../../../components/login/redButton/RedButton"; import CircleNumBar from "../../../components/signup/CircleNumBar/CircleNumBar"; import UserInputStoreInformation from "../../../components/signup/UserInput/UserInputStoreInformation/UserInputStoreInformation"; import "./VerificationPage.css"; function VerificationPage() { - const [is480, setIs480] = useState(window.innerWidth <= 480); - const containerSize = is480 - ? ["25rem", "54.8rem", "1.81rem", "1.79rem"] - : ["37.5rem", "90.7rem", "4.69rem", "3.94rem"]; - - useEffect(() => { - const handleResize = () => { - setIs480(window.innerWidth <= 480); - }; - - window.addEventListener("resize", handleResize); - - return () => { - window.removeEventListener("resize", handleResize); - }; - }, []); + const [is480, setIs480] = useState(window.innerWidth <= 480); + const containerSize = is480 + ? ["25rem", "54.8rem", "1.81rem", "1.79rem"] + : ["37.5rem", "90.7rem", "4.69rem", "3.94rem"]; + + useEffect(() => { + const handleResize = () => { + setIs480(window.innerWidth <= 480); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); return (
-
- 승인요청 신청 -
);