Refactor: 정보 페이지네이션 API 재연동

TripInfoWeb · Aug 26, 2024 · dc21bf2 · dc21bf2
1 parent 1462e40
commit dc21bf2
Show file tree

Hide file tree

Showing 17 changed files with 79 additions and 93 deletions.
diff --git a/...child-category/[childCategoryId]/page.tsx → src/app/informations/list/page.tsx b/...child-category/[childCategoryId]/page.tsx → src/app/informations/list/page.tsx
@@ -5,31 +5,38 @@ import InformationListSkeleton from "@/components/skeleton/informations/list/Inf
 import { Suspense } from "react";
 
 interface Props {
-  params: { childCategoryId: string };
   searchParams: { [key: string]: string | undefined };
 }
 
-export default function page({ params, searchParams }: Props) {
-  const categoryId = Number(params.childCategoryId);
-  if (categoryId <= 0 || !Number.isSafeInteger(categoryId)) {
-    throw new Error("Invalid CategoryId");
-  }
-
+export default function page({ searchParams }: Props) {
   const page = Number(searchParams["page"]);
   if (page <= 0 || !Number.isSafeInteger(page)) {
     throw new Error("Invalid Page Number");
   }
 
+  const parentCategoryId = Number(searchParams["parentCategoryId"]);
+  if (parentCategoryId <= 0 || !Number.isSafeInteger(parentCategoryId)) {
+    throw new Error("Invalid ParentCategoryId");
+  }
+
+  const childCategoryId = Number(searchParams["childCategoryId"] || 0);
+  if (childCategoryId < 0 || !Number.isSafeInteger(childCategoryId)) {
+    throw new Error("Invalid ChildCategoryId");
+  }
+
   return (
     <div className="flex w-full flex-col items-center">
       <Suspense fallback={<CategoryListSkeleton />}>
-        <CategoryList categoryId={categoryId} />
+        <CategoryList
+          parentCategoryId={parentCategoryId}
+          childCategoryId={childCategoryId}
+        />
       </Suspense>
       <Suspense fallback={<InformationListSkeleton />}>
         <InformationList
-          isParentCategory={false}
-          categoryId={categoryId}
           page={page}
+          parentCategoryId={parentCategoryId}
+          childCategoryId={childCategoryId}
           place={searchParams["place"]}
           order={searchParams["order"]}
         />

diff --git a/src/app/informations/list/parent-category/[parentCategoryId]/page.tsx b/src/app/informations/list/parent-category/[parentCategoryId]/page.tsx
diff --git a/src/components/common/Footer.tsx b/src/components/common/Footer.tsx
@@ -38,7 +38,7 @@ const Footer = () => {
         <div className="flex flex-row items-center justify-between">
           <Link
             className="flex h-[2.625rem] w-[7.5rem] items-center justify-center rounded-3xl bg-black text-sm font-medium text-white hover:scale-105 dark:bg-slate-600"
-            href="/informations/list/parent-category/1?page=1"
+            href="/informations/list?page=1&parentCategoryId=1"
           >
             둘러보기
           </Link>

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -81,7 +81,7 @@ const Header = ({
                           : "font-medium text-gray1 dark:text-slate-400"
                       } ` + "text-sm hover:text-main"
                     }
-                    href="/informations/list/parent-category/1?page=1"
+                    href="/informations/list?page=1&parentCategoryId=1"
                   >
                     정보
                   </Link>

diff --git a/src/components/common/HeaderSidebar.tsx b/src/components/common/HeaderSidebar.tsx
@@ -55,7 +55,7 @@ const HeaderSidebar = ({
           </Link>
           <Link
             className="flex flex-row items-center gap-4 hover:text-main dark:text-slate-200"
-            href="/informations/list/parent-category/1?page=1"
+            href="/informations/list?page=1&parentCategoryId=1"
             onClick={onClose}
             onMouseEnter={() => setHoverNum(2)}
             onMouseLeave={() => setHoverNum(0)}

diff --git a/src/components/home/HomeCarousel.tsx b/src/components/home/HomeCarousel.tsx
@@ -28,7 +28,7 @@ const HomeCarousel = ({ images, currentIndex, onClick }: Props) => {
           </div>
           <Link
             className="flex h-[2.6875rem] w-[7.5rem] items-center justify-center rounded-3xl bg-black font-medium text-white hover:scale-105"
-            href="/informations/list/parent-category/1?page=1"
+            href="/informations/list?page=1&parentCategoryId=1"
           >
             둘러보기
           </Link>

diff --git a/src/components/home/TabList.tsx b/src/components/home/TabList.tsx
@@ -6,7 +6,7 @@ const TabList = () => {
     <div className="flex w-full flex-row items-center justify-between gap-5 max-[744px]:flex-col">
       <Link
         className="flex h-72 flex-1 flex-col justify-between rounded-2xl bg-gradient-to-br from-[#CBF6FF] to-[#EBE0FA] p-12 duration-300 hover:scale-105 max-[1024px]:h-48 max-[1024px]:p-6 max-[744px]:w-full dark:opacity-65"
-        href="/informations/list/parent-category/1?page=1"
+        href="/informations/list?page=1&parentCategory=1"
       >
         <div className="flex flex-col gap-2">
           <h2 className="text-2xl font-bold text-black max-[1024px]:text-lg">

diff --git a/src/components/informations/list/CategoryList.tsx b/src/components/informations/list/CategoryList.tsx
@@ -17,21 +17,12 @@ async function getCategoryList() {
 }
 
 interface Props {
-  categoryId: number;
+  parentCategoryId: number;
+  childCategoryId: number;
 }
 
-const CategoryList = async ({ categoryId }: Props) => {
+const CategoryList = async ({ parentCategoryId, childCategoryId }: Props) => {
   const categories = await getCategoryList();
-  const parentCategoryId = categories
-    .map((parentCategory) => parentCategory.id)
-    .includes(categoryId)
-    ? categoryId
-    : categories.find((parentCategory) =>
-        parentCategory.childrenCategories
-          .map((childCategory) => childCategory.id)
-          .includes(categoryId),
-      )!.id;
-  const childCategoryId = categoryId;
 
   return (
     <div className="mt-6 flex w-full flex-col gap-6">

diff --git a/src/components/informations/list/ChildCategoryList.tsx b/src/components/informations/list/ChildCategoryList.tsx
@@ -17,10 +17,10 @@ const ChildCategoryList = ({
     <div className="flex flex-wrap items-center gap-1">
       <Link
         className={
-          `${parentCategoryId === childCategoryId ? "border-main bg-main text-white" : "text-gray1 dark:border-slate-400 dark:bg-slate-600 dark:text-slate-400"} ` +
+          `${childCategoryId === 0 ? "border-main bg-main text-white" : "text-gray1 dark:border-slate-400 dark:bg-slate-600 dark:text-slate-400"} ` +
           "rounded-full border-[0.0625rem] border-[#E9EBED] px-3 py-[0.375rem] text-sm font-medium hover:scale-105"
         }
-        href={`/informations/list/parent-category/${parentCategoryId}?page=1`}
+        href={`/informations/list?page=1&parentCategoryId=${parentCategoryId}`}
         scroll={false}
       >
         전체
@@ -34,7 +34,7 @@ const ChildCategoryList = ({
               `${childCategory.id === childCategoryId ? "border-main bg-main text-white" : "text-gray1 dark:border-slate-400 dark:bg-slate-600 dark:text-slate-400"} ` +
               "rounded-full border-[0.0625rem] border-[#E9EBED] px-3 py-[0.375rem] text-sm font-medium hover:scale-105"
             }
-            href={`/informations/list/child-category/${childCategory.id}?page=1`}
+            href={`/informations/list?page=1&parentCategoryId=${parentCategoryId}&childCategoryId=${childCategory.id}`}
             scroll={false}
           >
             {childCategory.name}

diff --git a/src/components/informations/list/InformationList.tsx b/src/components/informations/list/InformationList.tsx
@@ -5,15 +5,22 @@ import { InformationListResponseDto } from "@/types/InformationDto";
 import { cookies } from "next/headers";
 
 async function getInformationList(
-  isParentCategory: boolean,
-  categoryId: number,
   page: number,
+  parentCategoryId: number,
+  childCategoryId: number,
   place?: string,
   order?: string,
 ) {
   const cookie = cookies().get("access_token");
+
+  // TODO
+  console.log(
+    `${process.env.BACKEND_URL}/api/informations?page=${page}&parentCategoryId=${parentCategoryId}${childCategoryId > 0 ? `&childCategoryId=${childCategoryId}` : ""}${order !== undefined && order !== "latest" ? `&sort=${order}` : ""}${place !== undefined ? `&zoneCategory=${LOCATION_ID[place]}` : ""}`,
+  );
+  ////////
+
   const response = await fetch(
-    `${process.env.BACKEND_URL}/api/informations/${isParentCategory ? "parent-category" : "child-category"}/${categoryId}?page=${page}${order !== undefined && order !== "latest" ? `&sort=${order}` : ""}${place !== undefined ? `&zoneCategory=${LOCATION_ID[place]}` : ""}`,
+    `${process.env.BACKEND_URL}/api/informations?page=${page}&parentCategoryId=${parentCategoryId}${childCategoryId > 0 ? `&childCategoryId=${childCategoryId}` : ""}${order !== undefined && order !== "latest" ? `&sort=${order}` : ""}${place !== undefined ? `&zoneCategory=${LOCATION_ID[place]}` : ""}`,
     {
       method: "GET",
       headers: {
@@ -32,24 +39,24 @@ async function getInformationList(
 }
 
 interface Props {
-  isParentCategory: boolean;
-  categoryId: number;
   page: number;
+  parentCategoryId: number;
+  childCategoryId: number;
   place?: string;
   order?: string;
 }
 
 const InformationList = async ({
-  isParentCategory,
-  categoryId,
   page,
+  parentCategoryId,
+  childCategoryId,
   place,
   order,
 }: Props) => {
   const data = await getInformationList(
-    isParentCategory,
-    categoryId,
     page - 1,
+    parentCategoryId,
+    childCategoryId,
     place,
     order,
   );
@@ -61,7 +68,7 @@ const InformationList = async ({
           <InformationItemContainer
             key={value.informationId}
             informationId={value.informationId}
-            categoryId={categoryId}
+            categoryId={parentCategoryId}
             isBookMark={value.isBookMark}
             title={value.title}
             image={value.thumbNailImage}
@@ -75,7 +82,7 @@ const InformationList = async ({
       </div>
       <InformationPaginationContainer
         currentPage={page}
-        totalPages={data.totalPages}
+        totalPages={data.page.totalPages}
       />
     </div>
   );

diff --git a/src/components/informations/list/InformationSearch.tsx b/src/components/informations/list/InformationSearch.tsx
@@ -5,6 +5,8 @@ import Link from "next/link";
 
 interface Props {
   pathname: string;
+  parentCategoryId: string;
+  childCategoryId: string | null;
   place: string;
   order: string;
   modalVisible: boolean;
@@ -16,6 +18,8 @@ interface Props {
 
 const InformationSearch = ({
   pathname,
+  parentCategoryId,
+  childCategoryId,
   place,
   order,
   modalVisible,
@@ -60,21 +64,21 @@ const InformationSearch = ({
           >
             <Link
               className={`${order === "latest" && "text-main"} hover:text-main`}
-              href={`${pathname}?page=1${place !== "" ? `&place=${place}` : ""}&order=latest`}
+              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=latest`}
               scroll={false}
             >
               최신순
             </Link>
             <Link
               className={`${order === "likes" && "text-main"} hover:text-main`}
-              href={`${pathname}?page=1${place !== "" ? `&place=${place}` : ""}&order=likes`}
+              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=likes`}
               scroll={false}
             >
               좋아요순
             </Link>
             <Link
               className={`${order === "views" && "text-main"} hover:text-main`}
-              href={`${pathname}?page=1${place !== "" ? `&place=${place}` : ""}&order=views`}
+              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=views`}
               scroll={false}
             >
               조회순

diff --git a/src/components/informations/list/ParentCategoryList.tsx b/src/components/informations/list/ParentCategoryList.tsx
@@ -21,7 +21,7 @@ const ParentCategoryList = ({ categories, parentCategoryId }: Props) => {
                     : "text-gray1 dark:text-slate-400"
                 } ` + "pb-[0.375rem] hover:text-main"
               }
-              href={`/informations/list/parent-category/${category.id}?page=1`}
+              href={`/informations/list?page=1&parentCategoryId=${category.id}`}
               scroll={false}
             >
               {category.name}

diff --git a/src/containers/home/ListTemplateContainer.tsx b/src/containers/home/ListTemplateContainer.tsx
@@ -10,13 +10,17 @@ type MyProps = {
   category: "정보" | "모임";
 };
 
-const ListTemplateContainer = ({ titles, description, children, category }: MyProps) => {
+const ListTemplateContainer = ({
+  titles,
+  description,
+  children,
+  category,
+}: MyProps) => {
   const scrollHook = useDragScroll();
   const path = {
-      "정보":  "/informations/list/parent-category/1?page=1",  
-      "모임":  "/gathering"  
+    정보: "/informations/list?page=1&parentCategoryId=1",
+    모임: "/gathering",
   };
-
 
   return (
     <ListTemplate

diff --git a/src/containers/informations/detail/InformationDeleteModalContainer.tsx b/src/containers/informations/detail/InformationDeleteModalContainer.tsx
@@ -30,7 +30,7 @@ const InformationDeleteModalContainer = ({
       throw new Error(response.statusText);
     }
 
-    router.replace("/informations/list/parent-category/1?page=1");
+    router.replace("/informations/list?page=1&parentCategoryId=1");
     router.refresh();
   };
 

diff --git a/src/containers/informations/list/InformationFilterModalContainer.tsx b/src/containers/informations/list/InformationFilterModalContainer.tsx
@@ -10,15 +10,20 @@ interface Props {
 
 const InformationFilterModalContainer = ({ closeModal }: Props) => {
   const searchParams = useSearchParams();
+  const parentCategoryId = searchParams.get("parentCategoryId");
+  const childCategoryId = searchParams.get("childCategoryId");
   const [place, setPlace] = useState<string>(searchParams.get("place") ?? "");
   const order = searchParams.get("order") ?? "latest";
   const router = useRouter();
   const pathname = usePathname();
 
   const onClick = () => {
-    router.push(`${pathname}?page=1&place=${place}&order=${order}`, {
-      scroll: false,
-    });
+    router.push(
+      `${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}&place=${place}&order=${order}`,
+      {
+        scroll: false,
+      },
+    );
     closeModal();
   };
 

diff --git a/src/containers/informations/list/InformationSearchContainer.tsx b/src/containers/informations/list/InformationSearchContainer.tsx
@@ -9,12 +9,16 @@ const InformationSearchContainer = () => {
   const [dropdownVisible, setDropdownVisible] = useState<boolean>(false);
   const pathname = usePathname();
   const searchParams = useSearchParams();
+  const parentCategoryId = searchParams.get("parentCategoryId")!;
+  const childCategoryId = searchParams.get("childCategoryId");
   const place = searchParams.get("place") ?? "";
   const order = searchParams.get("order") ?? "latest";
 
   return (
     <InformationSearch
       pathname={pathname}
+      parentCategoryId={parentCategoryId}
+      childCategoryId={childCategoryId}
       place={place}
       order={order}
       modalVisible={modalVisible}

diff --git a/src/types/InformationDto.ts b/src/types/InformationDto.ts
@@ -7,7 +7,6 @@ export interface InformationRegisterResponseDto {
 
 // 정보 목록 조회 결과 DTO
 export interface InformationListResponseDto {
-  totalPages: number;
   content: Array<{
     informationId: number;
     title: string;
@@ -17,7 +16,11 @@ export interface InformationListResponseDto {
     isBookMark: boolean;
     thumbNailImage: string;
     likeCount: number;
+    isLike: boolean;
   }>;
+  page: {
+    totalPages: number;
+  };
 }
 
 /**