Merge pull request #335 from TripInfoWeb/dev_refactoring

Fix: 홈 화면에서 모임 북마크, 좋아요 여부가 표시되지 않는 오류 수정
TripInfoWeb · Sep 20, 2024 · 9c62842 · 9c62842
2 parents 41c16c7 + 85714ad
commit 9c62842
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 75 deletions.
diff --git a/src/app/api/gathering/route.ts b/src/app/api/gathering/route.ts
@@ -1,4 +1,4 @@
-import { revalidatePath } from "next/cache";
+import { revalidatePath, revalidateTag } from "next/cache";
 import { NextRequest, NextResponse } from "next/server";
 import { URLSearchParams } from "url";
 
@@ -47,61 +47,50 @@ export async function POST(request: NextRequest) {
   }
 }
 
-
 // 모임 검색 조회
 export async function GET(request: NextRequest) {
   const url = new URL(request.url);
   const params = new URLSearchParams(url.search);
   const access_cookie = request.cookies.get("access_token");
-  try {
-    const response = await fetch(
-      `${process.env.BACKEND_URL}/api/gatherings${params.get("tagName") ? "/tag/search" : ""}` +
-        url.search,
-      {
-        method: "GET",
-        headers: {
-          Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
-          "Content-Type": "application/json",
-        },
-        cache: "no-store",
+
+  const response = await fetch(
+    `${process.env.BACKEND_URL}/api/gatherings${params.get("tagName") ? "/tag/search" : ""}` +
+      url.search,
+    {
+      method: "GET",
+      headers: {
+        Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
+        "Content-Type": "application/json",
       },
-    );
-
-    if (!response.ok) {
-      return NextResponse.json({ error: "서버 오류" }, { status: 500 });
-    }
-    return response;
-  }
-  catch (error) {
-    console.error("서버에서 데이터 처리 중 오류 발생:", error);
-    return NextResponse.json({ error: "서버 오류" }, { status: 500 });
-  }
+      cache: "no-store",
+    },
+  );
+
+  return response;
 }
 
 // 모임 제거
 export async function DELETE(request: NextRequest) {
   const url = new URL(request.url);
   const params = new URLSearchParams(url.search);
   const access_cookie = request.cookies.get("access_token");
-  try {
-    const response = await fetch(
-      `${process.env.BACKEND_URL}/api/gatherings/${params.get("id")}`,
-      {
-        method: "DELETE",
-        headers: {
-          Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
-          "Content-Type": "application/json",
-        },
-        cache: "no-store",
+
+  const response = await fetch(
+    `${process.env.BACKEND_URL}/api/gatherings/${params.get("id")}`,
+    {
+      method: "DELETE",
+      headers: {
+        Cookie: `${access_cookie?.name}=${access_cookie?.value}`,
+        "Content-Type": "application/json",
       },
-    );
-    if (!response.ok) {
-      return NextResponse.json({ error: "서버 오류" }, { status: 500 });
-    }
-    revalidatePath("/gathering", "layout");
-    return response;
-  } catch (error) {
-    console.error("서버에서 데이터 처리 중 오류 발생:", error);
+      cache: "no-store",
+    },
+  );
+  if (!response.ok) {
     return NextResponse.json({ error: "서버 오류" }, { status: 500 });
   }
-}
+
+  revalidateTag("getNewGatheringList");
+  revalidatePath("/gathering", "layout");
+  return response;
+}
diff --git a/src/components/common/dropdown/Dropdown.tsx b/src/components/common/dropdown/Dropdown.tsx
@@ -90,13 +90,12 @@ export default function Dropdown<T>({
           />
         )}
       </button>
-
       {isOpen &&
         (isOnRightSide ? (
           <div
             className={`absolute top-0 ${dropdownOptionStyle?.z || ""} ${dropdownOptionStyle?.w || ""} flex ${dropdownOptionStyle?.style || ""} flex-col items-center gap-1 bg-white/95 text-gray1 shadow transition duration-200 ease-out`}
             style={{
-              transform: dropdownOptionStyle?.transformX
+              transform: dropdownOptionStyle?.transformX,
             }}
           >
             {options.map((i) => (

diff --git a/src/components/home/NewGatheringList.tsx b/src/components/home/NewGatheringList.tsx
@@ -1,12 +1,17 @@
 import { GatheringRecommend } from "@/types/GatheringDto";
 import GatheringItemHome from "../common/GatheringItemHome";
 import LottieNotFound from "../common/lottie/LottieNotFound";
+import { cookies } from "next/headers";
 
 async function getNewGatheringList() {
+  const cookie = cookies().get("access_token");
   const response = await fetch(
     `${process.env.BACKEND_URL}/api/gatherings/home`,
     {
       method: "GET",
+      headers: {
+        Cookie: `${cookie?.name}=${cookie?.value}`,
+      },
       next: { revalidate: 60, tags: ["getNewGatheringList"] },
     },
   );

diff --git a/src/containers/gathering/read/GatheringCardListContainer.tsx b/src/containers/gathering/read/GatheringCardListContainer.tsx
@@ -27,13 +27,13 @@ const GatheringCardListContainer = () => {
     searchParams.get("page") ? Number(searchParams.get("page")) : 1,
   );
 
-    const pageHandler = (page: number) => {
-      const url = new URL(window.location.href);
-      const params = new URLSearchParams(url.search);
-      params.set("page", page + "");
-      url.search = params.toString();
-      window.history.pushState({}, "", url.toString());
-    };
+  const pageHandler = (page: number) => {
+    const url = new URL(window.location.href);
+    const params = new URLSearchParams(url.search);
+    params.set("page", page + "");
+    url.search = params.toString();
+    window.history.pushState({}, "", url.toString());
+  };
 
   useEffect(() => {
     const temp = async () => {
@@ -58,7 +58,7 @@ const GatheringCardListContainer = () => {
           setCurrentPage(0);
           router.push("/not-found");
           // throw new Error(response.statusText);
-          return ;
+          return;
         }
         const data = await response.json();
         setElements(data.content);

diff --git a/src/containers/gathering/read/GatheringFilterContainer.tsx b/src/containers/gathering/read/GatheringFilterContainer.tsx
@@ -3,38 +3,35 @@ import GatheringFilterModal from "@/components/gathering/read/modal/GatheringFil
 import { useEffect, useState } from "react";
 import { VscSettings } from "react-icons/vsc";
 
-interface IGatheringFilterContainer {
-
-}
+interface IGatheringFilterContainer {}
 const GatheringFilterContainer = (props: IGatheringFilterContainer) => {
   const [isModal, setIsModal] = useState(false);
   const [loading, setLoading] = useState(true);
 
   useEffect(() => {
     setLoading(false);
-  }, [])
-  
+  }, []);
+
   if (loading)
-        return (
-          <div
-            className={`relative flex h-[2rem] w-[3.5rem] flex-shrink-0 animate-pulse items-center rounded-xl bg-gray-300 text-left`}
-          ></div>
+    return (
+      <div
+        className={`relative flex h-[2rem] w-[3.5rem] flex-shrink-0 animate-pulse items-center rounded-xl bg-gray-300 text-left`}
+      ></div>
     );
 
-
-    return (
-        <>
-        <button
-            className="flex flex-row items-center hover:text-main"
-            onClick={() => setIsModal(true)}
-            >
+  return (
+    <>
+      <button
+        className="flex flex-row items-center hover:text-main"
+        onClick={() => setIsModal(true)}
+      >
         <VscSettings size={"1.25rem"} />
         <div>필터</div>
-        </button>
-        <Modal isOpen={isModal} onClose={() => setIsModal(false)}>
-            <GatheringFilterModal closeModal={() => setIsModal(false)} />
-        </Modal>
-        </>
+      </button>
+      <Modal isOpen={isModal} onClose={() => setIsModal(false)}>
+        <GatheringFilterModal closeModal={() => setIsModal(false)} />
+      </Modal>
+    </>
   );
 };
-export default GatheringFilterContainer
+export default GatheringFilterContainer;