[홈화면] 슬라이드 뷰, Application 뷰 컴포넌트 #25 make slide component & footer ic…

…on 추가

package.json

@@ -18,6 +18,7 @@
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.0",
     "react-scripts": "5.0.1",
+    "swiper": "^8.4.4",
     "typescript": "^4.8.3",
     "web-vitals": "^2.1.4"
   },

src/components/layout/Footer.tsx

@@ -3,6 +3,8 @@ import {
   FooterBox,
   FooterContents,
   FooterIconBox,
+  FooterRightBox,
+  FooterLeftBox,
 } from "../../styles/layout/footer";
 import { ReactComponent as NLslogo } from "../../assets/NL_logo-white.svg";
 import gitIcon from "../../assets/github_icon.svg";
@@ -13,11 +15,15 @@ function Footer() {
   return (
     <FooterBox>
       <FooterIconBox>
-        <NLslogo width="35px" />
-        <a href="https://github.com/Network-Leader">
-          <img src={gitIcon} alt="github" />
-        </a>
-        <img src={mailIcon} alt="mail" />
+        <FooterLeftBox>
+          <NLslogo width="35px" />
+        </FooterLeftBox>
+        <FooterRightBox>
+          <a href="https://github.com/Network-Leader">
+            <img src={gitIcon} alt="github" />
+          </a>
+          <img src={mailIcon} alt="mail" />
+        </FooterRightBox>
       </FooterIconBox>
       <FooterContents>
         <Text

src/components/mainpage/slideSection/index.tsx

@@ -1 +1,65 @@
 import React from "react";
+import {
+  ImgBox,
+  SlideWrapper,
+  SlideElement,
+} from "../../../styles/mainpage/slideSection";
+import { Text } from "../../common";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+import { Pagination, Navigation } from "swiper";
+
+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",
+  ];
+
+  return (
+    <>
+      <SlideWrapper>
+        <Text size="h1" weight="bold">
+          How We Affect
+        </Text>
+        <Swiper
+          modules={[Pagination, Navigation]}
+          spaceBetween={100}
+          slidesPerView={1}
+          loop={true}
+          pagination={{
+            clickable: true,
+          }}
+          navigation={true}
+        >
+          {slideList.map((item, idx): JSX.Element => {
+            return (
+              <SwiperSlide key={item} virtualIndex={idx}>
+                <Text size="h4" weight="bold">
+                  {idx}
+                </Text>
+
+                <img
+                  style={{
+                    width: "491px",
+                    height: "325px",
+                    borderRadius: "10px",
+                  }}
+                  src={item}
+                  alt="cat"
+                />
+              </SwiperSlide>
+            );
+          })}
+        </Swiper>
+      </SlideWrapper>
+    </>
+  );
+}
+
+export default SlideSection;

src/pages/index.tsx

@@ -1,11 +1,15 @@
 import React from "react";
+import SlideSection from "../components/mainpage/slideSection";
 import VideoTextSection from "../components/mainpage/videoTextSection";
 
 const MainPage = () => {
   return (
-    <div style={{ height: "8000px" }}>
-      <VideoTextSection />
-    </div>
+    <>
+      <div style={{ height: "8000px" }}>
+        <VideoTextSection />
+      </div>
+      <SlideSection />
+    </>
   );
 };
 

src/styles/layout/footer.ts

@@ -14,16 +14,31 @@ const FooterBox = styled.div`
 
 const FooterIconBox = styled.div`
   display: flex;
+  justify-content: flex-start;
   min-height: 35px;
   margin-top: 148px;
   min-width: 942px;
   border-bottom: 2px solid white;
 `;
 
+const FooterRightBox = styled.div`
+  /* float: right; */
+`;
+
+const FooterLeftBox = styled.div`
+  margin-right: auto;
+`;
+
 const FooterContents = styled.div`
   min-width: 942px;
   color: white;
   padding: 40px 0px;
 `;
 
-export { FooterBox, FooterIconBox, FooterContents };
+export {
+  FooterBox,
+  FooterIconBox,
+  FooterRightBox,
+  FooterLeftBox,
+  FooterContents,
+};

src/styles/mainpage/slideSection.ts

@@ -0,0 +1,33 @@
+import styled from "@emotion/styled";
+import theme from "../../theme/theme";
+
+export const SlideWrapper = styled.section`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+  width: 100vw;
+  height: 800px;
+  margin-top: 100px;
+  background-color: orange;
+`;
+
+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;
+`;

src/styles/reset.ts

@@ -133,5 +133,26 @@ const reset = css`
     text-decoration: none;
     color: inherit;
   }
+  .swiper {
+    margin: 100px auto;
+    width: 500px;
+    height: 325px;
+    overflow: visible;
+  }
+  .swiper-slide {
+    align-items: center;
+    justify-content: center;
+    font-size: 22px;
+    font-weight: bold;
+    color: #fff;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  .swiper-slide-active,
+  .swiper-slide-active + .swiper-slide,
+  .swiper-slide-active + .swiper-slide + .swiper-slide,
+  .swiper-slide-active + .swiper-slide + .swiper-slide + .swiper-slide {
+    opacity: 1;
+  }
 `;
 export default reset;