Repository: SOPT-all/36-COLLABORATION-WEB-KYOBOBOOK
Pull request #82: [feat] home best 컴포넌트 구현
Author: login: sndks
Labels: name: 🛠️ Feature
name: 🌟 혜성
Created: 2025-05-22T06:02:24Z | Merged: 2025-05-23T08:44:37Z

## 📌 이슈 번호
- close https://github.com/SOPT-all/36-COLLABORATION-WEB-KYOBOBOOK/issues/56

## ✅ 체크 리스트 
- [x] PR 제목의 형식을 잘 작성했나요? e.g. [feat] PR 템플릿 작성
- [x] 이슈는 등록했나요?
- [x] 리뷰어와 라벨을 지정했나요?

## 📄 구현 사항
![스크린샷 2025-05-20 114054](https://github.com/user-attachments/assets/d98f2bb1-5a65-45ec-82f8-250768f553ab)



## 🔍 Review Point
<!-- 리뷰어가 집중해야 할 부분이나 해당 PR에서 논의가 필요한 사항을 적어주세요! -->
- ~ 부분 이렇게 구현했어요 / 피드백 부탁드려요!


## 📸 Screenshot


<!--
## 🔗 Reference
참고한 문서가 있다면 공유해주세요. 아티클 작성도 환영!
-->


Diff:
diff --git a/src/apis/home/axios.ts b/src/apis/home/axios.ts
index e69de29b..a1ef6a56 100644
--- a/src/apis/home/axios.ts
+++ b/src/apis/home/axios.ts
@@ -0,0 +1,15 @@
+import { instance } from '@/apis/instance';
+import { END_URL } from '@/utils/constants/apiURL';
+import type { ApiResponseType } from '@/types/apiResponseType';
+import type { TopBookResponseType } from '@/types/TopBookResponseType';
+
+export const getTopBooks = async (): Promise<TopBookResponseType> => {
+  const response = await instance.get<ApiResponseType<TopBookResponseType>>(
+    END_URL.GET_TOP_BOOKS
+  );
+
+  if (!response.data.success) {
+    throw new Error(response.data.error?.message || 'top5 조회 실패');
+  }
+  return response.data.data;
+};
diff --git a/src/apis/home/queries.ts b/src/apis/home/queries.ts
index e69de29b..085a9a4b 100644
--- a/src/apis/home/queries.ts
+++ b/src/apis/home/queries.ts
@@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getTopBooks } from '@/apis/home/axios';
+import { QUERY_KEYS } from '@/utils/constants/queryKey';
+import type { TopBookResponseType } from '@/types/TopBookResponseType';
+
+export const useGetTopBooks = () => {
+  return useQuery<TopBookResponseType>({
+    queryKey: [QUERY_KEYS.TOP_BOOKS],
+    queryFn: getTopBooks,
+  });
+};
+
diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts
index 58eb43c5..e807374a 100644
--- a/src/assets/icons/index.ts
+++ b/src/assets/icons/index.ts
@@ -61,6 +61,7 @@ import NavSam from '../icons/svg/ic_nav_sam.svg?react';
 import NavEbook from '../icons/svg/ic_nav_ebook.svg?react';
 import NavLogoBackground from '../icons/svg/ic_nav_logo_background.svg?react';
 import IcHeaderLogo from '../icons/svg/ic_header_logo.svg?react';
