From 2d1029b2ddfb949e1a98a95f138b638c898a04da Mon Sep 17 00:00:00 2001
From: Jeon Eonseok <jseokeon@gmail.com>
Date: Mon, 1 Jan 2024 17:10:09 +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=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 (
-    <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;
   cursor: pointer;