[FEAT] onboarding page carousel 기능 구현 및 API 붙이기

src/pages/Onboarding/components/BookList.tsx

@@ -1,35 +1,45 @@
 /** @jsxImportSource @emotion/react */
 
 import styled from '@emotion/styled';
-import Image from '../assets/image.png';
+import useSWR from 'swr';
 import { css } from '@emotion/react';
+import { fetcher } from '@utils/fetcher';
+import { useState } from 'react';
+
+interface imgSrcType {
+  thumbnail: string;
+}
 
 /** 책 한 권 */
-export function BookItem() {
+export function BookItem({ thumbnail }: imgSrcType) {
   return (
     <li css={bookItemSize}>
-      <img css={imageSize} src={Image} alt="book-cover" />
+      <img css={imageSize} src={thumbnail} alt="book-cover" />
     </li>
   );
 }
 
 /** 책들 리스트 */
 export default function BookList() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const { data } = useSWR('https://dapi.kakao.com/v3/search/book?query=all', fetcher);
+
+  const handleCarouselLeft = () => {
+    activeIndex === 0 ? setActiveIndex(data.length - 1) : setActiveIndex((prev) => (prev -= 1));
+  };
+
+  const handleCarouselRight = () => {
+    activeIndex === data.length - 1 ? setActiveIndex(0) : setActiveIndex((prev) => (prev += 1));
+  };
+
   return (
-    <OnboardingBookList>
-      <CarouselArrowLeft>&lt;</CarouselArrowLeft>
-      <BookItem />
-      <BookItem />
-      <BookItem />
-      <BookItem />
-      <BookItem />
-      <BookItem />
-      <BookItem />
-      <BookItem />
-      <BookItem />
-      <BookItem />
-      <CarouselArrowRight>&gt;</CarouselArrowRight>
-    </OnboardingBookList>
+    <OnboardingWrapper>
+      <CarouselArrowLeft onClick={handleCarouselLeft}>&lt;</CarouselArrowLeft>
+      <OnboardingBookList $activeIndex={activeIndex}>
+        {data?.map(({ thumbnail }: imgSrcType) => <BookItem thumbnail={thumbnail} />)}
+      </OnboardingBookList>
+      <CarouselArrowRight onClick={handleCarouselRight}>&gt;</CarouselArrowRight>
+    </OnboardingWrapper>
   );
 }
 
@@ -44,15 +54,11 @@ const imageSize = css`
   height: 100%;
 `;
 
-// 네이밍 제가 지었지만 참 그지 같네여;;;
-const OnboardingBookList = styled.ul`
+const OnboardingWrapper = styled.div`
   scrollbar-width: none;
 
-  overflow: auto;
-  display: flex;
-  gap: 4rem;
+  overflow-x: auto;
 
-  box-sizing: border-box;
   width: 100vw;
   height: 370px;
   padding: 0 5rem;
@@ -63,6 +69,21 @@ const OnboardingBookList = styled.ul`
   }
 `;
 
+interface InOnboardingBookListProps {
+  $activeIndex: number;
+}
+// 네이밍 제가 지었지만 참 그지 같네여;;;
+const OnboardingBookList = styled.ul<InOnboardingBookListProps>`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  gap: 4rem;
+  transition: all 0.3s ease;
+  transform: ${({ $activeIndex }) =>
+    `translateX(calc(50vw - 5rem - ((25rem) / 2) - ${$activeIndex * 29}rem))`};
+  /* 전체 너비 - 왼쪽 화살표 아이콘 크기 - 이미지 절반 - 해당 index*/
+`;
+
 const CarouselArrow = styled.div`
   cursor: pointer;
 
@@ -77,6 +98,7 @@ const CarouselArrow = styled.div`
   height: 3.5rem;
 
   font-size: 5rem;
+  z-index: 1;
 `;
 
 const CarouselArrowLeft = styled(CarouselArrow)`

src/pages/Onboarding/components/Button.tsx

@@ -3,10 +3,10 @@ import { commonFlex } from '@styles/common';
 
 /** Button */
 export default function Button() {
-  return <GoToButton>바로가기</GoToButton>;
+  return <GoToButton href="/search">바로가기</GoToButton>;
 }
 
-const GoToButton = styled.button`
+const GoToButton = styled.a`
   ${commonFlex}
   width: 30rem;
   height: 8rem;