diff --git a/README.md b/README.md index 7d9dab60..ffb81e34 100644 --- a/README.md +++ b/README.md @@ -45,24 +45,24 @@ - - - - - - @@ -85,7 +85,36 @@
## 주요 화면 +- 회원가입 +![회원가입](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) -## 프로젝트 회고 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 5ecaa0a2..00000000 --- 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 e204ff71..124c1961 100644 --- a/front/src/app/gatherings/[id]/detail/page.tsx +++ b/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 ( -
-
- - -
+
+ + + +
); } diff --git a/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx b/front/src/app/gatherings/components/detail/ActionBtnGroup.tsx index 8994aa8a..921986f5 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(); @@ -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/GatherInfo.tsx b/front/src/app/gatherings/components/detail/GatherInfo.tsx new file mode 100644 index 00000000..d68c118a --- /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/CommentsCard.tsx b/front/src/app/gatherings/components/detail/comments-section/CommentsCard.tsx index 3e9c10d7..a7576b85 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 50d5e627..069bbb7e 100644 --- a/front/src/app/gatherings/components/detail/comments-section/CommentsSection.tsx +++ b/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 ( -
+

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

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

아직 리뷰가 없어요

-
+ + )} + {totalPages > 1 && ( +
+ +
)} - + ); } 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 69% 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 d15257af..0ce0070a 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,31 +8,32 @@ interface GatheringInfo { pageId: number; } -export default function GatheringInfo({ +export default function DetailInfo({ dateInfo, titleInfo, locationInfo, pageId, }: GatheringInfo) { + console.log(dateInfo); return ( -
-
+
+
-
-
+ +

{titleInfo || ""} -

+
{locationInfo || ""}
-
+
-
+ + ); } 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 f8cace19..2a9897e2 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 a521520d..54f0c323 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({ @@ -19,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], @@ -88,3 +103,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 }), + }); +}; diff --git a/front/src/libs/gatherDetail.ts b/front/src/libs/gatherDetail.ts index 226e4ebe..d40ac120 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 f85b66ae..e341206d 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; }
이미지
김유현
+		이미지
김유현
프론트엔드 		이미지
김서영
+		이미지
김서영
프론트엔드 		이미지
이은혁
+		이미지
이은혁
프론트엔드
이미지
최준엽
+		이미지
최준엽
프론트엔드 		이미지
황호선
+		이미지
황호선
프론트엔드 		이미지
송지은
+		이미지
송지은
디자이너