From f83d9eed063aa8801e2fe63d2876e195217b96fc Mon Sep 17 00:00:00 2001 From: Seojisoo20191941 Date: Sun, 19 Nov 2023 19:55:38 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EC=97=85=EB=A1=9C?= =?UTF-8?q?=EB=93=9C=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/endpoint/feed/uploadFeed.ts | 131 ++++-------------- src/components/feed/page/FeedUploadPage.tsx | 22 ++- .../feed/upload/ImageUploadButton/index.tsx | 2 +- .../feed/upload/hooks/useUploadFeedData.ts | 10 +- src/components/feed/upload/types.ts | 2 +- 5 files changed, 46 insertions(+), 121 deletions(-) diff --git a/src/api/endpoint/feed/uploadFeed.ts b/src/api/endpoint/feed/uploadFeed.ts index c06033539..db7aeedb4 100644 --- a/src/api/endpoint/feed/uploadFeed.ts +++ b/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'); + }, + }); +}; diff --git a/src/components/feed/page/FeedUploadPage.tsx b/src/components/feed/page/FeedUploadPage.tsx index 8df8a2d6a..adf310fe8 100644 --- a/src/components/feed/page/FeedUploadPage.tsx +++ b/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) => { 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 ; + return (
diff --git a/src/components/feed/upload/ImageUploadButton/index.tsx b/src/components/feed/upload/ImageUploadButton/index.tsx index 64c402819..0e1aad772 100644 --- a/src/components/feed/upload/ImageUploadButton/index.tsx +++ b/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 ( -