feat(web-domains): 유저 정보 수정

apps/web/app/[meetingId]/user/modify/page.tsx

@@ -0,0 +1,3 @@
+import { ModifyUserInfoScreen } from '@/user';
+
+export default ModifyUserInfoScreen;

packages/web-domains/src/user/common/api/mutations/useModifyUserInfo.ts

@@ -0,0 +1,46 @@
+import { UseMutationOptions, useMutation } from '@tanstack/react-query';
+import { AxiosError } from 'axios';
+
+import { Http } from '@/common/apis/base.api';
+import { MbtiType } from '@/user/common/constants/mbti';
+
+import { MeetingMemberResponse } from '../schema/MeetingMemberResponse';
+
+export type Params = {
+  meetingId: number;
+  name: string;
+  gender: 'FEMALE' | 'MALE';
+  birth: string;
+  job: string;
+  location: string;
+  hobbyIds: number[];
+  mbti?: MbtiType;
+  introduction?: string;
+  // Todo: 삭제
+  role: string;
+};
+
+interface ErrorModifyUserInfoResponse {
+  code: string;
+  message: string;
+}
+
+interface Args {
+  options?: UseMutationOptions<MeetingMemberResponse | undefined, AxiosError<ErrorModifyUserInfoResponse>, Params>;
+}
+
+export const useModifyUserInfo = ({ options }: Args) => {
+  return useMutation({
+    mutationFn: async (params: Params) => {
+      return await modifyUserInfo(params);
+    },
+    ...options,
+  });
+};
+
+async function modifyUserInfo(params: Params): Promise<MeetingMemberResponse> {
+  const { meetingId, ...restParams } = params;
+  console.log(restParams);
+  const data = await Http.PATCH<Params, MeetingMemberResponse>(`/v1/meetings/${meetingId}/members/me`, restParams);
+  return data;
+}

packages/web-domains/src/user/common/api/schema/MeetingMemberResponse.ts

@@ -0,0 +1,4 @@
+export interface MeetingMemberResponse {
+  meetingId: number;
+  meetingMemberId: number;
+}

packages/web-domains/src/user/features/get-user-info/containers/GetUserBasicInfoContainer.tsx

@@ -1,16 +1,9 @@
 import { FormTitle, BasicInfoForm } from '../components/Form';
