From 233410bc559edc08c32e801bba40da549cd95d8f Mon Sep 17 00:00:00 2001
From: hanseulhee <3021062@gmail.com>
Date: Mon, 8 Apr 2024 20:23:47 +0900
Subject: [PATCH] =?UTF-8?q?[#26]=20=EC=86=8C=EC=85=9C=EB=A1=9C=EA=B7=B8?=
=?UTF-8?q?=EC=9D=B8=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../indicators/_components/result/index.tsx | 1 -
.../kakao/_components/callback/index.tsx | 39 +++++++++++++++----
app/(route)/oauth/callback/kakao/page.tsx | 9 ++---
app/(route)/signin/_components/Login.tsx | 16 +++++++-
.../ibulsin/_components/Step3/index.tsx | 15 ++++---
app/_common/loading/loading.module.css | 5 ++-
app/_store/atom.ts | 9 +++++
app/_utils/provider.tsx | 6 +--
8 files changed, 71 insertions(+), 29 deletions(-)
diff --git a/app/(route)/indicators/_components/result/index.tsx b/app/(route)/indicators/_components/result/index.tsx
index b46335b..112fa7b 100644
--- a/app/(route)/indicators/_components/result/index.tsx
+++ b/app/(route)/indicators/_components/result/index.tsx
@@ -29,7 +29,6 @@ function Result() {
)
setResult(resultValue!)
- console.log(resultValue)
let resultAmount = ''
if (resultValue! >= 90) {
diff --git a/app/(route)/oauth/callback/kakao/_components/callback/index.tsx b/app/(route)/oauth/callback/kakao/_components/callback/index.tsx
index 019863b..8bc6a09 100644
--- a/app/(route)/oauth/callback/kakao/_components/callback/index.tsx
+++ b/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 Redirecting...
+ return
}
export default Callback
diff --git a/app/(route)/oauth/callback/kakao/page.tsx b/app/(route)/oauth/callback/kakao/page.tsx
index e05d776..6c9f943 100644
--- a/app/(route)/oauth/callback/kakao/page.tsx
+++ b/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 (
- 로딩중...}>
-
-
-
+ }>
+
)
}
diff --git a/app/(route)/signin/_components/Login.tsx b/app/(route)/signin/_components/Login.tsx
index 885e42f..0694c87 100644
--- a/app/(route)/signin/_components/Login.tsx
+++ b/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 (
diff --git a/app/(route)/verification/ibulsin/_components/Step3/index.tsx b/app/(route)/verification/ibulsin/_components/Step3/index.tsx
index 5fea13a..6e6c6f8 100644
--- a/app/(route)/verification/ibulsin/_components/Step3/index.tsx
+++ b/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')
},
})
}
diff --git a/app/_common/loading/loading.module.css b/app/_common/loading/loading.module.css
index a756903..2ae1100 100644
--- a/app/_common/loading/loading.module.css
+++ b/app/_common/loading/loading.module.css
@@ -1,9 +1,10 @@
.wrapper {
+ position: fixed;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- position: fixed;
+
top: 0;
width: 480px;
min-height: 100vh;
@@ -11,5 +12,5 @@
color: white;
font-size: 1.4rem;
letter-spacing: 0.2px;
- margin-top: 10px;
+ background-color: var(--purple-700);
}
diff --git a/app/_store/atom.ts b/app/_store/atom.ts
index d15fdef..8e52fa4 100644
--- a/app/_store/atom.ts
+++ b/app/_store/atom.ts
@@ -9,16 +9,25 @@ export interface ActiveInvestmentItemType {
// type ActiveType = Omit
+// 카카오 유저 토큰
+export const userKakaoTokenAtom = atom({
+ key: 'userKakaoTokenAtom',
+ default: '',
+})
+
+// 지표 결과
export const resultAtom = atom({
key: 'resultAtom',
default: 0,
})
+// 적극적 투자 지표 사용자가 선택한 항목
export const selectedItemAtom = atom({
key: 'selectedItemAtom',
default: null,
})
+// 적극적 투자 지표 전체 사용자 수
export const totalinputValueAtom = atom({
key: 'totalinputValueAtom',
default: '',
diff --git a/app/_utils/provider.tsx b/app/_utils/provider.tsx
index 83a777a..f19b469 100644
--- a/app/_utils/provider.tsx
+++ b/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: {