From bbf4d38929bbfe9e7d3edcf17b9eb0c2c69bac26 Mon Sep 17 00:00:00 2001 From: dwdjjj Date: Mon, 17 Oct 2022 17:55:06 +0900 Subject: [PATCH] =?UTF-8?q?[=ED=99=88=ED=99=94=EB=A9=B4]=20=EC=8A=AC?= =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=93=9C=20=EB=B7=B0,=20Application=20?= =?UTF-8?q?=EB=B7=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20#25=20make?= =?UTF-8?q?=20slide=20component=20&=20footer=20icon=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 59 +++++++++++++++++ package.json | 1 + src/components/layout/Footer.tsx | 16 +++-- .../mainpage/slideSection/index.tsx | 64 +++++++++++++++++++ src/pages/index.tsx | 10 ++- src/styles/layout/footer.ts | 17 ++++- src/styles/mainpage/slideSection.ts | 33 ++++++++++ src/styles/reset.ts | 21 ++++++ 8 files changed, 212 insertions(+), 9 deletions(-) create mode 100644 src/styles/mainpage/slideSection.ts diff --git a/package-lock.json b/package-lock.json index a3474f5..53b22b1 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,6 +23,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" } @@ -6516,6 +6517,14 @@ "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1" } }, + "node_modules/dom7": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz", + "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==", + "dependencies": { + "ssr-window": "^4.0.0" + } + }, "node_modules/domelementtype": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", @@ -14930,6 +14939,11 @@ "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==" }, + "node_modules/ssr-window": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", + "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" + }, "node_modules/stable": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz", @@ -15317,6 +15331,29 @@ "boolbase": "~1.0.0" } }, + "node_modules/swiper": { + "version": "8.4.4", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.4.tgz", + "integrity": "sha512-jA/8BfOZwT8PqPSnMX0TENZYitXEhNa7ZSNj1Diqh5LZyUJoBQaZcqAiPQ/PIg1+IPaRn/V8ZYVb0nxHMh51yw==", + "funding": [ + { + "type": "patreon", + "url": "https://www.patreon.com/swiperjs" + }, + { + "type": "open_collective", + "url": "http://opencollective.com/swiper" + } + ], + "hasInstallScript": true, + "dependencies": { + "dom7": "^4.0.4", + "ssr-window": "^4.0.2" + }, + "engines": { + "node": ">= 4.7.0" + } + }, "node_modules/symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", @@ -21394,6 +21431,14 @@ "entities": "^2.0.0" } }, + "dom7": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz", + "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==", + "requires": { + "ssr-window": "^4.0.0" + } + }, "domelementtype": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", @@ -27312,6 +27357,11 @@ "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz", "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==" }, + "ssr-window": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz", + "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ==" + }, "stable": { "version": "0.1.8", "resolved": "https://registry.npmjs.org/stable/-/stable-0.1.8.tgz", @@ -27602,6 +27652,15 @@ } } }, + "swiper": { + "version": "8.4.4", + "resolved": "https://registry.npmjs.org/swiper/-/swiper-8.4.4.tgz", + "integrity": "sha512-jA/8BfOZwT8PqPSnMX0TENZYitXEhNa7ZSNj1Diqh5LZyUJoBQaZcqAiPQ/PIg1+IPaRn/V8ZYVb0nxHMh51yw==", + "requires": { + "dom7": "^4.0.4", + "ssr-window": "^4.0.2" + } + }, "symbol-tree": { "version": "3.2.4", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", diff --git a/package.json b/package.json index 164b901..db7fa1c 100644 --- a/package.json +++ b/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" }, diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx index 45dd908..39d761a 100644 --- a/src/components/layout/Footer.tsx +++ b/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 ( - - - github - - mail + + + + + + github + + mail + + + + How We Affect + + + {slideList.map((item, idx): JSX.Element => { + return ( + + + {idx} + + + cat + + ); + })} + + + + ); +} + +export default SlideSection; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index fb2c594..e089ffa 100644 --- a/src/pages/index.tsx +++ b/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 ( -
- -
+ <> +
+ +
+ + ); }; diff --git a/src/styles/layout/footer.ts b/src/styles/layout/footer.ts index 72318b9..b4c81d5 100644 --- a/src/styles/layout/footer.ts +++ b/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, +}; diff --git a/src/styles/mainpage/slideSection.ts b/src/styles/mainpage/slideSection.ts new file mode 100644 index 0000000..18706d0 --- /dev/null +++ b/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; +`; diff --git a/src/styles/reset.ts b/src/styles/reset.ts index 03e71c8..b8de9c7 100644 --- a/src/styles/reset.ts +++ b/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;