fix: 마이페이지 리뷰 조회시 나오지 않는 현상 (#107)

Co-authored-by: Ji Hyeong Lee <115636461+Jihyeong00@users.noreply.github.com>

src/app/_components/review/review-modal/MyReviewModal.tsx

@@ -9,13 +9,14 @@ import { useEffect } from 'react';
 import NotSearched from '@/app/service/community/_components/NotSearched';
 import ReviewModalSkeleton from './ReviwModalSkeleton';
 import OneReview from './OneReview';
+import ReviewRegisterModal from './ReviewRegisterModal';
 
 /**
  * @description 지도 위에 띄위기 위해서 Modal로 구현을 합니다.
  * @param position 어느 방향에서 모달이 열릴지 결정합니다.
  */
 function MyReviewModal({ openPosition }: ReviewProps) {
-  const { isOpen, reset, state } = useReviewStore(state => state);
+  const { isOpen, reset } = useReviewStore(state => state);
 
   const { data, mutate, size, setSize, isLoading, isValidating } =
     useReviewApi.useGetMyReviews();
@@ -60,14 +61,15 @@ function MyReviewModal({ openPosition }: ReviewProps) {
   }
 
   return (
-    <div className={ModalClassName}>
-      <div className="w-full max-w-[768px] z-[101] px-1 h-[3.5rem] fixed shadow flex items-center justify-center">
-        <button type="button" className={PositionClassName} onClick={reset}>
-          {openPosition === 'center' ? <ChevronDown /> : <ChevronLeft />}
-        </button>
-        내가 작성한 리뷰
-      </div>
-      {state === 'mypage' && (
+    <>
+      <ReviewRegisterModal mutate={mutate} />
+      <div className={ModalClassName}>
+        <div className="w-full max-w-[768px] z-[101] px-1 h-[3.5rem] fixed shadow flex items-center justify-center">
+          <button type="button" className={PositionClassName} onClick={reset}>
+            {openPosition === 'center' ? <ChevronDown /> : <ChevronLeft />}
+          </button>
+          내가 작성한 리뷰
+        </div>
         <div className="relative mt-[3.5rem]">
           {reviews[0].data.data.cursor !== -2 ? (
             reviews
@@ -79,8 +81,8 @@ function MyReviewModal({ openPosition }: ReviewProps) {
           )}
           <div ref={bottomRef} />
         </div>
-      )}
-    </div>
+      </div>
+    </>
   );
 }
 

src/app/_components/review/review-modal/ReviewRegisterModal.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import { Button } from '@/app/_components/ui/button';
@@ -12,7 +12,7 @@ import * as F from '@/app/_components/ui/form';
 import { X } from 'lucide-react';
 import useReviewStore from '@/store/review/reviewStore';
 import { aBeeZee } from '@/styles/fonts';
-import { Rating, Skeleton } from '@mui/material';
+import { Rating } from '@mui/material';
 import { getFormData } from '@/utils/getFormData';
 import reviewApi from '@/apis/review/apis/review';
 import { cn } from '@/lib/utils';
@@ -31,9 +31,8 @@ function ReviewRegisterModal({ gym_name, mutate }: ReviewRegisterProps) {
     fixId: -1,
   };
   const [images, setImages] = useState<File[]>([]);
-  const [registerValue, setRegisterValue] = useState<ReviewRegisterType>(
-    () => initialValue,
-  );
+  const [registerValue, setRegisterValue] =
+    useState<ReviewRegisterType>(initialValue);
 
   const { newContent, newScore, fixId } = registerValue;
 
@@ -68,11 +67,14 @@ function ReviewRegisterModal({ gym_name, mutate }: ReviewRegisterProps) {
     }
   }, [state]);
 
-  const onSubmit = async (d: ReviewSchemaType) => {
-    if (reviewId === null) return;
+  const onChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setRegisterValue(prev => ({ ...prev, newContent: e.target.value }));
+  };
+
+  const onSubmit = async () => {
     let data: SubmitReviewType = {
       score: newScore,
-      content: d.content || '',
+      content: newContent,
     };
 
     switch (state) {
@@ -86,16 +88,22 @@ function ReviewRegisterModal({ gym_name, mutate }: ReviewRegisterProps) {
         break;
       }
       case 'create': {
+        if (!reviewId) return;
+
         data = {
           ...data,
           gym_id: reviewId,
         };
+
         const formData = getFormData({
           jsonData: JSON.stringify(data),
           images,
         });
+
         await reviewApi.postReview(formData);
+
         mutate();
+
         break;
       }
       default:
@@ -104,23 +112,26 @@ function ReviewRegisterModal({ gym_name, mutate }: ReviewRegisterProps) {
     closeMode();
   };
 
-  const RegisterContent = useMemo(() => {
+  const registerContent = useMemo(() => {
     switch (state) {
       case 'create': {
         return {
           header: '리뷰 작성',
+          title: gym_name ?? '',
           submit: '작성 완료',
         };
       }
       case 'fix': {
         return {
-          header: '리뷰 작성',
+          header: '리뷰 수정',
+          title: gym_name ?? '나의 리뷰 수정',
           submit: '작성 완료',
         };
       }
       default: {
         return {
           header: null,
+          title: null,
           submit: null,
         };
       }
@@ -133,16 +144,12 @@ function ReviewRegisterModal({ gym_name, mutate }: ReviewRegisterProps) {
         <button type="button" className="absolute right-3" onClick={closeMode}>
           <X />
         </button>
-        {RegisterContent.header}
+        {registerContent.header}
       </div>
       <div
         className={`mx-4 pt-4 text-[20px] border-b border-primary ${aBeeZee.className}`}
       >
-        {typeof gym_name !== 'undefined' ? (
-          `${gym_name}`
-        ) : (
-          <Skeleton className="w-[140px] h-[54px] bg-gray-200" />
-        )}
+        {registerContent.title}
       </div>
       <F.Form {...form}>
         <form
@@ -179,7 +186,7 @@ function ReviewRegisterModal({ gym_name, mutate }: ReviewRegisterProps) {
                         maxLength={520}
                         placeholder="리뷰 내용"
                         content={newContent}
-                        {...field}
+                        {...{ ...field, value: newContent, onChange }}
                       />
                     </F.FormControl>
                     <F.FormMessage className="text-warning pl-2 text-xs" />
@@ -192,7 +199,7 @@ function ReviewRegisterModal({ gym_name, mutate }: ReviewRegisterProps) {
           <div className="flex flex-col items-end w-full gap-2 pb-4 z-50 bg-white">
             <PhotoBooth images={images} setImages={setImages} />
             <Button type="submit" color="white" className="w-full">
-              {RegisterContent.submit}
+              {registerContent.submit}
             </Button>
           </div>
         </form>