Merge pull request #7 from shimdokite/mainPage

[FE] ✨ MainGoogleSignupBanner 컴포넌트 구현
shimdokite · Mar 29, 2024 · bbca0b4 · bbca0b4
2 parents a287a8e + 512b543
commit bbca0b4
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 14 deletions.
diff --git a/client/src/app/page.tsx b/client/src/app/page.tsx
@@ -15,6 +15,7 @@ import {
 } from '@/components/common';
 import ServiceInfo from '@/components/main/ServiceInfo';
 import MainSignupBanner from '@/components/main/MainSignupBanner';
+import MainGoogleSignupBanner from '@/components/main/MainGoogleSignupBanner';
 import ScrollDownButton from '@/components/main/ScrollDownButton';
 import { InquiryButton } from '@/components/inquiry';
 
@@ -75,16 +76,24 @@ export default function Home() {
                 ))}
               </div>
               {!(isEmailLogin || isGoogleLogin) && (
-                <motion.section
-                  initial={{ y: 100, opacity: 0 }}
-                  whileInView={{ y: 0, opacity: 1 }}
-                  whileHover={{ scale: 1.05, transition: { duration: 0.2 } }}
-                  whileTap={{ scale: 0.95, transition: { duration: 0.2 } }}
-                  transition={{ ease: 'easeInOut', duration: 1 }}>
-                  <div className="flex justify-center w-full max-w-[459px] h-fit mx-auto">
+                <div className="flex justify-center gap-5 w-full h-fit max-[943px]:flex-col max-[943px]:items-center">
+                  <motion.section
+                    initial={{ y: 100, opacity: 0 }}
+                    whileInView={{ y: 0, opacity: 1 }}
+                    whileHover={{ scale: 1.05, transition: { duration: 0.2 } }}
+                    whileTap={{ scale: 0.95, transition: { duration: 0.2 } }}
+                    transition={{ ease: 'easeInOut', duration: 1 }}>
+                    <MainGoogleSignupBanner />
+                  </motion.section>
+                  <motion.section
+                    initial={{ y: 100, opacity: 0 }}
+                    whileInView={{ y: 0, opacity: 1 }}
+                    whileHover={{ scale: 1.05, transition: { duration: 0.2 } }}
+                    whileTap={{ scale: 0.95, transition: { duration: 0.2 } }}
+                    transition={{ ease: 'easeInOut', duration: 1 }}>
                     <MainSignupBanner />
-                  </div>
-                </motion.section>
+                  </motion.section>
+                </div>
               )}
               <NotificationButton />
               <InquiryButton />

diff --git a/client/src/components/main/MainGoogleSignupBanner.tsx b/client/src/components/main/MainGoogleSignupBanner.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import Image from 'next/image';
+
+import useGoogleLogin from '@/hooks/useGoogleLogin';
+import { useRouter } from 'next/navigation';
+
+export default function MainGoogleSignupBanner() {
+  const router = useRouter();
+
+  const { onGoogleLogin, googleOauth } = useGoogleLogin();
+
+  const goToGoogleSignup = () => {
+    router.push(`${googleOauth}`);
+
+    onGoogleLogin;
+  };
+
+  return (
+    <button
+      onClick={() => goToGoogleSignup()}
+      className="cursor-pointer mx-4 flex justify-between items-center gap-10 px-[25px] py-[21px] bg-[url('/assets/img/bg_wood_light.png')] border-[3px] border-brown-50 rounded-xl shadow-outer/down max-[500px]:px-[17px] max-[500px]:py-[14px] max-[500px]:gap-6">
+      <Image
+        className="max-[500px]:w-[36px]"
+        src={'/assets/img/no_border_tree.svg'}
+        alt="tree icon"
+        width={40}
+        height={40}
+      />
+
+      <p className="text-[1.8rem] font-bold text-brown-40 whitespace-nowrap max-[500px]:text-[1.4rem]">
+        구글로<b className="text-brown-60">&nbsp;회원가입</b>
+      </p>
+
+      <Image
+        className="max-[500px]:w-[36px]"
+        src={'/assets/img/no_border_tree.svg'}
+        alt="tree icon"
+        width={40}
+        height={40}
+      />
+    </button>
+  );
+}
diff --git a/client/src/components/main/MainSignupBanner.tsx b/client/src/components/main/MainSignupBanner.tsx
@@ -7,7 +7,7 @@ export default function MainSignupBanner() {
   return (
     <Link
       href={'/signup'}
-      className="flex justify-between items-center gap-5 px-[25px] py-[21px] bg-[url('/assets/img/bg_wood_light.png')] border-[3px] border-brown-50 rounded-xl shadow-outer/down max-[500px]:px-[17px] max-[500px]:py-[14px] max-[500px]:gap-2">
+      className="mx-4 flex justify-between items-center gap-5 px-[25px] py-[21px] bg-[url('/assets/img/bg_wood_light.png')] border-[3px] border-brown-50 rounded-xl shadow-outer/down max-[500px]:px-[17px] max-[500px]:py-[14px] max-[500px]:gap-2">
       <Image
         className="max-[500px]:w-[36px]"
         src={'/assets/img/no_border_tree.svg'}

diff --git a/client/src/components/signin/LoginButton.tsx b/client/src/components/signin/LoginButton.tsx
@@ -11,14 +11,13 @@ import useCreateGuestMutation from '@/hooks/mutation/useCreateGuestMutation';
 import { CommonButton } from '../common';
 
 export default function LoginButtion() {
-  const googleOauth = process.env.NEXT_PUBLIC_GOOGLE_OAUTH_URL;
-
   const router = useRouter();
 
   const { getSigninForm } = useSignStore();
 
   const isClient = useClient();
-  const { isGoogleLogin, isEmailLogin, onGoogleLogin } = useGoogleLogin();
+  const { isGoogleLogin, isEmailLogin, onGoogleLogin, googleOauth } =
+    useGoogleLogin();
   const { mutate: onGuestMode } = useCreateGuestMutation();
 
   const goToGoogleLogin = () => {

diff --git a/client/src/hooks/useGoogleLogin.ts b/client/src/hooks/useGoogleLogin.ts
@@ -4,6 +4,8 @@ import { useRouter } from 'next/navigation';
 import useUserStore from '@/stores/userStore';
 
 const useGoogleLogin = () => {
+  const googleOauth = process.env.NEXT_PUBLIC_GOOGLE_OAUTH_URL;
+
   const router = useRouter();
 
   const { isGoogleLogin, setGoogleUser, isEmailLogin } = useUserStore();
@@ -41,7 +43,13 @@ const useGoogleLogin = () => {
     }
   }, [isGoogleLogin]);
 
-  return { isGoogleLogin, setGoogleUser, isEmailLogin, onGoogleLogin };
+  return {
+    googleOauth,
+    isGoogleLogin,
+    setGoogleUser,
+    isEmailLogin,
+    onGoogleLogin,
+  };
 };
 
 export default useGoogleLogin;