Revert "[#481] [책 상세] 책 정보 컴포넌트 (#482)"

This reverts commit 03fa16e.

src/queries/book/key.ts

@@ -5,8 +5,6 @@ const bookKeys = {
   details: () => [...bookKeys.all, 'detail'] as const,
   detail: (bookId: APIBook['bookId']) =>
     [...bookKeys.details(), bookId] as const,
-  bookmark: (bookId: APIBook['bookId']) =>
-    [...bookKeys.detail(bookId), 'bookmark'] as const,
 };
 
 export default bookKeys;

src/queries/book/useBookInfoQuery.ts

@@ -1,14 +1,13 @@
-import { UseQueryOptions } from '@tanstack/react-query';
-
-import type { APIBook, APIBookDetail, BookDetail } from '@/types/book';
-
+import type { APIBook, APIBookDetail } from '@/types/book';
+import useQueryWithSuspense, {
+  UseQueryOptionWithoutSuspense,
+} from '@/hooks/useQueryWithSuspense';
 import bookAPI from '@/apis/book';
-import useQueryWithSuspense from '@/hooks/useQueryWithSuspense';
 import bookKeys from './key';
 
-const useBookInfoQuery = <TData = APIBookDetail>(
+const useBookInfoQuery = (
   bookId: APIBook['bookId'],
-  options?: UseQueryOptions<APIBookDetail, unknown, TData>
+  options?: UseQueryOptionWithoutSuspense<APIBookDetail>
 ) =>
   useQueryWithSuspense(
     bookKeys.detail(bookId),
@@ -17,20 +16,3 @@ const useBookInfoQuery = <TData = APIBookDetail>(
   );
 
 export default useBookInfoQuery;
-
-const transformBookData = (data: APIBookDetail) =>
-  ({
-    bookId: data.bookId,
-    title: data.title,
-    author: data.author,
-    isbn: data.isbn,
-    summary: data.contents,
-    bookUrl: data.url,
-    imageUrl: data.imageUrl.replace('R120x174.q85', 'R300x0.q100'),
-    publisher: data.publisher,
-  } as BookDetail);
-
-export const useBookInfo = (bookId: APIBook['bookId']) =>
-  useBookInfoQuery(bookId, {
-    select: transformBookData,
-  });

src/queries/book/useBookUserInfoQuery.ts

@@ -1,15 +1,17 @@
-import { UseQueryOptions } from '@tanstack/react-query';
-import { APIBookmarkedUserList } from '@/types/book';
+import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 import bookAPI from '@/apis/book';
-import useQueryWithSuspense from '@/hooks/useQueryWithSuspense';
-import bookKeys from './key';
 
-const useBookUserInfoQuery = <TData = APIBookmarkedUserList>(
+const useBookUserInfoQuery = (
   bookId: number,
-  options?: UseQueryOptions<APIBookmarkedUserList, unknown, TData>
+  options?: Pick<
+    UseQueryOptions<
+      Awaited<ReturnType<typeof bookAPI.getBookUserInfo>>['data']
+    >,
+    'enabled'
+  >
 ) =>
-  useQueryWithSuspense(
-    bookKeys.bookmark(bookId),
+  useQuery(
+    ['bookUserInfo', bookId],
     () => bookAPI.getBookUserInfo(bookId).then(({ data }) => data),
     options
   );

src/types/book.ts

@@ -46,17 +46,6 @@ export interface APIBookDetail extends APIBook {
   imageKey: string;
 }
 
-export interface BookDetail {
-  bookId: APIBookDetail['bookId'];
-  title: APIBookDetail['title'];
-  author: APIBookDetail['author'];
-  isbn: APIBookDetail['isbn'];
-  summary: APIBookDetail['contents'];
-  bookUrl: APIBookDetail['url'];
-  imageUrl: APIBookDetail['imageUrl'];
-  publisher: APIBookDetail['publisher'];
-}
-
 export interface APIBookmarkedUserList {
   bookId: APIBook['bookId'];
   totalCount: number;

src/v1/base/Avatar.tsx

@@ -1,14 +1,11 @@
-'use client';
-
-import { Children, ReactNode, useState } from 'react';
+import { useState } from 'react';
 import Image from 'next/image';
 
 type AvatarSize = 'small' | 'medium' | 'large';
 interface AvatarProps {
   name?: string;
   src?: string;
   size?: AvatarSize;
-  border?: boolean;
 }
 
 const FALLBACK_IMAGE_SRC = '/icons/avatar.svg';
@@ -36,17 +33,15 @@ const getAvatarSize = (size: AvatarSize) => {
   }
 };
 
-const Avatar = ({ name, src, size = 'medium', border }: AvatarProps) => {
+const Avatar = ({ name, src, size = 'medium' }: AvatarProps) => {
   const [image, setImage] = useState(src ?? FALLBACK_IMAGE_SRC);
-
   const { sizeClasses, sizeProps } = getAvatarSize(size);
-  const borderClass = border ? 'border-[0.15rem]' : 'border-none';
 
   const setFallbackImage = () => setImage(FALLBACK_IMAGE_SRC);
 
   return (
     <span
-      className={`relative inline-block rounded-full border-white bg-white ${sizeClasses} ${borderClass}`}
+      className={`relative inline-block rounded-full bg-white ${sizeClasses}`}
     >
       <Image
         alt={name || 'avatar'}
@@ -60,17 +55,3 @@ const Avatar = ({ name, src, size = 'medium', border }: AvatarProps) => {
 };
 
 export default Avatar;
-
-const AvatarGroup = ({ children }: { children?: ReactNode }) => {
-  return (
-    <div className="mr-[0.75rem] flex flex-row-reverse items-center justify-end">
-      {Children.toArray(children).map((avatar, idx) => (
-        <span key={idx} className={`-me-[0.75rem] leading-none`}>
-          {avatar}
-        </span>
-      ))}
-    </div>
-  );
-};
-
-export { AvatarGroup };

src/v1/book/BookCover.tsx

@@ -52,8 +52,8 @@ const getCoverSize = (size: BookCoverSize) => {
     }
     case '2xlarge': {
       return {
-        sizeClasses: 'w-[14.0rem] h-[19.6rem]',
-        sizeProps: { width: 140, height: 196 },
+        sizeClasses: 'w-[18.0rem] h-[25.2rem]',
+        sizeProps: { width: 180, height: 252 },
       } as const;
     }
   }