제휴문의시 페이지 생성 (#23)

* style: hidden arrow input number type * DMVM-167 feat: create success survey page * DMVM-167 fix: alliance page scroll button
PBTP · Jun 20, 2024 · f918ff7 · f918ff7
1 parent afc6345
commit f918ff7
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 46 deletions.
diff --git 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
@@ -11,17 +11,18 @@ const { applyContactInfo } = allianceApi();
 
 type AllianceContactProps = {
   shouldScrollToContact: boolean;
+  setIsSuccessSurvey: React.Dispatch<boolean>;
 };
 
-const AllianceContact = ({ shouldScrollToContact }: AllianceContactProps) => {
+const AllianceContact = ({ shouldScrollToContact, setIsSuccessSurvey }: AllianceContactProps) => {
   const [contactInfo, setContactInfo] = useState<ContactInfoType>({
     name: '',
     email: '',
     phone: '',
     store: '',
     snsLink: '',
   });
-
+  
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     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<HTMLDivElement>(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 (
     <section ref={allianceContactWrapperRef} className={styles.AllianceContactWrapper}>

diff --git a/src/components/Alliance/SuccessSurvey/SuccessSurvey.module.scss 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;
+}
diff --git a/src/components/Alliance/SuccessSurvey/SuccessSurvey.tsx 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 (
+    <section className={styles.SuccessSurveyWrapper}>
+      <div className={styles.SuccessSurveyTitle}>제출완료</div>
+      <div className={styles.SuccessSurveyDescription}>
+        몽글에 등록해주셔서 감사합니다.
+        <br />
+        기다려주시면 빠르게 회신드리겠습니다.
+      </div>
+      <StaticImage
+        src="../../../images/lending/lending_apply_image.png"
+        alt="LendingApplyImage"
+        className={styles.SuccessImage}
+      />
+    </section>
+  );
+}
+
+export default SuccessSurvey;
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -14,9 +14,7 @@ const Layout = ({ children }: LayoutProps) => {
       <Nav />
       {children}
       <Footer />
-      {typeof window !== 'undefined' && window.location.pathname === '/' && (
-        <ApplyLink className={styles.LayoutMobileApplyLink} />
-      )}
+      <ApplyLink className={styles.LayoutMobileApplyLink} />
     </div>
   );
 };

diff --git a/src/components/Layout/Nav/Nav.tsx b/src/components/Layout/Nav/Nav.tsx
@@ -25,9 +25,8 @@ const Nav = () => {
               </li>
             </div>
             <li>
-              {typeof window !== 'undefined' && window.location.pathname === '/' && (
-                <ApplyLink className={styles.BenefitButton} />
-              )}
+
+              <ApplyLink className={styles.BenefitButton} />
             </li>
           </ul>
         </div>

diff --git a/src/components/Lending/LendingApply/LedingApply.tsx b/src/components/Lending/LendingApply/LedingApply.tsx
@@ -15,9 +15,7 @@ const LedingApply = () => {
           <div>반려견의 건강과 미용 서비스를 한 곳에서 모아보고</div>
           <div>효율적으로 관리하세요.</div>
         </div>
-        {typeof window !== 'undefined' && window.location.pathname === '/' && (
-          <ApplyLink className={styles.LendingApplyButton} />
-        )}
+        <ApplyLink className={styles.LendingApplyButton} />
         <div className={styles.LendingApplyPcImageWrapper} data-aos="fade-left">
           <StaticImage
             src="../../../images/lending/lending_apply_image.png"

diff --git a/src/pages/alliance/index.tsx b/src/pages/alliance/index.tsx
@@ -1,24 +1,60 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import { HeadFC, PageProps } from 'gatsby';
 import LedingApply from '@components/Lending/LendingApply/LedingApply';
 import AllianceBenefit from '@components/Alliance/AllianceBenefit/AllianceBenefit';
 import AllianceMain from '@components/Alliance/AllianceMain/AllianceMain';
 import AllianceContact from '@components/Alliance/AllianceContact/AllianceContact';
 import Layout from '@components/Layout/Layout';
+import SuccessSurvey from '@src/components/Alliance/SuccessSurvey/SuccessSurvey';
 
 type CustomLocationType = {
   shouldScrollToContact: boolean;
 };
 
 const IndexPage: React.FC<PageProps> = ({ location }) => {
   const state = location.state as CustomLocationType;
+  const [isSuccessSurvey, setIsSuccessSurvey] = useState(false);
+  const allianceContactRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const disableScroll = (e: Event) => e.preventDefault();
+
+    if (state?.shouldScrollToContact && allianceContactRef.current) {
+      document.addEventListener('wheel', disableScroll, { passive: false });
+      document.addEventListener('touchmove', disableScroll, { passive: false });
+
+      allianceContactRef.current.scrollIntoView({ behavior: 'smooth' });
+
+      // 스크롤이 완료된 후 스크롤 이벤트 활성화
+      setTimeout(() => {
+        document.removeEventListener('wheel', disableScroll);
+        document.removeEventListener('touchmove', disableScroll);
+      }, 1000); // 1초 후 스크롤 이벤트 활성화
+    }
+
+    return () => {
+      document.removeEventListener('wheel', disableScroll);
+      document.removeEventListener('touchmove', disableScroll);
+    };
+  }, [state]);
 
   return (
     <Layout>
-      <LedingApply />
-      <AllianceMain />
-      <AllianceBenefit />
-      <AllianceContact shouldScrollToContact={state?.shouldScrollToContact} />
+      {isSuccessSurvey ? (
+        <SuccessSurvey />
+      ) : (
+        <>
+          <LedingApply />
+          <AllianceMain />
+          <AllianceBenefit />
+          <div ref={allianceContactRef}>
+            <AllianceContact
+              shouldScrollToContact={state?.shouldScrollToContact}
+              setIsSuccessSurvey={setIsSuccessSurvey}
+            />
+          </div>
+        </>
+      )}
     </Layout>
   );
 };

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -46,3 +46,15 @@ li {
 a {
   text-decoration: none;
 }
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox  */
+input[type='number'] {
+  -moz-appearance: textfield;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -25,9 +25,8 @@ const Nav = () => { @@
                   </li>
                 </div>
                 <li>
-                  {typeof window !== 'undefined' && window.location.pathname === '/' && (
-                    <ApplyLink className={styles.BenefitButton} />
-                  )}
+                  <ApplyLink className={styles.BenefitButton} />
                 </li>
               </ul>
             </div>
@@ Expand Down @@