Merge pull request #286 from TripInfoWeb/dev_informations

Fix: 정보 페이지 오류 수정
TripInfoWeb · Sep 10, 2024 · 9a4bb35 · 9a4bb35
2 parents f64263d + f4e39d3
commit 9a4bb35
Show file tree

Hide file tree

Showing 15 changed files with 88 additions and 80 deletions.
diff --git a/src/components/common/InformationItem.tsx b/src/components/common/InformationItem.tsx
@@ -1,7 +1,7 @@
 import { CATEGORY_TEXT } from "@/constants/informations/category";
 import Image from "next/image";
 import Link from "next/link";
-import { FaRegHeart } from "react-icons/fa";
+import { FaHeart, FaRegHeart } from "react-icons/fa";
 import { TiLocation } from "react-icons/ti";
 import HashSpinner from "./HashSpinner";
 
@@ -10,6 +10,7 @@ interface Props {
   categoryId: number;
   userId?: number;
   isBookMark: boolean;
+  isLike: boolean;
   title: string;
   image: string;
   address: string;
@@ -24,6 +25,7 @@ const InformationItem = ({
   categoryId,
   userId = 0,
   isBookMark,
+  isLike,
   title,
   image,
   address,
@@ -48,11 +50,11 @@ const InformationItem = ({
   }
 
   return (
-    <div className="relative flex h-[19.6875rem] w-full flex-col justify-between rounded-2xl outline outline-1 outline-gray3 duration-300 hover:outline-main dark:outline-slate-400">
+    <div className="relative flex h-[19.6875rem] w-full flex-col justify-between rounded-2xl outline outline-1 outline-gray3 duration-300 hover:outline-main">
       <HashSpinner loading={loading} />
       <Link href={`/informations/${informationId}`} className="h-[12.6875rem]">
         <Image
-          className="-z-10 rounded-[0.875rem] dark:opacity-65"
+          className="-z-10 rounded-[0.875rem]"
           src={image || "/next.svg"}
           alt={"PostImage"}
           fill={true}
@@ -72,7 +74,7 @@ const InformationItem = ({
           )}
           {userId > 0 && (
             <button
-              className="relative h-7 w-5 cursor-pointer text-white hover:scale-110 dark:text-slate-200"
+              className="relative h-7 w-5 cursor-pointer text-white hover:scale-110"
               type="button"
               onClick={(e) => {
                 e.preventDefault();
@@ -92,24 +94,30 @@ const InformationItem = ({
           )}
         </div>
       </Link>
-      <div className="flex h-28 flex-col justify-between rounded-b-xl bg-white px-5 py-4 dark:bg-slate-800">
+      <div className="flex h-28 flex-col justify-between rounded-b-xl bg-white px-5 py-4">
         <Link
-          className="truncate-vertical-information-title p-1 font-bold hover:text-main dark:text-slate-200"
+          className="truncate-vertical-information-title p-1 font-bold hover:text-main"
           href={`/informations/${informationId}`}
         >
           {title}
         </Link>
         <div className="flex flex-row justify-between">
-          <div className="flex flex-row items-center gap-1 text-gray1 dark:text-slate-400">
+          <div className="flex flex-row items-center gap-1 text-gray1">
             <TiLocation />
             <p className="text-xs font-medium">{address}</p>
           </div>
           <div className="flex flex-row items-center gap-3">
-            <div className="flex flex-row items-center gap-1 text-gray2 dark:text-slate-400">
-              <FaRegHeart size={"0.8rem"} />
+            <div
+              className={`${isLike ? "text-[#F85E5E]" : "text-gray2"} flex flex-row items-center gap-1`}
+            >
+              {isLike ? (
+                <FaHeart size={"0.8rem"} />
+              ) : (
+                <FaRegHeart size={"0.8rem"} />
+              )}
               <p className="text-xs">{likeCount}</p>
             </div>
-            <div className="flex flex-row items-center gap-1 text-gray2 dark:text-slate-400">
+            <div className="flex flex-row items-center gap-1 text-gray2">
               <Image
                 src="/eyes-icon.svg"
                 alt="eyes-icon.svg"

diff --git a/src/components/home/BestInformationList.tsx b/src/components/home/BestInformationList.tsx
@@ -38,6 +38,7 @@ const BestInformationList = async () => {
           informationId={value.informationId}
           categoryId={Number(CATEGORY_TEXT[value.parentCategoryName])}
           isBookMark={value.isBookMark}
+          isLike={value.isLike}
           title={value.title}
           image={value.thumbNailImage}
           address={`${value.zoneCategoryParentName}, ${value.zoneCategoryChildName}`}

diff --git a/src/components/informations/detail/ImageList.tsx b/src/components/informations/detail/ImageList.tsx
@@ -64,7 +64,7 @@ const ImageList = ({
         {images.map((image, index) => (
           <div
             key={index}
-            className="relative h-[6.6875rem] w-[6.6875rem] rounded-lg border-[0.0625rem]"
+            className="relative min-h-[6.6875rem] min-w-[6.6875rem] rounded-lg border-[0.0625rem]"
             onClick={() => {
               setMainImageUrl(image.address);
             }}

diff --git a/src/components/informations/detail/InformationViewer.tsx b/src/components/informations/detail/InformationViewer.tsx
@@ -18,23 +18,21 @@ const InformationViewer = ({ informationId, data }: Props) => {
     <div className="w-full">
       <div className="flex flex-row items-center justify-between overflow-x-hidden max-[1024px]:flex-col">
         <div className="w-full pb-4 lg:hidden">
-          <h1 className="text-2xl font-bold dark:text-slate-200">
-            {data.title}
-          </h1>
+          <h1 className="break-words text-2xl font-bold">{data.title}</h1>
           <div className="flex flex-row items-end justify-between py-4">
             <div className="flex flex-row items-center gap-2">
               <Image
-                className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-[#F2FAF7] dark:bg-slate-200"
+                className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-[#F2FAF7]"
                 src={`${data.userImage}`}
                 alt="userImage"
                 width={48}
                 height={48}
               />
               <div className="space-y-1">
-                <p className="text-xs font-medium text-black dark:text-slate-400">
+                <p className="text-xs font-medium text-black">
                   {data.userPostingResponse.name}
                 </p>
-                <p className="text-xs text-gray1 dark:text-slate-400">
+                <p className="text-xs text-gray1">
                   {`${new Date(data.createdDate).toLocaleDateString("ko-KR")}`}
                 </p>
               </div>
@@ -45,7 +43,7 @@ const InformationViewer = ({ informationId, data }: Props) => {
                 likeCount={data.likeCount}
                 isLike={data.isLike}
               />
-              <div className="flex flex-row items-center gap-1 text-gray2 dark:text-slate-400">
+              <div className="flex flex-row items-center gap-1 text-gray2">
                 <LuEye />
                 <p className="text-xs">{data.viewCount}</p>
               </div>
@@ -57,23 +55,21 @@ const InformationViewer = ({ informationId, data }: Props) => {
         </div>
         <div className="flex h-[34.5rem] w-[29.375rem] flex-col overflow-y-auto px-[1.25rem] max-[1024px]:h-fit max-[1024px]:w-full max-[1024px]:px-0 max-[1024px]:pt-8">
           <div className="max-[1024px]:hidden">
-            <h1 className="text-2xl font-bold dark:text-slate-200">
-              {data.title}
-            </h1>
+            <h1 className="break-words text-2xl font-bold">{data.title}</h1>
             <div className="flex flex-row items-end justify-between py-4">
               <div className="flex flex-row items-center gap-2">
                 <Image
-                  className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-[#F2FAF7] dark:bg-slate-200"
+                  className="rounded-full border-[0.03125rem] border-[#B8EDD9] bg-[#F2FAF7]"
                   src={`${data.userImage}`}
                   alt="userImage"
                   width={48}
                   height={48}
                 />
                 <div className="space-y-1">
-                  <p className="text-xs font-medium text-black dark:text-slate-400">
+                  <p className="text-xs font-medium text-black">
                     {data.userPostingResponse.name}
                   </p>
-                  <p className="text-xs text-gray1 dark:text-slate-400">
+                  <p className="text-xs text-gray1">
                     {`${new Date(data.createdDate).toLocaleDateString("ko-KR")}`}
                   </p>
                 </div>
@@ -84,7 +80,7 @@ const InformationViewer = ({ informationId, data }: Props) => {
                   likeCount={data.likeCount}
                   isLike={data.isLike}
                 />
-                <div className="flex flex-row items-center gap-1 text-gray2 dark:text-slate-400">
+                <div className="flex flex-row items-center gap-1 text-gray2">
                   <LuEye />
                   <p className="text-xs">{data.viewCount}</p>
                 </div>
@@ -93,12 +89,10 @@ const InformationViewer = ({ informationId, data }: Props) => {
           </div>
           <div className="flex flex-row items-center gap-1 py-3">
             <TiLocation className="text-main" size={"1.1rem"} />
-            <p className="text-xs font-medium text-gray1 dark:text-slate-400">
-              {data.address}
-            </p>
+            <p className="text-xs font-medium text-gray1">{data.address}</p>
           </div>
           <p
-            className="py-4 font-medium text-gray1 dark:text-slate-400"
+            className="break-words py-4 font-medium text-gray1"
             dangerouslySetInnerHTML={{ __html: data.content }}
           />
           <div className="flex flex-row flex-wrap items-center gap-1 pb-8">
@@ -112,13 +106,13 @@ const InformationViewer = ({ informationId, data }: Props) => {
             ))}
           </div>
           <div className="flex flex-col gap-3 border-y-[0.0625rem] border-gray3 px-6 py-4">
-            <div className="text-bold text-lg font-bold dark:text-slate-200">
+            <div className="text-bold text-lg font-bold">
               생생한 혼플 <span className="text-main">TIP</span>
             </div>
             {data.tip.split(";").map((tip, index) => (
               <li
                 key={index}
-                className="ml-6 align-baseline font-medium text-gray1 marker:text-main dark:text-slate-400"
+                className="ml-6 align-baseline font-medium text-gray1 marker:text-main"
               >
                 {tip}
               </li>
@@ -139,10 +133,10 @@ const InformationViewer = ({ informationId, data }: Props) => {
         href={`https://map.kakao.com/link/map/${data.placeResponse.searchId.toString() !== "0" ? data.placeResponse.searchId : `${data.placeResponse.name},${data.placeResponse.yaxis},${data.placeResponse.xaxis}`}`}
         target="_blank"
       >
-        <h2 className="text-lg font-bold text-black dark:text-slate-200">
+        <h2 className="text-lg font-bold text-black">
           {data.placeResponse.name}
         </h2>
-        <div className="flex flex-row items-center gap-1 text-sm text-gray1 dark:text-slate-400">
+        <div className="flex flex-row items-center gap-1 text-sm text-gray1">
           <TiLocation />
           <p>{data.address}</p>
         </div>

diff --git a/src/components/informations/detail/RecommendationList.tsx b/src/components/informations/detail/RecommendationList.tsx
@@ -18,6 +18,7 @@ const RecommendationList = ({ data }: Props) => {
             informationId={index + 1}
             categoryId={0}
             isBookMark={value.isBookMark}
+            isLike={value.isLike}
             title={value.title}
             image={value.thumbNailImage}
             address={`${value.zoneCategoryParentName}, ${value.zoneCategoryChildName}`}

diff --git a/src/components/informations/list/InformationList.tsx b/src/components/informations/list/InformationList.tsx
@@ -20,7 +20,7 @@ async function getInformationList(
       headers: {
         Cookie: `${cookie?.name}=${cookie?.value}`,
       },
-      next: { revalidate: 60, tags: ["getInformationList"] },
+      cache: "no-store",
     },
   );
 
@@ -67,6 +67,7 @@ const InformationList = async ({
             informationId={value.informationId}
             categoryId={parentCategoryId}
             isBookMark={value.isBookMark}
+            isLike={value.isLike}
             title={value.title}
             image={value.thumbNailImage}
             address={

diff --git a/src/components/mypage/MyBookmarkList.tsx b/src/components/mypage/MyBookmarkList.tsx
@@ -38,6 +38,7 @@ const MyBookmarkList = ({ data }: MyBookmarkListProps) => {
               informationId={post.id}
               categoryId={1}
               isBookMark={true}
+              isLike={false} // TODO: 수정 필요
               title={post.title}
               image={post.image}
               address="테스트 주소"

diff --git a/src/components/mypage/MyPageInformationList.tsx b/src/components/mypage/MyPageInformationList.tsx
@@ -29,27 +29,28 @@ const MyPageInformationList = ({
   return (
     <div className="flex w-full flex-col">
       <div className="mt-6 grid grid-cols-3 gap-5 max-[1024px]:grid-cols-2 max-[744px]:grid-cols-1">
-      {isLoading
-        ? Array.from({ length: 6 }).map((_, index) => (
-            <InformationItemSkeleton key={index} />
-          ))
-        : elements.map((item) => (
-            <InformationItem
-              key={item.informationId}
-              informationId={item.informationId}
-              categoryId={1}
-              isBookMark={item.isBookMark}
-              title={item.title}
-              image={item.thumbNailImage}
-              address={item.zoneCategoryChildName}
-              likeCount={item.likeCount}
-              viewCount={item.viewCount}
-              loading={false}
-              userId={authStore.id}
-              onBookMarkClick={() => onBookMarkClick(item.informationId)}
-            />
-          ))}
-    </div>
+        {isLoading
+          ? Array.from({ length: 6 }).map((_, index) => (
+              <InformationItemSkeleton key={index} />
+            ))
+          : elements.map((item) => (
+              <InformationItem
+                key={item.informationId}
+                informationId={item.informationId}
+                categoryId={1}
+                isBookMark={item.isBookMark}
+                isLike={false} // TODO
+                title={item.title}
+                image={item.thumbNailImage}
+                address={item.zoneCategoryChildName}
+                likeCount={item.likeCount}
+                viewCount={item.viewCount}
+                loading={false}
+                userId={authStore.id}
+                onBookMarkClick={() => onBookMarkClick(item.informationId)}
+              />
+            ))}
+      </div>
     </div>
   );
 };

diff --git a/src/containers/common/InformationItemContainer.tsx b/src/containers/common/InformationItemContainer.tsx
@@ -2,12 +2,14 @@
 
 import InformationItem from "@/components/common/InformationItem";
 import useAuthStore from "@/store/authStore";
-import { useEffect, useState } from "react";
+import { fetchWithAuth } from "@/utils/fetchWithAuth";
+import { useState } from "react";
 
 interface Props {
   informationId: number;
   categoryId: number;
   isBookMark: boolean;
+  isLike: boolean;
   title: string;
   image: string;
   address: string;
@@ -19,6 +21,7 @@ const InformationItemContainer = ({
   informationId,
   categoryId,
   isBookMark,
+  isLike,
   title,
   image,
   address,
@@ -36,7 +39,7 @@ const InformationItemContainer = ({
     data.append("infoId", informationId.toString());
 
     if (isBookMarked) {
-      const response = await fetch("/api/bookmark/information", {
+      const response = await fetchWithAuth("/api/bookmark/information", {
         method: "DELETE",
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
@@ -53,7 +56,7 @@ const InformationItemContainer = ({
 
       setIsBookMarked(false);
     } else {
-      const response = await fetch("/api/bookmark/information", {
+      const response = await fetchWithAuth("/api/bookmark/information", {
         method: "POST",
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
@@ -80,6 +83,7 @@ const InformationItemContainer = ({
       categoryId={categoryId}
       userId={userId}
       isBookMark={isBookMarked}
+      isLike={isLike}
       title={title}
       image={image}
       address={address}

diff --git a/src/containers/informations/detail/InformationLikeCountContainer.tsx b/src/containers/informations/detail/InformationLikeCountContainer.tsx
@@ -3,6 +3,7 @@
 import InformationLikeCount from "@/components/informations/detail/InformationLikeCount";
 import useAuthStore from "@/store/authStore";
 import useInformationLikeStore from "@/store/informationLikeStore";
+import { fetchWithAuth } from "@/utils/fetchWithAuth";
 import { useEffect, useState } from "react";
 
 interface Props {
@@ -27,7 +28,7 @@ const InformationLikeCountContainer = ({
     data.append("infoId", informationId.toString());
 
     if (informationLikeStore.isLiked) {
-      const response = await fetch("/api/informations/great", {
+      const response = await fetchWithAuth("/api/informations/great", {
         method: "DELETE",
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",
@@ -47,7 +48,7 @@ const InformationLikeCountContainer = ({
         isLiked: false,
       });
     } else {
-      const response = await fetch("/api/informations/great", {
+      const response = await fetchWithAuth("/api/informations/great", {
         method: "POST",
         headers: {
           "Content-Type": "application/x-www-form-urlencoded",

diff --git a/src/containers/informations/write/InformationEditorContainer.tsx b/src/containers/informations/write/InformationEditorContainer.tsx
@@ -44,7 +44,7 @@ const InformationEditorContainer = () => {
       informationContent: "",
       contentLength: 0,
       hashtags: Array<string>(0),
-      tips: ["팁"],
+      tips: [""],
     },
     mode: "onChange",
   });