From 0937708f37f6d7279ca2a19cfbd9a318b8474e74 Mon Sep 17 00:00:00 2001 From: Daniel LEE <88377495+itmakesmesoft@users.noreply.github.com> Date: Sat, 19 Oct 2024 21:34:37 +0900 Subject: [PATCH 1/9] Update README.md --- README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 7d9dab6..a0b9e86 100644 --- a/README.md +++ b/README.md @@ -45,24 +45,24 @@ - - - - - - From d6f0eaaae0fb640d96d069e3aa53d86e4671853c Mon Sep 17 00:00:00 2001 From: Daniel LEE <88377495+itmakesmesoft@users.noreply.github.com> Date: Sat, 19 Oct 2024 21:42:19 +0900 Subject: [PATCH 2/9] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a0b9e86..c15c1e8 100644 --- a/README.md +++ b/README.md @@ -51,7 +51,7 @@ - @@ -62,7 +62,7 @@ - From 733dae56cf38d54d7f0efd799e3c610a5f8d2254 Mon Sep 17 00:00:00 2001 From: Daniel LEE <88377495+itmakesmesoft@users.noreply.github.com> Date: Sat, 19 Oct 2024 21:43:48 +0900 Subject: [PATCH 3/9] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index c15c1e8..80c331c 100644 --- a/README.md +++ b/README.md @@ -62,7 +62,7 @@ - From d1444fd02a14355affc505f05c941925eaa2ca64 Mon Sep 17 00:00:00 2001 From: Daniel LEE <88377495+itmakesmesoft@users.noreply.github.com> Date: Mon, 21 Oct 2024 09:32:58 +0900 Subject: [PATCH 4/9] Update README.md --- README.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/README.md b/README.md index 80c331c..2f1ca4c 100644 --- a/README.md +++ b/README.md @@ -85,7 +85,45 @@
## 주요 화면 +- 회원가입 +![회원가입](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) + + ## 트러블슈팅 ## 프로젝트 회고 +- 은혁 + 프로젝트 중간에 갑작스러운 팀원 이탈과 프로젝트 방향 수정 등 우여곡절이 많은 프로젝트였다. 남은 2주동안 프로젝트를 완성시킬 수 있을까 하는 생각도 들었지만, 철저한 분업과 팀워크를 통해 프로젝트를 완성시킬 수 있었던 것 같다. + 비록 이번 프로젝트를 시작하면서 세웠던 소소한 목표인 '테스트 코드 작성하기'는 이루지 못했지만, 여러모로 시간관리와 의사소통의 중요성을 깨우치게 해준 프로젝트였어서 보람있었다. 정규 프로젝트 기간은 끝났지만, 앞으로 이 프로젝트를 리팩토링하면서 테스트 코드도 작성해볼 생각이다. + From e001f35107cd36357717c74afba35e1dc4af5161 Mon Sep 17 00:00:00 2001 From: Daniel LEE <88377495+itmakesmesoft@users.noreply.github.com> Date: Mon, 21 Oct 2024 13:39:06 +0900 Subject: [PATCH 5/9] Update README.md --- README.md | 9 --------- 1 file changed, 9 deletions(-) diff --git a/README.md b/README.md index 2f1ca4c..ffb81e3 100644 --- a/README.md +++ b/README.md @@ -118,12 +118,3 @@ - 회원정보 수정 ![회원정보 수정](https://github.com/user-attachments/assets/009a90bd-09c7-4745-906a-246fc5008266) - - -## 트러블슈팅 - -## 프로젝트 회고 -- 은혁 - 프로젝트 중간에 갑작스러운 팀원 이탈과 프로젝트 방향 수정 등 우여곡절이 많은 프로젝트였다. 남은 2주동안 프로젝트를 완성시킬 수 있을까 하는 생각도 들었지만, 철저한 분업과 팀워크를 통해 프로젝트를 완성시킬 수 있었던 것 같다. - 비록 이번 프로젝트를 시작하면서 세웠던 소소한 목표인 '테스트 코드 작성하기'는 이루지 못했지만, 여러모로 시간관리와 의사소통의 중요성을 깨우치게 해준 프로젝트였어서 보람있었다. 정규 프로젝트 기간은 끝났지만, 앞으로 이 프로젝트를 리팩토링하면서 테스트 코드도 작성해볼 생각이다. - From 1b3d402a142421f5f6a64a693f7c329fc46281e1 Mon Sep 17 00:00:00 2001 From: SeanKim05 Date: Sat, 11 Jan 2025 22:15:26 +0900 Subject: [PATCH 6/9] =?UTF-8?q?Fix:=20API=20=EB=B3=80=EA=B2=BD=EC=97=90=20?= =?UTF-8?q?=EB=94=B0=EB=A5=B8=20=EB=A6=AC=EB=B7=B0=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/app/gatherings/[id]/detail/page.tsx | 2 +- .../comments-section/CommentsSection.tsx | 31 ++++++++----------- front/src/libs/gatherDetail.ts | 24 +++++--------- front/src/types/gatherings.ts | 2 +- 4 files changed, 23 insertions(+), 36 deletions(-) diff --git a/front/src/app/gatherings/[id]/detail/page.tsx b/front/src/app/gatherings/[id]/detail/page.tsx index e204ff7..4b2d91d 100644 --- a/front/src/app/gatherings/[id]/detail/page.tsx +++ b/front/src/app/gatherings/[id]/detail/page.tsx @@ -5,7 +5,7 @@ import { Review } from "@/types/reviews"; export default async function Detail({ params }: { params: { id: number } }) { const { id } = params; - const initialReviews: Review[] = await getUserReviews({ + const initialReviews: { data: Review[] } = await getUserReviews({ pageId: id, offset: 0, limit: 4, diff --git a/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx b/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx index 50d5e62..bbe9c57 100644 --- a/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx +++ b/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx @@ -11,41 +11,36 @@ export default function CommentsSection({ initialReviews, }: { pageId: number; - initialReviews: Review[]; + initialReviews: { data: Review[] }; }) { - const [currentPage, setCurrentPage] = useState(1); - const reviewsPerPage = 4; + 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 totalReviews = reviewData?.totalItemCount; + const totalPages = reviewData?.totalPages; + const currentPage = reviewData?.currentPage; const handlePageChange = (page: number) => { - setCurrentPage(page); + setOffset((page - 1) * 4); }; + const reviewInpage = currentPage === 1 ? initialReviews : reviewData; + console.log(reviewInpage); return (

