[홈화면] 슬라이드 뷰, Application 뷰 컴포넌트 #25 slide update

Network-Leader · Oct 31, 2022 · 76ee516 · 76ee516
1 parent bbf4d38
commit 76ee516
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 22 deletions.
diff --git a/src/assets/affect_sample1.png b/src/assets/affect_sample1.png
diff --git a/src/assets/affect_sample2.png b/src/assets/affect_sample2.png
diff --git a/src/assets/affect_sample3.png b/src/assets/affect_sample3.png
diff --git a/src/components/mainpage/slideSection/index.tsx b/src/components/mainpage/slideSection/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 import {
   ImgBox,
   SlideWrapper,
-  SlideElement,
+  TitleBox,
 } from "../../../styles/mainpage/slideSection";
 import { Text } from "../../common";
 
@@ -11,12 +11,11 @@ import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/navigation";
 import { Pagination, Navigation } from "swiper";
+import sample1 from "../../../assets/affect_sample1.png";
+import SlideNextButton from "./SlideNextButton";
 
 function SlideSection() {
   const slideList = [
-    "https://image.fmkorea.com/files/attach/new/20180627/486616/53929437/1125408696/3d94f3de6495906341f10d941b69ec3c.jpeg",
-    "https://cdn.clien.net/web/api/file/F01/11493442/9bf8a4bfc1ce2e.jpg",
-    "https://photo.coolenjoy.co.kr/data/editor/1608/Bimg_20160830182658_rnuhpunc.jpg",
     "https://mblogthumb-phinf.pstatic.net/MjAyMjAxMjVfMTAg/MDAxNjQzMTAyOTg0ODA5.q_DQWr2DSXnLYALcvh7u9o8DLZbD6OixJWa_Y7bwv4Yg.IHgg6s43ZkW0jRw3kKxr0WWrccnHJ0HflOYCbDVdGwog.JPEG.minziminzi128/IMG_7369.JPG?type=w800",
     "https://pds.joongang.co.kr/news/component/htmlphoto_mmdata/202111/07/762ce144-d666-4790-8609-c78416910e88.jpg",
   ];
@@ -36,14 +35,16 @@ function SlideSection() {
             clickable: true,
           }}
           navigation={true}
+          loopAdditionalSlides={2}
         >
           {slideList.map((item, idx): JSX.Element => {
             return (
               <SwiperSlide key={item} virtualIndex={idx}>
-                <Text size="h4" weight="bold">
-                  {idx}
-                </Text>
-
+                <TitleBox>
+                  <Text color="white" size="h3">
+                    title
+                  </Text>
+                </TitleBox>
                 <img
                   style={{
                     width: "491px",

diff --git a/src/styles/mainpage/slideSection.ts b/src/styles/mainpage/slideSection.ts
@@ -1,5 +1,4 @@
 import styled from "@emotion/styled";
-import theme from "../../theme/theme";
 
 export const SlideWrapper = styled.section`
   position: relative;
@@ -10,24 +9,17 @@ export const SlideWrapper = styled.section`
   width: 100vw;
   height: 800px;
   margin-top: 100px;
-  background-color: orange;
+  background-color: white;
 `;
 
 export const ImgBox = styled.div<{ title: string; content: string }>`
   position: relative;
   background-image: ${(props) => props.content};
 `;
 
-export const SlideElement = styled.div`
-  border-radius: 10px;
-  width: 100%;
-  height: 325px;
-  background-size: cover;
-`;
-
-export const NextElement = styled.div`
-  border-radius: 10px;
-  width: 50%;
-  height: 325px;
-  background-size: cover;
+export const TitleBox = styled.div`
+  position: absolute;
+  top: 80%;
+  left: 5%;
+  width: 30%;
 `;
diff --git a/src/styles/reset.ts b/src/styles/reset.ts
@@ -138,6 +138,7 @@ const reset = css`
     width: 500px;
     height: 325px;
     overflow: visible;
+    position: relative;
   }
   .swiper-slide {
     align-items: center;
@@ -154,5 +155,15 @@ const reset = css`
   .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
     opacity: 1;
   }
+  .swiper-button-prev::after {
+    opacity: 0;
+    display: none;
+  }
+  .swiper-button-next::after {
+    color: white;
+    margin-top: 220px;
+    margin-right: 30px;
+    font-size: 30px;
+  }
 `;
 export default reset;