Dep 167 Add flow of invitation

src/api/domain/community.api.ts

@@ -60,7 +60,8 @@ export const usePostCommunityCreate = () => {
   return useMutation({
     mutationFn: (community: CreateCommunityRequest) => postCommunityCreate(community),
     onSuccess: () => {
-      queryClient.invalidateQueries(communityQueryKey.communityList(userId));
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      queryClient.invalidateQueries(communityQueryKey.communityList(userId!));
       //TODO: BE 응답형태 변경 후 반영
       router.replace('/admin/community/create/result');
     },
@@ -76,7 +77,8 @@ export const usePostCommunityUpdate = (communityId: number) => {
   return useMutation({
     mutationFn: (community: CreateCommunityRequest) => postCommunityUpdate(communityId, community),
     onSuccess: () => {
-      queryClient.invalidateQueries(communityQueryKey.communityList(userId));
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      queryClient.invalidateQueries(communityQueryKey.communityList(userId!));
     },
   });
 };

src/api/domain/user.api.ts

@@ -1,17 +1,28 @@
-import { useMutation, UseMutationOptions, useQuery } from '@tanstack/react-query';
+import {
+  useMutation,
+  UseMutationOptions,
+  useQuery,
+  useQueryClient,
+  UseQueryOptions,
+} from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
 import privateApi from '~/api/config/privateApi';
+import { InvitationCodeValidationResponse, PlanetJoinRequest } from '~/types/user';
 import { CharacterCreateRequest } from '~/types/user';
 import { UserInfoResponse } from '~/types/user';
 
+import publicApi from '../config/publicApi';
+
 export const userQueryKey = {
   userInfo: () => ['userInfo'],
+  invitationCodeIsValid: () => ['invitaion', 'code', 'valid'],
 };
 
 export const getUserInfo = () => privateApi.get<UserInfoResponse>(`/user/profile`);
 
-export const useGetUserInfo = () => useQuery(userQueryKey.userInfo(), () => getUserInfo());
+export const useGetUserInfo = (options?: UseQueryOptions<UserInfoResponse>) =>
+  useQuery<UserInfoResponse>(userQueryKey.userInfo(), () => getUserInfo(), options);
 
 export const postCharacterCreate = (characterName: CharacterCreateRequest) =>
   privateApi.post(`/user/character`, { character: characterName });
@@ -23,3 +34,26 @@ export const usePostCharacterCreate = (
     mutationFn: postCharacterCreate,
     ...options,
   });
+
+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);
+};
+
+export const usePostPlanetJoin = (
+  options?: Omit<UseMutationOptions<unknown, AxiosError, PlanetJoinRequest>, 'mutationFn'>,
+) => {
+  const queryClient = useQueryClient();
+
+  return useMutation<unknown, AxiosError, PlanetJoinRequest>({
+    mutationFn: postPlanetJoin,
+    onSuccess: () => queryClient.invalidateQueries(userQueryKey.userInfo()),
+    ...options,
+  });
+};

