From 34c82f0790adeafc0c6f7756b5bbece633667cbc Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Mon, 1 Jan 2024 16:58:06 +0900 Subject: [PATCH 1/2] =?UTF-8?q?[=20feat=20]=20=EC=83=81=EC=84=B8=20?= =?UTF-8?q?=ED=8E=98=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: }, { path: '/search', - element: , + children: [ + { + index: true, + element: , + }, + { path: ':title', element: }, + ], }, ], }, 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 ( + + {data && ( + + book-cover +
+

{data[0].title}

+
+ {data[0].authors} + {data[0].publisher} + {data[0].price} +
+

{data[0].contents}

+
+
+ )} +
+ ); +} + +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` From 2d1029b2ddfb949e1a98a95f138b638c898a04da Mon Sep 17 00:00:00 2001 From: Jeon Eonseok Date: Mon, 1 Jan 2024 17:10:09 +0900 Subject: [PATCH 2/2] =?UTF-8?q?[=20feat=20]=20=EC=83=81=EC=84=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit related to: #10 --- src/pages/Search/components/Books.tsx | 25 ++++++++++++++++--------- 1 file changed, 16 insertions(+), 9 deletions(-) diff --git a/src/pages/Search/components/Books.tsx b/src/pages/Search/components/Books.tsx index 2eaf2eb..b529b72 100644 --- a/src/pages/Search/components/Books.tsx +++ b/src/pages/Search/components/Books.tsx @@ -1,22 +1,29 @@ +/** @jsxImportSource @emotion/react */ + +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { commonFlex } from '@styles/common'; +import { Link } from 'react-router-dom'; import { Book } from 'types/books'; export default function Books(props: Book) { const { authors, contents, title, thumbnail } = props; + return ( - - - - {title} - {authors} - {contents} - - +
+ + + + {title} + {authors} + {contents} + + +
); } -const Container = styled.article` +const bookLink = css` ${commonFlex} gap: 4rem; cursor: pointer;