diff --git a/src/api/alliance.ts b/src/api/alliance.ts index ebba1fb..c758ef6 100644 --- a/src/api/alliance.ts +++ b/src/api/alliance.ts @@ -12,27 +12,26 @@ const allianceApi = () => { const formatedPlatforms = reservationPlatform.join(','); try { - await requestApi - .post(`pre-registration-survey`, { - name: contactInfo.name, - email: contactInfo.email, - phoneNumber: contactInfo.phone, - businessName: contactInfo.store, - region: region, - reservationPlatform: formatedPlatforms, - snsContact: contactInfo.snsLink, - phoneInterview: shouldInterview, - }) - .then((res) => { - if (res.status >= 400) throw Error(res.statusText); - alert('등록이 완료되었습니다.'); - }) - .catch((e) => { - alert('등록이 실패하였습니다. 작성하신 정보를 확인해주세요.'); - throw Error(e); - }); + const res = await requestApi.post(`pre-registration-survey`, { + name: contactInfo.name, + email: contactInfo.email, + phoneNumber: contactInfo.phone, + businessName: contactInfo.store, + region: region, + reservationPlatform: formatedPlatforms, + snsContact: contactInfo.snsLink, + phoneInterview: shouldInterview, + }); + + if (res.status >= 400) { + throw new Error(res.statusText); + } + + return res; // 성공 시 응답 반환 } catch (e) { console.log(e); + alert('등록이 실패하였습니다. 작성하신 정보를 확인해주세요.'); + throw e; } }; diff --git a/src/components/Alliance/AllianceContact/AllianceContact.tsx b/src/components/Alliance/AllianceContact/AllianceContact.tsx index 9b909ed..206024b 100644 --- a/src/components/Alliance/AllianceContact/AllianceContact.tsx +++ b/src/components/Alliance/AllianceContact/AllianceContact.tsx @@ -11,9 +11,10 @@ const { applyContactInfo } = allianceApi(); type AllianceContactProps = { shouldScrollToContact: boolean; + setIsSuccessSurvey: React.Dispatch; }; -const AllianceContact = ({ shouldScrollToContact }: AllianceContactProps) => { +const AllianceContact = ({ shouldScrollToContact, setIsSuccessSurvey }: AllianceContactProps) => { const [contactInfo, setContactInfo] = useState({ name: '', email: '', @@ -21,7 +22,7 @@ const AllianceContact = ({ shouldScrollToContact }: AllianceContactProps) => { store: '', snsLink: '', }); - + const handleInputChange = (e: React.ChangeEvent) => { const { name, value } = e.target; setContactInfo((prevContactInfo) => ({ @@ -50,25 +51,33 @@ const AllianceContact = ({ shouldScrollToContact }: AllianceContactProps) => { selectedPlatformList.length > 0 && region.length > 0; - const handleBenefitButton = () => { + const handleBenefitButton = async () => { if (!validatedBenefitButton) return; - applyContactInfo({ - contactInfo, - region: region, - reservationPlatform: selectedPlatformList, - shouldInterview: selectedInterview, - }); + try { + const res = await applyContactInfo({ + contactInfo, + region: region, + reservationPlatform: selectedPlatformList, + shouldInterview: selectedInterview, + }); + if(res.status >= 201 && res.status < 300) { + setIsSuccessSurvey(true); + } + + } catch (error) { + console.log(error); + } }; const allianceContactWrapperRef = useRef(null); useEffect(() => { - if (!allianceContactWrapperRef || !allianceContactWrapperRef.current) return; - - if (shouldScrollToContact) { + if (shouldScrollToContact && allianceContactWrapperRef.current) { allianceContactWrapperRef.current.scrollIntoView({ behavior: 'smooth' }); + // 상태 초기화 (선택 사항) + window.history.replaceState({}, document.title); } - }, [allianceContactWrapperRef]); + }, [shouldScrollToContact]); return (
diff --git a/src/components/Alliance/SuccessSurvey/SuccessSurvey.module.scss b/src/components/Alliance/SuccessSurvey/SuccessSurvey.module.scss new file mode 100644 index 0000000..f04c2df --- /dev/null +++ b/src/components/Alliance/SuccessSurvey/SuccessSurvey.module.scss @@ -0,0 +1,36 @@ +@import '/src/styles/responsive.scss'; + +.SuccessSurveyWrapper { + background-color: #fefdee; + padding: 80px 215px 114px 176px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 30px; + @include media(phone, tablet) { + padding: 20px; + } +} + +.SuccessSurveyTitle { + color: var(--Gray-Gray-bk, #000); + text-align: center; + font-size: 36px; + font-weight: 700; + line-height: 48px; /* 133.333% */ +} + +.SuccessSurveyDescription { + color: var(--Gray-Gray-bk, #000); + text-align: center; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: 24px; /* 133.333% */ +} + +.SuccessImage { + width: 369px; + height: 341px; +} \ No newline at end of file diff --git a/src/components/Alliance/SuccessSurvey/SuccessSurvey.tsx b/src/components/Alliance/SuccessSurvey/SuccessSurvey.tsx new file mode 100644 index 0000000..0fa5ac1 --- /dev/null +++ b/src/components/Alliance/SuccessSurvey/SuccessSurvey.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import * as styles from './SuccessSurvey.module.scss'; +import { StaticImage } from 'gatsby-plugin-image'; +const SuccessSurvey = () => { + return ( +
+
제출완료
+
+ 몽글에 등록해주셔서 감사합니다. +
+ 기다려주시면 빠르게 회신드리겠습니다. +
+ +
+ ); +} + +export default SuccessSurvey; \ No newline at end of file diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx index e2068ef..fd67c2c 100644 --- a/src/components/Layout/Layout.tsx +++ b/src/components/Layout/Layout.tsx @@ -14,9 +14,7 @@ const Layout = ({ children }: LayoutProps) => {