feat: books 도메인 API 연동

src/api/books/getBookDetail.ts

@@ -0,0 +1,33 @@
+import { apiClient } from '../index';
+
+// 책 상세 정보 타입
+export interface BookDetail {
+  title: string;
+  imageUrl: string;
+  authorName: string;
+  publisher: string;
+  isbn: string;
+  description: string;
+  recruitingRoomCount: number;
+  readCount: number;
+  isSaved: boolean;
+}
+
+// API 응답 타입
+export interface BookDetailResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: BookDetail;
+}
+
+export const getBookDetail = async (isbn: string): Promise<BookDetailResponse> => {
+  try {
+    const response = await apiClient.get<BookDetailResponse>(`/books/${isbn}`);
+
+    return response.data;
+  } catch (error) {
+    console.error('책 상세 정보 API 오류:', error);
+    throw error;
+  }
+};

src/api/books/getMostSearchedBooks.ts

@@ -0,0 +1,32 @@
+import { apiClient } from '../index';
+
+// 인기 검색 도서 타입
+export interface MostSearchedBook {
+  rank: number;
+  title: string;
+  imageUrl: string;
+  isbn: string;
+}
+
+// API 응답 데이터 타입
+export interface MostSearchedBooksData {
+  bookList: MostSearchedBook[];
+}
+
+// API 응답 타입
+export interface MostSearchedBooksResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: MostSearchedBooksData;
+}
+
+export const getMostSearchedBooks = async (): Promise<MostSearchedBooksResponse> => {
+  try {
+    const response = await apiClient.get<MostSearchedBooksResponse>('/books/most-searched');
+    return response.data;
+  } catch (error) {
+    console.error('인기 검색 도서 조회 API 오류:', error);
+    throw error;
+  }
+};

src/api/books/getRecruitingRooms.ts

@@ -0,0 +1,40 @@
+import { apiClient } from '../index';
+
+// 모집중인 모임방 타입
+export interface RecruitingRoom {
+  roomId: number;
+  bookImageUrl: string;
+  roomName: string;
+  memberCount: number;
+  recruitCount: number;
+  deadlineEndDate: string;
+}
+
+// API 응답 데이터 타입
+export interface RecruitingRoomsData {
+  recruitingRoomList: RecruitingRoom[];
+  totalRoomCount: number;
+  nextCursor: string;
+  isLast: boolean;
+}
+
+// API 응답 타입
+export interface RecruitingRoomsResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: RecruitingRoomsData;
+}
+
+export const getRecruitingRooms = async (isbn: string): Promise<RecruitingRoomsResponse> => {
+  try {
+    const response = await apiClient.get<RecruitingRoomsResponse>(
+      `/books/${isbn}/recruiting-rooms`,
+    );
+
+    return response.data;
+  } catch (error) {
+    console.error('모집중인 모임방 조회 API 오류:', error);
+    throw error;
+  }
+};

src/api/books/getSearchBooks.ts

@@ -0,0 +1,70 @@
+import { apiClient } from '../index';
+
+// 검색된 책 타입 (API 응답에서 받는 형태)
+export interface BookSearchItem {
+  title: string;
+  imageUrl: string;
+  authorName: string;
+  publisher: string;
+  isbn: string;
+}
+
+// 검색된 책 타입 (컴포넌트에서 사용하는 형태)
+export interface SearchedBook {
+  id: number;
+  title: string;
+  author: string;
+  publisher: string;
+  coverUrl: string;
+  isbn: string;
+}
+
+// API 응답 데이터 타입
+export interface SearchBooksData {
+  searchResult: BookSearchItem[];
+  page: number;
+  size: number;
+  totalElements: number;
+  totalPages: number;
+  last: boolean;
+  first: boolean;
+}
+
+// API 응답 타입
+export interface SearchBooksResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: SearchBooksData;
+}
+
+export const getSearchBooks = async (
+  query: string,
+  page: number = 1,
+  isFinalized: boolean = false,
+): Promise<SearchBooksResponse> => {
+  try {
+    const response = await apiClient.get<SearchBooksResponse>('/books', {
+      params: {
+        keyword: query.trim(),
+        page: page,
+        isFinalized: isFinalized,
+      },
+    });
+    return response.data;
+  } catch (error) {
+    console.error('책 검색 API 오류:', error);
+    throw error;
+  }
+};
+
+export const convertToSearchedBooks = (apiBooks: BookSearchItem[]): SearchedBook[] => {
+  return apiBooks.map((book, index) => ({
+    id: index + 1,
+    title: book.title,
+    author: book.authorName,
+    publisher: book.publisher,
+    coverUrl: book.imageUrl,
+    isbn: book.isbn,
+  }));
+};

