Feat/#185: 구글 로그인 & 회원가입

package.json

@@ -17,7 +17,7 @@
     "prepare": "husky"
   },
   "dependencies": {
-    "@frolog/frolog-api": "^1.3.1",
+    "@frolog/frolog-api": "^1.4.0-dev.3",
     "@sentry/nextjs": "^8.35.0",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query": "^5.40.1",

src/app/(default)/join/finish/page.tsx

@@ -4,15 +4,14 @@ import Image from 'next/image';
 import PopperAnimation from '@/components/animation/PopperAnimation';
 import QuitButton from '@/components/Button/QuitButton';
 import { IMAGES } from '@/constants/images';
-import { TestStartButton, FinishLight } from '@/features/Join';
+import { FinishLight } from '@/features/Join';
 import { PAGES } from '@/constants/page';
+import LinkButton from '@/components/Button/LinkButton';
 
 function JoinFinishPage() {
   return (
     <div className='safe-screen relative flex w-full flex-col justify-between overflow-hidden'>
       <FinishLight frog={IMAGES.flash.congrats}>
-        야호!
-        <br />
         가입이
         <br />
         완료되었어요
@@ -21,7 +20,7 @@ function JoinFinishPage() {
         route={PAGES.HOME}
         classes='absolute left-[24px] top-[24px] z-100 cursor-pointer'
       />
-      <div className='flex-col-center w-full justify-end gap-[12px]'>
+      <div>
         <Image
           src={IMAGES.ground}
           alt='ground'
@@ -30,7 +29,9 @@ function JoinFinishPage() {
           className='w-full [@media(max-width:350px)]:h-[200px]'
           loading='eager'
         />
-        <TestStartButton />
+        <div className='absolute bottom-5 left-0 flex w-full p-page'>
+          <LinkButton route={PAGES.HOME}>프롤로그 입장하기</LinkButton>
+        </div>
       </div>
       <PopperAnimation />
     </div>

src/app/(default)/onboarding/page.tsx

@@ -2,21 +2,49 @@
 
 /* eslint-disable react/no-array-index-key */
 
-import LinkButton from '@/components/Button/LinkButton';
+import Button from '@/components/Button/Button';
 import OnBoardingSlide from '@/components/OnBoarding/OnBoardingSlide';
 import { PAGES } from '@/constants/page';
 import Link from 'next/link';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
+import GoogleIcon from 'public/logo/sns/google.svg';
+import { useGoogle } from '@/features/Join/hooks/useGoogle';
+import { AnimatePresence } from 'framer-motion';
+import ErrorToast from '@/components/Toast/ErrorToast';
 
 function OnBoardingPage() {
   const [activeSlide, setActiveSlide] = useState<number>(1);
+  const { handleGoogleSignIn, isRegistered } = useGoogle();
+
+  const handleGoogleAuth = async (code: string) => {
+    handleGoogleSignIn({ authorization_code: code });
+  };
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const code = urlParams.get('code');
+
+    if (code) {
+      handleGoogleAuth(code);
+    }
+  }, []);
+
+  const handleClickGoogleLogin = () => {
+    const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID;
+    const redirectUri = process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI;
+
+    const googleLoginUrl = `https://accounts.google.com/o/oauth2/v2/auth?client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code&scope=email profile`;
+    window.location.href = googleLoginUrl;
+  };
 
   return (
-    <div className='safe-screen safe-bottom safe-header flex h-full min-h-[650px] w-full flex-col bg-gray-900'>
+    <div className='safe-screen safe-bottom safe-header flex h-[100dvh] w-full flex-col bg-gray-900'>
       <OnBoardingSlide setActiveSlide={setActiveSlide} />
-      <div className='flex w-full shrink-0 flex-col items-center gap-[20px] px-page py-[32px] pt-[12px] transition-all duration-200'>
+      <div
+        className={`flex h-[22dvh] w-full flex-col items-center gap-[20px] ${activeSlide === 1 ? 'bg-category-bg-science' : 'bg-gray-300'} px-page py-[32px] pt-[12px] transition-all duration-200 [@media(max-height:750px)]:h-[25dvh]`}
+      >
         <div className='flex gap-[8px]'>
-          {Array(4)
+          {Array(3)
             .fill(0)
             .map((_, i) => (
               <div
@@ -27,14 +55,30 @@ function OnBoardingPage() {
               />
             ))}
         </div>
-        <LinkButton disabled={false} route={PAGES.LOGIN}>
-          로그인 하기
-        </LinkButton>
+        <Button
+          disabled={false}
+          theme='light'
+          onClick={handleClickGoogleLogin}
+          extraClass='relative text-gray-800 text-body-lg-bold'
+        >
+          <GoogleIcon className='absolute left-5 top-1/2 -translate-y-1/2' />
+          Google로 로그인
+        </Button>
         <div className='flex justify-center'>
-          <Link href={PAGES.JOIN} className='text-body-lg-bold text-main'>
-            30초만에 회원가입 하기
+          <Link
+            href={PAGES.LOGIN}
+            className={`text-body-lg ${activeSlide === 1 ? 'text-white' : 'text-gray-600'}`}
+          >
+            이메일로 로그인
           </Link>
         </div>
+        <div className='flex-col-center absolute bottom-0 w-full gap-[12px] pb-[24px]'>
+          <AnimatePresence>
+            {isRegistered && (
+              <ErrorToast errorMsg='이메일 로그인으로 가입된 메일이에요' />
+            )}
+          </AnimatePresence>
+        </div>
       </div>
     </div>
   );

src/app/(form)/join/page.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { JoinForm } from '@/features/Join';
 import { Metadata } from 'next';
+import GoogleJoinForm from '@/features/Join/components/GoogleJoinForm';
 
 export const metadata: Metadata = {
   title: '회원가입',
@@ -12,8 +13,10 @@ export const metadata: Metadata = {
   },
 };
 
-function JoinPage() {
-  return <JoinForm />;
+function JoinPage({ searchParams }: { searchParams: { type: string } }) {
+  const { type } = searchParams;
+
+  return type === 'google' ? <GoogleJoinForm /> : <JoinForm />;
 }
 
 export default JoinPage;

src/app/api/mock/route.ts

@@ -0,0 +1,14 @@
+// import { NextRequest } from 'next/server';
+// import { NextResponse } from 'next/server';
+
+// export async function POST(request: NextRequest) {
+//   const { authorization_code } = await request.json();
+//   return NextResponse.json({
+//     result: false,
+//     email: 'test@test.com',
+//     is_registerd: false,
+//     login_type: null,
+//     email_verified_token:
+//       'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6ImZ1bGZpbGxlZDc0MThAZ21haWwuY29tIiwidGFyZ2V0Ijoic2lnblVwIiwiaWF0IjoxNzUwMzQzNjI2LCJleHAiOjE3NTA0MzAwMjYsInN1YiI6InZlcmlmeUVtYWlsQ29kZSJ9.WDfsAF3npSC3NKkOSOjmtkKazGIY4gfneFxz6zs2-qE',
+//   });
+// }

src/components/Button/Button.tsx

@@ -8,6 +8,7 @@ import { getButtonColor } from '@/utils/getButtonColor';
 interface Props extends HTMLMotionProps<'button'> {
   children: React.ReactNode;
   theme?: 'normal' | 'error' | 'gray' | 'light' | string;
+  extraClass?: string;
 }
 
 /** 기본 버튼 컴포넌트
@@ -18,6 +19,7 @@ function Button({
   type = 'button',
   disabled = false,
   theme = 'normal',
+  extraClass,
   ...props
 }: Props) {
   const buttonType = getButtonColor(theme);
@@ -26,7 +28,7 @@ function Button({
     <motion.button
       type={type}
       disabled={disabled}
-      className={`${disabled ? 'button-disabled' : ''} ${buttonType}`}
+      className={`${disabled ? 'button-disabled' : ''} ${buttonType} ${extraClass}`}
       variants={tapVariants}
       whileTap='tap'
       {...props}

src/components/Form/Password/PasswordForm.tsx

@@ -9,7 +9,6 @@ function PasswordForm() {
   const {
     register,
     trigger,
-    watch,
     formState: { errors },
   } = useFormContext();
 
@@ -31,29 +30,6 @@ function PasswordForm() {
             if (errors.password) {
               trigger('password');
             }
-            await trigger('passwordCheck');
-          },
-        })}
-      />
-      <FormInput
-        type='password'
-        placeholder='비밀번호를 재입력하세요'
-        fieldName='passwordCheck'
-        errorMessage={
-          errors.passwordCheck && String(errors.passwordCheck.message)
-        }
-        {...register('passwordCheck', {
-          validate: {
-            matches: (value: string) =>
-              value.length === 0 ||
-              value === watch('password') ||
-              '비밀번호가 일치하지 않아요.',
-          },
-          onChange: async (e) => {
-            const { value } = e.target;
-            if (value.length > 0) {
-              await trigger('passwordCheck');
-            }
           },
         })}
       />

src/components/OnBoarding/OnBoardingSlide.tsx

@@ -5,7 +5,7 @@ import Slider, { Settings } from 'react-slick';
 import Slide1 from 'public/images/onBoarding/slide-1.svg';
 import Slide2 from 'public/images/onBoarding/slide-2.svg';
 import Slide3 from 'public/images/onBoarding/slide-3.svg';
-import Slide4 from 'public/images/onBoarding/slide-4.svg';
+import LightBg from 'public/images/flash/light-bg-onboarding.svg';
 import BackButton from '../Button/BackButton';
 
 interface Props {
@@ -23,73 +23,51 @@ function OnBoardingSlide({ setActiveSlide }: Props) {
     slidesToShow: 1,
     slidesToScroll: 1,
     autoplay: false,
+    adaptiveHeight: true,
     beforeChange: (_, next) => {
       setActiveSlide(next + 1);
     },
   };
 
   return (
-    <div className='flex flex-1 shrink flex-col gap-[20px] bg-gray-900 pt-[24px] transition-all duration-200 mobile:gap-[12px] [@media(max-height:820px)]:gap-[12px]'>
+    <div className='flex flex-col gap-[20px] bg-gray-900 pt-[24px] transition-all duration-200'>
       <BackButton
         fill='#B3B6C4'
         onClick={() => router.back()}
         extraClass='px-page'
       />
-      <Slider {...settings} className='flex flex-1 shrink'>
-        <div className='flex h-full w-full flex-1 shrink flex-col justify-between'>
-          <div className='flex h-full flex-col pb-[20px]'>
-            <h1 className='px-page text-heading-md-bold text-main_hightlight mobile:text-title-xl-bold [@media(max-height:700px)]:text-title-xl-bold'>
-              {onBoarding[1].title()}
-            </h1>
-            <div className='flex w-full flex-1 flex-col-reverse'>
-              <Slide1
-                className='h-auto w-full self-end'
-                width={390}
-                height={302}
-              />
-            </div>
+      <Slider {...settings} className='w-full'>
+        <div className='relative !flex h-[calc(80dvh-54px)] flex-col [@media(max-height:750px)]:h-[calc(75dvh-54px)]'>
+          <h1 className='absolute left-1/2 top-[18%] z-50 -translate-x-1/2 text-center text-title-xl-bold text-gray-900 [@media(max-width:375px)]:text-title-lg-bold'>
+            {onBoarding[1].title()}
+          </h1>
+          <div className='w-full translate-y-[2px] [@media(max-height:670px)]:translate-y-[3px]'>
+            <LightBg />
           </div>
-        </div>
-        <div className='flex h-full w-full flex-1 shrink flex-col justify-between px-page'>
-          <div className='flex h-full w-full flex-1 flex-col gap-[20px] pb-[20px]'>
-            <h1 className='text-heading-md-bold text-main_hightlight mobile:text-title-xl-bold [@media(max-height:700px)]:text-title-xl-bold'>
-              {onBoarding[2].title()}
-            </h1>
-            <div className='flex flex-1 flex-col-reverse items-center'>
-              <Slide2
-                className='h-full max-h-[337px] w-auto max-w-full self-center [@media(max-height:670px)]:w-[90%]'
-                width={342}
-                height={337}
-              />
-            </div>
+          <div className='flex flex-1 translate-y-[1px] flex-col justify-end bg-gray-300 [@media(max-height:670px)]:translate-y-[2px]'>
+            <Slide1 className='h-auto w-full' />
           </div>
         </div>
-        <div className='flex h-full w-full flex-1 shrink flex-col justify-between px-page'>
-          <div className='flex h-full w-full flex-1 flex-col gap-[20px] pb-[20px]'>
-            <h1 className='text-heading-md-bold text-main_hightlight mobile:text-title-xl-bold [@media(max-height:700px)]:text-title-xl-bold'>
-              {onBoarding[3].title()}
-            </h1>
-            <div className='flex flex-1 flex-col-reverse items-center'>
-              <Slide3
-                className='h-full max-h-[352px] w-auto max-w-full self-center [@media(max-height:670px)]:w-[90%]'
-                width={342}
-                height={352}
-              />
-            </div>
+        <div className='relative !flex h-[calc(80dvh-54px)] flex-col [@media(max-height:750px)]:h-[calc(75dvh-54px)]'>
+          <h1 className='absolute left-1/2 top-[18%] z-50 -translate-x-1/2 text-center text-title-xl-bold text-gray-900 [@media(max-width:375px)]:text-title-lg-bold'>
+            {onBoarding[2].title()}
+          </h1>
+          <div className='w-full translate-y-[2px]'>
+            <LightBg />
+          </div>
+          <div className='jutify-center flex flex-1 translate-y-[1px] flex-col bg-gray-300 px-page'>
+            <Slide2 className='my-auto h-auto w-full' />
           </div>
         </div>
-        <div className='flex h-full w-full flex-1 shrink flex-col justify-between px-page'>
-          <div className='flex h-full w-full flex-1 flex-col gap-[20px]'>
-            <h1 className='text-heading-md-bold text-main_hightlight mobile:text-title-xl-bold [@media(max-height:700px)]:text-title-xl-bold'>
-              {onBoarding[4].title()}
-            </h1>
-            <div className='flex flex-1 flex-col-reverse items-center'>
-              <Slide4
-                className='h-full max-h-[389px] w-auto max-w-full self-center [@media(max-height:670px)]:w-[90%]'
-                width={362}
-                height={389}
-              />
-            </div>
+        <div className='relative !flex h-[calc(80dvh-54px)] flex-col [@media(max-height:750px)]:h-[calc(75dvh-54px)]'>
+          <h1 className='absolute left-1/2 top-[18%] z-50 w-[25dvw] -translate-x-1/2 text-center text-title-xl-bold text-gray-900 mobile:w-[70dvw] [@media(max-width:375px)]:text-title-lg-bold'>
+            {onBoarding[3].title()}
+          </h1>
+          <div className='w-full translate-y-[2px]'>
+            <LightBg />
+          </div>
+          <div className='jutify-center flex flex-1 translate-y-[1px] flex-col bg-gray-300 px-page'>
+            <Slide3 className='my-auto h-auto w-full [@media(max-height:670px)]:mx-auto [@media(max-height:670px)]:w-[230px]' />
           </div>
         </div>
       </Slider>