검색 api, 상품 api 연결 #108

src/apis/artists/useGetProfile.ts

@@ -0,0 +1,22 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { APIResponse, ProfileResponse } from '@/types';
+import fetchInstance from '../fetchInstance';
+import QUERY_KEYS from '../queryKeys';
+
+async function getProfile(artistInfoId: number | null): Promise<APIResponse<ProfileResponse>> {
+  const response = await fetchInstance().get(`/artists/${artistInfoId}`);
+
+  return response.data;
+}
+
+const useGetProfile = (artistInfoId: number | null) => {
+  const { data } = useSuspenseQuery<APIResponse<ProfileResponse>, Error>({
+    queryKey: [QUERY_KEYS.ARTIST_PROFILE, artistInfoId],
+    queryFn: () => getProfile(artistInfoId),
+  });
+
+  return { data };
+};
+
+export default useGetProfile;

src/apis/products/useGetDetail.ts

@@ -0,0 +1,22 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+
+import { APIResponse, ProductResponse } from '@/types';
+import fetchInstance from '../fetchInstance';
+import QUERY_KEYS from '../queryKeys';
+
+async function getDetail(productId: number | null): Promise<APIResponse<ProductResponse>> {
+  const response = await fetchInstance().get(`/products/${productId}`);
+
+  return response.data;
+}
+
+const useGetDetail = (productId: number | null) => {
+  const { data } = useSuspenseQuery<APIResponse<ProductResponse>, Error>({
+    queryKey: [QUERY_KEYS.PRODUCT_DETAIL, productId],
+    queryFn: () => getDetail(productId),
+  });
+
+  return { data };
+};
+
+export default useGetDetail;

src/apis/queryKeys.ts

@@ -3,7 +3,11 @@ const QUERY_KEYS = {
   FEED: 'feed',
   FOLLOW_LIST: 'followList',
   USER_INFO: 'userInfo',
+  ARTIST_LIST: 'artistList',
+  PRODUCT_LIST: 'productList',
   CHAT_ROOM: 'chatRoom',
+  PRODUCT_DETAIL: 'productDetail',
+  ARTIST_PROFILE: 'artistProfile',
 };
 
 export default QUERY_KEYS;

src/apis/search/useSearchArtists.tsx

@@ -0,0 +1,40 @@
+import { APIResponse, InfiniteAPIResponse, SearchArtistsResponse } from '@/types';
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+import fetchInstance from '../instance';
+import QueryKeys from '../queryKeys';
+
+async function searchArtists(
+  { pageParam = 0 }: { pageParam: number },
+  query: string,
+): Promise<APIResponse<SearchArtistsResponse>> {
+  const size = 20;
+  const response = await fetchInstance().get('/artists/search', {
+    params: {
+      query,
+      size,
+      page: pageParam,
+    },
+  });
+  return response.data;
+}
+
+const useSearchArtists = (query: string) => {
+  const queryResult = useSuspenseInfiniteQuery<
+    APIResponse<SearchArtistsResponse>,
+    Error,
+    InfiniteAPIResponse<SearchArtistsResponse>,
+    [string, string],
+    number
+  >({
+    queryKey: [QueryKeys.ARTIST_LIST, query],
+    queryFn: ({ pageParam }) => searchArtists({ pageParam }, query),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      return lastPage.data.hasNext ? allPages.length : undefined;
+    },
+  });
+
+  return queryResult;
+};
+
+export default useSearchArtists;

src/apis/search/useSearchProducts.tsx

@@ -0,0 +1,42 @@
+import { APIResponse, InfiniteAPIResponse, SearchProductsResponse } from '@/types';
+import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+import fetchInstance from '../instance';
+import QueryKeys from '../queryKeys';
+
+async function searchProducts(
+  { pageParam = 0 }: { pageParam: number },
+  query: string,
+): Promise<APIResponse<SearchProductsResponse>> {
+  const size = 20;
+  const sort = 'LATEST';
+  const response = await fetchInstance().get('/products', {
+    params: {
+      query,
+      size,
+      page: pageParam,
+      sort,
+    },
+  });
+  return response.data;
+}
+
+const useSearchProducts = (query: string) => {
+  const queryResult = useSuspenseInfiniteQuery<
+    APIResponse<SearchProductsResponse>,
+    Error,
+    InfiniteAPIResponse<SearchProductsResponse>,
+    [string, string],
+    number
+  >({
+    queryKey: [QueryKeys.PRODUCT_LIST, query],
+    queryFn: ({ pageParam }) => searchProducts({ pageParam }, query),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      return lastPage.data.hasNext ? allPages.length : undefined;
+    },
+  });
+
+  return queryResult;
+};
+
+export default useSearchProducts;

src/apis/users/useDeleteLikes.ts

@@ -0,0 +1,26 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import fetchInstance from '../fetchInstance';
+import QUERY_KEYS from '../queryKeys';
+
+async function deleteLikes(productId: number): Promise<void> {
+  await fetchInstance().delete(`/products/${productId}/likes`);
+}
+
+const useDeleteLikes = () => {
+  const queryClient = useQueryClient();
+
+  const { mutate, status } = useMutation<void, Error, number>({
+    mutationFn: (productId: number) => deleteLikes(productId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.PRODUCT_LIST] });
+    },
+    onError: (error) => {
+      console.error('Failed to delete likes:', error);
+    },
+  });
+
+  return { mutate, status };
+};
+
+export default useDeleteLikes;

src/apis/users/usePostLikes.ts

@@ -0,0 +1,20 @@
+import { useMutation } from '@tanstack/react-query';
+
+import fetchInstance from '../fetchInstance';
+
+async function postLikes(productId: number): Promise<void> {
+  await fetchInstance().post(`/products/${productId}/likes`, {});
+}
+
+const usePostLikes = () => {
+  const { mutate, status } = useMutation<void, Error, number>({
+    mutationFn: (productId: number) => postLikes(productId),
+    onError: (error) => {
+      console.error('API call failed:', error);
+    },
+  });
+
+  return { mutate, status };
+};
+
+export default usePostLikes;

src/components/common/ArtistItem/index.tsx

@@ -49,7 +49,7 @@ const ArtistItem = ({ artistId, author, like, follower, src, alt, isFollow }: Ar
 
   return (
     <Wrapper>
-      <Thumbnail ratio="square" src={src} alt={alt} />
+      <Thumbnail ratio="square" src={src} alt={alt} id={artistId} type="artist" />
       <MidWrapper>
         <p style={{ fontSize: 'var(--font-size-sm)', fontWeight: 'bold' }}>{author}</p>
         <FollowButton