[S3] 포트폴리오 페이지 진행중

src/hooks/useGetStudios.ts

@@ -1,7 +1,7 @@
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
-import { IStudioRes } from 'types/types';
+import { IStudioItem, IStudioRes } from 'types/types';
 
-const fetchStudios = async (pageNum: number, mode: 'filter' | 'search/result', params: string): Promise<IStudioRes> => {
+const fetchStudios = async (pageNum: number, mode: 'filter' | 'search/result', params: string): Promise<IStudioRes<IStudioItem>> => {
   const response = await fetch(
     `${import.meta.env.VITE_TOUCHEESE_API}/studio${mode ? `/${mode}` : ''}?size=${import.meta.env.VITE_TOUCHEESE_STUDIO_LIMIT}${pageNum > 0 ? `&page=${pageNum}` : ''}${params && `&${params}`}`,
     {
@@ -19,8 +19,8 @@ const fetchStudios = async (pageNum: number, mode: 'filter' | 'search/result', p
   return response.json();
 };
 
-export const useGetStudios = (pageNum: number, mode: 'filter' | 'search/result', params: string): UseQueryResult<IStudioRes> => {
-  return useQuery<IStudioRes>({
+export const useGetStudios = (pageNum: number, mode: 'filter' | 'search/result', params: string): UseQueryResult<IStudioRes<IStudioItem>> => {
+  return useQuery<IStudioRes<IStudioItem>>({
     queryKey: ['studios', { params, mode, pageNum }],
     queryFn: () => fetchStudios(pageNum, mode, params),
     staleTime: 1000 * 60 * 1,

src/pages/Studio/StudioPortfolio/StudioPortfolio.tsx

@@ -1,30 +1,76 @@
-import { useGetStudios } from '@hooks/useGetStudios';
-import { useSearchParams } from 'react-router-dom';
+import Button from '@components/Button/Button';
+import Header from '@components/Header/Header';
 import MasonryList from '@components/Masonry/Masonry';
+import EmptyMessage from '@components/Message/EmptyMessage';
+import StudioNavigator from '@components/Navigator/StudioNavigator';
+import styled from '@emotion/styled';
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { IPortfolio } from 'types/types';
 
 const StudioPortfolio = () => {
-  const [searchParams] = useSearchParams();
-
-  // 포트폴리오 api 개발 전이라 스튜디오 리스트에서 이미지 추출하여 예시 작성
-  const { data } = useGetStudios(1, 'filter', searchParams + '');
-  const datas = data?.content[12].portfolios;
+  const [data, setData] = useState<IPortfolio[]>([]);
+  const [studioName, setStudioName] = useState('');
+  const { _id } = useParams() as { _id: string };
   const handleClick = () => {
     console.log('click');
   };
 
+  const fetchPortfolio = async () => {
+    try {
+      const response = await fetch(`${import.meta.env.VITE_TOUCHEESE_API}/studio/detail/${_id}/portfolio`, {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      });
+      const data = await response.json();
+      setData(data.content);
+    } catch (err) {
+      console.error('Failed to fetch data');
+    }
+  };
+
+  useEffect(() => {
+    fetchPortfolio();
+    if (data.length) setStudioName(data[0].studio);
+  }, []);
+
   return (
     <>
-      {datas && (
-        <MasonryList>
-          {datas.map(({ url, studio, id }) => (
-            <div key={`${studio}-${id}`} onClick={handleClick}>
-              <img src={url} alt={`${studio}-${id}`} />
-            </div>
-          ))}
-        </MasonryList>
-      )}
+      <Header title={studioName} backTo="/home" />
+      <StudioNavigator _id={_id} />
+
+      <FilterBoxStyle>
+        <li>
+          <Button text="전체" width="fit" size="small" variant="white" />
+        </li>
+      </FilterBoxStyle>
+
+      <ListStyle>
+        {data && data.length ? (
+          <MasonryList>
+            {data.map(({ url, studio, id }) => (
+              <div key={`${studio}-${id}`} onClick={handleClick}>
+                <img src={url} alt={`${studio}-${id}`} />
+              </div>
+            ))}
+          </MasonryList>
+        ) : (
+          <EmptyMessage message="포트폴리오가 없습니다." />
+        )}
+      </ListStyle>
     </>
   );
 };
 
 export default StudioPortfolio;
+
+const FilterBoxStyle = styled.ul`
+  display: flex;
+  margin: 1.2rem 0;
+`;
+
+const ListStyle = styled.div`
+  min-height: 50vh;
+`;

src/types/types.ts

@@ -54,8 +54,8 @@ export interface IStudioItem {
   bookmark: boolean;
 }
 
-export interface IStudioRes {
-  content: IStudioItem[];
+export interface IStudioRes<T> {
+  content: T[];
   pageable: {
     pageNumber: number;
     pageSize: number;

tests/StudioList.test.tsx

@@ -2,7 +2,7 @@ import StudioList from '@components/Studio/StudioList';
 import { useGetStudios } from '@hooks/useGetStudios';
 import { UseQueryResult } from '@tanstack/react-query';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { IStudioRes } from 'types/types';
+import { IStudioItem, IStudioRes } from 'types/types';
 import { describe, test, vi } from 'vitest';
 
 // Virtuoso - Mock 처리
@@ -30,7 +30,7 @@ vi.mock('@hooks/useGetStudios', () => ({
   useGetStudios: vi.fn(),
 }));
 
-const mockedStudios: IStudioRes = {
+const mockedStudios: IStudioRes<IStudioItem> = {
   content: [
     {
       id: 146,
@@ -231,7 +231,7 @@ const mockedStudios: IStudioRes = {
   empty: false,
 };
 
-const mockedMoreStudios: IStudioRes = {
+const mockedMoreStudios: IStudioRes<IStudioItem> = {
   content: [
     {
       id: 147,
@@ -439,7 +439,7 @@ describe('StudioList Component', () => {
       data: mockedStudios,
       isLoading: false,
       isFetching: false,
-    } as UseQueryResult<IStudioRes>);
+    } as UseQueryResult<IStudioRes<IStudioItem>>);
 
     render(<StudioList mode="filter" searchParams={new URLSearchParams()} />);
 
@@ -453,7 +453,7 @@ describe('StudioList Component', () => {
       data: mockedStudios,
       isLoading: false,
       isFetching: false,
-    } as UseQueryResult<IStudioRes>);
+    } as UseQueryResult<IStudioRes<IStudioItem>>);
 
     render(<StudioList mode="filter" searchParams={new URLSearchParams()} />);
 
@@ -471,7 +471,7 @@ describe('StudioList Component', () => {
       data: mockedMoreStudios,
       isLoading: false,
       isFetching: false,
-    } as UseQueryResult<IStudioRes>);
+    } as UseQueryResult<IStudioRes<IStudioItem>>);
 
     expect(screen.findByText(/오리우스씨네페이시스/i));
     expect(screen.findByText(/수상한 사진관/i));
@@ -482,7 +482,7 @@ describe('StudioList Component', () => {
     (useGetStudios as jest.Mock).mockReturnValueOnce({
       isLoading: true,
       isFetching: true,
-    } as UseQueryResult<IStudioRes | null>);
+    } as UseQueryResult<IStudioRes<IStudioItem> | null>);
 
     render(<StudioList mode="filter" searchParams={new URLSearchParams()} />);
 
@@ -496,7 +496,7 @@ describe('StudioList Component', () => {
       data: null,
       isLoading: false,
       isFetching: false,
-    } as UseQueryResult<IStudioRes | null>);
+    } as UseQueryResult<IStudioRes<IStudioItem> | null>);
 
     render(<StudioList mode="filter" searchParams={new URLSearchParams()} />);
 

tests/useGetStudios.test.tsx

@@ -1,11 +1,11 @@
 import { useGetStudios } from '@hooks/useGetStudios';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, renderHook, waitFor } from '@testing-library/react';
-import { IStudioRes } from 'types/types';
+import { IStudioItem, IStudioRes } from 'types/types';
 import { describe, test, vi } from 'vitest';
 
 // Response - Mock 처리
-const mockedStudios: IStudioRes = {
+const mockedStudios: IStudioRes<IStudioItem> = {
   content: [
     {
       id: 146,