Merge pull request #152 from jihwooon/issue-80

도서 상세 페이지 구현

client/src/App.tsx

@@ -1,12 +1,13 @@
-import Layout from "./components/layout/Layout";
-import Home from "./pages/Home";
-import { BookStoreThemeProvider } from "./context/themeContext";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Error from "./components/common/Error";
-import Signup from "./pages/Signup";
+import Layout from "./components/layout/Layout";
+import { BookStoreThemeProvider } from "./context/themeContext";
+import BookDetail from "./pages/BookDetail";
+import Books from "./pages/Books";
+import Home from "./pages/Home";
 import ResetPassword from "./pages/ResetPassword";
 import Signin from "./pages/Signin";
-import Books from "./pages/Books";
+import Signup from "./pages/Signup";
 
 const router = createBrowserRouter([
   {
@@ -50,6 +51,14 @@ const router = createBrowserRouter([
       </Layout>
     ),
   },
+  {
+    path: '/book/:bookId',
+    element: (
+      <Layout>
+        <BookDetail />
+      </Layout>
+    )
+  }
 ]);
 
 function App() {

client/src/api/books.api.ts

@@ -1,4 +1,4 @@
-import { Book } from "../models/book.model";
+import { Book, BookDetail } from "../models/book.model";
 import { Pagination } from "../models/pagination.model";
 import { httpClient } from "./http";
 
@@ -30,3 +30,9 @@ export const fetchBooks = async (params: FetchBooksParams) => {
 		}
 	}
 }
+
+export const fetchBook = async (bookId: string) => {
+	const response = await httpClient.get<BookDetail>(`/books/${bookId}`);
+
+	return response.data;
+}

client/src/components/books/BookItem.tsx

@@ -1,4 +1,5 @@
 import { FaHeart } from "react-icons/fa";
+import { Link } from "react-router-dom";
 import { styled } from "styled-components";
 import { Book } from "../../models/book.model";
 import { formatNumber } from "../../utils/format";
@@ -13,27 +14,32 @@ interface Props {
 const BookItem = ({ book, view }: Props) => {
   return (
     <BookItemStyled view={view}>
-      <div className="img">
-        <img src={getImgSrc(book.imgId)} alt={book.title} />
-      </div>
-      <div className="content">
-        <h2 className="title">{book.title}</h2>
-        <p className="summary">{book.summary}</p>
-        <p className="author">{book.author}</p>
-        <p className="price">{formatNumber(book.price)}원</p>
-        <div className="likes">
-          <FaHeart />
-          <span>{book.likes}</span>
+      <Link to={`/book/${book.id}`}>
+        <div className="img">
+          <img src={getImgSrc(book.imgId)} alt={book.title} />
         </div>
-      </div>
+        <div className="content">
+          <h2 className="title">{book.title}</h2>
+          <p className="summary">{book.summary}</p>
+          <p className="author">{book.author}</p>
+          <p className="price">{formatNumber(book.price)}원</p>
+          <div className="likes">
+            <FaHeart />
+            <span>{book.likes}</span>
+          </div>
+        </div>
+      </Link>
     </BookItemStyled>
   );
 };
 
 const BookItemStyled = styled.div<Pick<Props, 'view'>>`
-  display: flex;
-  flex-direction: column;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+  a {
+    display: flex;
+    flex-direction: ${({ view }) => (view === 'grid') ? "column" : "row"};
+    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
+    text-decoration: none;
+  }
 
   .img {
     border-radius: ${({ theme }) => theme.borderRadius.default};

client/src/hooks/useBook.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from "react";
+import { fetchBook } from "../api/books.api";
+import { BookDetail } from "../models/book.model";
+
+export const useBook = (bookId: string | undefined) => {
+	const [book, setBook] = useState<BookDetail | null>(null);
+
+	useEffect(() => {
+		if (!bookId) return;
+
+		fetchBook(bookId).then((book) => {
+			setBook(book)
+		})
+	}, [bookId])
+
+	return { book }
+}

client/src/pages/BookDetail.tsx

@@ -0,0 +1,18 @@
+import { useParams } from "react-router-dom";
+import styled from "styled-components";
+import { useBook } from "../hooks/useBook";
+
+const BookDetail = () => {
+	const { bookId } = useParams();
+	const { book } = useBook(bookId);
+
+	if (!book) return null;
+
+	return (
+		<BookDetailStyle><h1>{book.title}</h1></BookDetailStyle>
+	)
+}
+
+const BookDetailStyle = styled.div``
+
+export default BookDetail;

client/src/pages/Home.tsx

@@ -8,7 +8,6 @@ const Home = () => {
       <Title size='medium' color='background'>제목 테스트</Title>
       <Button size="large" scheme="primary">버튼</Button>
       <InputText placeholder="여기에 입력하세요"/>
-      <div>detail</div>
     </>
   )
 }