diff --git a/src/hooks/useGetStudios.ts b/src/hooks/useGetStudios.ts index e057c4b..6bcfc45 100644 --- a/src/hooks/useGetStudios.ts +++ b/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 => { +const fetchStudios = async (pageNum: number, mode: 'filter' | 'search/result', params: string): Promise> => { 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 => { - return useQuery({ +export const useGetStudios = (pageNum: number, mode: 'filter' | 'search/result', params: string): UseQueryResult> => { + return useQuery>({ queryKey: ['studios', { params, mode, pageNum }], queryFn: () => fetchStudios(pageNum, mode, params), staleTime: 1000 * 60 * 1, diff --git a/src/pages/Studio/StudioPortfolio/StudioPortfolio.tsx b/src/pages/Studio/StudioPortfolio/StudioPortfolio.tsx index c280f9f..aa384f8 100644 --- a/src/pages/Studio/StudioPortfolio/StudioPortfolio.tsx +++ b/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([]); + 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 && ( - - {datas.map(({ url, studio, id }) => ( -
- {`${studio}-${id}`} -
- ))} - - )} +
+ + + +
  • +
    • +     + + + {data && data.length ? ( + + {data.map(({ url, studio, id }) => ( +
    + {`${studio}-${id}`} +
    + ))} +     + ) : ( + + )} +     ); }; export default StudioPortfolio; + +const FilterBoxStyle = styled.ul` + display: flex; + margin: 1.2rem 0; +`; + +const ListStyle = styled.div` + min-height: 50vh; +`; diff --git a/src/types/types.ts b/src/types/types.ts index c2da60d..61c617e 100644 --- a/src/types/types.ts +++ b/src/types/types.ts @@ -54,8 +54,8 @@ export interface IStudioItem { bookmark: boolean; } -export interface IStudioRes { - content: IStudioItem[]; +export interface IStudioRes { + content: T[]; pageable: { pageNumber: number; pageSize: number; diff --git a/tests/StudioList.test.tsx b/tests/StudioList.test.tsx index 504c06e..55f5869 100644 --- a/tests/StudioList.test.tsx +++ b/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 = { content: [ { id: 146, @@ -231,7 +231,7 @@ const mockedStudios: IStudioRes = { empty: false, }; -const mockedMoreStudios: IStudioRes = { +const mockedMoreStudios: IStudioRes = { content: [ { id: 147, @@ -439,7 +439,7 @@ describe('StudioList Component', () => { data: mockedStudios, isLoading: false, isFetching: false, - } as UseQueryResult); + } as UseQueryResult>); render(); @@ -453,7 +453,7 @@ describe('StudioList Component', () => { data: mockedStudios, isLoading: false, isFetching: false, - } as UseQueryResult); + } as UseQueryResult>); render(); @@ -471,7 +471,7 @@ describe('StudioList Component', () => { data: mockedMoreStudios, isLoading: false, isFetching: false, - } as UseQueryResult); + } as UseQueryResult>); 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); + } as UseQueryResult | null>); render(); @@ -496,7 +496,7 @@ describe('StudioList Component', () => { data: null, isLoading: false, isFetching: false, - } as UseQueryResult); + } as UseQueryResult | null>); render(); diff --git a/tests/useGetStudios.test.tsx b/tests/useGetStudios.test.tsx index aaf3c43..4058ce5 100644 --- a/tests/useGetStudios.test.tsx +++ b/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 = { content: [ { id: 146,