feat: (#3) 스플래시 페이지 및 소셜 로그인 구현 (#5)

* feat: 스플래시 페이지 구현

스플래시 화면 구현, 해당 과정에서 폰트적용이 안돼 폰트 적용 부분도 수정함

* fix: 빌드 에러 해결

1. 불필요한 import 정리
2. button type 속성 추가

* feat: 소셜로그인 구현 완료

로컬 환경에서 테스트 완료

* fix: ESLint 규칙에 맞춰서 수정

추가적으로 로그인 페이지 SplashTop 위치도 수정

* fix: 빌드 에러 수정

* fix: useSearchParams가 서버에서 동작하지 않도록 Suspense로 감쌈

* fix: 요청 API 환경변수 설정, 불필요한 객체의 인스턴스 제거

src/app/auth/callback/page.tsx

@@ -0,0 +1,85 @@
+'use client'
+
+import { Suspense, useEffect } from 'react'
+import { useSearchParams, useRouter } from 'next/navigation'
+import { SendData } from './type'
+
+function LoginCheck() {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+
+  const code = searchParams.get('code')
+  const scope = searchParams.get('scope')
+  const state = searchParams.get('state')
+
+  const sendUserHomeOrStart = (userState: string) => {
+    if (userState === 'GUEST') router.push('/start')
+    if (userState === 'MEMBER') router.push('/home')
+  }
+
+  const getUserData = async (socialType: string, sendDataArr: SendData[]) => {
+    let url: string = `${process.env.NEXT_PUBLIC_SOCIAL_LOGIN_API}${socialType}?`
+    for (let i = 0; i < sendDataArr.length; i += 1) {
+      if (i === 0) {
+        url += `${sendDataArr[i].name}=${sendDataArr[i].value}`
+      }
+
+      if (i !== 0) {
+        url += `&${sendDataArr[i].name}=${sendDataArr[i].value}`
+      }
+    }
+
+    try {
+      const res = await fetch(url, {
+        method: 'GET',
+      })
+
+      if (!res.ok) {
+        throw new Error(`HTTP error! status: ${res.status}`)
+      }
+
+      const data = await res.json()
+
+      // console.log('reponse Data', data)
+
+      // 토근 설정
+      localStorage.setItem('accessToken', data.data.accessToken)
+      localStorage.setItem('refreshToken', data.data.refreshToken)
+
+      // role에 따라 페이지 이동 차이
+      sendUserHomeOrStart(data.data.role)
+    } catch (error) {
+      console.log('Error fetching user data', error)
+    }
+  }
+
+  useEffect(() => {
+    const sendDataArr: SendData[] = []
+
+    if (code) {
+      if (state) {
+        sendDataArr.push({ name: 'code', value: code })
+        sendDataArr.push({ name: 'state', value: state })
+        getUserData('naver', sendDataArr)
+        return
+      }
+      if (scope) {
+        sendDataArr.push({ name: 'code', value: code })
+        getUserData('google', sendDataArr)
+        return
+      }
+      sendDataArr.push({ name: 'code', value: code })
+      getUserData('kakao', sendDataArr)
+    }
+  }, [code, state, scope])
+
+  return <div>로그인 정보를 확인중입니다...</div>
+}
+
+export default function WrappedLoginCheck() {
+  return (
+    <Suspense fallback={<div>로딩 중...</div>}>
+      <LoginCheck />
+    </Suspense>
+  )
+}

src/app/auth/callback/type.ts

@@ -0,0 +1,4 @@
+export interface SendData {
+  name: string
+  value: string
+}

src/app/components/Oauth/OauthBtn.tsx

@@ -0,0 +1,24 @@
+import { useRouter } from 'next/navigation'
+import { OauthBtnProps } from './type'
+
+export default function OauthBtn({ type, text, style }: OauthBtnProps) {
+  const router = useRouter()
+
+  const handleSocialLogin = async () => {
+    router.push(`https://cnergy.p-e.kr/v1/oauth/${type}`)
+  }
+
+  return (
+    <button
+      onClick={() => handleSocialLogin()}
+      type="button"
+      className={`
+        ${style} 
+        w-[342px] h-[56px] flex justify-center items-center rounded-12 text-black font-semibold mb-10
+      `}
+    >
+      <img src={`/images/${type}-icon.png`} alt={`${type}`} className="mr-8" />
+      {text}로 시작하기
+    </button>
+  )
+}

src/app/components/Oauth/SocialTypeData.ts

@@ -0,0 +1,22 @@
+import { OauthBtnData } from './type'
+
+export const socialTypes: OauthBtnData[] = [
+  {
+    id: 1,
+    type: 'kakao',
+    text: '카카오',
+    style: 'bg-[#FFE819]',
+  },
+  {
+    id: 2,
+    type: 'naver',
+    text: '네이버',
+    style: 'bg-[#03C75A]',
+  },
+  {
+    id: 3,
+    type: 'google',
+    text: '구글',
+    style: 'bg-white border',
+  },
+]

src/app/components/Oauth/type.ts

@@ -0,0 +1,8 @@
+export interface OauthBtnData {
+  id: number
+  type: string
+  text: string
+  style: string
+}
+
+export type OauthBtnProps = Omit<OauthBtnData, 'id'>

src/app/home/page.tsx

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div>홈페이지여</div>
+}

