From 485cb67b9a7f22f52122f7618f26f7bd01e43954 Mon Sep 17 00:00:00 2001
From: seung365 <bdh3659@naver.com>
Date: Tue, 20 Aug 2024 19:39:02 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EC=82=B4?=
 =?UTF-8?q?=ED=8E=B4=EB=B3=B4=EA=B8=B0=20swiper=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../HomePage/{ => LookAround}/Contents.tsx    |  4 +-
 .../{ => LookAround}/ContentsInfo.tsx         | 19 ++++---
 .../HomePage/LookAround/MobileSwiper.tsx      | 53 +++++++++++++++++++
 src/pages/Home/index.tsx                      |  3 +-
 4 files changed, 69 insertions(+), 10 deletions(-)
 rename src/components/HomePage/{ => LookAround}/Contents.tsx (88%)
 rename src/components/HomePage/{ => LookAround}/ContentsInfo.tsx (78%)
 create mode 100644 src/components/HomePage/LookAround/MobileSwiper.tsx

diff --git a/src/components/HomePage/Contents.tsx b/src/components/HomePage/LookAround/Contents.tsx
similarity index 88%
rename from src/components/HomePage/Contents.tsx
rename to src/components/HomePage/LookAround/Contents.tsx
index 56cc1dc..defc673 100644
--- a/src/components/HomePage/Contents.tsx
+++ b/src/components/HomePage/LookAround/Contents.tsx
@@ -1,6 +1,6 @@
 import { Grid, GridItem } from '@chakra-ui/react';
-import { ContentsInfo } from '@/components/HomePage/ContentsInfo';
-import { TestersBox } from './TestersBox';
+import { ContentsInfo } from '@/components/HomePage/LookAround/ContentsInfo';
+import { TestersBox } from '../TestersBox';
 
 export const Contents = () => {
   return (
diff --git a/src/components/HomePage/ContentsInfo.tsx b/src/components/HomePage/LookAround/ContentsInfo.tsx
similarity index 78%
rename from src/components/HomePage/ContentsInfo.tsx
rename to src/components/HomePage/LookAround/ContentsInfo.tsx
index 8460f5a..9524879 100644
--- a/src/components/HomePage/ContentsInfo.tsx
+++ b/src/components/HomePage/LookAround/ContentsInfo.tsx
@@ -2,6 +2,7 @@ import { Grid, GridItem, Img } from '@chakra-ui/react';
 import styled from '@emotion/styled';
 import { useMediaQuery } from 'react-responsive';
 import { breakpoints } from '@/styles/variants';
+import { MobileSwiper } from './MobileSwiper';
 
 export const ContentsInfo = () => {
   const isMobile = useMediaQuery({ query: `(max-width : ${breakpoints.md})` });
@@ -15,11 +16,17 @@ export const ContentsInfo = () => {
           <Img src="/images/contentsInfoLogo.svg" alt="Logo" mb={5} />
         )}
         <Grid templateColumns={{ base: '1fr', md: 'repeat(3, 1fr)' }} gap={6}>
-          {cardContents.map((content, index) => (
-            <StyledGridItem key={index}>
-              <StyledImg src={content.imageSrc} alt={`gif파일${index + 1}`} />
-            </StyledGridItem>
-          ))}
+          {isMobile ? (
+            <MobileSwiper />
+          ) : (
+            <>
+              {cardContents.map((content, index) => (
+                <StyledGridItem key={index}>
+                  <StyledImg src={content.imageSrc} alt={`gif파일${index + 1}`} />
+                </StyledGridItem>
+              ))}
+            </>
+          )}
         </Grid>
       </LogoWrapper>
     </Wrapper>
@@ -62,7 +69,7 @@ const StyledImg = styled(Img)`
   object-fit: cover; // 이미지가 컨테이너에 맞게 조정되도록 설정
 `;
 
-const cardContents = [
+export const cardContents = [
   {
     imageSrc: '/images/composition1.svg',
   },
diff --git a/src/components/HomePage/LookAround/MobileSwiper.tsx b/src/components/HomePage/LookAround/MobileSwiper.tsx
new file mode 100644
index 0000000..26a1b26
--- /dev/null
+++ b/src/components/HomePage/LookAround/MobileSwiper.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
+import styled from '@emotion/styled';
+import { Pagination, Autoplay, Navigation } from 'swiper/modules';
+
+import 'swiper/css';
+import 'swiper/css/pagination';
+import 'swiper/css/autoplay';
+import 'swiper/css/navigation';
+
+export const MobileSwiper = () => {
+  return (
+    <>
+      <SwiperWrapper
+        modules={[Pagination, Autoplay, Navigation]}
+        pagination={{ clickable: true }}
+        autoplay={{ delay: 3000 }}
+        navigation
+      >
+        <SwiperSlide>
+          <SlideContent>
+            <img src="/images/composition1.svg" alt="살펴보기 이미지 1" />
+          </SlideContent>
+        </SwiperSlide>
+        <SwiperSlide>
+          <SlideContent>
+            <img src="/images/composition2.svg" alt="살펴보기 이미지 2" />
+          </SlideContent>
+        </SwiperSlide>
+        <SwiperSlide>
+          <SlideContent>
+            <img src="/images/composition3.svg" alt="살펴보기 이미지 3" />
+          </SlideContent>
+        </SwiperSlide>
+      </SwiperWrapper>
+    </>
+  );
+};
+
+const SwiperWrapper = styled(Swiper)`
+  width: 100%;
+  height: 100%;
+`;
+
+const SlideContent = styled.div`
+  text-align: center;
+  font-size: 18px;
+
+  /* Center slide text vertically */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 1bb3a27..43b4ce8 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,8 +1,7 @@
 import { useEffect } from 'react';
-import { Contents } from '@/components/HomePage/Contents';
+import { Contents } from '@/components/HomePage/LookAround/Contents';
 import styled from '@emotion/styled';
 
-
 export const HomePage = () => {
   useEffect(() => {
     window.scrollTo(0, 0);