Fix: 정보 페이지네이션에서 tagName이 유지되도록 수정

TripInfoWeb · Aug 30, 2024 · 774d925 · 774d925
1 parent f6eae23
commit 774d925
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 15 deletions.
diff --git a/src/components/informations/detail/InformationLikeCount.tsx b/src/components/informations/detail/InformationLikeCount.tsx
@@ -2,20 +2,29 @@ import HashSpinner from "@/components/common/HashSpinner";
 import { FaHeart, FaRegHeart } from "react-icons/fa";
 
 interface Props {
+  clickable: boolean;
   loading: boolean;
   likeCount: number;
   isLiked: boolean;
   onLikesClick: () => void;
 }
 
-// hover:text-[#F85E5E]
-
 const InformationLikeCount = ({
+  clickable,
   loading,
   likeCount,
   isLiked,
   onLikesClick,
 }: Props) => {
+  if (!clickable) {
+    return (
+      <div className="flex flex-row items-center gap-1 text-gray2 dark:text-slate-400">
+        <FaRegHeart size={"0.8rem"} />
+        <p className="text-xs">{likeCount}</p>
+      </div>
+    );
+  }
+
   return (
     <div>
       <HashSpinner loading={loading} />

diff --git a/src/components/informations/list/InformationPagination.tsx b/src/components/informations/list/InformationPagination.tsx
@@ -11,6 +11,7 @@ interface Props {
   childCategoryId: string | null;
   place: string | null;
   order: string | null;
+  tagName: string | null;
 }
 
 const InformationPagination = ({
@@ -21,6 +22,7 @@ const InformationPagination = ({
   childCategoryId,
   place,
   order,
+  tagName,
 }: Props) => {
   const pageList = Array.from({ length: totalPages }, (_, index) => index + 1);
   const leftPage = Math.max(currentPage - 2, 1);
@@ -30,7 +32,7 @@ const InformationPagination = ({
     <div className="flex flex-row items-center justify-center gap-3 py-12 text-sm text-black dark:text-slate-200">
       {currentPage > 1 ? (
         <Link
-          href={`${pathname}?page=1${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+          href={`${pathname}?page=1${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
         >
           <MdFirstPage
             className="cursor-pointer hover:text-main"
@@ -42,7 +44,7 @@ const InformationPagination = ({
       )}
       {currentPage > 1 ? (
         <Link
-          href={`${pathname}?page=${currentPage - 1}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+          href={`${pathname}?page=${currentPage - 1}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
         >
           <IoIosArrowBack className="cursor-pointer hover:text-main" />
         </Link>
@@ -53,7 +55,7 @@ const InformationPagination = ({
         <div className="flex flex-row items-center gap-3">
           <Link
             className="flex h-6 w-6 items-center justify-center hover:text-main"
-            href={`${pathname}?page=1${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+            href={`${pathname}?page=1${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
           >
             1
           </Link>
@@ -64,7 +66,7 @@ const InformationPagination = ({
         <Link
           key={pageNumber}
           className={`${pageNumber === currentPage ? "bg-main text-white" : ""} flex h-6 w-6 items-center justify-center rounded-full hover:text-main`}
-          href={`${pathname}?page=${pageNumber}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+          href={`${pathname}?page=${pageNumber}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
         >
           {pageNumber}
         </Link>
@@ -74,15 +76,15 @@ const InformationPagination = ({
           <AiOutlineEllipsis />
           <Link
             className="flex h-6 w-6 items-center justify-center hover:text-main"
-            href={`${pathname}?page=${totalPages}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+            href={`${pathname}?page=${totalPages}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
           >
             {totalPages}
           </Link>
         </div>
       )}
       {currentPage < totalPages ? (
         <Link
-          href={`${pathname}?page=${currentPage + 1}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+          href={`${pathname}?page=${currentPage + 1}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
         >
           <IoIosArrowForward className="cursor-pointer hover:text-main" />
         </Link>
@@ -91,7 +93,7 @@ const InformationPagination = ({
       )}
       {currentPage < totalPages ? (
         <Link
-          href={`${pathname}?page=${totalPages}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+          href={`${pathname}?page=${totalPages}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
         >
           <MdLastPage
             className="cursor-pointer hover:text-main"

diff --git a/src/components/informations/list/InformationSearch.tsx b/src/components/informations/list/InformationSearch.tsx
@@ -73,21 +73,21 @@ const InformationSearch = ({
           >
             <Link
               className={`${order === "latest" && "text-main"} hover:text-main`}
-              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=latest`}
+              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=latest${tagName !== "" ? `&tagName=${tagName}` : ""}`}
               scroll={false}
             >
               최신순
             </Link>
             <Link
               className={`${order === "likes" && "text-main"} hover:text-main`}
-              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=likes`}
+              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=likes${tagName !== "" ? `&tagName=${tagName}` : ""}`}
               scroll={false}
             >
               좋아요순
             </Link>
             <Link
               className={`${order === "views" && "text-main"} hover:text-main`}
-              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=views`}
+              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=views${tagName !== "" ? `&tagName=${tagName}` : ""}`}
               scroll={false}
             >
               조회순

diff --git a/src/containers/informations/detail/InformationLikeCountContainer.tsx b/src/containers/informations/detail/InformationLikeCountContainer.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import InformationLikeCount from "@/components/informations/detail/InformationLikeCount";
+import useAuthStore from "@/store/authStore";
 import useInformationLikeStore from "@/store/informationLikeStore";
 import { useEffect, useState } from "react";
 
@@ -15,8 +16,7 @@ const InformationLikeCountContainer = ({
   likeCount,
   isLike,
 }: Props) => {
-  // const [likes, setLikes] = useState<number>(likeCount);
-  // const [isLiked, setIsLiked] = useState<boolean>(isLike);
+  const userId = useAuthStore().id;
   const informationLikeStore = useInformationLikeStore();
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -81,6 +81,7 @@ const InformationLikeCountContainer = ({
 
   return (
     <InformationLikeCount
+      clickable={userId > 0}
       loading={loading}
       likeCount={informationLikeStore.likeCount}
       isLiked={informationLikeStore.isLiked}

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

diff --git a/src/containers/informations/list/InformationPaginationContainer.tsx b/src/containers/informations/list/InformationPaginationContainer.tsx
@@ -21,6 +21,7 @@ const InformationPaginationContainer = ({ currentPage, totalPages }: Props) => {
       childCategoryId={searchParams.get("childCategoryId")}
       place={searchParams.get("place")}
       order={searchParams.get("order")}
+      tagName={searchParams.get("tagName")}
     />
   );
 };