Merge pull request #305 from Team-Lecue/SP1/Home

데브 머지

package.json

@@ -30,6 +30,7 @@
     "react-draggable": "^4.4.6",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.21.1",
+    "swiper": "^11.1.1",
     "vite-plugin-svgr": "^4.2.0"
   },
   "devDependencies": {

src/Home/components/NavigateLecueBook/NavigateLecueBook.style.ts → src/Home/components/HomeMainBanner/HomeMainBanner.style.ts

@@ -8,25 +8,16 @@ export const MainWrapper = styled.div`
 
 export const IconWrapper = styled.section`
   display: flex;
-
-  /* 바뀔 수 있을 것 같으니 디자인 나오면 다시 확인해보기 ! */
   gap: 16rem;
   align-items: baseline;
 
   width: 100%;
   margin: 4rem 1.8rem 3.5rem 1.6rem;
 `;
 
-export const DummyGraphic = styled.div`
-  width: 37.5rem;
-  height: 20rem;
-
-  background-color: ${({ theme }) => theme.colors.LG};
-`;
-
 export const Button = styled.button`
   padding: 2.1rem 9.4rem 2.2rem 8.8rem;
-  margin: 2rem 0 4rem;
+  margin: 2.7rem 0 4rem;
 
   border: 0.1rem solid ${({ theme }) => theme.colors.BG};
   border-radius: 0 0.2rem 0.2rem 0;

src/Home/components/NavigateLecueBook/index.tsx → src/Home/components/HomeMainBanner/index.tsx

@@ -3,7 +3,8 @@ import { useNavigate } from 'react-router-dom';
 
 import { IcProfile, ImgLogoLecue } from '../../../assets';
 import CommonModal from '../../../components/common/Modal/CommonModal';
-import * as S from './NavigateLecueBook.style';
+import HomeSwiper from '../HomeSwiper';
+import * as S from './HomeMainBanner.style';
 
 function NavigateLecueBook() {
   const navigate = useNavigate();
@@ -31,8 +32,7 @@ function NavigateLecueBook() {
         <IcProfile onClick={handleClickIcProfile} />
       </S.IconWrapper>
 
-      {/* 임시로 넣은 것! 추후 새로운 그래픽으로 수정 */}
-      <S.DummyGraphic></S.DummyGraphic>
+      <HomeSwiper />
 
       <S.Button type="button" onClick={handleClickNavBtn}>
         레큐북 만들기

src/Home/components/HomeSwiper/HomeSwiper.style.ts

@@ -0,0 +1,32 @@
+import styled from '@emotion/styled';
+
+export const SwiperWrapper = styled.section`
+  display: flex;
+
+  .swiper {
+    display: flex;
+    scroll-behavior: smooth;
+    transition-timing-function: linear;
+  }
+
+  .swiper-slide:not(.swiper-slide-active) {
+    opacity: 0.5;
+  }
+
+  .swiper-pagination {
+    bottom: 0;
+  }
+
+  .swiper-pagination-bullet {
+    background-color: ${({ theme }) => theme.colors.LG};
+    opacity: 1;
+  }
+
+  .swiper-pagination-bullet-active {
+    background-color: ${({ theme }) => theme.colors.DG};
+  }
+`;
+
+export const InnerSlider = styled.div`
+  padding-bottom: 2rem;
+`;

src/Home/components/HomeSwiper/index.tsx

@@ -0,0 +1,34 @@
+import 'swiper/css';
+import 'swiper/css/pagination';
+
+import { Autoplay, Pagination } from 'swiper/modules';
+import { Swiper, SwiperSlide } from 'swiper/react';
+
+import { illustrationArr } from '../../constants/HomeIllustArr';
+import * as S from './HomeSwiper.style';
+
+const HomeSwiper = () => {
+  return (
+    <S.SwiperWrapper>
+      <Swiper
+        slidesPerView={1}
+        mousewheel={true}
+        spaceBetween={10}
+        autoplay={{ delay: 2500, disableOnInteraction: false }}
+        loop={true}
+        modules={[Autoplay, Pagination]}
+        pagination={{ clickable: true }}
+      >
+        {illustrationArr.map((illustration) => {
+          return (
+            <SwiperSlide key={illustration.key}>
+              <S.InnerSlider>{illustration.img}</S.InnerSlider>
+            </SwiperSlide>
+          );
+        })}
+      </Swiper>
+    </S.SwiperWrapper>
+  );
+};
+
+export default HomeSwiper;

src/Home/constants/HomeIllustArr.tsx

@@ -0,0 +1,16 @@
+import { ImgHome01, ImgHome02, ImgHome03 } from '../../assets';
+
+export const illustrationArr = [
+  {
+    img: <ImgHome01 />,
+    key: 'ImgHome01',
+  },
+  {
+    img: <ImgHome02 />,
+    key: 'ImgHome02',
+  },
+  {
+    img: <ImgHome03 />,
+    key: 'ImgHome03',
+  },
+];

src/Home/page/index.tsx

@@ -2,8 +2,8 @@ import { useEffect } from 'react';
 
 import LoadingPage from '../../components/common/LoadingPage';
 import { StepProps } from '../../Splash/page/SplashPage';
+import HomeMainBanner from '../components/HomeMainBanner';
 import LecueBookList from '../components/LecueBookList';
-import NavigateLecueBook from '../components/NavigateLecueBook';
 import useGetLecueBook from '../hooks/useGetLecueBook';
 import * as S from './Home.style';
 
@@ -19,7 +19,7 @@ function Home({ handleStep }: StepProps) {
     <LoadingPage />
   ) : (
     <S.Wrapper>
-      <NavigateLecueBook />
+      <HomeMainBanner />
 
       {token && <LecueBookList title="즐겨찾기한 레큐북" />}
       <LecueBookList title="인기 레큐북 구경하기" />

src/assets/index.ts

@@ -37,6 +37,9 @@ import ImgBookOrangeBig from './img/img_book_orange_big.svg?react';
 import ImgEmpty from './img/img_empty.svg?react';
 import ImgError from './img/img_error.svg?react';
 import ImgEvent from './img/img_event.svg?react';
+import ImgHome01 from './img/img_home_01.svg?react';
+import ImgHome02 from './img/img_home_02.svg?react';
+import ImgHome03 from './img/img_home_03.svg?react';
 import ImgKakao01 from './img/img_kakao_01.svg?react';
 import ImgKakao02 from './img/img_kakao_02.svg?react';
 import ImgKakao03 from './img/img_kakao_03.svg?react';
@@ -102,6 +105,9 @@ export {
   ImgEmpty,
   ImgError,
   ImgEvent,
+  ImgHome01,
+  ImgHome02,
+  ImgHome03,
   ImgKakao01,
   ImgKakao02,
   ImgKakao03,

yarn.lock

@@ -3612,6 +3612,11 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==
 
+swiper@^11.1.1:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.1.1.tgz#5efaa222d4a47a3ac75090cfc2fda6e53e564982"
+  integrity sha512-jGmEA/fNz1lACIcY4/40ggm1Gcyv+EUivmgV/Jd2WFPsEJhbWXnRAwzZR8OPjkBLtDxmzcoYG/iiAMWfRs0YKQ==
+
 table@^6.8.1:
   version "6.8.1"
   resolved "https://registry.yarnpkg.com/table/-/table-6.8.1.tgz#ea2b71359fe03b017a5fbc296204471158080bdf"