src/app/page.tsx

@@ -1,7 +1,103 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { motion } from 'framer-motion'
+import SplashLogo from '@/components/Icons/SplashLogo'
+import SplashTop from '@/components/Icons/SplashTop'
+import SplashBottom from '@/components/Icons/SplashBottom'
+import { socialTypes } from './components/Oauth/SocialTypeData'
+import OauthBtn from './components/Oauth/OauthBtn'
+
 export default function Home() {
+  const [isSplash, setIsSplash] = useState(true)
+  const [logoColor, setlogoColor] = useState('white')
+  const [splashBoxColor, setSplashBoxColor] = useState('#31313B')
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsSplash(false)
+      setSplashBoxColor('#F3F3F4')
+    }, 1000)
+
+    const logotimer = setTimeout(() => {
+      setlogoColor('#1A1A25')
+    }, 1700)
+
+    return () => {
+      clearTimeout(timer)
+      clearTimeout(logotimer)
+    }
+  }, [])
+
   return (
-    <div className="text-[#444444] flex justify-center items-center h-screen">
-      hi~
+    <div className=" flex justify-center items-center w-screen h-screen">
+      <motion.div
+        className=" relative w-full h-full bg-primary_foundation_100"
+        initial={{ opacity: 1 }}
+        animate={{
+          opacity: 1,
+          backgroundColor: isSplash ? '#1A1A25' : '#ffffff',
+        }}
+        transition={{ duration: 0.5 }}
+      >
+        <SplashLogo
+          className="absolute left-[127px] top-[248px] z-50"
+          firstPieceColor={logoColor}
+        />
+
+        <motion.div
+          initial={{ x: 0, y: -200, opacity: 1 }}
+          animate={{ x: 0, y: -17, opacity: 1 }}
+          transition={{ duration: 0.5 }}
+        >
+          <SplashTop
+            elementColor={splashBoxColor}
+            className="absolute right-0 top-[186px]"
+          />
+        </motion.div>
+
+        <motion.div
+          initial={{ x: 0, y: 553, opacity: 1 }}
+          animate={{
+            x: 0,
+            y: 264,
+            opacity: 1,
+            backgroundColor: splashBoxColor,
+          }}
+          transition={{ duration: 0.5 }}
+        >
+          <SplashBottom
+            elementColor={splashBoxColor}
+            className="absolute left-0"
+          />
+        </motion.div>
+      </motion.div>
+      {!isSplash && (
+        <>
+          <p className="z-50 font-semibold absolute top-[388px]">
+            여기에는 캐치프레이즈가 들어갑니다
+          </p>
+
+          <motion.div
+            className="absolute bottom-80"
+            initial={{ y: 300, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            transition={{ duration: 0.5 }}
+          >
+            {socialTypes &&
+              socialTypes.map((socialData) => {
+                return (
+                  <OauthBtn
+                    key={socialData.id}
+                    type={socialData.type}
+                    text={socialData.text}
+                    style={socialData.style}
+                  />
+                )
+              })}
+          </motion.div>
+        </>
+      )}
     </div>
   )
 }

src/components/Icons/SplashBottom.tsx

@@ -0,0 +1,29 @@
+import { SVGProps } from 'react'
+
+interface SplashBottomProps extends SVGProps<SVGSVGElement> {
+  elementColor?: string
+}
+
+export default function SplashBottom({
+  elementColor = '#F3F3F4',
+  ...props
+}: SplashBottomProps) {
+  return (
+    <svg
+      width="292"
+      height="291"
+      viewBox="0 0 292 291"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect y="194" width="97" height="97" fill={elementColor} />
+      <rect y="97" width="97" height="97" fill={elementColor} />
+      <rect x="97" y="194" width="98" height="97" fill={elementColor} />
+      <rect x="97" y="97" width="98" height="97" fill={elementColor} />
+      <rect x="97" width="98" height="97" fill={elementColor} />
+      <rect x="195" y="194" width="97" height="97" fill={elementColor} />
+      <rect width="98" height="97" fill={elementColor} />
+    </svg>
+  )
+}