Merge pull request #121 from gw-lim/feat/review-claim

✨ feat: 후기 신고하기 api 연결
P1Z7 · Feb 20, 2024 · 3aa530c · 3aa530c
2 parents b1b46a2 + 16c3d8e
commit 3aa530c
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 72 deletions.
diff --git a/app/(route)/event/[eventId]/_components/Banner.tsx b/app/(route)/event/[eventId]/_components/Banner.tsx
@@ -61,7 +61,7 @@ const Banner = ({ data, eventId }: Props) => {
       return instance.get(`/event/${eventId}/update/application`);
     },
   });
-  const hasEditApplication = !(editApplication && editApplication?.length === 0);
+  const hasEditApplication = editApplication ? editApplication?.length !== 0 : false;
 
   return (
     <>
@@ -139,7 +139,7 @@ const Banner = ({ data, eventId }: Props) => {
           </div>
         </div>
       </section>
-      {modal === "report" && <ReportModal closeModal={closeModal} />}
+      {modal === "report" && <ReportModal closeModal={closeModal} type="event" />}
     </>
   );
 };

diff --git a/app/(route)/event/[eventId]/_components/EventReview.tsx b/app/(route)/event/[eventId]/_components/EventReview.tsx
@@ -3,7 +3,9 @@ import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
 import Evaluation from "@/components/Evaluation";
+import ReportModal from "@/components/modal/ReportModal";
 import { instance } from "@/api/api";
+import { useModal } from "@/hooks/useModal";
 import { getSession } from "@/store/session/cookies";
 import { EventReviewType } from "@/types/index";
 import HeartIcon from "@/public/icon/heart.svg";
@@ -36,36 +38,43 @@ const EventReview = ({ data }: Props) => {
     likeMutation.mutate();
   };
 
+  const isMyReview = !!session && session?.user.userId === data?.user?.id;
+  const publicText = data.isPublic ? "공개" : "비공개";
+  const { modal, openModal, closeModal } = useModal();
+
   return (
-    <div className="flex flex-col gap-16 border-b border-gray-50 px-20 py-16">
-      <div className="flex items-center gap-8">
-        <div className="relative h-32 w-32 pc:h-40 pc:w-40">
-          <Image src={data.user?.profileImage ?? DEFAULT_PROFILE_IMAGE} alt="프로필 이미지" fill className="rounded-full object-cover" sizes="3.2rem" />
+    <>
+      <div className="flex flex-col gap-16 border-b border-gray-50 px-20 py-16">
+        <div className="flex items-center gap-8">
+          <div className="relative h-32 w-32 pc:h-40 pc:w-40">
+            <Image src={data.user?.profileImage ?? DEFAULT_PROFILE_IMAGE} alt="프로필 이미지" fill className="rounded-full object-cover" sizes="3.2rem" />
+          </div>
+          <div className="text-16 font-500">{data.user?.nickName}</div>
+          <div className="ml-auto text-12 font-500 text-gray-400">{isMyReview ? publicText : <button onClick={() => openModal("report")}>신고하기</button>}</div>
         </div>
-        <div className="text-16 font-500">{data.user.nickName}</div>
-        <button className="ml-auto text-12 font-500 text-gray-400">신고하기</button>
-      </div>
-      <Evaluation rating={data.rating} />
-      {data.isPublic && (
-        <>
-          <div className="text-left text-14 font-400 pc:text-16">{data?.description}</div>
-          <ul className="flex gap-8 overflow-auto">
-            {data?.reviewImages?.map((image, index) => (
-              <li key={index} className="relative h-120 w-120 shrink-0">
-                <Image src={image.url} alt="후기 사진" fill className="object-cover" sizes="12rem" />
-              </li>
-            ))}
-          </ul>
-        </>
-      )}
+        <Evaluation rating={data.rating} />
+        {data.isPublic && (
+          <>
+            <div className="text-left text-14 font-400 pc:text-16">{data?.description}</div>
+            <ul className="flex gap-8 overflow-auto">
+              {data?.reviewImages?.map((image, index) => (
+                <li key={index} className="relative h-120 w-120 shrink-0">
+                  <Image src={image.url} alt="후기 사진" fill className="object-cover" sizes="12rem" />
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
 
-      <div className="flex justify-between">
-        <button onClick={handleLikeReview} className="flex items-center gap-[0.65rem] text-12 font-500 text-gray-500">
-          <HeartIcon stroke={liked ? "#FF50AA" : "#A0A5B1"} fill={liked ? "#FF50AA" : "none"} width={20} height={20} viewBox="0 0 24 24" />
-          {likeCount}
-        </button>
+        <div className="flex justify-between">
+          <button onClick={handleLikeReview} className="flex items-center gap-[0.65rem] text-12 font-500 text-gray-500">
+            <HeartIcon stroke={liked ? "#FF50AA" : "#A0A5B1"} fill={liked ? "#FF50AA" : "none"} width={20} height={20} viewBox="0 0 24 24" />
+            {likeCount}
+          </button>
+        </div>
       </div>
-    </div>
+      {modal === "report" && <ReportModal closeModal={closeModal} type="review" reviewId={data.id} />}
+    </>
   );
 };
 

diff --git a/app/_api/api.ts b/app/_api/api.ts
@@ -74,7 +74,7 @@ export class Api {
         ...(endPoint === "/file/upload" ? {} : { "Content-Type": "application/json" }),
       },
     });
-    const result = STR_RES_ENDPOINT.includes(endPoint) ? await res.text() : await res.json();
+    const result = STR_RES_ENDPOINT.includes(endPoint) || endPoint.split("/").includes("claims") ? await res.text() : await res.json();
     this.makeError(result);
 
     return result;
@@ -151,7 +151,8 @@ type PostEndPoint =
   | "/event/update/application"
   | "/event/update/approval"
   | "/artist/request"
-  | "/event/claim";
+  | "/event/claim"
+  | `/reviews/${string}/claims`;
 
 type PutEndPoint = `/event/${string}` | `/users/${string}/profile` | `/users/${string}/password`;
 type DeleteEndPoint = `/users/${string}/artists` | `/reviews/${string}/images` | `/users/${string}`;
@@ -188,8 +189,10 @@ type PostBodyType<T> = T extends "/event"
                             : T extends "/artist/request"
                               ? Req_Post_Type["request"]
                               : T extends "/event/claim"
-                                ? Req_Post_Type["claim"]
-                                : unknown;
+                                ? Req_Post_Type["eventClaim"]
+                                : T extends `/reviews/${string}/claims`
+                                  ? Req_Post_Type["reviewClaim"]
+                                  : unknown;
 
 type GetQueryType<T> = T extends "/event"
   ? Req_Query_Type["행사목록"]

diff --git a/app/_components/header/MobileHeader.tsx b/app/_components/header/MobileHeader.tsx
@@ -48,7 +48,7 @@ const MobileHeader = ({ handleClick }: Props) => {
         )}
       </header>
       {bottomSheet === "event-kebab" && <EventKebabBottomSheet closeBottomSheet={closeBottomSheet} refs={refs} openReportModal={openKebabModal} />}
-      {modal === "report" && <ReportModal closeModal={closeModal} />}
+      {modal === "report" && <ReportModal closeModal={closeModal} type="event" />}
     </>
   );
 };

