Merge pull request #153 from jihwooon/issue-81

도서 상세 페이지 구현 및 정보 확장

client/package.json

@@ -12,6 +12,7 @@
     "@types/react-dom": "^18.2.19",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.6.7",
+    "dayjs": "^1.11.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.50.1",

client/src/api/http.ts

@@ -1,4 +1,4 @@
-import axios, { AxiosRequestConfig } from 'axios'
+import axios, { AxiosRequestConfig } from 'axios';
 import { getToken, removeToken } from '../store/authStore';
 
 const BASE_URL = "http://localhost:8080";

client/src/pages/BookDetail.tsx

@@ -1,6 +1,48 @@
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import styled from "styled-components";
+import Title from "../components/common/Title";
 import { useBook } from "../hooks/useBook";
+import { BookDetail as IBookDetail } from "../models/book.model";
+import { formatDate, formatNumber } from "../utils/format";
+import { getImgSrc } from "../utils/image";
+
+const bookInfoList = [
+	{
+		label: "카테고리",
+		key: "categoryName",
+		filter: (book: IBookDetail) => (
+			<Link to={`/books?category_id=${book.categoryId}`}>
+				{book.categoryName}
+			</Link>
+		)
+	},
+	{
+		label: "포맷",
+		key: "form"
+	},
+	{
+		label: "페이지",
+		key: "pages"
+	},
+	{
+		label: "ISBN",
+		key: "isbn"
+	},
+	{
+		label: "출간일",
+		key: "pubDate",
+		filter: (book: IBookDetail) => {
+			return formatDate(book.pubDate)
+		}
+	},
+	{
+		label: "가격",
+		key: "price",
+		filter: (book: IBookDetail) => {
+			return `${formatNumber(book.price)} 원`
+		}
+	}
+]
 
 const BookDetail = () => {
 	const { bookId } = useParams();
@@ -9,10 +51,73 @@ const BookDetail = () => {
 	if (!book) return null;
 
 	return (
-		<BookDetailStyle><h1>{book.title}</h1></BookDetailStyle>
+		<BookDetailStyle>
+			<header className="header">
+				<div className="img">
+					<img src={getImgSrc(book.imgId)} alt={book.title}/>
+				</div>
+				<div className="info">
+					<Title size="large" color="text">
+						{book.title}
+					</Title>
+					{
+						bookInfoList.map((item) => (
+							<dl>
+								<dt>{item.label}</dt>
+								<dd>{item.filter ? item.filter(book) : book
+								[item.key as keyof IBookDetail]}</dd>
+							</dl>
+						))
+					}
+					<p className="summary">{book.summary}</p>
+
+					<div className="like">
+						Like
+					</div>
+
+					<div className="add-cart">
+						Cart
+					</div>
+				</div>
+			</header>
+		</BookDetailStyle>
 	)
 }
 
-const BookDetailStyle = styled.div``
+const BookDetailStyle = styled.div`
+  .header {
+		display: flex;
+		align-items: start;
+		gap: 24px;
+		padding: 0 0 24px 0;
+
+		.img {
+			flex: 1;
+			img {
+				width: 100%;
+				height: auto;
+			}
+		}
+
+		.info {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+
+			dl {
+				display: flex;
+				margin: 0;
+				dt {
+					width: 80px;
+					color: ${({ theme }) => theme.color.secondary}
+				}
+				a {
+					color: ${({ theme }) => theme.color.primary}
+				}
+			}
+		}
+	}
+`
 
 export default BookDetail;

client/src/utils/format.ts

@@ -1,3 +1,9 @@
+import dayjs from 'dayjs';
+
 export const formatNumber = (number: number) => {
     return number.toLocaleString();
-}
+}
+
+export const formatDate = (date: string, format?: string) => {
+    return dayjs(date).format(format ? format : "YYYY년 MM월 DD일")
+}

server/src/books/domain/book.ts

@@ -7,6 +7,8 @@ export default class Book {
 
   private categoryId: number;
 
+  private categoryName: string;
+
   private form: string;
 
   private isbn: string;
@@ -32,6 +34,7 @@ export default class Book {
     title = '',
     imgId = 0,
     categoryId = 0,
+    categoryName = '',
     form = '',
     isbn = '',
     summary = '',
@@ -47,6 +50,7 @@ export default class Book {
     title?: string;
     imgId?: number;
     categoryId?: number;
+    categoryName?: string;
     form?: string;
     isbn?: string;
     summary?: string;
@@ -62,6 +66,7 @@ export default class Book {
     this.title = title;
     this.imgId = imgId;
     this.categoryId = categoryId;
+    this.categoryName = categoryName;
     this.form = form;
     this.isbn = isbn;
     this.summary = summary;
@@ -90,6 +95,10 @@ export default class Book {
     return this.categoryId;
   }
 
+  getCategoryName() {
+    return this.categoryName;
+  }
+
   getForm() {
     return this.form;
   }

server/src/books/domain/books.repository.ts

@@ -56,7 +56,7 @@ export const findAll = async (
 export const findWithCategory = async (userId: number, bookId: number): Promise<Book> => {
   const [rows] = await doQuery((connection) =>
     connection.execute<RowDataPacket[]>(
-      `SELECT b.id, b.title, b.category_id, b.form, b.isbn, b.summary, b.detail, b.author, b.pages, b.contents, b.price, b.pub_date,
+      `SELECT b.id, b.title, b.category_id, c.name as category_name, b.form, b.isbn, b.summary, b.detail, b.author, b.pages, b.contents, b.price, b.pub_date,
             (SELECT count(*) FROM likes WHERE b.id = liked_book_id) as Likes,
             (SELECT EXISTS(SELECT * FROM likes WHERE user_id = ? AND liked_book_id)) as liked
        FROM books b
@@ -79,6 +79,7 @@ export const findWithCategory = async (userId: number, bookId: number): Promise<
     form: row.form,
     isbn: row.isbn,
     categoryId: row.category_id,
+    categoryName: row.category_name,
     summary: row.summary,
     detail: row.detail,
     author: row.author,