-import { useGetRoleName } from '../hooks/useGetRoleName';
 
 export const GetUserBasicInfoContainer = () => {
-  const role = useGetRoleName();
   return (
     <>
-      <FormTitle
-        title={`어떤 ${role.name}인지`}
-        subTitle="간단하게 소개해주세요!"
-        isRequired
-        style={{ paddingTop: '28px' }}
-      />
+      <FormTitle title="본인에 대해서" subTitle="간단하게 소개해주세요!" isRequired style={{ paddingTop: '28px' }} />
       <BasicInfoForm />
     </>
   );

packages/web-domains/src/user/features/get-user-info/containers/GetUserExtraInfoContainer.tsx

@@ -1,17 +1,9 @@
 import { FormTitle, ExtraInfoForm } from '../components/Form';
-import { useGetRoleName } from '../hooks/useGetRoleName';
 
 export const GetUserExtraInfoContainer = () => {
-  const role = useGetRoleName();
-
   return (
     <>
-      <FormTitle
-        title={`어떤 ${role.name}인지`}
-        subTitle="간단하게 소개해주세요!"
-        isRequired
-        style={{ paddingTop: '28px' }}
-      />
+      <FormTitle title="본인에 대해서" subTitle="간단하게 소개해주세요!" isRequired style={{ paddingTop: '28px' }} />
       <ExtraInfoForm />
     </>
   );

packages/web-domains/src/user/features/modify-user-info/components/ModifyIntroForm.tsx

@@ -0,0 +1,41 @@
+import { Txt, Button } from '@sds/components';
+import { colors } from '@sds/theme';
+import { useForm } from 'react-hook-form';
+
+import { buttonWrapperCss } from '../../get-user-info/components/Form/styles';
+import { TextArea } from '../../get-user-info/components/TextInput/TextArea';
+import { useModifyUserInfoService } from '../services/useModifyUserInfoService';
+
+export interface IntroFormType {
+  introduction: string;
+}
+
+const MAX_LENGTH = 3000;
+
+export const ModifyIntroForm = () => {
+  const {
+    register,
+    formState: { isValid },
+    handleSubmit,
+  } = useForm<IntroFormType>({ defaultValues: { introduction: '' } });
+
+  const { handleModifyUserInfo } = useModifyUserInfoService();
+
+  return (
+    <form onSubmit={handleSubmit(handleModifyUserInfo)} css={{ padding: '0 20px', marginTop: '48px' }}>
+      <TextArea
+        placeholder="저는 이런 사람이에요."
+        maxLength={MAX_LENGTH}
+        {...register('introduction', { maxLength: MAX_LENGTH })}
+      />
+      <Txt as="p" typography="body4" color={colors.grey600}>
+        최대 {MAX_LENGTH}자까지 입력해주세요
+      </Txt>
+      <div css={buttonWrapperCss}>
+        <Button type="submit" size="large" disabled={!isValid}>
+          완료
+        </Button>
+      </div>
+    </form>
+  );
+};

packages/web-domains/src/user/features/modify-user-info/containers/ModifyUserInfoContainer.tsx

@@ -0,0 +1,36 @@
+'use client';
+
+import { notFound, redirect, useSearchParams } from 'next/navigation';
+
+import { STEPS } from '@/user/common/constants/step';
+
+import { GetUserBasicInfoContainer } from '../../get-user-info/containers/GetUserBasicInfoContainer';
+import { GetUserExtraInfoContainer } from '../../get-user-info/containers/GetUserExtraInfoContainer';
+import { GetUserHobbiesContainer } from '../../get-user-info/containers/GetUserHobbiesContainer';
+import { GetUserMbtiContainer } from '../../get-user-info/containers/GetUserMbtiContainer';
+
+import { ModifyUserIntroContainer } from './ModifyUserIntroContainer';
+
+export const ModifyUserInfoContainer = () => {
+  const searchParams = useSearchParams();
+  const step = searchParams.get('step');
+
+  if (!step) {
+    redirect(`?step=${STEPS.BASIC_INFO}`);
+  }
+
+  switch (step) {
+    case STEPS.BASIC_INFO:
+      return <GetUserBasicInfoContainer />;
+    case STEPS.EXTRA_INFO:
+      return <GetUserExtraInfoContainer />;
+    case STEPS.HOBBIES_INFO:
+      return <GetUserHobbiesContainer />;
+    case STEPS.MBTI_IFNO:
+      return <GetUserMbtiContainer />;
+    case STEPS.INTRO_INFO:
+      return <ModifyUserIntroContainer />;
+    default:
+      notFound();
+  }
+};

packages/web-domains/src/user/features/modify-user-info/containers/ModifyUserIntroContainer.tsx

@@ -0,0 +1,11 @@
+import { FormTitle } from '../../get-user-info/components/Form';
+import { ModifyIntroForm } from '../components/ModifyIntroForm';
+
+export const ModifyUserIntroContainer = () => {
+  return (
+    <>
+      <FormTitle title="자유롭게 하고싶은 말을" subTitle="작성해주세요" style={{ paddingTop: '28px' }} />
+      <ModifyIntroForm />
+    </>
+  );
+};

packages/web-domains/src/user/features/modify-user-info/services/useModifyUserInfoService.ts

@@ -0,0 +1,51 @@
+import { useQueryClient } from '@tanstack/react-query';
+import { useParams, useRouter } from 'next/navigation';
+
+import { MEMBER_ME_QUERY_KEY } from '@/about-me/common/apis/queries/useGetMemberMe';
+import { Params as ModifyUserInfoParams, useModifyUserInfo } from '@/user/common/api/mutations/useModifyUserInfo';
+import { useQueryString } from '@/user/common/hooks/useQueryString';
+import { dateFormat } from '@/user/common/utils/format';
+
+export const useModifyUserInfoService = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const { meetingId } = useParams();
+  const { getQueryStringObj } = useQueryString();
+  const queryStringObj = getQueryStringObj();
+
+  const { mutate: modifyUserInfo } = useModifyUserInfo({
+    options: {
+      onSuccess: (_, varables) => {
+        queryClient.invalidateQueries({ queryKey: [MEMBER_ME_QUERY_KEY, varables.meetingId] });
+        router.push('/home/me');
+      },
+      onError: (error) => {
+        console.log(error);
+      },
+    },
+  });
+
+  const handleModifyUserInfo = async ({ introduction }: { introduction?: string }) => {
+    if (!meetingId) {
+      return;
+    }
+
+    const params = {
+      ...queryStringObj,
+      meetingId: Number(meetingId),
+      name: queryStringObj.userName,
+      hobbyIds: queryStringObj.hobbyIds ? queryStringObj.hobbyIds.split(',').map(Number) : [],
+      birth: dateFormat(queryStringObj.birth),
+      // Todo: 삭제
+      role: 'OWNER',
+    } as ModifyUserInfoParams;
+
+    if (introduction) {
+      params.introduction = introduction.trim();
+    }
+
+    modifyUserInfo(params);
+  };
+
+  return { handleModifyUserInfo };
+};

packages/web-domains/src/user/index.ts

@@ -3,3 +3,4 @@ export { GetUserInfoScreen } from './screens/GetUserInfoScreen';
 export { SelectUserRoleScreen } from './screens/SelectUserRoleScreen';
 export { MemberClosingScreen } from './screens/MemberClosingScreen';
 export { GetOwnerInfoStartScreen } from './screens/GetOwnerInfoStartScreen';
+export { ModifyUserInfoScreen } from './screens/ModifyUserInfoScreen';

packages/web-domains/src/user/screens/ModifyUserInfoScreen.tsx

@@ -0,0 +1,25 @@
+import { HydrationBoundary, QueryClient, dehydrate } from '@tanstack/react-query';
+import { Suspense } from 'react';
+
+import { ModifyUserInfoContainer } from '../features/modify-user-info/containers/ModifyUserInfoContainer';
+// import { getHobbyListPrefetch } from '@/common/apis/queries/useGetHobbyList';
+
+export const ModifyUserInfoScreen = async () => {
+  const { queryClient } = await getServerSideProps();
+
+  return (
+    <HydrationBoundary state={dehydrate(queryClient)}>
+      <Suspense>
+        <ModifyUserInfoContainer />
+      </Suspense>
+    </HydrationBoundary>
+  );
+};
+
+const getServerSideProps = async () => {
+  const queryClient = new QueryClient();
+
+  // await getHobbyListPrefetch(queryClient);
+
+  return { queryClient };
+};