diff --git a/app/_components/modal/ReportModal.tsx b/app/_components/modal/ReportModal.tsx
@@ -6,7 +6,12 @@ import { getSession } from "@/store/session/cookies";
 import { ModalBaseType } from "@/types/index";
 import TextModal from "./TextModal";
 
-const ReportModal = ({ closeModal }: ModalBaseType) => {
+interface Props extends ModalBaseType {
+  type: "event" | "review";
+  reviewId?: string;
+}
+
+const ReportModal = ({ closeModal, type, reviewId }: Props) => {
   const session = getSession();
   const { eventId } = useParams();
   const eventIdStr: string = Array.isArray(eventId) ? eventId[0] : eventId;
@@ -19,7 +24,13 @@ const ReportModal = ({ closeModal }: ModalBaseType) => {
       return;
     }
     try {
-      const res = await instance.post("/event/claim", { eventId: eventIdStr, userId: session.user.userId, description: form.description });
+      let res;
+
+      if (type === "event") {
+        res = await instance.post("/event/claim", { eventId: eventIdStr, userId: session.user.userId, description: form.description });
+      } else if (type === "review") {
+        res = await instance.post(`/reviews/${reviewId}/claims`, { userId: session.user.userId, description: form.description });
+      }
 
       if (res.error) {
         throw new Error(res.error);

diff --git a/app/_hooks/useInfScroll.ts b/app/_hooks/useInfScroll.ts
diff --git a/app/_types/postBodyType.ts b/app/_types/postBodyType.ts
@@ -109,12 +109,17 @@ type Req_Post_Request = {
   name: string;
 };
 
-type Req_Post_Claim = {
+type Req_Post_Event_Claim = {
   eventId: string;
   userId: string;
   description: string;
 };
 
+type Req_Post_Review_Claim = {
+  userId: string;
+  description: string;
+};
+
 export type Req_Post_Type = {
   event: Req_Post_Event;
   eventLike: Req_Post_Event_Like;
@@ -132,5 +137,6 @@ export type Req_Post_Type = {
   edit: Req_Post_Edit_Application;
   approve: Req_Post_Approval;
   request: Req_Post_Request;
-  claim: Req_Post_Claim;
+  eventClaim: Req_Post_Event_Claim;
+  reviewClaim: Req_Post_Review_Claim;
 };