Merge pull request #11 from TacoSrirachaStudy/feat/#10-detail

[FEAT] 상세 페이지 구현

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 /> },
+        ],
       },
     ],
   },

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%);
+`;

src/pages/Search/components/Books.tsx

@@ -1,24 +1,32 @@
+/** @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 (
-    <Container>
-      <BookImg alt="책 표지" src={thumbnail} />
-      <SummaryContainer>
-        <Title>{title}</Title>
-        <Auther>{authors}</Auther>
-        <Summary>{contents}</Summary>
-      </SummaryContainer>
-    </Container>
+    <article>
+      <Link css={bookLink} to={`${title.replace(/\s/g, '')}`}>
+        <BookImg alt="책 표지" src={thumbnail} />
+        <SummaryContainer>
+          <Title>{title}</Title>
+          <Auther>{authors}</Auther>
+          <Summary>{contents}</Summary>
+        </SummaryContainer>
+      </Link>
+    </article>
   );
 }
 
-const Container = styled.article`
+const bookLink = css`
   ${commonFlex}
-  gap: 4rem
+  gap: 4rem;
+  cursor: pointer;
 `;
 
 const BookImg = styled.img`