src/api/books/postSaveBook.ts

@@ -0,0 +1,32 @@
+import { apiClient } from '../index';
+
+// 북마크 요청 타입
+export interface SaveBookRequest {
+  type: boolean;
+}
+
+// 북마크 응답 데이터 타입
+export interface SaveBookData {
+  isbn: string;
+  isSaved: boolean;
+}
+
+// 북마크 응답 타입
+export interface SaveBookResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  data: SaveBookData;
+}
+
+export const postSaveBook = async (isbn: string, type: boolean): Promise<SaveBookResponse> => {
+  try {
+    const response = await apiClient.post<SaveBookResponse>(`/books/${isbn}/saved`, {
+      type: type,
+    });
+    return response.data;
+  } catch (error) {
+    console.error('책 저장 API 오류:', error);
+    throw error;
+  }
+};

src/components/search/BookSearchResult.tsx

@@ -31,7 +31,7 @@ export function BookSearchResult({ type, searchedBookList }: BookSearchResultPro
           </EmptyWrapper>
         ) : (
           searchedBookList.map(book => (
-            <BookItem key={book.id}>
+            <BookItem key={book.id} onClick={() => navigate(`/search/book/${book.isbn}`)}>
               <Cover src={book.coverUrl} alt={`${book.title} 커버`} />
               <BookInfo>
                 <Title>{book.title}</Title>
@@ -63,6 +63,7 @@ const BookItem = styled.div`
   display: flex;
   border-bottom: 1px solid ${colors.darkgrey.dark};
   padding: 12px 0;
+  cursor: pointer;
 `;
 
 const ResultHeader = styled.div`

src/components/search/MostSearchedBooks.tsx

@@ -1,64 +1,71 @@
 import { colors, typography } from '@/styles/global/global';
 import styled from '@emotion/styled';
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { getMostSearchedBooks, type MostSearchedBook } from '@/api/books/getMostSearchedBooks';
 
-interface Book {
-  id: number;
-  title: string;
-  coverUrl: string;
-}
+export default function MostSearchedBooks() {
+  const [books, setBooks] = useState<MostSearchedBook[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const navigate = useNavigate();
 
-const dummyBooks: Book[] = [
-  {
-    id: 1,
-    title: '토마토 컵라면',
-    coverUrl: 'https://cdn.imweb.me/upload/S20230204e049098f5e744/e6fd3d849546d.jpg',
-  },
-  {
-    id: 2,
-    title: '사슴',
-    coverUrl: 'https://cdn.imweb.me/upload/S20230204e049098f5e744/e6fd3d849546d.jpg',
-  },
-  {
-    id: 3,
-    title: '호르몬 체인지지',
-    coverUrl: 'https://cdn.imweb.me/upload/S20230204e049098f5e744/e6fd3d849546d.jpg',
-  },
-  {
-    id: 4,
-    title: '호르몬 체인지지',
-    coverUrl: 'https://cdn.imweb.me/upload/S20230204e049098f5e744/e6fd3d849546d.jpg',
-  },
-  {
-    id: 5,
-    title: '호르몬 체인지지',
-    coverUrl: 'https://cdn.imweb.me/upload/S20230204e049098f5e744/e6fd3d849546d.jpg',
-  },
-  {
-    id: 6,
-    title: '호르몬 체인지지',
-    coverUrl: 'https://cdn.imweb.me/upload/S20230204e049098f5e744/e6fd3d849546d.jpg',
-  },
-];
+  useEffect(() => {
+    const fetchMostSearchedBooks = async () => {
+      try {
+        setIsLoading(true);
+        const response = await getMostSearchedBooks();
 
-export default function MostSearchedBooks() {
+        if (response.isSuccess) {
+          setBooks(response.data.bookList);
+        } else {
+          setError(response.message);
+        }
+      } catch (error) {
+        console.error('인기 검색 도서 조회 오류:', error);
+        setError('인기 검색 도서를 불러오는데 실패했습니다.');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchMostSearchedBooks();
+  }, []);
+
+  const handleBookClick = (isbn: string) => {
+    navigate(`/search/book/${isbn}`);
+  };
+
+  const getCurrentDate = () => {
+    const now = new Date();
+    const month = String(now.getMonth() + 1).padStart(2, '0');
+    const day = String(now.getDate()).padStart(2, '0');
+    return `${month}.${day}. 기준`;
+  };
   return (
     <Container>
       <Header>
         <Title>가장 많이 검색된 책</Title>
-        {/* 서버 응답 포맷을 모르기에 우선 하드 코딩 */}
-        <DateText>01.12. 기준</DateText>
+        <DateText>{getCurrentDate()}</DateText>
       </Header>
-      {dummyBooks.length === 0 ? (
+      {isLoading ? (
+        <LoadingMessage>로딩 중...</LoadingMessage>
+      ) : error ? (
+        <EmptyMessage>
+          <MainText>데이터를 불러올 수 없어요.</MainText>
+          <SubText>{error}</SubText>
+        </EmptyMessage>
+      ) : books.length === 0 ? (
         <EmptyMessage>
           <MainText>아직 순위가 집계되지 않았어요.</MainText>
           <SubText>조금만 기다려주세요!</SubText>
         </EmptyMessage>
       ) : (
         <BookList>
-          {dummyBooks.map((book, index) => (
-            <BookItem key={book.id}>
-              <Rank>{index + 1}.</Rank>
-              <Cover src={book.coverUrl} alt={`${book.title} 커버`} />
+          {books.map(book => (
+            <BookItem key={book.isbn} onClick={() => handleBookClick(book.isbn)}>
+              <Rank>{book.rank}.</Rank>
+              <Cover src={book.imageUrl} alt={`${book.title} 커버`} />
               <BookTitle>{book.title}</BookTitle>
             </BookItem>
           ))}
@@ -106,6 +113,12 @@ const BookItem = styled.li`
   align-items: center;
   padding: 12px 0;
   border-bottom: 1px solid ${colors.darkgrey.dark};
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+
+  &:hover {
+    background-color: ${colors.darkgrey.main};
+  }
 `;
 
 const Rank = styled.span`
@@ -151,3 +164,13 @@ const SubText = styled.div`
   color: ${colors.grey[100]};
   font-weight: ${typography.fontWeight.regular};
 `;
+
+const LoadingMessage = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  font-size: ${typography.fontSize.base};
+  color: ${colors.grey[200]};
+  font-weight: ${typography.fontWeight.regular};
+`;

src/pages/index.tsx

@@ -63,7 +63,7 @@ const Router = () => {
         <Route path="feed/:feedId" element={<FeedDetailPage />} />
         <Route path="search" element={<Search />} />
         <Route path="search/applybook" element={<ApplyBook />} />
-        <Route path="search/book" element={<SearchBook />} />
+        <Route path="search/book/:isbn" element={<SearchBook />} />
         <Route path="search/book/group" element={<SearchBookGroup />} />
         <Route path="otherfeed/:userId" element={<OtherFeedPage />} />
         <Route path="follow/:type/:userId" element={<FollowerListPage />} />