From 34c82f0790adeafc0c6f7756b5bbece633667cbc Mon Sep 17 00:00:00 2001
From: Jeon Eonseok <jseokeon@gmail.com>
Date: Mon, 1 Jan 2024 16:58:06 +0900
Subject: [PATCH] =?UTF-8?q?[=20feat=20]=20=EC=83=81=EC=84=B8=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 상세 페이지 퍼블리싱
2. 상세 페이지 API 연결

related to: #10
---
 src/Router.tsx                        |  9 +++-
 src/pages/Detail/index.tsx            | 65 +++++++++++++++++++++++++++
 src/pages/Search/components/Books.tsx |  3 +-
 3 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 src/pages/Detail/index.tsx

diff --git a/src/Router.tsx b/src/Router.tsx
index 087917d..4192300 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -3,6 +3,7 @@ import Error from '@components/Error';
 import Onboarding from '@pages/Onboarding';
 import Search from '@pages/Search';
 import App from './App';
+import Detail from '@pages/Detail';
 
 export const router = createBrowserRouter([
   {
@@ -13,7 +14,13 @@ export const router = createBrowserRouter([
       { index: true, element: <Onboarding /> },
       {
         path: '/search',
-        element: <Search />,
+        children: [
+          {
+            index: true,
+            element: <Search />,
+          },
+          { path: ':title', element: <Detail /> },
+        ],
       },
     ],
   },
diff --git a/src/pages/Detail/index.tsx b/src/pages/Detail/index.tsx
new file mode 100644
index 0000000..a2bbb30
--- /dev/null
+++ b/src/pages/Detail/index.tsx
@@ -0,0 +1,65 @@
+/** @jsxImportSource @emotion/react */
+
+import { useParams } from 'react-router-dom';
+import useSWR from 'swr';
+import { fetcher } from '@utils/fetcher';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
+
+/** 상세 페이지 */
+export default function Detail() {
+  const { title } = useParams();
+  const { data } = useSWR(`https://dapi.kakao.com/v3/search/book?query=${title}`, fetcher);
+
+  return (
+    <DetailWrapper>
+      {data && (
+        <DetailBox>
+          <img src={data[0].thumbnail} alt="book-cover" width={270} height={400} />
+          <article>
+            <h1 css={mainTitle}>{data[0].title}</h1>
+            <div css={bookInfo}>
+              <span>{data[0].authors}</span>
+              <span>{data[0].publisher}</span>
+              <span>{data[0].price}</span>
+            </div>
+            <p css={bookContent}>{data[0].contents}</p>
+          </article>
+        </DetailBox>
+      )}
+    </DetailWrapper>
+  );
+}
+
+const mainTitle = css`
+  font-size: 3rem;
+  margin-bottom: 1rem;
+`;
+
+const bookInfo = css`
+  display: flex;
+  gap: 3rem;
+  font-size: 1.4rem;
+  margin-bottom: 2rem;
+`;
+
+const bookContent = css`
+  font-size: 2.4rem;
+`;
+
+const DetailWrapper = styled.div`
+  width: 100%;
+  height: 100vh;
+  background-color: ${({ theme }) => theme.colors.bgColor};
+  padding: 0 12rem;
+  margin: 0 auto;
+`;
+
+const DetailBox = styled.div`
+  display: flex;
+  gap: 4.5rem;
+  max-width: 120rem;
+  margin: 50vh auto;
+  color: ${({ theme }) => theme.colors.textColor01};
+  transform: translateY(-50%);
+`;
diff --git a/src/pages/Search/components/Books.tsx b/src/pages/Search/components/Books.tsx
index 3037b5e..2eaf2eb 100644
--- a/src/pages/Search/components/Books.tsx
+++ b/src/pages/Search/components/Books.tsx
@@ -18,7 +18,8 @@ export default function Books(props: Book) {
 
 const Container = styled.article`
   ${commonFlex}
-  gap: 4rem
+  gap: 4rem;
+  cursor: pointer;
 `;
 
 const BookImg = styled.img`