Merge pull request #83 from dnd-side-project/fix/production-qa

프로덕션에 문제있던 부분들 수정

auth.ts

@@ -113,7 +113,6 @@ export const { handlers, auth, signIn, signOut, unstable_update } = NextAuth({
     },
 
     async session({ session, token }) {
-      console.log("🚀 ~ session ~ token:", token);
       if (token?.accessToken) {
         session.user = {
           ...session.user,

src/apis/festivals/topKeywordFestival/topKeywordFestivalKeys.ts

@@ -3,5 +3,5 @@ import { TopKeywordParameter } from "./topKeywordFestivalType";
 export const topKeywordFestivalKeys = {
   all: ["searchFestival"] as const,
   list: (params: TopKeywordParameter) =>
-    [topKeywordFestivalKeys.all, params] as const,
+    [...topKeywordFestivalKeys.all, params] as const,
 };

src/apis/onboarding/onboarding.ts

@@ -22,7 +22,6 @@ export const getMoods = async () => {
       cache: "force-cache",
       next: {
         tags: festivalOnBoarding.all,
-        revalidate: false,
       },
     })
     .json<FiestaResponse<Array<FestivalMood>>>()
@@ -37,7 +36,6 @@ export const getCategories = async () => {
       cache: "force-cache",
       next: {
         tags: festivalOnBoarding.all,
-        revalidate: false,
       },
     })
     .json<FiestaResponse<Array<FestivalCategory>>>()
@@ -52,7 +50,6 @@ export const getCompanions = async () => {
       cache: "force-cache",
       next: {
         tags: festivalOnBoarding.all,
-        revalidate: false,
       },
     })
     .json<FiestaResponse<Array<FestivalCompanion>>>()
@@ -67,7 +64,6 @@ export const getPriority = async () => {
       cache: "force-cache",
       next: {
         tags: festivalOnBoarding.all,
-        revalidate: false,
       },
     })
     .json<FiestaResponse<Array<FestivalPriority>>>()

src/apis/review/reviewKeywords/reviewKeywords.ts

@@ -1,13 +1,13 @@
 import FiestaInstance from "@/apis/FiestaInstance";
 import { FIESTA_ENDPOINTS } from "@/config";
 
