Merge pull request #153 from Igloo-Club/AdvanceApplication/#152

[AdvanceApplication] 사전알림 페이지 추가

src/register/RegisterPage.tsx

@@ -15,7 +15,8 @@ import {
   지역선택,
   시간선택,
   장소선택,
-  회원가입완료,
+  // 회원가입완료,
+  사전신청완료,
 } from './funnelPages/0_index';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -36,7 +37,8 @@ type StepType =
   | '지역선택'
   | '시간선택'
   | '장소선택'
-  | '회원가입완료';
+  | '회원가입완료'
+  | '사전신청완료';
 
 const Register = () => {
   const navigate = useNavigate();
@@ -69,6 +71,7 @@ const Register = () => {
       '시간선택',
       '장소선택',
       '회원가입완료',
+      '사전신청완료',
     ] as const,
     initialState as StepType,
   );
@@ -245,12 +248,15 @@ const Register = () => {
             percent={100}
           />
         </Funnel.Step>
-        <Funnel.Step name="회원가입완료">
+        {/* <Funnel.Step name="회원가입완료">
           <회원가입완료
             onNext={() => {
               navigate('/main-page');
             }}
           />
+        </Funnel.Step> */}
+        <Funnel.Step name="사전신청완료">
+          <사전신청완료 />
         </Funnel.Step>
       </Funnel>
     </RagisterLayout>

src/register/assets/svgs/0_index.ts

@@ -4,5 +4,14 @@ import CheckFill from './CheckFill.svg?react';
 import CheckNone from './CheckNone.svg?react';
 import CancelIcon from './CancelIcon.svg?react';
 import MarkerIcon from './MarkerIcon.svg?react';
+import CheckApplication from './CheckApplication.svg?react';
 
-export { ArrowLeft, ArrowRight, CheckFill, CheckNone, CancelIcon, MarkerIcon };
+export {
+  ArrowLeft,
+  ArrowRight,
+  CheckFill,
+  CheckNone,
+  CancelIcon,
+  MarkerIcon,
+  CheckApplication,
+};

src/register/funnelPages/0_index.ts

@@ -12,6 +12,7 @@ import 지역선택 from './RegisterSelectPlace';
 import 시간선택 from './RegisterSelectTime';
 import 장소선택 from './RegisterSelectMarker';
 import 회원가입완료 from './RegisterFinish';
+import 사전신청완료 from './RegisterAdvanceApplication';
 
 export {
   약관동의,
@@ -28,4 +29,5 @@ export {
   시간선택,
   장소선택,
   회원가입완료,
+  사전신청완료,
 };

src/register/funnelPages/RegisterAdvanceApplication.tsx

@@ -0,0 +1,99 @@
+import styled from '@emotion/styled';
+import { CheckApplication } from '../assets/svgs/0_index';
+import { Link } from 'react-router-dom';
+
+const 사전신청완료 = () => {
+  return (
+    <>
+      <StContainer>
+        <StIMG>
+          <CheckApplication />
+          <StText>사전알림 신청이 완료되었어요!</StText>
+          <StExplain>
+            <p>눈길은 현재 회원님들의 보다 만족스러운 만남을 위해</p>
+            <p>
+              준비 중이에요. 준비가 끝나는 대로{' '}
+              <b css={{ fontWeight: 'bold' }}>순차적으로 연락</b>드릴게요.
+            </p>
+          </StExplain>
+          <StMsgBox>알림 메시지가 도착하면 꼭 확인해주세요</StMsgBox>
+
+          <StLink to="/login">메인으로 가기</StLink>
+        </StIMG>
+      </StContainer>
+    </>
+  );
+};
+
+export default 사전신청완료;
+
+const StContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 90%;
+  animation: fade-in-bottom 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;
+
+  @keyframes fade-in-bottom {
+    0% {
+      opacity: 0;
+      transform: translateY(50px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in-bottom {
+    0% {
+      opacity: 0;
+      transform: translateY(50px);
+    }
+
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+
+const StIMG = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  align-items: center;
+  justify-content: center;
+`;
+
+const StText = styled.p`
+  color: ${({ theme }) => theme.colors.gray8};
+  ${({ theme }) => theme.fonts.title};
+`;
+
+const StExplain = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  color: ${({ theme }) => theme.colors.gray7};
+  ${({ theme }) => theme.fonts.body2m};
+`;
+
+const StMsgBox = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 5.4rem;
+  color: ${({ theme }) => theme.colors.gray8};
+  background-color: ${({ theme }) => theme.colors.gray0};
+  border-radius: 10px;
+  ${({ theme }) => theme.fonts.body2b};
+`;
+
+const StLink = styled(Link)`
+  color: ${({ theme }) => theme.colors.gray6};
+  ${({ theme }) => theme.fonts.body2b};
+`;