-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[#26] 소셜로그인 구현 #53
[#26] 소셜로그인 구현 #53
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍 localstroage의 키를 하드코딩하고있는건 나중에 상수화해서 관리하거나 로컬스토리지 자체를 하나의 레이어로 만들어서 관리하면 더 좋을거가타요 |
||
setLoginUser(data.data.token) | ||
router.push('/main') | ||
} catch (error) { | ||
console.error('인증 코드가 존재하지 않습니다.') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 🔥 나중엔 에러처리에 Toast 같이 사용자도 에러상황을 인지할 수 있게해주는 UI가 들어가면 좋을거같아요 |
||
} | ||
} | ||
} | ||
}, [params]) | ||
handleLogin() | ||
}, []) | ||
|
||
return <div>Redirecting...</div> | ||
return <Loading /> | ||
} | ||
|
||
export default Callback |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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, | ||
}) | ||
|
||
// 적극적 투자 지표 사용자가 선택한 항목 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 주석 달아준거 너무 친절해요 👍 코딩할때 인텔리센스로도 생성되면 좋을거같아요 jsdoc으로 설명을 붙여주면 더 좋지않을까요? |
||
export const selectedItemAtom = atom<ActiveInvestmentItemType | null>({ | ||
key: 'selectedItemAtom', | ||
default: null, | ||
}) | ||
|
||
// 적극적 투자 지표 전체 사용자 수 | ||
export const totalinputValueAtom = atom({ | ||
key: 'totalinputValueAtom', | ||
default: '', | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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' | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. React.useState를 useState로 바꾸는건 좋은 것 같아요 |
||
|
||
function Providers({ children }: React.PropsWithChildren) { | ||
const [client] = React.useState( | ||
const [client] = useState( | ||
new QueryClient({ | ||
defaultOptions: { | ||
queries: { | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
recoil, jotai같은 아톰라이브러리들은 setter만 제공하는 useSetRecoilState같은 함수를 제공하니까 세터만 쓰려고하는 경우엔 이쪽 함수를 사용해보는것도 좋지않을까싶내요
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
변경예정 !!! 보러와주세오 !!!!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
빠른 반영 ㄷㄷ