-import { ReviewKeyword } from "./reviewKeywordsType";
+import { Keyword } from "../reviews/reviewsType";
 
 const ENDPOINT = FIESTA_ENDPOINTS.reviews;
 
 export async function getReviewKeywords() {
   const endpoint = ENDPOINT.keywords;
-  const data = await FiestaInstance.get<Array<ReviewKeyword>>(endpoint, {
+  const data = await FiestaInstance.get<Array<Keyword>>(endpoint, {
     cache: "force-cache",
     next: {
       tags: ["/reviews/keywords"],

src/apis/review/reviewKeywords/reviewKeywordsKeys.ts

@@ -0,0 +1,5 @@
+export const reviewKeywordsKeys = {
+  all: ["reviews"] as const,
+  detail: (reviewId: string | number) =>
+    [...reviewKeywordsKeys.all, reviewId] as const,
+};

src/apis/review/reviews/reviewsType.ts

@@ -30,8 +30,8 @@ export interface Review {
 
 export interface User {
   userId: number;
-  profileImage: string;
-  nickname: string;
+  profileImage: string | null;
+  nickname: string | null;
 }
 
 export interface Image {

src/apis/user/badges/badgesType.ts

@@ -3,7 +3,7 @@ export type Badge = {
   badgeName: string;
   description: string;
   imageUrl: string;
-  isAquired: boolean;
+  isAcquired: boolean;
 };
 
 export type BadgesResponse = Array<Badge>;

src/apis/user/me/me.ts

@@ -1,5 +1,3 @@
-"use server";
-
 import FiestaInstance from "@/apis/FiestaInstance";
 import { FiestaFetchOptions } from "@/apis/instance";
 import { FIESTA_ENDPOINTS } from "@/config";

src/apis/user/me/meKeys.ts

@@ -0,0 +1,3 @@
+export const meKeys = {
+  all: ["user"] as const,
+};

src/apis/user/onboarding-info/onboarding-info.ts

@@ -1,5 +1,3 @@
-"use server";
-
 import FiestaInstance from "@/apis/FiestaInstance";
 import { FIESTA_ENDPOINTS } from "@/config";
 

src/apis/user/onboarding-info/onboarding-infoKeys.ts

@@ -0,0 +1,7 @@
+export const onboardingInfoKeys = {
+  all: ["onboardingInfo"] as const,
+  individual: (userId: string | number | undefined) => [
+    ...onboardingInfoKeys.all,
+    userId,
+  ],
+};

src/apis/user/profile/patchProfile.ts

@@ -1,5 +1,3 @@
-"use server";
-
 import FiestaInstance from "@/apis/FiestaInstance";
 import { FIESTA_ENDPOINTS } from "@/config";
 

src/app/(route)/(home)/_components/FestivalHot.tsx

@@ -25,8 +25,8 @@ const FestivalHot = async () => {
         </Link>
       </div>
 
-      <div className="flex w-full gap-[16px]">
-        {hotFestivals.content.splice(0, 2).map((festival) => (
+      <div className=" grid w-full grid-cols-2 gap-[16px]">
+        {hotFestivals.content.splice(0, 4).map((festival) => (
           <TrendFestivalCard
             key={festival.festivalId}
             href={`/festivals/${festival.festivalId}`}

src/app/(route)/(home)/_components/FestivalRecommend/RecommendFestivalHeader.tsx

@@ -13,11 +13,12 @@ const RecommendFestivalHeader: FC<Props> = ({ session }) => {
   return (
     <div className="relative flex w-full justify-between">
       <div className="flex w-1/2 flex-wrap pb-[18px] text-title-bold">
-        <span className={UserTypeText[user?.userTypeId ?? 1]}>
-          {user?.nickname ?? "피에스타"}
+        <span>
+          <span className={UserTypeText[user?.userTypeId ?? 1]}>
+            {user?.nickname ?? "피에스타"}
+          </span>
+          들을 위한 페스티벌이에요!
         </span>
-        <span>들을</span>
-        <span>위한 페스티벌이에요!</span>
       </div>
       <Image
         className="absolute bottom-[-15px] right-[20px]"

src/app/(route)/festivals/[festivalId]/_components/DetailFestivalTab/Review/_components/TotalReviews/TotalReview.tsx

@@ -48,7 +48,6 @@ const TotalReviews: FC<Props> = ({ festivals }) => {
   const { data } = useSuspenseQuery({
     queryKey: reviewsKeys.list(params),
     queryFn: () => getReviews(params),
-    refetchOnMount: true,
   });
 
   return (

src/app/(route)/festivals/[festivalId]/_components/DetailFestivalTab/Review/_components/TotalReviews/TotalReviewList.tsx

@@ -13,7 +13,10 @@ const TotalReviewList: FC<Props> = ({ reviews }) => {
     <div className="flex w-full flex-col gap-[4px]">
       <div className="flex w-full flex-col">
         {reviews.map((review) => (
-          <TotalReviewListItem key={review?.reviewId} review={review} />
+          <TotalReviewListItem
+            key={review?.reviewId ?? review?.createdAt}
+            review={review}
+          />
         ))}
       </div>
     </div>

src/app/(route)/festivals/[festivalId]/_components/DetailFestivalTab/Review/_components/TotalReviews/TotalReviewListItem.tsx

@@ -2,7 +2,7 @@
 
 import Image from "next/image";
 import { useRouter } from "next/navigation";
-import { FC, useMemo, useState } from "react";
+import { FC, useState } from "react";
 
 import type { Review } from "@/apis/review/reviews/reviewsType";
 import { IconButton } from "@/components/core/Button";
@@ -12,8 +12,8 @@ import { ProgressCircle } from "@/components/core/Progress";
 import { FestivalRequstDialog } from "@/components/Dialog";
 import { HeartIcon } from "@/components/icons";
 import Ratings from "@/components/rating/Ratings";
-import useDeleteReview from "@/hooks/review/useDeleteReview";
 import useReportReview from "@/hooks/review/useReportReview";
+import useReview from "@/hooks/review/useReview";
 import useToggleReviewLike from "@/hooks/review/useToggleReviewLike";
 import { formatToYYYYMMDD } from "@/lib/dayjs";
 import { useUserStore } from "@/store/user";
@@ -27,33 +27,33 @@ const TotalReviewListItem: FC<Props> = ({ review }) => {
   const router = useRouter();
   const [isOpenReportDialog, setIsOpenReportDialog] = useState<boolean>(false);
 
-  const { deleteReviewMutate, isDeleting } = useDeleteReview(review);
+  const { deleteReviewMutate, isLoadingDeleteReview } = useReview();
   const { reportReview, isReporting } = useReportReview();
   const { mutate: toggleReviewLike } = useToggleReviewLike(review);
 
   const handleReport = async (description: string) => {
-    reportReview({ reviewId: review.reviewId, description });
+    reportReview({ reviewId: review?.reviewId, description });
   };
 
   const handleDelete = (reviewId: number) => {
-    deleteReviewMutate(reviewId);
+    deleteReviewMutate(String(reviewId));
   };
 
   const handleToggle = () => {
-    toggleReviewLike({ reviewId: review.reviewId });
+    toggleReviewLike({ reviewId: review?.reviewId });
   };
 
   const myReviewOptions = [
     {
       label: "수정하기",
       onClick: () =>
         router.push(
-          `/festivals/${review.festivalId}/review/${review.reviewId}`,
+          `/festivals/${review?.festivalId}/review/${review?.reviewId}`,
         ),
     },
     {
       label: "삭제하기",
-      onClick: () => handleDelete(review.reviewId),
+      onClick: () => handleDelete(review?.reviewId),
     },
   ];
 
@@ -64,45 +64,46 @@ const TotalReviewListItem: FC<Props> = ({ review }) => {
     },
   ];
 
-  const isMyReviewOptions = useMemo(() => {
-    return user?.userId === review.user.userId
-      ? myReviewOptions
-      : othersReviewOptions;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user?.userId, review.user.userId]);
-
   return (
     <div
-      key={review.reviewId}
+      key={review?.reviewId}
       className="flex flex-col gap-[8px] border-b-[1px] border-gray-scale-100 py-[20px]"
     >
       <div className="flex w-full items-start justify-between">
         <div className="flex w-full gap-[4px] ">
           <Image
             className="rounded-full"
-            src={review.user.profileImage ?? "/images/fallbackLogo.png"}
-            alt={review.user.nickname ?? `${review.reviewId}-image`}
+            src={review?.user?.profileImage ?? "/images/fallbackLogo.png"}
+            alt={`${review?.reviewId}-image`}
             width={33}
             height={33}
           />
           <div className="flex flex-col">
             <div className="flex items-center gap-[4px]">
               <span className="text-body2-semi text-gray-scale-700">
-                {review.user.nickname}
+                {review?.user?.nickname ?? "익명"}
               </span>
               <span className="text-caption1-regular text-gray-scale-400">
-                {formatToYYYYMMDD(review.createdAt)}
+                {formatToYYYYMMDD(review?.createdAt)}
               </span>
             </div>
-            <Ratings rating={review.rating} />
+            <Ratings rating={review?.rating} />
           </div>
         </div>
 
-        {!!user && <DropdownMenu options={isMyReviewOptions} />}
+        {!!user && (
+          <DropdownMenu
+            options={
+              user?.userId === review?.user.userId
+                ? myReviewOptions
+                : othersReviewOptions
+            }
+          />
+        )}
       </div>
-      {!!review.images.length && (
+      {!!review?.images.length && (
         <div className="flex w-full gap-[8px]">
-          {review.images.map((image) => (
+          {review?.images.map((image) => (
             <Image
               className="aspect-square"
               key={image.imageId}
@@ -115,21 +116,23 @@ const TotalReviewListItem: FC<Props> = ({ review }) => {
         </div>
       )}
       <p className="text-body1-regular-lh-20 text-gray-scale-700">
-        {review.content}
+        {review?.content}
       </p>
-      <div className="flex w-full items-center justify-between">
+      <div className="flex w-full items-center justify-between gap-1">
         <div className="flex gap-[8px] overflow-auto scrollbar-hide">
-          {review.keywords.slice(0, 2).map((keyword) => (
-            <BasicChip key={keyword.keywordId} label={keyword.keyword} />
-          ))}
+          {review?.keywords
+            .slice(0, 2)
+            .map((keyword) => (
+              <BasicChip key={keyword.keywordId} label={keyword.keyword} />
+            ))}
         </div>
-        {!!user && review.user.userId != user?.userId && (
-          <div className="flex w-[30px] items-center justify-between gap-1">
-            <IconButton active={review.isLiked} onClick={handleToggle}>
+        {!!user && review?.user.userId != user?.userId && (
+          <div className="flex w-[30px] items-center justify-between gap-2">
+            <IconButton active={review?.isLiked} onClick={handleToggle}>
               <HeartIcon width={20} height={20} className="gap-2" />
             </IconButton>
             <span className="text-caption2-regular text-gray-scale-600">
-              {review.likeCount}
+              {review?.likeCount}
             </span>
           </div>
         )}
@@ -142,7 +145,7 @@ const TotalReviewListItem: FC<Props> = ({ review }) => {
         onOpenChange={() => setIsOpenReportDialog((prev) => !prev)}
       />
 
-      {(isDeleting || isReporting) && (
+      {(isLoadingDeleteReview || isReporting) && (
         <div className="flex h-[400px] w-full items-center justify-center">
           <ProgressCircle className="size-[100px]" />
         </div>

src/app/(route)/festivals/[festivalId]/page.tsx

@@ -19,6 +19,7 @@ export default async function Home({
 }: {
   params: SearchParams & { festivalId?: string };
 }) {
+  console.log("🚀 ~ festivalId:", params.festivalId);
   if (!params.festivalId) {
     redirect("/");
   }

src/app/(route)/festivals/[festivalId]/review/[reviewId]/page.tsx

@@ -1,7 +1,5 @@
 import { Metadata } from "next/types";
 
-import { getReviewKeywords } from "@/apis/review/reviewKeywords/reviewKeywords";
-
 import ReviewEditView from "./view";
 
 export const metadata: Metadata = {
@@ -13,12 +11,9 @@ export default async function ReviewEditPage({
 }: {
   params: { festivalId: string; reviewId: string };
 }) {
-  const keywords = await getReviewKeywords();
-
   return (
     <section className="mt-[44px]">
       <ReviewEditView
-        keywords={keywords}
         festivalId={params.festivalId}
         reviewId={params.reviewId}
       />