feat(login): 로그인 퍼널 구현 #42
Conversation
Collection50
requested review from
qkrdmstlr3,
woo-jk and
eunbeann
as code owners
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
src/app/AuthRedirect.tsx
Outdated
| export default async function AuthRedirect({ children }: StrictPropsWithChildren) { | ||
| const session = await auth(); | ||
|
|
||
| return ( | ||
| <Redirect condition={session?.accessToken != null} to="/login"> | ||
| {children} | ||
| </Redirect> | ||
| ); | ||
| } |
There was a problem hiding this comment.
로그인 여부를 확인해, 리다이렉트를 설정하는 선언형 컴포넌트입니다.
src/app/login/actions.ts
Outdated
| 'use server'; | ||
|
|
||
| import { signIn } from '@/auth'; | ||
|
|
||
| export const googleLogin = () => signIn('google', { redirectTo: '/login?auth=select' }); |
There was a problem hiding this comment.
auth.js가 next/header를 사용하고 있어, action으로 export하여 별도로 사용합니다.
client에서 server action을 사용하게 하는 nextJs에서 권장 방법입니다.
| export function Redirect({ children, to = '/', condition }: Props) { | ||
| if (typeof condition === 'function' && condition()) { | ||
| redirect(to); | ||
| } | ||
|
|
||
| if (condition) { | ||
| redirect(to); | ||
| } | ||
| return <>{children}</>; | ||
| } |
There was a problem hiding this comment.
클라이언트에서 Redirect를 선언적으로 사용하는 컴포넌트입니다.
There was a problem hiding this comment.
Funnel을 간소화하여 서비스에 맞게 구현했습니다.
| width: px0To2000, | ||
| height: px0To2000, | ||
| borderWidth: px0To10, | ||
| fontSize: { | ||
| ...px0To100, | ||
| ...typographyToken, | ||
| }, | ||
| fontWeight: fontWeightToken, | ||
| lineHeight: px0To100, | ||
| minWidth: px0To500, | ||
| minHeight: px0To500, | ||
| spacing: px0To500, | ||
| minWidth: px0To2000, | ||
| minHeight: px0To2000, | ||
| spacing: px0To2000, |
There was a problem hiding this comment.
2000px까지 arbitrary 없이 사용할 수 있도록 변경했습니다.
빌드 시점에 계산되므로, 런타임 오버헤드가 발생하지 않습니다.
| import Google from 'next-auth/providers/google'; | ||
| import { postLogin } from './app/login/api/postLogin'; | ||
|
|
||
| export const { handlers, signIn, signOut, auth } = NextAuth({ |
There was a problem hiding this comment.
NextAuth를 통해 로그인한 유저의 정보도 저장할 수 있는거로 알고 있는데, 해당 기능도 추가되면 좋을 것 같아요!
There was a problem hiding this comment.
유저 정보는 useSession API를 통해 접근할 수 있습니다
src/app/login/components/Select.tsx
Outdated
| transition={{ duration: 0.6, ease: 'easeOut' }} | ||
| className="w-552 h-604 p-68 pt-116 flex flex-col justify-center gap-56 rounded-30 bg-[white]"> | ||
| <div className="flex flex-col items-center gap-16"> | ||
| <h1 className="text-36 font-bold">환영해요 조혜원님!</h1> |
There was a problem hiding this comment.
유저 정보 가져오는게 가능하면 이 부분 유저 이름으로 바꿔야될 것 같아요~
* login * feat * fix * f * fix * f * fix * f * fix * f * fix * fix * fix * f * f * f * f * fix: * f * fix * f * FIX
1. 무슨 이유로 코드를 변경했나요?
2. 어떤 위험이나 장애를 발견했나요?
3. 관련 스크린샷을 첨부해주세요.
4. 완료 사항
5. 추가 사항 / 코드 리뷰 받고 싶은 부분