Feature/detail page

front/src/app/gatherings/[id]/detail/page.tsx

@@ -1,22 +1,27 @@
-import { getUserReviews } from "@/libs/gatherDetail";
 import CommentsSection from "../../components/detail/comments-section/CommentsSection";
-import ClientGather from "./ClientGather";
-import { Review } from "@/types/reviews";
+import GatherInfo from "../../components/detail/GatherInfo";
+
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from "@tanstack/react-query";
+import { prefetchGatherReview } from "@/hooks/queries/gatherDetailQuery";
 
 export default async function Detail({ params }: { params: { id: number } }) {
+  const queryClient = new QueryClient();
   const { id } = params;
-  const initialReviews: Review[] = await getUserReviews({
-    pageId: id,
-    offset: 0,
-    limit: 4,
-  });
+
+  await prefetchGatherReview(queryClient, { pageId: id, offset: 0, limit: 4 });
+
+  const dehydratedState = dehydrate(queryClient);
 
   return (
-    <div className="min-h-screen-minus-nav bg-gray-100">
-      <div className="min-h-screen-minus-nav mx-auto container max-w-[1200px] px-6 md:px-[102px] pt-10 bg-white">
-        <ClientGather pageId={id} />
-        <CommentsSection pageId={id} initialReviews={initialReviews} />
-      </div>
+    <div className="min-h-screen-minus-nav mx-auto container max-w-[1200px] px-6 md:px-[102px] pt-10 bg-white">
+      <GatherInfo pageId={id} />
+      <HydrationBoundary state={dehydratedState}>
+        <CommentsSection pageId={id} />
+      </HydrationBoundary>
     </div>
   );
 }

front/src/app/gatherings/components/detail/ActionBtnGroup.tsx

@@ -11,17 +11,17 @@ import LoginAlertModal from "@/app/components/LoginAlertModal";
 import { useRouter } from "next/navigation";
 import useAuthStore from "@/stores/useAuthStore";
 import { useToastStore } from "@/stores/useToastStore";
-import { IGatherings } from "@/types/gatherings";
 import { isBefore } from "date-fns";
