Merge pull request #110 from Beside-Potenday/seungbeom

feat: 모바일 살펴보기 swiper 추가

src/components/HomePage/Contents.tsx → 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 (

src/components/HomePage/ContentsInfo.tsx → 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',
   },

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;
+`;

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);