src/app/invitation/[code]/page.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+import {
+  useGetInvitationCodeIsValid,
+  useGetUserInfo,
+  usePostPlanetJoin,
+} from '~/api/domain/user.api';
+import { Template } from '~/components/Template';
+import { getUserIdClient } from '~/utils/auth/getUserId.client';
+
+const title = '당신을 디프만 행성으로\n 초대합니다';
+
+const InvitationPage = ({ params }: { params: { code: string } }) => {
+  const router = useRouter();
+  const invitationCode = params.code;
+
+  // TODO: 잘못된 행성 코드인 경우, 에러 처리(error.page)
+  const { data: validPlanet, isLoading: isValidPlanetLoading } = useGetInvitationCodeIsValid(
+    params.code,
+  );
+  const planetId = validPlanet?.planetId;
+  const userId = getUserIdClient();
+  const {
+    data: userInfo,
+    isRefetching,
+    isInitialLoading,
+  } = useGetUserInfo({
+    enabled: !!(planetId && userId),
+  });
+  const { mutateAsync } = usePostPlanetJoin();
+
+  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}`);
+    }
+  };
+  if (isValidPlanetLoading) return null;
+
+  return (
+    <Template>
+      <Template.Title className="text-grey-900">
+        <h1>{title}</h1>
+      </Template.Title>
+      <Template.Content />
+      <Template.Button disabled={isInitialLoading || isRefetching} onClick={onClick}>
+        시작하기
+      </Template.Button>
+    </Template>
+  );
+};
+
+export default InvitationPage;

src/components/Template/TemplateButton.tsx

@@ -1,17 +1,22 @@
 import { ReactNode } from 'react';
 
-import { Button } from '~/components/Button/Button';
+import { Button, ButtonProps } from '~/components/Button/Button';
 import { tw } from '~/utils/tailwind.util';
 
-type TemplateButtonProps = {
+type TemplateButtonProps = Partial<Omit<ButtonProps, 'children'>> & {
   children: ReactNode | string;
   className?: string;
-  onClick?: () => void;
 };
 
-export const TemplateButton = ({ children, className, onClick }: TemplateButtonProps) => {
+export const TemplateButton = ({ children, className, onClick, ...rest }: TemplateButtonProps) => {
   return (
-    <Button size="large" color="primary" className={tw('mb-15pxr', className)} onClick={onClick}>
+    <Button
+      {...rest}
+      size="large"
+      color="primary"
+      className={tw('mb-15pxr', className)}
+      onClick={onClick}
+    >
       {children}
     </Button>
   );

src/components/Template/TemplateContent.tsx

@@ -3,7 +3,7 @@ import { ReactNode } from 'react';
 import { tw } from '~/utils/tailwind.util';
 
 type TemplateContentProps = {
-  children: ReactNode;
+  children?: ReactNode;
   className?: string;
 };
 

src/mocks/user/user.mock.ts

@@ -9,4 +9,6 @@ export const createUserInfo = (): UserInfoModel => ({
   gender: faker.person.gender(),
   ageRange: '',
   profileImageUrl: faker.image.avatar(),
+  isCharacterCreated: true,
+  planetIds: [1],
 });

src/mocks/user/user.mockHandler.ts

@@ -10,4 +10,10 @@ export const userMockHandler = [
   rest.post(`${ROOT_API_URL}/user/character`, (req, res, ctx) => {
     return res(ctx.status(200), ctx.json({}));
   }),
+  rest.get(`${ROOT_API_URL}/invitation/:code`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json({ planetId: 1 }));
+  }),
+  rest.post(`${ROOT_API_URL}/join/planet`, (req, res, ctx) => {
+    return res(ctx.status(200), ctx.json({}));
+  }),
 ];

src/types/user/model.type.ts

@@ -7,6 +7,17 @@ export type UserInfoModel = {
   gender: string;
   ageRange: string;
   profileImageUrl: string;
+  isCharacterCreated: boolean;
+  planetIds: number[];
 };
 
 export type CharacterCreateModel = CharacterNameModel;
+
+export type InvitationCodeValidationModel = {
+  planetId: number;
+};
+
+export type PlanetJoinModel = {
+  userId: number;
+  planetId: number;
+};

src/types/user/request.type.ts

@@ -1,7 +1,9 @@
 // user.d.ts 정리 후 절대경로 적용
-import { CharacterCreateModel } from './model.type';
+import { CharacterCreateModel, PlanetJoinModel } from './model.type';
 import { UserInfoResponse } from './response.type';
 
 export type UserInfoRequest = Omit<UserInfoResponse, 'userId'>;
 
 export type CharacterCreateRequest = CharacterCreateModel;
+
+export type PlanetJoinRequest = PlanetJoinModel;

src/types/user/response.type.ts

@@ -1,3 +1,5 @@
-import { UserInfoModel } from './model.type';
+import { InvitationCodeValidationModel, UserInfoModel } from './model.type';
 
 export type UserInfoResponse = UserInfoModel;
+
+export type InvitationCodeValidationResponse = InvitationCodeValidationModel;

src/utils/auth/getUserId.client.ts

@@ -1,13 +1,13 @@
 import { UserIdNotFoundError } from './error';
 import { getAuthTokensByCookie } from './tokenHandlers';
 
-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;
   }
 };