From cc8627f20f5633a9f4bfbd60535e719260f9f7e4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A1=B0=EC=98=88=EC=9D=80?= Date: Wed, 13 Nov 2024 17:53:52 +0900 Subject: [PATCH 01/51] =?UTF-8?q?=E2=9C=A8=20Feat:=20reviewing=20Form?= =?UTF-8?q?=EC=97=90=20post=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/_apis/review/post-review.ts | 22 +++++++++ .../my-page/reviewing-modal/review-form.tsx | 49 ++++++++++++++----- 2 files changed, 60 insertions(+), 11 deletions(-) create mode 100644 src/_apis/review/post-review.ts diff --git a/src/_apis/review/post-review.ts b/src/_apis/review/post-review.ts new file mode 100644 index 00000000..d97a1705 --- /dev/null +++ b/src/_apis/review/post-review.ts @@ -0,0 +1,22 @@ +import { fetchApi } from '@/src/utils/api'; + +export interface PostReviewParams { + gatheringId: number; + point: number; + reviewText: string; +} + +export async function postReview( + gatheringId: number, + point: number, + reviewText: string, +): Promise { + const response = await fetchApi(`/api/review/${gatheringId}`, { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ rate: point, comment: reviewText }), + }); + return response; +} diff --git a/src/components/my-page/reviewing-modal/review-form.tsx b/src/components/my-page/reviewing-modal/review-form.tsx index 441e1162..ce014569 100644 --- a/src/components/my-page/reviewing-modal/review-form.tsx +++ b/src/components/my-page/reviewing-modal/review-form.tsx @@ -1,6 +1,9 @@ import { useState } from 'react'; import { useForm } from 'react-hook-form'; import { Button } from '@mantine/core'; +import { useMutation } from '@tanstack/react-query'; +import { PostReviewParams, postReview } from '@/src/_apis/review/post-review'; +import { ApiError } from '@/src/utils/api'; import Textarea from '@/src/components/common/input/textarea'; import ButtonHearts from './button-hearts'; @@ -9,32 +12,53 @@ type FormValues = { score: number; }; -interface ReviewProps { +interface ReviewFormProps { + gatheringId: number; onCancel: () => void; } -export default function ReviewForm({ onCancel }: ReviewProps) { +export default function ReviewForm({ gatheringId, onCancel }: ReviewFormProps) { const { register, handleSubmit } = useForm(); const [textReview, setTextReview] = useState(''); const [point, setPoint] = useState(0); - // TODO : 주석 부분(api 연결) 수정 - // TODO : form에 넣기: onSubmit={handleSubmit(clickSubmit)} - const handleTextChange = (e: React.ChangeEvent) => { - setTextReview(e.target.value); + if (e.target.value.length <= 300) { + setTextReview(e.target.value); + } }; const handleScoreChange = (newScore: number) => { setPoint(newScore); }; + const mutation = useMutation({ + mutationFn: (params: PostReviewParams) => + postReview(params.gatheringId, params.point, params.reviewText), + + onSuccess: (data: ResponseType) => { + // eslint-disable-next-line no-console + console.log(data); + }, + onError: (error: ApiError) => { + // eslint-disable-next-line no-console + console.error(error); + }, + }); + + const clickSubmit = (data: FormValues) => { + mutation.mutate({ gatheringId, point: data.score, reviewText: data.reviewText }); + }; + return ( -
+