feat: 피드 업로드 api 연결

src/api/endpoint/feed/uploadFeed.ts

@@ -1,117 +1,34 @@
+import { useMutation } from '@tanstack/react-query';
+import { useRouter } from 'next/router';
 import { z } from 'zod';
 
 import { createEndpoint } from '@/api/typedAxios';
 
-const feedUploadResponseScheme = z.object({
-  id: z.number(),
-  member: z.object({
-    id: z.number(),
-    authUserId: z.string(),
-    idpType: z.string(),
-    name: z.string(),
-    email: z.string(),
-    generation: z.number(),
-    profileImage: z.string(),
-    birthday: z.string(),
-    phone: z.string(),
-    address: z.string(),
-    university: z.string(),
-    major: z.string(),
-    introduction: z.string(),
-    activities: z.array(
-      z.object({
-        id: z.number(),
-        memberId: z.number(),
-        part: z.string(),
-        generation: z.number(),
-        team: z.string(),
-      }),
-    ),
-    mbti: z.string(),
-    mbtiDescription: z.string(),
-    sojuCapacity: z.number(),
-    interest: z.string(),
-    userFavor: z.object({
-      isPourSauceLover: z.boolean(),
-      isHardPeachLover: z.boolean(),
-      isMintChocoLover: z.boolean(),
-      isRedBeanFishBreadLover: z.boolean(),
-      isSojuLover: z.boolean(),
-      isRiceTteokLover: z.boolean(),
-    }),
-    idealType: z.string(),
-    selfIntroduction: z.string(),
-    links: z.array(
-      z.object({
-        id: z.number(),
-        memberId: z.number(),
-        title: z.string(),
-        url: z.string(),
-      }),
-    ),
-    careers: z.array(
-      z.object({
-        id: z.number(),
-        memberId: z.number(),
-        companyName: z.string(),
-        title: z.string(),
-        startDate: z.string(),
-        endDate: z.string(),
-        isCurrent: z.boolean(),
-      }),
-    ),
-    skill: z.string(),
-    openToWork: z.boolean(),
-    openToSideProject: z.boolean(),
-    allowOfficial: z.boolean(),
-    hasProfile: z.boolean(),
-    editActivitiesAble: z.boolean(),
-    openToSoulmate: z.boolean(),
-  }),
-  categoryId: z.number(),
-  title: z.string(),
-  content: z.string(),
-  hits: z.number(),
-  images: z.array(z.string()),
-  isQuestion: z.boolean(),
-  isBlindWriter: z.boolean(),
-  isReported: z.boolean(),
-  createdAt: z.string(),
-  updatedAt: z.string(),
-  comments: z.array(
-    z.object({
-      createdAt: z.string(),
-      updatedAt: z.string(),
-      id: z.number(),
-      content: z.string(),
-      postId: z.number(),
-      writerId: z.number(),
-      parentCommentId: z.number(),
-      isBlindWriter: z.boolean(),
-      isReported: z.boolean(),
-    }),
-  ),
-});
+interface RequestBody {
+  categoryId: number;
+  title: string | null;
+  content: string;
+  isQuestion: boolean;
+  isBlindWriter: boolean;
+  images: string[];
+}
 
 export const uploadFeed = createEndpoint({
-  request: (
-    categoryId: number,
-    title: string,
-    content: string,
-    isQuestion: boolean,
-    isBlindWriter: boolean,
-    images: string[],
-  ) => ({
+  request: (reqeustBody: RequestBody) => ({
     method: 'POST',
     url: 'api/v1/community/posts',
-    data: {
-      categoryId: categoryId,
-      title: title,
-      content: content,
-      isQuestion: isQuestion,
-      isBlindWriter: isBlindWriter,
-      images: images,
-    },
+    data: reqeustBody,
   }),
-  serverResponseScheme: feedUploadResponseScheme,
+  serverResponseScheme: z.unknown(),
 });
+
+export const useSaveUploadFeedData = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: (reqeustBody: RequestBody) => uploadFeed.request(reqeustBody),
+    onSuccess: () => {
+      router.push('/community');
+    },
+  });
+};

src/components/feed/page/FeedUploadPage.tsx