+import PauseIcon from '../icons/svg/ic_pause.svg?react';
 
 export const iconMap = {
   account: AccountIcon,
@@ -126,6 +127,7 @@ export const iconMap = {
   navEbook: NavEbook,
   navLogoBackground: NavLogoBackground,
   icHeaderLogo: IcHeaderLogo,
+  pause: PauseIcon,
 };
 
 export type IconName = keyof typeof iconMap;
diff --git a/src/assets/icons/svg/ic_pause.svg b/src/assets/icons/svg/ic_pause.svg
new file mode 100644
index 00000000..3ba43a3c
--- /dev/null
+++ b/src/assets/icons/svg/ic_pause.svg
@@ -0,0 +1,5 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="28" height="28" fill="current" fill-opacity="0.3"/>
+<path d="M10 9H12V19H10V9Z" fill="white"/>
+<path d="M16 9H18V19H16V9Z" fill="white"/>
+</svg>
diff --git a/src/assets/img/home_ad1.jpg b/src/assets/img/home_ad1.jpg
new file mode 100644
index 00000000..b414b0e3
Binary files /dev/null and b/src/assets/img/home_ad1.jpg differ
diff --git a/src/assets/img/home_ad2.jpg b/src/assets/img/home_ad2.jpg
new file mode 100644
index 00000000..e9b4e1c8
Binary files /dev/null and b/src/assets/img/home_ad2.jpg differ
diff --git a/src/assets/img/home_ad3.jpg b/src/assets/img/home_ad3.jpg
new file mode 100644
index 00000000..04f78543
Binary files /dev/null and b/src/assets/img/home_ad3.jpg differ
diff --git a/src/assets/img/home_ad4.jpg b/src/assets/img/home_ad4.jpg
new file mode 100644
index 00000000..d74ca889
Binary files /dev/null and b/src/assets/img/home_ad4.jpg differ
diff --git a/src/assets/img/home_best_1.jpg b/src/assets/img/home_best_1.jpg
new file mode 100644
index 00000000..9cbd9e1b
Binary files /dev/null and b/src/assets/img/home_best_1.jpg differ
diff --git a/src/assets/img/home_best_2.jpg b/src/assets/img/home_best_2.jpg
new file mode 100644
index 00000000..474a8714
Binary files /dev/null and b/src/assets/img/home_best_2.jpg differ
diff --git a/src/assets/img/home_best_3.jpg b/src/assets/img/home_best_3.jpg
new file mode 100644
index 00000000..ee56b3a6
Binary files /dev/null and b/src/assets/img/home_best_3.jpg differ
diff --git a/src/assets/img/home_best_4.jpg b/src/assets/img/home_best_4.jpg
new file mode 100644
index 00000000..eecef85b
Binary files /dev/null and b/src/assets/img/home_best_4.jpg differ
diff --git a/src/assets/img/home_best_5.jpg b/src/assets/img/home_best_5.jpg
new file mode 100644
index 00000000..f3a08ba8
Binary files /dev/null and b/src/assets/img/home_best_5.jpg differ
diff --git a/src/assets/img/home_find1.jpg b/src/assets/img/home_find1.jpg
new file mode 100644
index 00000000..d9cbe991
Binary files /dev/null and b/src/assets/img/home_find1.jpg differ
diff --git a/src/assets/img/home_find2.jpg b/src/assets/img/home_find2.jpg
new file mode 100644
index 00000000..d37cd2f8
Binary files /dev/null and b/src/assets/img/home_find2.jpg differ
diff --git a/src/assets/img/home_find3.jpg b/src/assets/img/home_find3.jpg
new file mode 100644
index 00000000..3425912a
Binary files /dev/null and b/src/assets/img/home_find3.jpg differ
diff --git a/src/pages/Home/Home.style.ts b/src/pages/Home/Home.style.ts
index 32389240..885c352f 100644
--- a/src/pages/Home/Home.style.ts
+++ b/src/pages/Home/Home.style.ts
@@ -1,14 +1,57 @@
 import { css } from '@emotion/react';
 
+import { theme } from '@/styles/theme';
+
 export const BannerWrapper = css`
   position: relative;
-  left: 0;
   width: 100%;
+  overflow: hidden;
 `;
 
 export const BannerImage = css`
   width: 100%;
   height: auto;
-  object-fit: contain;
+  object-fit: cover;
   display: block;
 `;
+
+export const BannerControls = css`
+  position: absolute;
+  bottom: 0.1rem;
+  right: 0.1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  z-index: 1;
+`;
+
+export const PauseIcon = css`
+  width: 2.8rem;
+  height: 2.8rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0 0 0 0.3);
+  border-radius: 0.5rem;
+
+  svg {
+    width: 2.8rem;
+    height: 2.8rem;
+    fill: currentColor;
+  }
+`;
+
+export const InfoBox = css`
+  display: flex;
+  align-items: center;
+  padding: 0.6rem 1.2rem;
+  height: 2.8rem;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 0.1rem;
+`;
+
+export const InfoText = css`
+  ${theme.fonts.caption2};
+  color: ${theme.colors.white};
+`;
+
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index ea62749e..d7556c0c 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -1,6 +1,8 @@
-import { BannerWrapper, BannerImage } from './Home.style';
+import { BannerWrapper, BannerImage, BannerControls, InfoBox, InfoText, PauseIcon } from './Home.style';
 import CategoryButton from './components/CategoryButton/CategoryButton';
+import BestBookList from './components/BestBookList/BestBookList';
 
+import Icon from '@/components/Icon';
 import HomeBottomNav from '@/components/BottomNav/HomeBottomNav';
 import Floater from '@/components/Floater/Floater';
 import MainHeader from '@/components/MainHeader/MainHeader';
@@ -12,8 +14,18 @@ const Home = () => {
       <MainHeader />
       <div css={BannerWrapper}>
         <img src={homeBanner} alt="6분 클래식" css={BannerImage} />
+
+        <div css={BannerControls}>
+          <div css={PauseIcon}>
+            <Icon name="pause" />
+          </div>
+          <div css={InfoBox}>
+            <span css={InfoText}>30-37 전체보기</span>
+          </div>
+        </div>
       </div>
       <CategoryButton />
+      <BestBookList />
       <div>홈페이지입니다.</div>
       <Floater />
       <HomeBottomNav />
diff --git a/src/pages/Home/components/BestBookList/BestBookList.styles.ts b/src/pages/Home/components/BestBookList/BestBookList.styles.ts
new file mode 100644
index 00000000..aa28c751
--- /dev/null
+++ b/src/pages/Home/components/BestBookList/BestBookList.styles.ts
@@ -0,0 +1,172 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/styles/theme';
+
+export const wrapper = css`
+  width: 100%;
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 0 1.2rem;
+`;
+
+// ===== [1] 베스트/스테디/더보기+ =====
+export const titleRow = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 37.5rem;
+  height: auto;
+  padding: 0.8rem 0.6rem;
+`;
+
+export const titleTabs = css`
+  display: flex;
+  gap: 1.6rem;
+`;
+
+export const best = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.black1};
+`;
+
+export const steady = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.gray3};
+`;
+
+export const moreButton = css`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 5.7rem;
+  height: 2rem;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+`;
+
+export const moreText = css`
+  ${theme.fonts.subtitle4};
+  color: ${theme.colors.black1};
+  white-space: nowrap;
+`;
+
+// ===== [2] 탭 버튼 =====
+export const tabButton = (isSelected: boolean) => css`
+  ${isSelected ? theme.fonts.subtitle4 : theme.fonts.body2};
+  color: ${isSelected ? theme.colors.purple7 : theme.colors.gray4};
+  background: none;
+  border: none;
+  height: 2rem;
+  padding: 0;
+  cursor: pointer;
+`;
+
+export const tabItem = css`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+`;
+
+export const tabDivider = css`
+  width: 1px;
+  height: 1.4rem;
+  background-color: ${theme.colors.gray4};
+  margin: 0 0.6rem;
+`;
+
+// ===== [3] 책 리스트 공통 =====
+export const bookList = css`
+  display: flex;
+  flex-direction: column;
+  max-width: 37.5rem;
+`;
+
+export const bookItem = css`
+  display: flex;
+  gap: 1.4rem;
+  width: 100%;
+  padding: 1.2rem 0;
+  border-bottom: 1px solid ${theme.colors.gray2};
+`;
+
+export const thumbnail = css`
+  width: 6rem;
+  height: 8.6rem;
+  object-fit: cover;
+  flex-shrink: 0;
+`;
+
+export const rightSection = css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+`;
+
+export const chipWrapper = css`
+  display: inline-block;
+  max-width: 4.6rem;
+  height: 2.1rem;
+  overflow: hidden;
+  white-space: nowrap;
+  margin-bottom: 0.2rem;
+`;
+
+export const absoluteChipWrapper = css`
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 2;
+`;
+
+export const textContainer = css`
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  flex: 1;
+`;
+
+export const bookTitleRow = css`
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+`;
+
+export const title = css`
+  ${theme.fonts.subtitle4};
+  color: ${theme.colors.black1};
+`;
+
+export const author = css`
+  ${theme.fonts.caption3};
+  color: ${theme.colors.gray4};
+`;
+
+export const loadingContainer = css`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  ${theme.fonts.body1};
+  color: ${theme.colors.gray4};
+`;
+
+export const errorContainer = css`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  min-height: 200px;
+  padding: 2rem;
+  text-align: center;
+  ${theme.fonts.body1};
+  color: ${theme.colors.black1};
+`;
+
+export const errorMessage = css`
+  margin-top: 1rem;
+  ${theme.fonts.caption1};
+  color: ${theme.colors.red};
+`;
diff --git a/src/pages/Home/components/BestBookList/BestBookList.tsx b/src/pages/Home/components/BestBookList/BestBookList.tsx
new file mode 100644
index 00000000..d85318f9
--- /dev/null
+++ b/src/pages/Home/components/BestBookList/BestBookList.tsx
@@ -0,0 +1,83 @@
+import { useNavigate } from 'react-router-dom';
+
+import * as S from './BestBookList.styles';
+
+import { useGetTopBooks } from '@/apis/home/queries';
+import { Chip } from '@/components/Chip/Chip';
+import HorizontalScrollList from '@/components/HorizontalScroll/HorizontalScroll';
+import Icon from '@/components/Icon';
+import ROUTE_PATH from '@/routes/routePath';
+
+const TABS = ['전체', '국내도서', '외국도서', 'ebook', 'sam', '핫트랙스', '교보only'];
+
+const BestBookList = () => {
+  const navigate = useNavigate();
+  const { data: books = [], isLoading, isError, error } = useGetTopBooks();
+
+  if (isLoading) {
+    return (
+      <section css={S.wrapper}>
+        <div css={S.loadingContainer}>데이터를 불러오는 중입니다...</div>
+      </section>
+    );
+  }
+
+  if (isError) {
+    return (
+      <section css={S.wrapper}>
+        <div css={S.errorContainer}>
+          <p>데이터를 불러오는데 실패했습니다.</p>
+          <p css={S.errorMessage}>
+            {error instanceof Error ? error.message : '알 수 없는 에러가 발생했습니다.'}
+          </p>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <section css={S.wrapper}>
+      {/* 베스트/스테디/더보기+ */}
+      <div css={S.titleRow}>
+        <div css={S.titleTabs}>
+          <span css={S.best}>베스트</span>
+          <span css={S.steady}>스테디</span>
+        </div>
+        <button css={S.moreButton} onClick={() => navigate(ROUTE_PATH.HOME_BEST)}>
+          <span css={S.moreText}>더보기</span>
+          <Icon name="add" width={20} height={20} />
+        </button>
+      </div>
+
+      {/* 카테고리 탭 */}
+      <HorizontalScrollList gap="0">
+        {TABS.map((tab, index) => (
+          <div key={tab} css={S.tabItem}>
+            <button css={S.tabButton(index === 0)}>{tab}</button>
+            {index < TABS.length - 1 && <div css={S.tabDivider} />}
+          </div>
+        ))}
+      </HorizontalScrollList>
+
+      {/* 베스트 도서 리스트 */}
+      <ul css={S.bookList}>
+        {books.map(({ ranking, title, author, imageUrl }) => (
+          <li key={ranking} css={S.bookItem}>
+            <img src={imageUrl} alt={title} css={S.thumbnail} />
+            <div css={S.textContainer}>
+              <div css={S.chipWrapper}>
+                <Chip variant={ranking <= 3 ? 'filledGreenText' : 'filledGrayCount'}>
+                  {ranking === 1 ? `Best ${ranking}` : ranking}
+                </Chip>
+              </div>
+              <div css={S.title}>{title}</div>
+              <div css={S.author}>{author}</div>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+};
+
+export default BestBookList;
diff --git a/src/pages/Home/components/CategoryButton/CategoryButton.tsx b/src/pages/Home/components/CategoryButton/CategoryButton.tsx
index 3b6325b8..cbd9299c 100644
--- a/src/pages/Home/components/CategoryButton/CategoryButton.tsx
+++ b/src/pages/Home/components/CategoryButton/CategoryButton.tsx
@@ -18,7 +18,7 @@ const CategoryButton = () => {
         <div key={name} css={Item}>
           <Button
             variant="mainOutlined"
-            icon={<Icon name={name} width={36} height={36} />}
+            icon={<Icon name={name} width={30} height={30} />}
           >
             <span css={Label}>{label}</span>
           </Button>
diff --git a/src/types/TopBookResponseType.ts b/src/types/TopBookResponseType.ts
new file mode 100644
index 00000000..44981ed3
--- /dev/null
+++ b/src/types/TopBookResponseType.ts
@@ -0,0 +1,10 @@
+export type TopBook = {
+    ranking: number;
+    title: string;
+    author: string;
+    publisher: string;
+    imageUrl: string;
+  };
+  
+  export type TopBookResponseType = TopBook[];
+  
\ No newline at end of file


Reviews:
user: login: kwonsaebom
body: 피그마랑 비교했을 때 눈에 보이는 수정사항만 적었는데 참고해서 수정해주세용 ..!

그리고 피그마 보면 여기 사이에 바 같은 게 있음 ㅎ .. 화이팅입니다 ..
<img width="466" alt="image" src="https://github.com/user-attachments/assets/77e77096-77ad-40cb-9ab7-f6a81fde3c6a" />
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-22T15:31:12Z
user: login: sndks
state: COMMENTED
author_association: COLLABORATOR
submitted_at: 2025-05-22T16:17:51Z
user: login: hansoojeongsj
body: 새봄님이 comment 너무 잘 달아주셔서 수정만 빠르게 해서 올려주세요 :)
state: APPROVED
author_association: MEMBER
submitted_at: 2025-05-22T17:55:24Z
user: login: hansoojeongsj
state: COMMENTED
author_association: MEMBER
submitted_at: 2025-05-23T08:14:05Z

Review comments:
diff_hunk: @@ -0,0 +1,147 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/styles/theme';
+
+export const wrapper = css`
+  width: 100%;
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 0 1.2rem;
+`;
+
+// ===== [1] 베스트/스테디/더보기+ =====
+export const titleRow = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 37.5rem;
+  height: auto;
+  padding: 0 0.6rem;
+`;
+
+export const titleTabs = css`
+  display: flex;
+  gap: 1.2rem;
+`;
+
+export const best = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.black1};
+`;
+
+export const steady = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.gray3};
+`;
+
+export const moreButton = css`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 5.7rem;
+  height: 2rem;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+`;
+
+export const moreText = css`
+  ${theme.fonts.subtitle4};
+  color: ${theme.colors.black1};
+  white-space: nowrap;
+`;
+
+// ===== [2] 탭 버튼 =====
+export const tabWrapper = css`
+  display: flex;
+  gap: 1.2rem;
+  padding: 0 0.6rem;
+  width: 35.1rem;
+  height: auto;
+  overflow-x: auto;
+  white-space: nowrap;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const tabButton = (isSelected: boolean) => css`
+  ${isSelected ? theme.fonts.subtitle4 : theme.fonts.body2};
+  color: ${isSelected ? theme.colors.purple7 : theme.colors.gray4};
+  background: none;
+  border: none;
+  height: 2rem;
+  padding: 0;
+  cursor: pointer;
+`;
+
+// ===== [3] 책 리스트 공통 =====
+export const bookList = css`
+  display: flex;
+  flex-direction: column;
+  max-width: 37.5rem;
+`;
+
+export const bookItem = css`
+  display: flex;
+  gap: 1.4rem;
+  width: 100%;
+  padding: 1.2rem 0;
+  border-bottom: 1px solid ${theme.colors.gray2};
+`;
+
+export const thumbnail = css`
+  width: 6rem;
+  height: 8.6rem;
+  object-fill: cover;
path: src/pages/Home/components/BestBookList/BestBookList.styles.ts
user: login: kwonsaebom
body: `object-fill` ➡️ `object-fit` !!
created_at: 2025-05-22T15:08:06Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,147 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/styles/theme';
+
+export const wrapper = css`
+  width: 100%;
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 0 1.2rem;
+`;
+
+// ===== [1] 베스트/스테디/더보기+ =====
+export const titleRow = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 37.5rem;
+  height: auto;
+  padding: 0 0.6rem;
+`;
+
+export const titleTabs = css`
+  display: flex;
+  gap: 1.2rem;
+`;
+
+export const best = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.black1};
+`;
+
+export const steady = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.gray3};
+`;
+
+export const moreButton = css`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 5.7rem;
+  height: 2rem;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+`;
+
+export const moreText = css`
+  ${theme.fonts.subtitle4};
+  color: ${theme.colors.black1};
+  white-space: nowrap;
+`;
+
+// ===== [2] 탭 버튼 =====
+export const tabWrapper = css`
+  display: flex;
+  gap: 1.2rem;
+  padding: 0 0.6rem;
+  width: 35.1rem;
+  height: auto;
+  overflow-x: auto;
+  white-space: nowrap;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const tabButton = (isSelected: boolean) => css`
+  ${isSelected ? theme.fonts.subtitle4 : theme.fonts.body2};
+  color: ${isSelected ? theme.colors.purple7 : theme.colors.gray4};
+  background: none;
+  border: none;
+  height: 2rem;
+  padding: 0;
+  cursor: pointer;
+`;
+
+// ===== [3] 책 리스트 공통 =====
+export const bookList = css`
+  display: flex;
+  flex-direction: column;
+  max-width: 37.5rem;
+`;
+
+export const bookItem = css`
+  display: flex;
+  gap: 1.4rem;
+  width: 100%;
+  padding: 1.2rem 0;
+  border-bottom: 1px solid ${theme.colors.gray2};
+`;
+
+export const thumbnail = css`
+  width: 6rem;
+  height: 8.6rem;
+  object-fill: cover;
+  flex-shrink: 0;
+`;
+
+export const rightSection = css`
+  display: flex;
+  felx-direction: column;
path: src/pages/Home/components/BestBookList/BestBookList.styles.ts
user: login: kwonsaebom
body: `felx-direction` ➡️ `flex-direction` !!
created_at: 2025-05-22T15:08:42Z
author_association: COLLABORATOR
path: src/pages/Home/components/BestBookList/BestBookList.tsx
user: login: kwonsaebom
body: 요것두 아까랑 비슷한 맥락으로 이런식으로 쓰면 더 간결합니다 ! 

```js
const BOOKS = [
  {
    rank: 1,
    title: '단 한 번의 삶',
    author: '김영하 · 복복서가',
    image: book1Img,
  },
  {
    rank: 2,
    title: '2025 시대에듀 All-New KB 국민은행 필기전형 봉투모의고사 9회분+무료NCS강의',
    author: 'SDC · 시대고시기획',
    image: book2Img,
  },
  {
    rank: 3,
    title: '모순',
    author: '양귀자 · 쓰다',
    image: book3Img,
  },
  {
    rank: 4,
    title: '결국 국민이 합니다',
    author: '이재명 · 오마이북',
    image: book4Img,
  },
  {
    rank: 5,
    title: '듀얼 브레인',
    author: '이선 몰릭 · 상상스퀘어',
    image: book5Img,
  },
];

{/* 3. 리스트 */}
<ul css={S.bookList}>
        {BOOKS.map(({ rank, title, author, image }) => (
          <li key={rank} css={S.bookItem}>
            <img src={image} alt={title} css={S.thumbnail} />
            <div css={S.textContainer}>
              <div css={S.chipWrapper}>
                <Chip variant={rank <= 3 ? 'filledGreenText' : 'filledGrayCount'}>
                  {rank === 1 ? `Best ${rank}` : rank}
                </Chip>
              </div>
              <div css={S.title}>{title}</div>
              <div css={S.author}>{author}</div>
            </div>
          </li>
        ))}
      </ul>
```
created_at: 2025-05-22T15:13:19Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,147 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/styles/theme';
+
+export const wrapper = css`
+  width: 100%;
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 0 1.2rem;
+`;
+
+// ===== [1] 베스트/스테디/더보기+ =====
+export const titleRow = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 37.5rem;
+  height: auto;
+  padding: 0 0.6rem;
+`;
+
+export const titleTabs = css`
+  display: flex;
+  gap: 1.2rem;
+`;
+
+export const best = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.black1};
+`;
+
+export const steady = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.gray3};
+`;
+
+export const moreButton = css`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 5.7rem;
+  height: 2rem;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+`;
+
+export const moreText = css`
+  ${theme.fonts.subtitle4};
+  color: ${theme.colors.black1};
+  white-space: nowrap;
+`;
+
+// ===== [2] 탭 버튼 =====
+export const tabWrapper = css`
+  display: flex;
+  gap: 1.2rem;
+  padding: 0 0.6rem;
+  width: 35.1rem;
+  height: auto;
path: src/pages/Home/components/BestBookList/BestBookList.styles.ts
user: login: kwonsaebom
body: `height: 4.4rem` !!
created_at: 2025-05-22T15:20:05Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,147 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/styles/theme';
+
+export const wrapper = css`
+  width: 100%;
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 0 1.2rem;
+`;
+
+// ===== [1] 베스트/스테디/더보기+ =====
+export const titleRow = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 37.5rem;
+  height: auto;
+  padding: 0 0.6rem;
+`;
+
+export const titleTabs = css`
+  display: flex;
+  gap: 1.2rem;
+`;
+
+export const best = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.black1};
+`;
+
+export const steady = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.gray3};
+`;
+
+export const moreButton = css`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 5.7rem;
+  height: 2rem;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+`;
+
+export const moreText = css`
+  ${theme.fonts.subtitle4};
+  color: ${theme.colors.black1};
+  white-space: nowrap;
+`;
+
+// ===== [2] 탭 버튼 =====
+export const tabWrapper = css`
+  display: flex;
path: src/pages/Home/components/BestBookList/BestBookList.styles.ts
user: login: kwonsaebom
body: `align-items: center` 추가 !!
created_at: 2025-05-22T15:20:20Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,147 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/styles/theme';
+
+export const wrapper = css`
+  width: 100%;
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 0 1.2rem;
+`;
+
+// ===== [1] 베스트/스테디/더보기+ =====
+export const titleRow = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 37.5rem;
+  height: auto;
+  padding: 0 0.6rem;
path: src/pages/Home/components/BestBookList/BestBookList.styles.ts
user: login: kwonsaebom
body: ` padding: 0.8rem 0.6rem` !!
created_at: 2025-05-22T15:26:52Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,147 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/styles/theme';
+
+export const wrapper = css`
+  width: 100%;
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 0 1.2rem;
+`;
+
+// ===== [1] 베스트/스테디/더보기+ =====
+export const titleRow = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 37.5rem;
+  height: auto;
+  padding: 0 0.6rem;
+`;
+
+export const titleTabs = css`
+  display: flex;
+  gap: 1.2rem;
path: src/pages/Home/components/BestBookList/BestBookList.styles.ts
user: login: kwonsaebom
body: `gap: 1.6rem` !!
created_at: 2025-05-22T15:27:24Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,147 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/styles/theme';
+
+export const wrapper = css`
+  width: 100%;
+  max-width: 37.5rem;
+  margin: 0 auto;
+  padding: 0 1.2rem;
+`;
+
+// ===== [1] 베스트/스테디/더보기+ =====
+export const titleRow = css`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  max-width: 37.5rem;
+  height: auto;
+  padding: 0 0.6rem;
+`;
+
+export const titleTabs = css`
+  display: flex;
+  gap: 1.2rem;
+`;
+
+export const best = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.black1};
+`;
+
+export const steady = css`
+  ${theme.fonts.title1};
+  color: ${theme.colors.gray3};
+`;
+
+export const moreButton = css`
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  width: 5.7rem;
+  height: 2rem;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+`;
+
+export const moreText = css`
+  ${theme.fonts.subtitle4};
+  color: ${theme.colors.black1};
+  white-space: nowrap;
+`;
+
+// ===== [2] 탭 버튼 =====
+export const tabWrapper = css`
+  display: flex;
+  gap: 1.2rem;
+  padding: 0 0.6rem;
+  width: 35.1rem;
+  height: auto;
+  overflow-x: auto;
+  white-space: nowrap;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+`;
+
+export const tabButton = (isSelected: boolean) => css`
+  ${isSelected ? theme.fonts.subtitle4 : theme.fonts.body2};
+  color: ${isSelected ? theme.colors.purple7 : theme.colors.gray4};
+  background: none;
+  border: none;
+  height: 2rem;
+  padding: 0;
+  cursor: pointer;
+`;
+
+// ===== [3] 책 리스트 공통 =====
+export const bookList = css`
+  display: flex;
+  flex-direction: column;
+  max-width: 37.5rem;
+`;
+
+export const bookItem = css`
+  display: flex;
+  gap: 1.4rem;
+  width: 100%;
+  padding: 1.2rem 0;
+  border-bottom: 1px solid ${theme.colors.gray2};
+`;
+
+export const thumbnail = css`
+  width: 6rem;
+  height: 8.6rem;
+  object-fill: cover;
+  flex-shrink: 0;
+`;
+
+export const rightSection = css`
+  display: flex;
+  felx-direction: column;
path: src/pages/Home/components/BestBookList/BestBookList.styles.ts
user: login: sndks
body: > `felx-direction` ➡️ `flex-direction` !!

헐 이거 진짜 몰랐어요 🫡..
created_at: 2025-05-22T16:17:51Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,109 @@
+import * as S from './BestBookList.styles';
path: src/pages/Home/components/BestBookList/BestBookList.tsx
user: login: hansoojeongsj
body: 절대 경로로 써주기 !
created_at: 2025-05-22T17:26:11Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,109 @@
+import * as S from './BestBookList.styles';
+
+import { Chip } from '@/components/Chip/Chip';
+import book1Img from '@/assets/img/home_best_1.jpg';
+import book2Img from '@/assets/img/home_best_2.jpg';
+import book3Img from '@/assets/img/home_best_3.jpg';
+import book4Img from '@/assets/img/home_best_4.jpg';
+import book5Img from '@/assets/img/home_best_5.jpg';
+import addIcon from '@/assets/icons/svg/ic_add.svg';
+
+const BestBookList = () => {
+  return (
+    <section>
+      {/* 1. 베스트 / 스테디 / 더보기+ */}
+      <div css={S.titleRow}>
+        <div css={S.titleTabs}>
+          <span css={S.best}>베스트</span>
+          <span css={S.steady}>스테디</span>
+        </div>
+        <button css={S.moreButton}>
+          <span css={S.moreText}>더보기</span>
+          <img src={addIcon} alt="더보기 아이콘" width={20} height={20} />
path: src/pages/Home/components/BestBookList/BestBookList.tsx
user: login: hansoojeongsj
body: icon 컴포넌트가 있어요 ! <Icon name={add} width={20} height={20} /> 대강 이런식으로 사용해주면 되고 import로 Icon 컴포넌트를 해주시면 됩니다 :)
created_at: 2025-05-22T17:28:47Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,109 @@
+import * as S from './BestBookList.styles';
+
+import { Chip } from '@/components/Chip/Chip';
+import book1Img from '@/assets/img/home_best_1.jpg';
+import book2Img from '@/assets/img/home_best_2.jpg';
+import book3Img from '@/assets/img/home_best_3.jpg';
+import book4Img from '@/assets/img/home_best_4.jpg';
+import book5Img from '@/assets/img/home_best_5.jpg';
+import addIcon from '@/assets/icons/svg/ic_add.svg';
+
+const BestBookList = () => {
+  return (
+    <section>
+      {/* 1. 베스트 / 스테디 / 더보기+ */}
+      <div css={S.titleRow}>
+        <div css={S.titleTabs}>
+          <span css={S.best}>베스트</span>
+          <span css={S.steady}>스테디</span>
+        </div>
+        <button css={S.moreButton}>
+          <span css={S.moreText}>더보기</span>
+          <img src={addIcon} alt="더보기 아이콘" width={20} height={20} />
+        </button>
+      </div>
+
+      {/* 2. 카테고리 탭 */}
+      <div css={S.tabWrapper}>
+        {['전체', '국내도서', '외국도서', 'ebook', 'sam', '핫트랙스', '교보only'].map(
+          (tab, index) => (
+            <button key={tab} css={S.tabButton(index === 0)}>
+              {tab}
+            </button>
+          ),
+        )}
+      </div>
+
path: src/pages/Home/components/BestBookList/BestBookList.tsx
user: login: hansoojeongsj
body: 이 부분이 3번 이상 공통으로 쓰이고 있어서 하나의 컴포넌트로 만들고 써도 괜찮을 거 같은데, 우선은 빠르게 퍼블리싱 마무리해주세요 !
created_at: 2025-05-22T17:54:39Z
author_association: MEMBER
path: src/pages/Home/components/BestBookList/BestBookList.tsx
user: login: hansoojeongsj
body: 최고 👍 
created_at: 2025-05-22T17:54:50Z
author_association: MEMBER
diff_hunk: @@ -0,0 +1,15 @@
+import { instance } from '@/apis/instance';
+import { END_URL } from '@/utils/constants/apiURL';
+import type { ApiResponseType } from '@/types/apiResponseType';
+import type { TopBookResponseType } from '@/types/TopBookResponseType';
+
+export const getTopBooks = async (): Promise<TopBookResponseType> => {
path: src/apis/home/axios.ts
user: login: hansoojeongsj
body: 굿이다 !
created_at: 2025-05-23T08:14:05Z
author_association: MEMBER

PR comments:
user: login: github-actions[bot]
created_at: 2025-05-22T06:02:51Z
body: 📖 빌드에 성공했습니다
author_association: NONE
user: login: kwonsaebom
created_at: 2025-05-22T15:33:01Z
body: 참고로 홈페이지에서 좌우 스크롤 되는 부분 있으면 수정이가 만든 `HorizontalScroll` 컴포넌트 쓰면 돼 😊 !!!
author_association: COLLABORATOR
user: login: hansoojeongsj
created_at: 2025-05-22T19:30:24Z
body: 디벨롭 브랜치에서 확인을 했을 때 메인 배너에 일서 정지 등 svg가 안보입니다..!
그리고 저 버튼들의 아이콘 크기 다시 한 번 확인해주세용 피그마에 비해 가운데 svg가 너무 커 보입니다. 
![image](https://github.com/user-attachments/assets/fcb13553-4c9f-4934-9c52-d8fcd241bce6)

author_association: MEMBER
user: login: github-actions[bot]
created_at: 2025-05-22T20:39:59Z
body: 📖 빌드에 성공했습니다
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-22T23:09:52Z
body: 📖 빌드에 성공했습니다
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-23T00:33:38Z
body: 📖 빌드에 성공했습니다
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-23T06:16:55Z
body: 📖 빌드에 성공했습니다
author_association: NONE