+import { IGatherings } from "@/types/gatherings";
 
 export default function ActionBtnGroup({
+  isGatherLoading,
   pageId,
   detailData,
-  isGatherLoading,
 }: {
   pageId: number;
-  detailData: IGatherings;
   isGatherLoading: boolean;
+  detailData: IGatherings;
 }) {
   const { createdBy, participantCount, capacity, registrationEnd } = detailData;
   const router = useRouter();
@@ -111,27 +111,28 @@ export default function ActionBtnGroup({
   }
 
   return (
-    <div
+    <aside
       className={`fixed bottom-0 left-0 w-full min-h-[84px] border-t-2 border-black bg-white z-10 transition-transform duration-500 ${
         isVisible ? "translate-y-0" : "translate-y-full"
       }`}
     >
       <div className="block md:flex items-center justify-between max-w-[996px] my-5 mx-auto h-full">
-        <div className="px-6">
-          <h3 className="font-semibold">
+        <dl className="px-6">
+          <dt className="font-semibold">
             더 건강한 나와 팀을 위한 프로그램 🏃‍️️
-          </h3>
-          <div className="text-[12px]">
+          </dt>
+          <dd className="text-[12px]">
             {isCreated ? (
               "모임을 공유해서 더 많은 사람들이 참여할 수 있도록 독려해봐요"
             ) : (
-              <div className="md:flex">
-                <div>국내 최고 웰니스 전문가와 프로그램을 </div>
-                <div>통해 지친 몸과 마음을 회복해요</div>
-              </div>
+              <p className="md:flex">
+                <span>국내 최고 웰니스 전문가와 프로그램을</span>
+                <span>통해 지친 몸과 마음을 회복해요</span>
+              </p>
             )}
-          </div>
-        </div>
+          </dd>
+        </dl>
+
         <div className="px-4 md:mt-0 mt-[10px] font-semibold">
           {isCreated ? (
             <div className="flex">
@@ -167,6 +168,6 @@ export default function ActionBtnGroup({
         message="로그인이 필요해요"
         onConfirm={handleLoginRedirect}
       />
-    </div>
+    </aside>
   );
 }

front/src/app/gatherings/components/detail/GatherInfo.tsx

@@ -0,0 +1,21 @@
+import GatehringSection from "./gathering-section/GatehringSection";
+import {
+  HydrationBoundary,
+  QueryClient,
+  dehydrate,
+} from "@tanstack/react-query";
+import { prefetchGatherDeatilQuery } from "@/hooks/queries/gatherDetailQuery";
+
+export default async function GatherInfo({ pageId }: { pageId: number }) {
+  const queryClient = new QueryClient();
+  await prefetchGatherDeatilQuery(queryClient, pageId);
+  const dehydratedState = dehydrate(queryClient);
+
+  return (
+    <article>
+      <HydrationBoundary state={dehydratedState}>
+        <GatehringSection pageId={pageId} />
+      </HydrationBoundary>
+    </article>
+  );
+}

front/src/app/gatherings/components/detail/comments-section/CommentsCard.tsx

@@ -21,36 +21,34 @@ export default function CommentsCard({
   };
 
   return (
-    <div className="h-[102px] mt-4">
-      <div className="flex h-6 space-x-1">
+    <article className="h-[102px] mt-4">
+      <figure className="flex h-6 space-x-1">
         {renderHearts(singleReviewData.score)}
-      </div>
-      <div className="text-[14px] mt-[10px]">{singleReviewData.comment}</div>
-      <div className="flex items-center text-[12px] mt-2">
-        <div className="relative w-6 h-6">
+      </figure>
+      <section className="text-[14px] mt-[10px]">
+        {singleReviewData.comment}
+      </section>
+      <footer className="flex items-center text-[12px] mt-2">
+        <picture className="relative w-6 h-6">
           <Image
             src={userImgSrc}
             className="rounded-full"
             fill
             alt="profile img"
           />
-        </div>
+        </picture>
         <span className="pl-2">{singleReviewData.User.name}</span>
         <span className="w-1 px-[1px] ml-2 mr-3">|</span>
-        <span>
+        <time>
           {format(singleReviewData.createdAt, "MMMM d일", {
             locale: ko,
           }).replace("MMMM", "월")}
-        </span>
-      </div>
-      <div className="relative w-full h-[2px] my-4">
-        <Image
-          src="/images/dashed.svg"
-          alt="dashed Img"
-          fill
-          style={{ objectFit: "contain" }}
-        />
-      </div>
-    </div>
+        </time>
+      </footer>
+      <hr
+        className="border-t-2 border-dashed border-gray-300 my-4"
+        aria-hidden="true"
+      />
+    </article>
   );
 }

front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx

@@ -6,65 +6,47 @@ import Pagination from "./Pagination";
 import { Review } from "@/types/reviews";
 import { useGatherReview } from "@/hooks/queries/gatherDetailQuery";
 
-export default function CommentsSection({
-  pageId,
-  initialReviews,
-}: {
-  pageId: number;
-  initialReviews: Review[];
-}) {
-  const [currentPage, setCurrentPage] = useState(1);
-  const reviewsPerPage = 4;
+export default function CommentsSection({ pageId }: { pageId: number }) {
+  const [offset, setOffset] = useState(0);
 
   const { data: reviewData = [] } = useGatherReview({
     pageId,
-    offset: 0,
-    limit: 0,
+    offset,
+    limit: 4,
   });
-
-  const totalReviews = reviewData.length;
-  const totalPages = Math.ceil(totalReviews / reviewsPerPage);
-
-  const indexOfLastReview = currentPage * reviewsPerPage;
-  const indexOfFirstReview = indexOfLastReview - reviewsPerPage;
-  const currentReviews =
-    currentPage === 1
-      ? initialReviews
-      : reviewData.slice(indexOfFirstReview, indexOfLastReview);
+  const { totalItemCount, totalPages, currentPage } = reviewData;
 
   const handlePageChange = (page: number) => {
-    setCurrentPage(page);
+    setOffset((page - 1) * 4);
   };
-
   return (
-    <section className="flex flex-col sm:min-h-360px min-h-[487px] mt-6 p-6 border-t-2 border-[#E5E7EB]">
+    <article className="flex flex-col sm:min-h-360px min-h-[487px] mt-6 p-6 border-t-2 border-[#E5E7EB]">
       <h2 className="text-[18px] font-semibold mb-[16px]">
         이용자들은 이 프로그램을 이렇게 느꼈어요!
       </h2>
 
-      {currentReviews.length > 0 ? (
+      {totalItemCount > 0 ? (
         <>
-          <div className="mb-[86px]">
-            {currentReviews.map((review: Review) => (
+          <section className="min-h-[500px]">
+            {reviewData.data.map((review: Review) => (
               <CommentsCard key={review.id} singleReviewData={review} />
             ))}
-          </div>
-
-          {totalPages > 1 && (
-            <div className="mt-2 md:pb-[86px] pb-[134px]">
-              <Pagination
-                currentPage={currentPage}
-                totalPages={totalPages}
-                onPageChange={handlePageChange}
-              />
-            </div>
-          )}
+          </section>
         </>
       ) : (
-        <div className="flex items-center justify-center h-[487px] md:pb-[86px] pb-[134px]">
+        <section className="flex items-center justify-center h-[487px] md:pb-[86px] pb-[134px]">
           <p className="text-gray-500">아직 리뷰가 없어요</p>
-        </div>
+        </section>
+      )}
+      {totalPages > 1 && (
+        <section className="mt-2 md:pb-[86px] pb-[134px]">
+          <Pagination
+            currentPage={currentPage}
+            totalPages={totalPages}
+            onPageChange={handlePageChange}
+          />
+        </section>
       )}
-    </section>
+    </article>
   );
 }

front/src/app/gatherings/components/detail/gathering-section/GatheringInfo.tsx → front/src/app/gatherings/components/detail/gathering-section/DetailInfo.tsx

@@ -1,40 +1,39 @@
 import DateTag from "@/app/gatherings/components/DateTag";
 import FavoriteButton from "@/app/gatherings/components/FavoriteButton";
 
-import React from "react";
-
 interface GatheringInfo {
   dateInfo: string;
   titleInfo: string;
   locationInfo: string;
   pageId: number;
 }
 
-export default function GatheringInfo({
+export default function DetailInfo({
   dateInfo,
   titleInfo,
   locationInfo,
   pageId,
 }: GatheringInfo) {
+  console.log(dateInfo);
   return (
-    <div className="relative mx-[22px] mb-3">
-      <div className="absolute right-0">
+    <section className="relative mx-[22px] mb-3">
+      <figure className="absolute right-0">
         <FavoriteButton
           gatheringId={
             typeof pageId === "string" ? parseInt(pageId, 10) : pageId
           }
         />
-      </div>
-      <div className="flex items-center text-[18x] h-7 font-semibold">
+      </figure>
+      <h2 className="flex items-center text-[18x] h-7 font-semibold">
         {titleInfo || ""}
-      </div>
+      </h2>
       <div className="flex items-center text-[14x] h-5]">
         {locationInfo || ""}
       </div>
-      <div className="flex mt-3">
+      <label className="flex mt-3">
         <DateTag type="day" dateText={dateInfo} textColor="white" />
         <DateTag type="time" dateText={dateInfo} textColor="green" />
-      </div>
-    </div>
+      </label>
+    </section>
   );
 }