Dep 167 Add flow of invitation #122
Conversation
| <h1>{title}</h1> | ||
| </Template.Title> | ||
| <Template.Content /> | ||
| <Template.Button disabled={isInitialLoading || isRefetching} onClick={onClick}> |
There was a problem hiding this comment.
사용자의 데이터를 가져오는 동안 button을 비활성화 합니다.
enabled option 이 걸릴 경우, isLoading: true 로 반환됩니다. (참고 : issue)
따라서 이에 대한 방안책으로 isInitialLoading || isRefetching을 사용합니다.
| const onClick = async () => { | ||
| const searchParams = new URLSearchParams({ | ||
| redirectUri: `/invitation/${invitationCode}`, | ||
| }).toString(); | ||
| if (planetId && userId) { | ||
| await mutateAsync({ planetId, userId }); | ||
| if (userInfo?.isCharacterCreated) { | ||
| router.push(`/planet/${planetId}`); | ||
| } else { | ||
| router.push(`/onboarding?${searchParams}`); | ||
| } | ||
| } else { | ||
| router.push(`/auth/signin?${searchParams}`); | ||
| } | ||
| }; |
There was a problem hiding this comment.
아래 flow를 구현했습니다.
| const title = '당신을 디프만 행성으로\n 초대합니다'; | ||
|
|
||
| const InvitationPage = ({ params }: { params: { code: string } }) => { | ||
| const router = useRouter(); |
There was a problem hiding this comment.
useRouter 를 사용하기 위해서 client component 로 선언했습니다.
| export const getUserIdClient = (): number => { | ||
| export const getUserIdClient = (): number | undefined => { | ||
| try { | ||
| if (typeof document === 'undefined') throw new UserIdNotFoundError(); | ||
| const { userId } = getAuthTokensByCookie(document.cookie); | ||
| if (userId !== undefined) return userId; | ||
| throw new UserIdNotFoundError(); | ||
| throw new UserIdNotFoundError(); // 비로그인한 사용자의 경우 | ||
| } catch (e) { | ||
| return -1; | ||
| return undefined; |
There was a problem hiding this comment.
사용자의 로그인 여부를 에러 없이 순수하게 알아내기 위해 사용합니다.
예) 로그인 사용자, 비로그인 사용자 모두 초대코드를 들고 입장할 수 있으며 해당 페이지에서 로그인 여부를 구분을 해주어야 합니다
-1 보다 undefined 가 처리하기 용이할 것 같아 수정했습니다.
There was a problem hiding this comment.
-1 보다 undefined가 왜 처리가 용이한지 궁금합니다!
There was a problem hiding this comment.
로그인 여부를 -1 로 주게 된다면 아래와 같은 코드가 나올 것 같았어요.
const userId = getUserId();
if(userId === NOT_LOGIN)
이것보다 아래와 같이 사용하는 게 편하다고 생각했습니다.
const userId = getUserId();
if(!userId)
cookie에서 가져오는 값이기 때문에 -1이라는 임의의 숫자보다는 undefined 가 의미상 더 맞다고 생각되었어요. (확실히 하려면 null 이긴 하지만...)
저의 개인적인 생각일 뿐입니다!
| export type InvitationCodeValidationModel = { | ||
| planetId: number; | ||
| }; | ||
|
|
||
| export type PlanetJoinModel = { | ||
| userId: number; | ||
| planetId: number; | ||
| }; |
There was a problem hiding this comment.
아직 api 명세가 나오지 않아 임의로 구현해 놓았습니다.
| export const getInvitationCodeIsValid = async (invitationCode: string) => { | ||
| return await publicApi.get<InvitationCodeValidationResponse>(`/invitation/${invitationCode}`); | ||
| }; | ||
|
|
||
| export const useGetInvitationCodeIsValid = (invitationCode: string) => | ||
| useQuery(userQueryKey.invitationCodeIsValid(), () => getInvitationCodeIsValid(invitationCode)); | ||
|
|
||
| export const postPlanetJoin = async (body: PlanetJoinRequest) => { | ||
| return await privateApi.post<InvitationCodeValidationResponse>(`/join/planet`, body); | ||
| }; |
There was a problem hiding this comment.
public api가 한 파일(api.ts)에서 private api와 함께 선언되고 서버 컴포넌트에서 함께 사용(invitation page)되어도 문제없는 것을 확인했습니다.
hyehyeonmoon
changed the title
hyehyeonmoon
requested review from
a team and
99-zziy
and removed request for
a team
|
msw로 동작 확인했습니다! 그런데 로그인은 되는것 같은데 콜백 페이지?로 넘어간 후에 액션이 없네요.. 저만 그럴까요? 👀 |
|
어? 저는 로그인 페이지에서 콜백 페이지로 넘어가고 다시 main 페이지로 돌아왔었습니다... |
⛳️ Task
✍️ Note
⚡️ Test
/invitation/1로 들어옴 -> 초대 수락하기 버튼 클릭 ->/auth/signin으로 전환Jun-29-2023.00-34-18.mp4
/invitation/1로 들어옴 -> 초대 수락하기 버튼 클릭 ->/planet/id으로 전환📎 Reference
초대 flow miro