Feat/detail page

src/_apis/detail/get-crew-detail.ts

@@ -0,0 +1,33 @@
+import { fetchApi } from '@/src/utils/api';
+
+type CrewMember = {
+  id: number;
+  nickname: string;
+  profileImageUrl?: string;
+};
+
+type CrewDetail = {
+  id: number;
+  title: string;
+  mainLocation: string;
+  subLocation: string;
+  participantCount: number;
+  totalCount: number;
+  isConfirmed: boolean;
+  imageUrl: string;
+  totalGatheringCount: number;
+  CrewMembers: CrewMember[];
+  isCaptain: boolean;
+  isCrew: boolean;
+};
+
+export async function getCrewDetail(): Promise<CrewDetail> {
+  const response = await fetchApi<CrewDetail>('/api/mock-api/detail?type=crewDetail', {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  return response;
+}

src/_apis/detail/get-gathering-list.ts

@@ -0,0 +1,29 @@
+import { fetchApi } from '@/src/utils/api';
+
+type GatheringList = {
+  id: number;
+  title: string;
+  dateTime: string;
+  location: string;
+  currentCount: number;
+  totalCount: number;
+  imageUrl: string;
+  isLiked: boolean;
+};
+
+export async function getGatheringList(): Promise<GatheringList[]> {
+  const response = await fetchApi<GatheringList[]>('/api/mock-api/detail?type=gatherings', {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+  });
+
+  return response.map((item) => ({
+    ...item,
+    dateTime: item.dateTime,
+    currentCount: item.currentCount,
+    totalCount: item.totalCount,
+    isLiked: item.isLiked ?? false,
+  }));
+}

src/_apis/detail/get-review-list.ts

@@ -0,0 +1,62 @@
+import { CrewReview } from '@/src/types/review';
+
+export interface ReviewRateInfo {
+  totalRate: number;
+  averageRate: number;
+  ratingsData: Array<{ score: number; count: number }>;
+}
+
+export interface ReviewListData {
+  info: ReviewRateInfo;
+  data: CrewReview[];
+  totalItems: number;
+  totalPages: number;
+  currentPage: number;
+}
+
+export async function getReviewList(page: number, limit: number): Promise<ReviewListData> {
+  const response = await fetch(`/api/mock-api/detail?type=reviews`);
+  const reviewData: CrewReview[] = await response.json(); // 리뷰 데이터를 배열로 바로 받음
+
+  // 데이터가 비어 있는 경우 기본값 반환
+  if (!reviewData || reviewData.length === 0) {
+    return {
+      info: {
+        totalRate: 0,
+        averageRate: 0,
+        ratingsData: [5, 4, 3, 2, 1].map((score) => ({ score, count: 0 })),
+      },
+      data: [],
+      totalItems: 0,
+      totalPages: 0,
+      currentPage: page,
+    };
+  }
+
+  // 페이지네이션 적용
+  const startIndex = (page - 1) * limit;
+  const paginatedData = reviewData.slice(startIndex, startIndex + limit);
+
+  // 통계 정보 생성
+  const totalRate = reviewData.reduce((sum, review) => sum + review.rate, 0);
+  const averageRate = reviewData.length ? totalRate / reviewData.length : 0;
+
+  const ratingsData = [5, 4, 3, 2, 1].map((score) => ({
+    score,
+    count: reviewData.filter((review) => review.rate === score).length,
+  }));
+
+  const info: ReviewRateInfo = {
+    totalRate,
+    averageRate,
+    ratingsData,
+  };
+
+  return {
+    info,
+    data: paginatedData,
+    totalItems: reviewData.length,
+    totalPages: Math.ceil(reviewData.length / limit),
+    currentPage: page,
+  };
+}

src/app/(crew)/api-test/page.tsx

@@ -5,7 +5,7 @@ import { useQuery } from '@tanstack/react-query';
 import { getUsersQuery } from '@/src/_queries/useGetUserQuery';
 import { ApiError } from '@/src/utils/api';
 
-// react-query 예시
+// FIX: react-query로 임시로 작성된 코드입니다. 추후 삭제
 
 export default function TestPage() {
   const { data: users, error, isLoading, isError } = useQuery(getUsersQuery());

src/app/(crew)/crew/detail/[id]/_components/crew-review-list.stories.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import ClientProvider from '@/src/components/client-provider';
+import { CrewReview } from '@/src/types/review';
+import { CrewReviewData } from '@/src/mock/review-data';
+import CrewReviewList from './crew-review-list';
+
+const meta: Meta<typeof CrewReviewList> = {
+  title: 'components/CrewReviewList',
+  component: CrewReviewList,
+  parameters: {
+    layout: 'fulled',
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <ClientProvider>
+        <Story />
+      </ClientProvider>
+    ),
+  ],
+} satisfies Meta<typeof CrewReviewList>;
+
+export default meta;
+type Story = StoryObj<typeof CrewReviewList>;
+
+function RenderReviewPagination() {
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 6;
+
+  // 페이지에 맞는 리뷰 데이터 가져오기
+  const totalItems = CrewReviewData.data.length;
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  const currentReviews = CrewReviewData.data.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage,
+  );
+
+  return (
+    <CrewReviewList
+      reviews={currentReviews as CrewReview[]}
+      totalPages={totalPages}
+      currentPage={currentPage}
+      onPageChange={setCurrentPage}
+    />
+  );
+}
+
+export const Default: Story = {
+  render: () => <RenderReviewPagination />,
+};

src/app/(crew)/crew/detail/[id]/_components/crew-review-list.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+import { Pagination } from '@mantine/core';
+import ReviewCard from '@/src/components/common/review-list/review-card';
+import { CrewReview } from '@/src/types/review';
+
+interface CrewReviewListProps {
+  reviews: CrewReview[];
+  totalPages: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+}
+
+export default function CrewReviewList({
+  reviews,
+  totalPages,
+  currentPage,
+  onPageChange,
+}: CrewReviewListProps) {
+  return (
+    <div className="flex flex-col justify-between p-6">
+      <div className="mb-6 grid flex-grow gap-4">
+        {reviews.map((review) => (
+          <ReviewCard
+            key={review.id}
+            rate={review.rate}
+            comment={review.comment}
+            createdAt={review.createdAt}
+            crewId={review.crewId}
+            reviewer={review.reviewer}
+          />
+        ))}
+      </div>
+      <div className="mt-6 flex justify-center">
+        <Pagination
+          total={totalPages}
+          value={currentPage}
+          onChange={onPageChange}
+          styles={{
+            control: {
+              border: 'none',
+              backgroundColor: 'transparent',
+              '&[data-active]': {
+                backgroundColor: 'transparent',
+                fontWeight: 'var(--pagination-active-font-weight)',
+                color: 'var(--pagination-active-color)',
+                boxShadow: 'none',
+              },
+              '&:hover': {
+                backgroundColor: 'transparent',
+              },
+            },
+            root: {
+              '--pagination-active-color': '#3388FF',
+              '--pagination-active-font-weight': 'bold',
+            },
+          }}
+          size="sm"
+        />
+      </div>
+    </div>
+  );
+}

src/app/(crew)/crew/detail/[id]/_components/rating-display.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Meta, StoryFn } from '@storybook/react';
+import RatingDisplay, { ReviewRateInfo } from './rating-display';
+
+export default {
+  title: 'Components/RatingDisplay',
+  component: RatingDisplay,
+  tags: ['autodocs'],
+  argTypes: {
+    totalRate: { control: 'number', description: '총 평가 개수' },
+    averageRate: { control: 'number', description: '평균 평점' },
+    ratingsData: { control: 'object', description: '각 점수별 평가 개수' },
+  },
+} as Meta<typeof RatingDisplay>;
+
+interface RatingDisplayStoryProps {
+  totalRate: number;
+  averageRate: number;
+  ratingsData: { score: number; count: number }[];
+}
+
+// Template을 함수 선언으로 변경하고 StoryFn 타입을 사용
+const Template: StoryFn<RatingDisplayStoryProps> = function Template(args) {
+  const { totalRate, averageRate, ratingsData } = args;
+  const reviewRateInfo: ReviewRateInfo = { totalRate, averageRate, ratingsData };
+  return <RatingDisplay reviewRateInfo={reviewRateInfo} />;
+};
+
+// 스토리 정의
+export const Default = Template.bind({});
+Default.args = {
+  totalRate: 24,
+  averageRate: 3.5,
+  ratingsData: [
+    { score: 5, count: 6 },
+    { score: 4, count: 9 },
+    { score: 3, count: 4 },
+    { score: 2, count: 3 },
+    { score: 1, count: 2 },
+  ],
+};
+
+export const HighRating = Template.bind({});
+HighRating.args = {
+  totalRate: 15,
+  averageRate: 4.7,
+  ratingsData: [
+    { score: 5, count: 10 },
+    { score: 4, count: 3 },
+    { score: 3, count: 1 },
+    { score: 2, count: 1 },
+    { score: 1, count: 0 },
+  ],
+};
+
+export const LowRating = Template.bind({});
+LowRating.args = {
+  totalRate: 20,
+  averageRate: 1.8,
+  ratingsData: [
+    { score: 5, count: 1 },
+    { score: 4, count: 1 },
+    { score: 3, count: 2 },
+    { score: 2, count: 5 },
+    { score: 1, count: 11 },
+  ],
+};