Merge pull request #371 from TripInfoWeb/dev_refactoring

Feat: 정보 페이지네이션에서 좋아요 기능 구현

src/components/common/InformationItem.tsx

@@ -3,6 +3,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { TiLocation } from "react-icons/ti";
 import { convertNumberToShortForm } from "@/utils/convertNumberToShortForm";
+import InformationLikeCountContainer from "@/containers/common/InformationLikeCountContainer";
 
 interface Props {
   informationId: number;
@@ -117,28 +118,11 @@ const InformationItem = ({
             </p>
           </div>
           <div className="flex flex-row items-center gap-3">
-            <div
-              className={`${isLike ? "text-[#F85E5E]" : "text-gray2"} flex flex-row items-center gap-[0.3125rem] text-xs`}
-            >
-              <div className="relative h-4 w-4 text-white">
-                {isLike ? (
-                  <Image
-                    src="/common/heart-active-icon.svg"
-                    alt="like-icon"
-                    fill={true}
-                    style={{ objectFit: "contain" }}
-                  />
-                ) : (
-                  <Image
-                    src="/common/heart-empty-icon.svg"
-                    alt="like-icon"
-                    fill={true}
-                    style={{ objectFit: "contain" }}
-                  />
-                )}
-              </div>
-              <p>{convertNumberToShortForm(likeCount)}</p>
-            </div>
+            <InformationLikeCountContainer
+              informationId={informationId}
+              likeCount={likeCount}
+              isLike={isLike}
+            />
             <div className="flex flex-row items-center gap-1 text-gray2">
               <Image
                 src="/common/eyes-icon.svg"

src/components/informations/list/InformationSearch.tsx

@@ -89,7 +89,7 @@ const InformationSearch = ({
         />
         <button
           className="absolute right-[0.375rem] top-[0.3125rem] flex h-[2.125rem] w-[2.125rem] items-center justify-center rounded-full bg-[#F2FAF7] hover:scale-110"
-          onClick={() => onSearchClick()}
+          type="submit"
         >
           <Image
             src="/common/search-icon.png"

src/containers/common/InformationLikeCountContainer.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import InformationLikeCount from "@/components/informations/detail/InformationLikeCount";
+import useAuthStore from "@/store/authStore";
+import { fetchWithAuth } from "@/utils/fetchWithAuth";
+import { useState } from "react";
+
+interface Props {
+  informationId: number;
+  likeCount: number;
+  isLike: boolean;
+}
+
+const InformationLikeCountContainer = ({
+  informationId,
+  likeCount,
+  isLike,
+}: Props) => {
+  const userId = useAuthStore().id;
+  const [isLiked, setIsLiked] = useState(isLike);
+  const [currentLikeCount, setCurrentLikeCount] = useState(likeCount);
+  const [loading, setLoading] = useState(false);
+
+  const onLikesClick = async () => {
+    if (loading) {
+      return;
+    }
+
+    setLoading(true);
+    const data = new URLSearchParams();
+    data.append("infoId", informationId.toString());
+
+    if (isLiked) {
+      setCurrentLikeCount(currentLikeCount - 1);
+      setIsLiked(false);
+
+      const response = await fetchWithAuth("/api/informations/great", {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body: data.toString(),
+        cache: "no-store",
+      });
+
+      if (!response.ok) {
+        setCurrentLikeCount(currentLikeCount + 1);
+        setIsLiked(true);
+        setLoading(false);
+        alert("좋아요 취소에 실패하였습니다.");
+        throw new Error(response.statusText);
+      }
+    } else {
+      setCurrentLikeCount(currentLikeCount + 1);
+      setIsLiked(true);
+
+      const response = await fetchWithAuth("/api/informations/great", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body: data.toString(),
+        cache: "no-store",
+      });
+
+      if (!response.ok) {
+        setCurrentLikeCount(currentLikeCount - 1);
+        setIsLiked(false);
+        setLoading(false);
+        alert("좋아요 등록에 실패하였습니다.");
+        throw new Error(response.statusText);
+      }
+    }
+
+    setLoading(false);
+  };
+
+  return (
+    <InformationLikeCount
+      clickable={userId > 0}
+      likeCount={currentLikeCount}
+      isLiked={isLiked}
+      onLikesClick={onLikesClick}
+    />
+  );
+};
+
+export default InformationLikeCountContainer;