From 74d38e96823d785da20a285e459e02e55907f5a4 Mon Sep 17 00:00:00 2001
From: Siwoo Lee <siwoo28@kakao.com>
Date: Wed, 5 Jun 2024 11:13:58 +0900
Subject: [PATCH] Refactor: startPage

---
 src/components/start/InitialForm.tsx    |  2 ++
 src/components/start/SelectFavBrand.tsx |  2 ++
 src/components/start/SignIn.tsx         | 36 ++-----------------------
 src/pages/Page-Start.tsx                | 13 ++++++---
 4 files changed, 15 insertions(+), 38 deletions(-)

diff --git a/src/components/start/InitialForm.tsx b/src/components/start/InitialForm.tsx
index 346dcb4..620a58b 100644
--- a/src/components/start/InitialForm.tsx
+++ b/src/components/start/InitialForm.tsx
@@ -11,6 +11,7 @@ import EditProfileImg from '@/components/mypage/EditProfileImg';
 import { useComposeHeader } from '@/hooks/useComposeHeader';
 import { useImageCropper } from '@/hooks/post/useImageCropper';
 import { useCompressImage } from '@/hooks/useCompressImage';
+import { useCancelSignUp } from '@/hooks/start/useCancelSignUp';
 
 import { TEXT } from '@/constants/texts';
 import { BUTTON_TEXTS } from '@/constants/common';
@@ -34,6 +35,7 @@ const { message } = INITIAL_FORM_TEXTS;
 
 const InitialForm = () => {
   useComposeHeader(false, '기본정보', 'close');
+  useCancelSignUp();
   const navigate = useNavigate();
   const inputRef = useRef<HTMLTextAreaElement | null>(null);
   const [userInit, setUserInit] = useRecoilState(authState);
diff --git a/src/components/start/SelectFavBrand.tsx b/src/components/start/SelectFavBrand.tsx
index bec5e7f..9ec602b 100644
--- a/src/components/start/SelectFavBrand.tsx
+++ b/src/components/start/SelectFavBrand.tsx
@@ -13,6 +13,7 @@ import useGetCoffeeList from '@/hooks/useGetCoffeeList';
 import { useCloudStorage } from '@/hooks/useCloudStorage';
 import { useComposeHeader } from '@/hooks/useComposeHeader';
 import { useDeleteCacheData } from '@/hooks/useDeleteCacheData';
+import { useCancelSignUp } from '@/hooks/start/useCancelSignUp';
 
 import { authState } from '@/atoms/atoms';
 import { InitialformTypes } from '@/types/types';
@@ -36,6 +37,7 @@ const { message } = SELECTFAVBRAND_TEXTS;
 
 const SelectFavBrand = () => {
   useComposeHeader(false, '기본정보', 'close');
+  useCancelSignUp();
   const navigateToHome = useNavigateTo('/');
   const { state: imageFile } = useLocation();
   const { uploadStorage } = useCloudStorage();
diff --git a/src/components/start/SignIn.tsx b/src/components/start/SignIn.tsx
index a2eee15..ba9745e 100644
--- a/src/components/start/SignIn.tsx
+++ b/src/components/start/SignIn.tsx
@@ -1,14 +1,9 @@
-import { useEffect } from 'react';
-import { useSearchParams } from 'react-router-dom';
-
 import Icon from '@/components/common/Icon';
 import { SIGININ_TEXTS } from '@/constants/start';
-import { getSocialAuth, ddockerSignIn, getMyInfo } from '@/api/user';
+import { getSocialAuth } from '@/api/user';
 import { iconPropsGenerator } from '@/utils/iconPropsGenerator';
 import { useNavigateTo } from '@/hooks/useNavigateTo';
-import { useCachedUserInfo } from '@/hooks/useCachedUserInfo';
-import useGetCacheData from '@/hooks/useGetCacheData';
-import { ddockerSignInType } from '@/types/types';
+import { useVerifyMembership } from '@/hooks/start/useVerifyMembership';
 
 import { styled } from 'styled-system/jsx';
 import { cx } from 'styled-system/css';
@@ -25,12 +20,6 @@ import { StartBtn, NoneBtn, SignInBtn } from '@/styles/styles';
 const { signInBtn, startText } = SIGININ_TEXTS;
 
 const SignIn = () => {
-  const [searchParams] = useSearchParams();
-  const { accessToken } = useCachedUserInfo();
-  const code = searchParams.get('code');
-  const navToHome = useNavigateTo('/');
-  const navToSignUp = useNavigateTo('/start/2');
-
   const handleSocialAuth: React.MouseEventHandler<HTMLButtonElement> = async (
     e: React.MouseEvent<HTMLButtonElement>
   ) => {
@@ -42,27 +31,6 @@ const SignIn = () => {
     }
   };
 
-  const verifyMembership = async (accessToken: string | null) => {
-    const social = await useGetCacheData('user', '/social');
-    const res =
-      !accessToken &&
-      code &&
-      social &&
-      (await ddockerSignIn(code, social.cacheData));
-    if (res) {
-      const { accessToken } = res as ddockerSignInType;
-      const singIn = async () => {
-        (await getMyInfo()) && navToHome();
-      };
-      return accessToken ? singIn() : navToSignUp();
-    }
-    accessToken && navToHome();
-  };
-
-  useEffect(() => {
-    verifyMembership(accessToken);
-  }, []);
-
   return (
     <Container>
       <AppLogoContainer
diff --git a/src/pages/Page-Start.tsx b/src/pages/Page-Start.tsx
index 2ea01d3..6bf996f 100644
--- a/src/pages/Page-Start.tsx
+++ b/src/pages/Page-Start.tsx
@@ -2,7 +2,7 @@ import { useEffect, lazy, Suspense } from 'react';
 import { useParams } from 'react-router-dom';
 import { useNavigateTo } from '@/hooks/useNavigateTo';
 import { useShowFooter } from '@/hooks/useShowFooter';
-import { useCancelSignUp } from '@/hooks/start/useCancelSignUp';
+import { useVerifyMembership } from '@/hooks/start/useVerifyMembership';
 import { useCachedUserInfo } from '@/hooks/useCachedUserInfo';
 import SEOMeta from '@/components/common/SEOMeta';
 import SEO_DATA from '@/constants/SEOData';
@@ -14,10 +14,9 @@ const allowedPages = ['1', '2', '3'];
 
 const Start = () => {
   useShowFooter(false);
-  useCancelSignUp();
+  useVerifyMembership();
   const { userData } = useCachedUserInfo();
   const { id } = useParams();
-
   const notAllowedPages = id && !allowedPages.includes(id);
   const notSignUp = !userData && (id === '2' || '3');
   const goToHomePage = useNavigateTo('/');
@@ -28,9 +27,15 @@ const Start = () => {
     notSignUp ? goToStartPage() : goToHomePage();
   }, []);
 
+  const page = id === '1' ? 'start' : 'signUp';
+  const pageData = {
+    ...SEO_DATA[page],
+    pageUrl: `${SEO_DATA.start.pageUrl}/${id}`
+  };
+
   return (
     <>
-      <SEOMeta pageData={id === '1' ? SEO_DATA.start : SEO_DATA.signUp} />
+      <SEOMeta pageData={pageData} />
       <div>
         {id === '1' && (
           <Suspense>