[#26] 소셜로그인 구현

app/(route)/indicators/_components/result/index.tsx

@@ -29,7 +29,6 @@ function Result() {
     )
 
   setResult(resultValue!)
-  console.log(resultValue)
 
   let resultAmount = ''
   if (resultValue! >= 90) {

app/(route)/oauth/callback/kakao/_components/callback/index.tsx

@@ -1,20 +1,43 @@
 'use client'
 
-import { useSearchParams } from 'next/navigation'
-import React, { useEffect } from 'react'
+import Loading from '@/app/_common/loading'
+import { userKakaoTokenAtom } from '@/app/_store/atom'
+import axiosInstance from '@/app/_utils/axios'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { useEffect } from 'react'
+import { useRecoilState } from 'recoil'
 
 function Callback() {
+  const router = useRouter()
   const params = useSearchParams()
+  const codeParam = params.get('code')
+  const [, setLoginUser] = useRecoilState(userKakaoTokenAtom)
 
-  useEffect(() => {
-    const codeParam = params.get('code')
+  async function postOAuth(code: string) {
+    const response = await axiosInstance.post(`api/auth/kakao/signin`, {
+      code,
+    })
+
+    return response
+  }
 
-    if (codeParam) {
-      console.log(codeParam)
+  useEffect(() => {
+    const handleLogin = async () => {
+      if (codeParam) {
+        try {
+          const data = await postOAuth(codeParam)
+          localStorage.setItem('accessToken', data.data.token)
+          setLoginUser(data.data.token)
+          router.push('/main')
+        } catch (error) {
+          console.error('인증 코드가 존재하지 않습니다.')
+        }
+      }
     }
-  }, [params])
+    handleLogin()
+  }, [])
 
-  return <div>Redirecting...</div>
+  return <Loading />
 }
 
 export default Callback

app/(route)/oauth/callback/kakao/page.tsx

@@ -1,12 +1,11 @@
-import React, { Suspense } from 'react'
+import Loading from '@/app/_common/loading'
+import { Suspense } from 'react'
 import Callback from './_components/callback'
 
 function page() {
   return (
-    <Suspense fallback={<div>로딩중...</div>}>
-      <div>
-        <Callback />
-      </div>
+    <Suspense fallback={<Loading />}>
+      <Callback />
     </Suspense>
   )
 }

app/(route)/signin/_components/Login.tsx

@@ -40,10 +40,22 @@ function Login() {
 
   const handleLogin = () => {
     const KAKAO_CLIENT_ID = process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID
-    const KAKAO_REDIRECT_URL = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URL
+
+    let KAKAO_REDIRECT_URL
+
+    if (process.env.NODE_ENV === 'development') {
+      KAKAO_REDIRECT_URL = process.env.NEXT_PUBLIC_KAKAO_DEVLOP_REDIRECT_URL
+    } else {
+      KAKAO_REDIRECT_URL = process.env.NEXT_PUBLIC_KAKAO_REDIRECT_URL
+    }
+
     const kakadoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_CLIENT_ID}&redirect_uri=${KAKAO_REDIRECT_URL}&response_type=code`
 
-    window.location.href = kakadoAuthUrl
+    try {
+      router.push(kakadoAuthUrl)
+    } catch (error) {
+      console.log(error)
+    }
   }
 
   return (

app/(route)/verification/ibulsin/_components/Step3/index.tsx

@@ -1,18 +1,17 @@
 'use client'
 
-import React from 'react'
-import Link from 'next/link'
-import MoreExplainBtn from '../MoreExplainBtn'
 import { ibulsinVariants } from '@/app/_constants/ibulsin'
+import useIbulsinData from '@/app/_hooks/useIbulsinData'
+import useIbulsinFormMutation from '@/app/_service/mutations/useIbulsinForm'
 import {
   pretotypingTextareaAtom,
   xyzTextareaAtom,
 } from '@/app/_store/ibulsin/textarea'
-import useIbulsinData from '@/app/_hooks/useIbulsinData'
+import Link from 'next/link'
+import { useRouter } from 'next/navigation'
+import MoreExplainBtn from '../MoreExplainBtn'
 import Textarea from '../Textarea'
 import S from './index.module.css'
-import useIbulsinFormMutation from '@/app/_service/mutations/useIbulsinForm'
-import { useRouter } from 'next/navigation'
 
 function Step3() {
   const router = useRouter()
@@ -46,10 +45,10 @@ function Step3() {
 
     mutate(body, {
       onSuccess: () => {
-        router.push('/')
+        router.push('/indicators')
       },
       onError: () => {
-        alert('에러가 발생하였습니다.')
+        router.push('/signin')
       },
     })
   }

app/_common/loading/loading.module.css

@@ -1,15 +1,16 @@
 .wrapper {
+  position: fixed;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  position: fixed;
+
   top: 0;
   width: 480px;
   min-height: 100vh;
   height: auto;
   color: white;
   font-size: 1.4rem;
   letter-spacing: 0.2px;
-  margin-top: 10px;
+  background-color: var(--purple-700);
 }

app/_store/atom.ts

@@ -9,16 +9,25 @@ export interface ActiveInvestmentItemType {
 
 // type ActiveType = Omit<ActiveInvestmentItemType, 'id'>
 
+// 카카오 유저 토큰
+export const userKakaoTokenAtom = atom<string>({
+  key: 'userKakaoTokenAtom',
+  default: '',
+})
+
+// 지표 결과
 export const resultAtom = atom<number>({
   key: 'resultAtom',
   default: 0,
 })
 
+// 적극적 투자 지표 사용자가 선택한 항목
 export const selectedItemAtom = atom<ActiveInvestmentItemType | null>({
   key: 'selectedItemAtom',
   default: null,
 })
 
+// 적극적 투자 지표 전체 사용자 수
 export const totalinputValueAtom = atom({
   key: 'totalinputValueAtom',
   default: '',

app/_utils/provider.tsx

@@ -1,12 +1,12 @@
 'use client'
 
-import React from 'react'
-import { QueryClientProvider, QueryClient } from '@tanstack/react-query'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
+import React, { useState } from 'react'
 
 function Providers({ children }: React.PropsWithChildren) {
-  const [client] = React.useState(
+  const [client] = useState(
     new QueryClient({
       defaultOptions: {
         queries: {