Feat: 댓글 수정사항 반영

README.md

@@ -45,24 +45,24 @@
 
 <table>
 <tr>
-<td align="center"><img src="" width="" height="" alt="이미지"><br /><b><a href="https://github.com/SeanKim05">김유현</a></b><br />
+<td align="center"><img src="https://github.com/user-attachments/assets/730671d2-8561-4571-b74e-7ad9a9a7f7c8" width="160" height="200" alt="이미지"><br /><b><a href="https://github.com/SeanKim05">김유현</a></b><br />
 <sub>프론트엔드</sub>
 </td>
-<td align="center"><img src="" width="" height="" alt="이미지"><br /><b><a href="https://github.com/srp0114">김서영</a></b><br />
+<td align="center"><img src="https://github.com/user-attachments/assets/d815e712-dc59-4a72-bd93-165bbec2d237" width="160" height="200"  alt="이미지"><br /><b><a href="https://github.com/srp0114">김서영</a></b><br />
 <sub>프론트엔드</sub>
 </td>
-<td align="center"><img src="https://github.com/user-attachments/assets/0df18a1d-e2ca-4331-b5d7-e2cfc7725b25" width="" height="" alt="이미지"><br /><b><a href="https://github.com/itmakesmesoft">이은혁</a></b><br />
+<td align="center"><img src="https://github.com/user-attachments/assets/d9f8f9d9-637c-41d4-8ece-1c42c8eae169" width="160" height="200"  alt="이미지"><br /><b><a href="https://github.com/itmakesmesoft">이은혁</a></b><br />
 <sub>프론트엔드</sub>
 </td>
 </tr>
 <tr>
-<td align="center"><img src="" width="" height="" alt="이미지"><br /><b><a href="https://github.com/yup299">최준엽</a></b><br />
+<td align="center"><img src="https://github.com/user-attachments/assets/2eb595f9-d658-48ae-8dbc-b9dfdedf78e0" width="160" height="200"  alt="이미지"><br /><b><a href="https://github.com/yup299">최준엽</a></b><br />
 <sub>프론트엔드</sub>
 </td>
-<td align="center"><img src="" width="" height="" alt="이미지"><br /><b><a href="https://github.com/HOSEONH">황호선</a></b><br />
+<td align="center"><img src="https://github.com/user-attachments/assets/4c03efd4-ff22-4666-a775-7595c9f5aa22" width="160" height="200"  alt="이미지"><br /><b><a href="https://github.com/HOSEONH">황호선</a></b><br />
 <sub>프론트엔드</sub>
 </td>
-<td align="center"><img src="" width="" height="" alt="이미지"><br /><b>송지은</b><br />
+<td align="center"><img src="https://github.com/user-attachments/assets/3b88658b-a742-4d8b-863f-67f07f17c66a" width="160" height="200"  alt="이미지"><br /><b><a href="https://www.linkedin.com/in/jieun-song-b6951a219">송지은</a></b><br />
 <sub>디자이너</sub>
 </td>
 </tr>
@@ -85,7 +85,36 @@
 <br/>
 
 ## 주요 화면
+- 회원가입
+![회원가입](https://github.com/user-attachments/assets/85a3f759-7819-4848-9cda-e0d33d28324c)
 
-## 트러블슈팅
+- 로그인
+![로그인](https://github.com/user-attachments/assets/d5caed2d-a6f7-4244-b5b0-98f1fd8b19bd)
+
+- 모임 찾기
+![모임](https://github.com/user-attachments/assets/49b1c919-90f2-4a70-b4ae-fce9d02c3454)
+
+
+- 모임 필터링
+![모임 필터링](https://github.com/user-attachments/assets/a0813d70-f272-44cd-b0aa-2c9e3dae43ed)
+
+
+- 모임 찜하기
+![찜한모임](https://github.com/user-attachments/assets/971d88b9-9b9c-4ae7-9940-48403f7f006e)
+
+
+- 모임 생성
+![모임생성](https://github.com/user-attachments/assets/69ae00e8-00ed-4422-b8dc-583cf2a2e1b1)
+
+
+- 참여하기
+![모임 참여](https://github.com/user-attachments/assets/21d3f70f-9cc9-487d-89aa-2e052740a5ad)
+
+
+- 예약 취소
+![예약취소](https://github.com/user-attachments/assets/91700916-f608-4073-9074-b9f1cf041489)
+
+
+- 회원정보 수정
+![회원정보 수정](https://github.com/user-attachments/assets/009a90bd-09c7-4745-906a-246fc5008266)
 
-## 프로젝트 회고

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>
   );
 }