Merge pull request #190 from CodeitFESI4-Team1/Hotfix/Reload

Hotfix/reload

Author: HaeJungg

src/app/(crew)/crew/detail/[id]/_components/gathering-list-section.tsx

@@ -22,7 +22,6 @@ export default function GatheringListSection({ id }: GatheringListSectionProps)
   const handleLike = async (gatheringId: number) => {
     try {
       await addLike(gatheringId);
-      toast.success('찜하기가 완료되었습니다!');
     } catch (apiError) {
       if (apiError instanceof ApiError && apiError.status === 401) {
         toast.error('로그인이 필요합니다.');
@@ -35,7 +34,6 @@ export default function GatheringListSection({ id }: GatheringListSectionProps)
   const handleUnlike = async (gatheringId: number) => {
     try {
       await removeLike(gatheringId);
-      toast.success('찜하기 해제가 완료되었습니다!');
     } catch (apiError) {
       if (apiError instanceof ApiError && apiError.status === 401) {
         toast.error('로그인이 필요합니다.');

src/app/(crew)/my-page/_components/reviewable-gatherings/reviewable-gathering-card-list.tsx

@@ -6,7 +6,7 @@ import MyReviewSkeletonList from '@/src/components/common/skeleton/my-review-ske
 import ReviewableGatheringCard from './reviewable-gathering-card';
 
 export default function ReviewableGatheringCardList() {
-  const { data, ref, isFetchingNextPage, isLoading } = useInfiniteScroll(
+  const { data, ref, isFetchingNextPage, isLoading, refetch } = useInfiniteScroll(
     useGetReviewableQuery({
       pageable: { page: 0, size: 6, sort: ['dateTime,desc'] },
     }),
@@ -50,6 +50,7 @@ export default function ReviewableGatheringCardList() {
                   totalCount={item.totalCount}
                   imageUrl={item.imageUrl}
                   participants={item.participants}
+                  refetchList={refetch}
                 />
               ))}
           </li>

src/app/(crew)/my-page/_components/reviewable-gatherings/reviewable-gathering-card.tsx

@@ -18,6 +18,7 @@ interface ReviewableGatheringCardProps {
   totalCount: number;
   imageUrl: string;
   participants: ParticipantType[];
+  refetchList: () => void;
 }
 
 export default function ReviewableGatheringCard({
@@ -29,6 +30,7 @@ export default function ReviewableGatheringCard({
   imageUrl,
   participants,
   totalCount,
+  refetchList,
 }: ReviewableGatheringCardProps) {
   const [isModalOpened, setIsModalOpened] = useState(false);
   const formatDate = formatCompactDateTime24H(dateTime);
@@ -94,6 +96,10 @@ export default function ReviewableGatheringCard({
         close={() => {
           setIsModalOpened(false);
         }}
+        onReviewSuccess={() => {
+          setIsModalOpened(false);
+          refetchList();
+        }}
       />
     </div>
   );

src/app/(crew)/my-page/_components/reviewing-modal/review-form.tsx

@@ -15,9 +15,10 @@ type FormValues = {
 interface ReviewFormProps {
   gatheringId?: number;
   onCancel: () => void;
+  onReviewSuccess: () => void;
 }
 
-export default function ReviewForm({ gatheringId, onCancel }: ReviewFormProps) {
+export default function ReviewForm({ gatheringId, onCancel, onReviewSuccess }: ReviewFormProps) {
   const { register, handleSubmit, control } = useForm<FormValues>();
   const [textReview, setTextReview] = useState<string>('');
 
@@ -45,6 +46,7 @@ export default function ReviewForm({ gatheringId, onCancel }: ReviewFormProps) {
 
     onSuccess: () => {
       onCancel();
+      onReviewSuccess();
     },
     onError: (error: ApiError) => {
       // eslint-disable-next-line no-console

src/app/(crew)/my-page/_components/reviewing-modal/reviewing-modal.stories.tsx

@@ -30,10 +30,15 @@ const Template: StoryFn<ReviewingModalProps> = function GatheringDetailModalStor
     setIsOpened(opened);
   }, [opened]);
 
+  const onReviewSuccess = () => {
+    action('review success')();
+    setIsOpened(false);
+  };
+
   return (
     <>
       <Button onClick={handleOpen}>Open Modal</Button>
-      <ReviewingModal opened={isOpened} close={handleClose} />
+      <ReviewingModal opened={isOpened} close={handleClose} onReviewSuccess={onReviewSuccess} />
     </>
   );
 };

src/app/(crew)/my-page/_components/reviewing-modal/reviewing-modal.tsx

@@ -8,9 +8,15 @@ export interface ReviewingModalProps {
   gatheringId?: number;
   opened: boolean;
   close: () => void;
+  onReviewSuccess: () => void;
 }
 
-export default function ReviewingModal({ gatheringId, opened, close }: ReviewingModalProps) {
+export default function ReviewingModal({
+  gatheringId,
+  opened,
+  close,
+  onReviewSuccess,
+}: ReviewingModalProps) {
   return (
     <Modal
       opened={opened}
@@ -31,7 +37,7 @@ export default function ReviewingModal({ gatheringId, opened, close }: Reviewing
         },
       }}
     >
-      <ReviewForm gatheringId={gatheringId} onCancel={close} />
+      <ReviewForm gatheringId={gatheringId} onCancel={close} onReviewSuccess={onReviewSuccess} />
     </Modal>
   );
 }