feat: PUT /shared/posts/studio/{postId} API (kookmin-sw#75)

cjeongmin · cjeongmin · commit 789f46f6fe10 · 2024-05-13T00:18:54.000+09:00
diff --git a/src/app/pages/writing-post-page.tsx b/src/app/pages/writing-post-page.tsx
@@ -26,6 +26,7 @@ import {
   useCreateSharedPost,
   usePostMateCardInputSection,
   useSharedPostProps,
+  useUpdateSharedPost,
   type ImageFile,
 } from '@/features/shared';
 import { useToast } from '@/features/toast';
@@ -421,7 +422,7 @@ export function WritingPostPage() {
     useState<boolean>(false);
 
   const {
-    mode,
+    postId,
     title,
     content,
     images,
@@ -453,7 +454,9 @@ export function WritingPostPage() {
     handleOptionalFeatureChange,
   } = usePostMateCardInputSection();
 
-  const { mutate } = useCreateSharedPost();
+  const { mutate: createSharedPost } = useCreateSharedPost();
+  const { mutate: updateSharedPost } = useUpdateSharedPost();
+
   const { createToast } = useToast();
 
   const auth = useAuthValue();
@@ -586,7 +589,7 @@ export function WritingPostPage() {
 
         const putResults = await Promise.allSettled(
           urls.map(async ({ url, fileName, file, uploaded }) => {
-            if (uploaded) return { fileName };
+            if (uploaded) return { fileName: url };
 
             if (file != null) await putImage(url, file);
             return { fileName };
@@ -605,70 +608,128 @@ export function WritingPostPage() {
           });
         }, []);
 
-        console.log(selectedExtraOptions, {
-          canPark: selectedExtraOptions.canPark ?? false,
-          hasAirConditioner: selectedExtraOptions.hasAirConditioner ?? false,
-          hasRefrigerator: selectedExtraOptions.hasRefrigerator ?? false,
-          hasWasher: selectedExtraOptions.hasWasher ?? false,
-          hasTerrace: selectedExtraOptions.hasTerrace ?? false,
-        });
+        console.log(uploadedImages);
 
-        mutate(
-          {
-            imageFilesData: uploadedImages,
-            postData: { title, content },
-            transactionData: {
-              rentalType: dealTypeValue,
-              expectedPayment: expectedMonthlyFee,
-            },
-            roomDetailData: {
-              roomType: roomTypeValue,
-              floorType: floorTypeValue,
-              size: houseSize,
-              numberOfRoom,
-              numberOfBathRoom,
-              hasLivingRoom: selectedOptions.livingRoom === '유',
-              recruitmentCapacity: mateLimit,
-              extraOption: {
-                canPark: selectedExtraOptions.canPark ?? false,
-                hasAirConditioner:
-                  selectedExtraOptions.hasAirConditioner ?? false,
-                hasRefrigerator: selectedExtraOptions.hasRefrigerator ?? false,
-                hasWasher: selectedExtraOptions.hasWasher ?? false,
-                hasTerrace: selectedExtraOptions.hasTerrace ?? false,
+        if (postId == null) {
+          createSharedPost(
+            {
+              imageFilesData: uploadedImages,
+              postData: { title, content },
+              transactionData: {
+                rentalType: dealTypeValue,
+                expectedPayment: expectedMonthlyFee,
               },
+              roomDetailData: {
+                roomType: roomTypeValue,
+                floorType: floorTypeValue,
+                size: houseSize,
+                numberOfRoom,
+                numberOfBathRoom,
+                hasLivingRoom: selectedOptions.livingRoom === '유',
+                recruitmentCapacity: mateLimit,
+                extraOption: {
+                  canPark: selectedExtraOptions.canPark ?? false,
+                  hasAirConditioner:
+                    selectedExtraOptions.hasAirConditioner ?? false,
+                  hasRefrigerator:
+                    selectedExtraOptions.hasRefrigerator ?? false,
+                  hasWasher: selectedExtraOptions.hasWasher ?? false,
+                  hasTerrace: selectedExtraOptions.hasTerrace ?? false,
+                },
+              },
+              locationData: {
+                oldAddress: address?.jibunAddress,
+                roadAddress: address?.roadAddress,
+              },
+              roomMateCardData: {
+                location: address?.roadAddress,
+                features: derivedFeatures,
+              },
+              participationMemberIds:
+                auth?.user != null ? [auth.user.memberId] : [],
             },
-            locationData: {
-              oldAddress: address?.jibunAddress,
-              roadAddress: address?.roadAddress,
-            },
-            roomMateCardData: {
-              location: address?.roadAddress,
-              features: derivedFeatures,
+            {
+              onSuccess: () => {
+                createToast({
+                  message: '게시글이 정상적으로 업로드되었습니다.',
+                  option: {
+                    duration: 3000,
+                  },
+                });
+                router.back();
+              },
+              onError: () => {
+                createToast({
+                  message: '게시글 업로드에 실패했습니다.',
+                  option: {
+                    duration: 3000,
+                  },
+                });
+              },
             },
-            participationMemberIds:
-              auth?.user != null ? [auth.user.memberId] : [],
-          },
-          {
-            onSuccess: () => {
-              createToast({
-                message: '게시글이 정상적으로 업로드되었습니다.',
-                option: {
-                  duration: 3000,
+          );
+        } else if (postId != null) {
+          updateSharedPost(
+            {
+              postId,
+              postData: {
+                imageFilesData: uploadedImages,
+                postData: { title, content },
+                transactionData: {
+                  rentalType: dealTypeValue,
+                  expectedPayment: expectedMonthlyFee,
                 },
-              });
-              router.back();
-            },
-            onError: () => {
-              createToast({
-                message: '게시글 업로드에 실패했습니다.',
-                option: {
-                  duration: 3000,
+                roomDetailData: {
+                  roomType: roomTypeValue,
+                  floorType: floorTypeValue,
+                  size: houseSize,
+                  numberOfRoom,
+                  numberOfBathRoom,
+                  hasLivingRoom: selectedOptions.livingRoom === '유',
+                  recruitmentCapacity: mateLimit,
+                  extraOption: {
+                    canPark: selectedExtraOptions.canPark ?? false,
+                    hasAirConditioner:
+                      selectedExtraOptions.hasAirConditioner ?? false,
+                    hasRefrigerator:
+                      selectedExtraOptions.hasRefrigerator ?? false,
+                    hasWasher: selectedExtraOptions.hasWasher ?? false,
+                    hasTerrace: selectedExtraOptions.hasTerrace ?? false,
+                  },
+                },
+                locationData: {
+                  oldAddress: address?.jibunAddress,
+                  roadAddress: address?.roadAddress,
                 },
-              });
+                roomMateCardData: {
+                  location: address?.roadAddress,
+                  features: derivedFeatures,
+                },
+                participationMemberIds:
+                  auth?.user != null ? [auth.user.memberId] : [],
+              },
             },
-          },
-        );
+            {
+              onSuccess: () => {
+                createToast({
+                  message: '게시글이 정상적으로 수정되었습니다.',
+                  option: {
+                    duration: 3000,
+                  },
+                });
+                router.back();
+              },
+              onError: () => {
+                createToast({
+                  message: '게시글 수정에 실패했습니다.',
+                  option: {
+                    duration: 3000,
+                  },
+                });
+              },
+            },
+          );
+        }
       } catch (error) {
         createToast({
           message: '게시글 업로드에 실패했습니다.',
@@ -696,7 +757,7 @@ export function WritingPostPage() {
           <styles.row>
             <styles.optionCategory>기본 정보</styles.optionCategory>
             <styles.createButton onClick={handleCreatePost}>
-              {mode === 'create' ? '작성하기' : '수정하기'}
+              {postId == null ? '작성하기' : '수정하기'}
             </styles.createButton>
           </styles.row>
           <styles.optionCategory>제목</styles.optionCategory>
diff --git a/src/features/shared/shared.api.ts b/src/features/shared/shared.api.ts
@@ -6,10 +6,7 @@ import {
   type GetSharedPostDTO,
   type GetSharedPostsDTO,
 } from './shared.dto';
-import {
-  type CreateSharedPostProps,
-  type GetSharedPostsProps,
-} from './shared.type';
+import { type SharedPostProps, type GetSharedPostsProps } from './shared.type';
 
 import { type SuccessBaseDTO } from '@/shared/types';
 
@@ -38,9 +35,21 @@ export const getSharedPosts = async ({
   return await axios.get<GetSharedPostsDTO>(getURI());
 };
 
-export const createSharedPost = async (postData: CreateSharedPostProps) =>
+export const createSharedPost = async (postData: SharedPostProps) =>
   await axios.post<SuccessBaseDTO>(`/maru-api/shared/posts/studio`, postData);
 
+export const updateSharedPost = async ({
+  postId,
+  postData,
+}: {
+  postId: number;
+  postData: SharedPostProps;
+}) =>
+  await axios.put<SuccessBaseDTO>(
+    `/maru-api/shared/posts/studio/${postId}`,
+    postData,
+  );
+
 export const getSharedPost = async (postId: number) =>
   await axios.get<GetSharedPostDTO>(`/maru-api/shared/posts/studio/${postId}`);
 
diff --git a/src/features/shared/shared.atom.ts b/src/features/shared/shared.atom.ts
@@ -9,7 +9,7 @@ import {
 import { type NaverAddress } from '@/features/geocoding';
 
 export const sharedPostPropState = atom<{
-  mode: 'create' | 'modify';
+  postId?: number;
   title: string;
   content: string;
   images: ImageFile[];
@@ -22,7 +22,7 @@ export const sharedPostPropState = atom<{
 }>({
   key: 'sharedPostPropState',
   default: {
-    mode: 'create',
+    postId: undefined,
     title: '',
     content: '',
     images: [],
diff --git a/src/features/shared/shared.hook.ts b/src/features/shared/shared.hook.ts
@@ -13,14 +13,15 @@ import {
   getSharedPosts,
   scrapDormitoryPost,
   scrapPost,
+  updateSharedPost,
 } from './shared.api';
 import { sharedPostPropState } from './shared.atom';
 import { type GetSharedPostDTO } from './shared.dto';
 import {
-  type SelectedExtraOptions,
-  type CreateSharedPostProps,
   type GetSharedPostsProps,
+  type SelectedExtraOptions,
   type SelectedOptions,
+  type SharedPostProps,
 } from './shared.type';
 import { fromAddrToCoord } from '../geocoding';
 
@@ -118,7 +119,7 @@ export const useSharedPostProps = () => {
     else if (data.roomInfo.numberOfBathRoom === 3) restRoomCount = '3개';
 
     setState({
-      mode: 'modify',
+      postId: data.id,
       title: data.title,
       content: data.content,
       images: data.roomImages.map(({ fileName }) => ({
@@ -300,11 +301,18 @@ export const usePostMateCardInputSection = () => {
 };
 
 export const useCreateSharedPost = () =>
-  useMutation<AxiosResponse<SuccessBaseDTO>, FailureDTO, CreateSharedPostProps>(
-    {
-      mutationFn: createSharedPost,
-    },
-  );
+  useMutation<AxiosResponse<SuccessBaseDTO>, FailureDTO, SharedPostProps>({
+    mutationFn: createSharedPost,
+  });
+
+export const useUpdateSharedPost = () =>
+  useMutation<
+    AxiosResponse<SuccessBaseDTO>,
+    FailureDTO,
+    { postId: number; postData: SharedPostProps }
+  >({
+    mutationFn: updateSharedPost,
+  });
 
 export const useSharedPosts = ({
   filter,
diff --git a/src/features/shared/shared.type.ts b/src/features/shared/shared.type.ts
@@ -44,7 +44,7 @@ export interface ImageFile {
   extension?: string;
 }
 
-export interface CreateSharedPostProps {
+export interface SharedPostProps {
   imageFilesData: Array<{
     fileName: string;
     isThumbNail: boolean;

Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ export interface ImageFile {`
`44`	`44`	`extension?: string;`
`45`	`45`	`}`
`46`	`46`
`47`		`-export interface CreateSharedPostProps {`
	`47`	`+export interface SharedPostProps {`
`48`	`48`	`imageFilesData: Array<{`
`49`	`49`	`fileName: string;`
`50`	`50`	`isThumbNail: boolean;`