@@ -3,6 +3,8 @@ import styled from '@emotion/styled';
 import { colors } from '@sopt-makers/colors';
 import { FormEvent } from 'react';
 
+import { useSaveUploadFeedData } from '@/api/endpoint/feed/uploadFeed';
+import Loading from '@/components/common/Loading';
 import Responsive from '@/components/common/Responsive';
 import Category from '@/components/feed/upload/Category';
 import { useCategorySelect } from '@/components/feed/upload/hooks/useCategorySelect';
@@ -20,7 +22,7 @@ import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
 export default function FeedUploadPage() {
-  const [
+  const {
     feedData,
     handleSaveCategory,
     handleSaveIsQuestion,
@@ -30,10 +32,12 @@ export default function FeedUploadPage() {
     removeImage,
     handleSaveTitle,
     handleSaveContent,
-    handleUploadFeed,
     resetFeedData,
     checkReadyToUpload,
-  ] = useUploadFeedData({
+    checkReadyToShowUsingRules,
+    parentCategory,
+    isInitial,
+  } = useUploadFeedData({
     mainCategoryId: 0,
     categoryId: 0,
     title: '',
@@ -48,16 +52,26 @@ export default function FeedUploadPage() {
   const { imageInputRef: mobileRef, handleClickImageInput: handleMobileClickImageInput } =
     useImageUploader(saveImageUrls);
   const { isDropDown, closeAll, openCategory, openTag, openUsingRules } = useCategorySelect('openCategory');
+  const { mutate: handleUploadFeed, isPending } = useSaveUploadFeedData();
 
   const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    handleUploadFeed();
+    handleUploadFeed({
+      categoryId: feedData.categoryId,
+      title: feedData.title,
+      content: feedData.content,
+      isQuestion: feedData.isQuestion,
+      isBlindWriter: feedData.isBlindWriter,
+      images: feedData.images,
+    });
   };
 
   const checkIsOpenCategorys = () => {
     return isDropDown === 'openUsingRules' || isDropDown === 'closeAll';
   };
 
+  if (isPending) return <Loading />;
+
   return (
     <form onSubmit={handleSubmit}>
       <Responsive only='desktop'>

src/components/feed/upload/ImageUploadButton/index.tsx

@@ -14,7 +14,7 @@ const MAX_IMAGE_LENGTH = 10;
 
 export default function ImageUploadButton({ imageLength, onClick, imageInputRef }: ImageUploadButtonProps) {
   return (
-    <Button onClick={onClick}>
+    <Button type='button' onClick={onClick}>
       {imageSvg}
       사진
       {imageLength > 0 && (

src/components/feed/upload/hooks/useUploadFeedData.ts

@@ -39,11 +39,6 @@ export default function useUploadFeedData(initialForm: UploadFeedDataType) {
     setFeedData((feedData) => ({ ...feedData, images: removeImages }));
   };
 
-  const handleUploadFeed = () => {
-    // TODO: post api 연결
-    console.log(feedData);
-  };
-
   const checkReadyToShowUsingRules = () => {
     return feedData.categoryId !== 0;
   };
@@ -68,7 +63,7 @@ export default function useUploadFeedData(initialForm: UploadFeedDataType) {
         category.id === feedData.mainCategoryId && category.children.some((tag) => tag.id === feedData.categoryId),
     ) ?? null;
 
-  return [
+  return {
     feedData,
     handleSaveCategory,
     handleSaveIsQuestion,
@@ -78,11 +73,10 @@ export default function useUploadFeedData(initialForm: UploadFeedDataType) {
     removeImage,
     handleSaveTitle,
     handleSaveContent,
-    handleUploadFeed,
     resetFeedData,
     checkReadyToUpload,
     checkReadyToShowUsingRules,
     parentCategory,
     isInitial,
-  ] as const;
+  };
 }

src/components/feed/upload/types.ts

@@ -1,7 +1,7 @@
 export interface UploadFeedDataType {
   mainCategoryId: number;
   categoryId: number;
-  title: string;
+  title: string | null;
   content: string;
   isQuestion: boolean;
   isBlindWriter: boolean;