이용자들은 이 프로그램을 이렇게 느꼈어요!

- {currentReviews.length > 0 ? ( + {totalReviews > 0 ? ( <> -
- {currentReviews.map((review: Review) => ( +
+ {reviewInpage.data.map((review: Review) => ( ))}
diff --git a/front/src/libs/gatherDetail.ts b/front/src/libs/gatherDetail.ts index 226e4eb..d40ac12 100644 --- a/front/src/libs/gatherDetail.ts +++ b/front/src/libs/gatherDetail.ts @@ -44,20 +44,12 @@ export const getGatherJoined = async () => { }; export const getUserReviews = async ({ pageId, offset, limit }: UserRiveiw) => { - try { - const limitQuery = () => { - return limit !== 0 ? `&limit=${limit}` : ""; - }; - - const res = await axiosInstance.get( - `/reviews?gatheringId=${pageId}${limitQuery()}&offset=${offset}`, - ); - console.log( - `/reviews?gatheringId=${pageId}${limitQuery()}&offset=${offset}`, - ); - console.log(res?.data); - return res?.data; - } catch (error) { - console.error(error); - } + const limitQuery = () => { + return limit !== 0 ? `&limit=${limit}` : ""; + }; + + const res = await axiosInstance.get( + `/reviews?gatheringId=${pageId}${limitQuery()}&offset=${offset}`, + ); + return res?.data; }; diff --git a/front/src/types/gatherings.ts b/front/src/types/gatherings.ts index f85b66a..e341206 100644 --- a/front/src/types/gatherings.ts +++ b/front/src/types/gatherings.ts @@ -52,5 +52,5 @@ export interface ICreateGathering { export interface UserRiveiw { pageId: number; offset: number; - limit: number; + limit?: number; } From ffe6cb36bc8389fea878c88ffe70f9d5b4ada020 Mon Sep 17 00:00:00 2001 From: SeanKim05 Date: Sun, 12 Jan 2025 13:51:22 +0900 Subject: [PATCH 7/9] =?UTF-8?q?Feat:=20=EC=83=81=EC=84=B8=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=A6=AC=EB=B7=B0=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20hydration=20Boundary=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- front/src/app/gatherings/[id]/detail/page.tsx | 23 ++++++++++++------- .../comments-section/CommentsSection.tsx | 12 ++-------- front/src/hooks/queries/gatherDetailQuery.ts | 17 +++++++++++++- 3 files changed, 33 insertions(+), 19 deletions(-) diff --git a/front/src/app/gatherings/[id]/detail/page.tsx b/front/src/app/gatherings/[id]/detail/page.tsx index 4b2d91d..b18e3d5 100644 --- a/front/src/app/gatherings/[id]/detail/page.tsx +++ b/front/src/app/gatherings/[id]/detail/page.tsx @@ -1,21 +1,28 @@ -import { getUserReviews } from "@/libs/gatherDetail"; import CommentsSection from "../../components/detail/comments-section/CommentsSection"; import ClientGather from "./ClientGather"; -import { Review } from "@/types/reviews"; + +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: { data: Review[] } = await getUserReviews({ - pageId: id, - offset: 0, - limit: 4, - }); + + await prefetchGatherReview(queryClient, { pageId: id, offset: 0, limit: 4 }); + + const dehydratedState = dehydrate(queryClient); return (
- + + +
); diff --git a/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx b/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx index bbe9c57..2c344a1 100644 --- a/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx +++ b/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx @@ -6,13 +6,7 @@ import Pagination from "./Pagination"; import { Review } from "@/types/reviews"; import { useGatherReview } from "@/hooks/queries/gatherDetailQuery"; -export default function CommentsSection({ - pageId, - initialReviews, -}: { - pageId: number; - initialReviews: { data: Review[] }; -}) { +export default function CommentsSection({ pageId }: { pageId: number }) { const [offset, setOffset] = useState(0); const { data: reviewData = [] } = useGatherReview({ @@ -29,8 +23,6 @@ export default function CommentsSection({ setOffset((page - 1) * 4); }; - const reviewInpage = currentPage === 1 ? initialReviews : reviewData; - console.log(reviewInpage); return (

@@ -40,7 +32,7 @@ export default function CommentsSection({ {totalReviews > 0 ? ( <>
- {reviewInpage.data.map((review: Review) => ( + {reviewData.data.map((review: Review) => ( ))}
diff --git a/front/src/hooks/queries/gatherDetailQuery.ts b/front/src/hooks/queries/gatherDetailQuery.ts index a521520..cbe51b0 100644 --- a/front/src/hooks/queries/gatherDetailQuery.ts +++ b/front/src/hooks/queries/gatherDetailQuery.ts @@ -10,7 +10,12 @@ import { import useAuthStore from "@/stores/useAuthStore"; import { useToastStore } from "@/stores/useToastStore"; import { UserRiveiw } from "@/types/gatherings"; -import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"; +import { + QueryClient, + useMutation, + useQuery, + useQueryClient, +} from "@tanstack/react-query"; export const useGatherDeatilQuery = (gatherId: number) => { return useQuery({ @@ -88,3 +93,13 @@ export const useGatherReview = ({ pageId, offset, limit }: UserRiveiw) => { queryFn: () => getUserReviews({ pageId, offset, limit }), }); }; + +export const prefetchGatherReview = async ( + queryClient: QueryClient, + { pageId, offset, limit }: UserRiveiw, +) => { + await queryClient.prefetchQuery({ + queryKey: ["gatherReview", pageId, offset, limit], + queryFn: () => getUserReviews({ pageId, offset, limit }), + }); +}; From 2a4f2fb364eec1023e4951ab98b017429b9af180 Mon Sep 17 00:00:00 2001 From: SeanKim05 Date: Sun, 12 Jan 2025 14:30:02 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Fix:=20=EC=9D=BC=EB=B6=80=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=8B=9C=EB=A7=A8=ED=8B=B1=20?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../gatherings/[id]/detail/ClientGather.tsx | 4 +- front/src/app/gatherings/[id]/detail/page.tsx | 12 +++--- .../components/detail/ActionBtnGroup.tsx | 25 ++++++------ .../detail/comments-section/CommentsCard.tsx | 36 +++++++++--------- .../comments-section/CommentsSection.tsx | 38 +++++++++---------- .../gathering-section/GatehringSection.tsx | 2 +- .../gathering-section/GatheringInfo.tsx | 16 ++++---- 7 files changed, 63 insertions(+), 70 deletions(-) diff --git a/front/src/app/gatherings/[id]/detail/ClientGather.tsx b/front/src/app/gatherings/[id]/detail/ClientGather.tsx index 5ecaa0a..f6ccf5d 100644 --- a/front/src/app/gatherings/[id]/detail/ClientGather.tsx +++ b/front/src/app/gatherings/[id]/detail/ClientGather.tsx @@ -18,7 +18,7 @@ export default function ClientGather({ pageId }: { pageId: number }) { const isGatherLoading = isDetailLoading || participantLoading; return ( -
+
-
+ ); } diff --git a/front/src/app/gatherings/[id]/detail/page.tsx b/front/src/app/gatherings/[id]/detail/page.tsx index b18e3d5..9edd052 100644 --- a/front/src/app/gatherings/[id]/detail/page.tsx +++ b/front/src/app/gatherings/[id]/detail/page.tsx @@ -17,13 +17,11 @@ export default async function Detail({ params }: { params: { id: number } }) { const dehydratedState = dehydrate(queryClient); return ( -
-
- - - - -
+
+ + + +
); } diff --git a/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx b/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx index 8994aa8..3de70e9 100644 --- a/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx +++ b/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx @@ -111,27 +111,28 @@ export default function ActionBtnGroup({ } return ( -
-
-

+
+
더 건강한 나와 팀을 위한 프로그램 🏃‍️️ -

-
+ +
{isCreated ? ( "모임을 공유해서 더 많은 사람들이 참여할 수 있도록 독려해봐요" ) : ( -
-
국내 최고 웰니스 전문가와 프로그램을
-
통해 지친 몸과 마음을 회복해요
-
+

+ 국내 최고 웰니스 전문가와 프로그램을 + 통해 지친 몸과 마음을 회복해요 +

)} -
-
+ + +
{isCreated ? (
@@ -167,6 +168,6 @@ export default function ActionBtnGroup({ message="로그인이 필요해요" onConfirm={handleLoginRedirect} /> -
+ ); } diff --git a/front/src/app/gatherings/components/detail/comments-section/CommentsCard.tsx b/front/src/app/gatherings/components/detail/comments-section/CommentsCard.tsx index 3e9c10d..a7576b8 100644 --- a/front/src/app/gatherings/components/detail/comments-section/CommentsCard.tsx +++ b/front/src/app/gatherings/components/detail/comments-section/CommentsCard.tsx @@ -21,36 +21,34 @@ export default function CommentsCard({ }; return ( -
-
+
+
{renderHearts(singleReviewData.score)} -
-
{singleReviewData.comment}
-
-
+ +
+ {singleReviewData.comment} +
+
+ -
+ {singleReviewData.User.name} | - + -
-
- -
-
+ + + + ); } diff --git a/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx b/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx index 2c344a1..19b447c 100644 --- a/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx +++ b/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx @@ -14,44 +14,40 @@ export default function CommentsSection({ pageId }: { pageId: number }) { offset, limit: 4, }); - - const totalReviews = reviewData?.totalItemCount; - const totalPages = reviewData?.totalPages; - const currentPage = reviewData?.currentPage; + const { totalItemCount, totalPages, currentPage } = reviewData; const handlePageChange = (page: number) => { setOffset((page - 1) * 4); }; return ( -
+

이용자들은 이 프로그램을 이렇게 느꼈어요!

- {totalReviews > 0 ? ( + {totalItemCount > 0 ? ( <> -
+
{reviewData.data.map((review: Review) => ( ))} -
- - {totalPages > 1 && ( -
- -
- )} +
) : ( -
+

아직 리뷰가 없어요

-
+

+ )} + {totalPages > 1 && ( +
+ +
)} -
+ ); } diff --git a/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx b/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx index f8cace1..72d576b 100644 --- a/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx +++ b/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx @@ -26,7 +26,7 @@ export default function GatheringSection({ } return ( -
+
-
+
+
-
-
+ +

{titleInfo || ""} -

+
{locationInfo || ""}
-
+
- + +
); } From c03daebead80ac60078ebe67f9c1d1c1d733987f Mon Sep 17 00:00:00 2001 From: SeanKim05 Date: Sun, 12 Jan 2025 16:51:04 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Fix:=20=EC=83=81=EC=84=B8=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../gatherings/[id]/detail/ClientGather.tsx | 35 ----- front/src/app/gatherings/[id]/detail/page.tsx | 4 +- .../components/detail/ActionBtnGroup.tsx | 6 +- .../components/detail/GatherInfo.tsx | 21 +++ .../comments-section/CommentsSection.tsx | 1 - .../{GatheringInfo.tsx => DetailInfo.tsx} | 5 +- .../gathering-section/GatehringSection.tsx | 124 +++++++++--------- front/src/hooks/queries/gatherDetailQuery.ts | 10 ++ 8 files changed, 100 insertions(+), 106 deletions(-) delete mode 100644 front/src/app/gatherings/[id]/detail/ClientGather.tsx create mode 100644 front/src/app/gatherings/components/detail/GatherInfo.tsx rename front/src/app/gatherings/components/detail/gathering-section/{GatheringInfo.tsx => DetailInfo.tsx} (93%) diff --git a/front/src/app/gatherings/[id]/detail/ClientGather.tsx b/front/src/app/gatherings/[id]/detail/ClientGather.tsx deleted file mode 100644 index f6ccf5d..0000000 --- a/front/src/app/gatherings/[id]/detail/ClientGather.tsx +++ /dev/null @@ -1,35 +0,0 @@ -"use client"; - -import React from "react"; - -import GatehringSection from "../../components/detail/gathering-section/GatehringSection"; -import ActionBtnGroup from "../../components/detail/ActionBtnGroup"; -import { - useGatherDeatilQuery, - useGatherParticipants, -} from "@/hooks/queries/gatherDetailQuery"; - -export default function ClientGather({ pageId }: { pageId: number }) { - const { data: detailData = [], isLoading: isDetailLoading } = - useGatherDeatilQuery(pageId); - const { data: participantData = [], isLoading: participantLoading } = - useGatherParticipants(pageId, detailData?.participantCount); - - const isGatherLoading = isDetailLoading || participantLoading; - - return ( -
- - -
- ); -} diff --git a/front/src/app/gatherings/[id]/detail/page.tsx b/front/src/app/gatherings/[id]/detail/page.tsx index 9edd052..124c196 100644 --- a/front/src/app/gatherings/[id]/detail/page.tsx +++ b/front/src/app/gatherings/[id]/detail/page.tsx @@ -1,5 +1,5 @@ import CommentsSection from "../../components/detail/comments-section/CommentsSection"; -import ClientGather from "./ClientGather"; +import GatherInfo from "../../components/detail/GatherInfo"; import { HydrationBoundary, @@ -18,7 +18,7 @@ export default async function Detail({ params }: { params: { id: number } }) { return (
- + diff --git a/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx b/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx index 3de70e9..921986f 100644 --- a/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx +++ b/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(); diff --git a/front/src/app/gatherings/components/detail/GatherInfo.tsx b/front/src/app/gatherings/components/detail/GatherInfo.tsx new file mode 100644 index 0000000..d68c118 --- /dev/null +++ b/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 ( +
+ + + +
+ ); +} diff --git a/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx b/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx index 19b447c..069bbb7 100644 --- a/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx +++ b/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx @@ -19,7 +19,6 @@ export default function CommentsSection({ pageId }: { pageId: number }) { const handlePageChange = (page: number) => { setOffset((page - 1) * 4); }; - return (

diff --git a/front/src/app/gatherings/components/detail/gathering-section/GatheringInfo.tsx b/front/src/app/gatherings/components/detail/gathering-section/DetailInfo.tsx similarity index 93% rename from front/src/app/gatherings/components/detail/gathering-section/GatheringInfo.tsx rename to front/src/app/gatherings/components/detail/gathering-section/DetailInfo.tsx index ffc6a18..0ce0070 100644 --- a/front/src/app/gatherings/components/detail/gathering-section/GatheringInfo.tsx +++ b/front/src/app/gatherings/components/detail/gathering-section/DetailInfo.tsx @@ -1,8 +1,6 @@ import DateTag from "@/app/gatherings/components/DateTag"; import FavoriteButton from "@/app/gatherings/components/FavoriteButton"; -import React from "react"; - interface GatheringInfo { dateInfo: string; titleInfo: string; @@ -10,12 +8,13 @@ interface GatheringInfo { pageId: number; } -export default function GatheringInfo({ +export default function DetailInfo({ dateInfo, titleInfo, locationInfo, pageId, }: GatheringInfo) { + console.log(dateInfo); return (
diff --git a/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx b/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx index 72d576b..2a9897e 100644 --- a/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx +++ b/front/src/app/gatherings/components/detail/gathering-section/GatehringSection.tsx @@ -6,74 +6,74 @@ import { motion } from "framer-motion"; import UserAvatar from "./UserAvatar"; import ProgressBar from "@/app/gatherings/components/ProgressBar"; import DeadLineTag from "@/app/gatherings/components/DeadLineTag"; -import GatheringInfo from "./GatheringInfo"; -import GatheringSecSkeleton from "./GatheringSecSkeleton"; -import { GatheringsParticipants, IGatherings } from "@/types/gatherings"; +import DetailInfo from "./DetailInfo"; +// import GatheringSecSkeleton from "./GatheringSecSkeleton"; +import { + useGatherDeatilQuery, + useGatherParticipants, +} from "@/hooks/queries/gatherDetailQuery"; +import ActionBtnGroup from "../ActionBtnGroup"; -export default function GatheringSection({ - detailData, - participantData, - pageId, - isGatherLoading, -}: { - pageId: number; - detailData: IGatherings; - participantData: GatheringsParticipants[]; - isGatherLoading: boolean; -}) { - if (isGatherLoading) { - return ; - } +export default function GatheringSection({ pageId }: { pageId: number }) { + const { data: detailData = [], isLoading: isDetailLoading } = + useGatherDeatilQuery(pageId); + const { data: participantData = [], isLoading: participantLoading } = + useGatherParticipants(pageId, detailData?.participantCount); + console.log(detailData); return ( -
- - - - - - - - -
-
- +
+ + - + + +
+ -
-
최소인원 5명
-
최대인원 {detailData?.capacity}명
+ +
+
+ + +
+
최소인원 5명
+
최대인원 {detailData?.capacity}명
+
- -
+
+ + ); } diff --git a/front/src/hooks/queries/gatherDetailQuery.ts b/front/src/hooks/queries/gatherDetailQuery.ts index cbe51b0..54f0c32 100644 --- a/front/src/hooks/queries/gatherDetailQuery.ts +++ b/front/src/hooks/queries/gatherDetailQuery.ts @@ -24,6 +24,16 @@ export const useGatherDeatilQuery = (gatherId: number) => { }); }; +export const prefetchGatherDeatilQuery = async ( + queryClient: QueryClient, + gatherId: number, +) => { + await queryClient.prefetchQuery({ + queryKey: ["gatherDetail", gatherId], + queryFn: () => getGatherDetail(gatherId), + }); +}; + export const useGatherParticipants = (gatherId: number, limit: number) => { return useQuery({ queryKey: ["gatherParticipants", gatherId, limit],

이미지
김유현
+		이미지
김유현
프론트엔드 		이미지
김서영
+		이미지
김서영
프론트엔드 		이미지
이은혁
+		이미지
이은혁
프론트엔드
이미지
최준엽
+		이미지
최준엽
프론트엔드 		이미지
황호선
+		이미지
황호선
프론트엔드 		이미지
송지은
+		이미지
송지은
디자이너
이미지
김서영
프론트엔드 		이미지
이은혁
+		이미지
이은혁
프론트엔드
이미지
황호선
프론트엔드 		이미지
송지은
+		이미지
송지은
디자이너
이미지
황호선
프론트엔드 		이미지
송지은
+		이미지
송지은
디자이너