diff --git a/package-lock.json b/package-lock.json index 47fa204..bd01045 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,6 +22,8 @@ "react-dom": "^18.2.0", "react-router-dom": "^6.14.1", "react-scripts": "5.0.1", + "react-slick": "^0.29.0", + "slick-carousel": "^1.8.1", "styled-components": "^6.0.4", "styled-reset": "^4.5.1", "web-vitals": "^2.1.4" @@ -6185,6 +6187,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz", "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==" }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -7316,6 +7323,11 @@ "node": ">=10.13.0" } }, + "node_modules/enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==" + }, "node_modules/entities": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", @@ -12010,6 +12022,12 @@ "jiti": "bin/jiti.js" } }, + "node_modules/jquery": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz", + "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==", + "peer": true + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -12103,6 +12121,14 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==" }, + "node_modules/json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "dependencies": { + "string-convert": "^0.2.0" + } + }, "node_modules/json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -17821,6 +17847,22 @@ } } }, + "node_modules/react-slick": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz", + "integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==", + "dependencies": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + }, + "peerDependencies": { + "react": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14.0 || ^15.0.1 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -18002,6 +18044,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "node_modules/resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "node_modules/resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", @@ -18607,6 +18654,14 @@ "node": ">=8" } }, + "node_modules/slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "peerDependencies": { + "jquery": ">=1.8.0" + } + }, "node_modules/sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -18771,6 +18826,11 @@ "safe-buffer": "~5.2.0" } }, + "node_modules/string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + }, "node_modules/string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", @@ -25080,6 +25140,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz", "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==" }, + "classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -25903,6 +25968,11 @@ "tapable": "^2.2.0" } }, + "enquire.js": { + "version": "2.1.6", + "resolved": "https://registry.npmjs.org/enquire.js/-/enquire.js-2.1.6.tgz", + "integrity": "sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==" + }, "entities": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/entities/-/entities-2.2.0.tgz", @@ -29275,6 +29345,12 @@ "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz", "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg==" }, + "jquery": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.0.tgz", + "integrity": "sha512-umpJ0/k8X0MvD1ds0P9SfowREz2LenHsQaxSohMZ5OMNEU2r0tf8pdeEFTHMFxWVxKNyU9rTtK3CWzUCTKJUeQ==", + "peer": true + }, "js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -29348,6 +29424,14 @@ "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz", "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==" }, + "json2mq": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/json2mq/-/json2mq-0.2.0.tgz", + "integrity": "sha512-SzoRg7ux5DWTII9J2qkrZrqV1gt+rTaoufMxEzXbS26Uid0NwaJd123HcoB80TgubEppxxIGdNxCx50fEoEWQA==", + "requires": { + "string-convert": "^0.2.0" + } + }, "json5": { "version": "2.2.3", "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", @@ -33049,6 +33133,18 @@ "workbox-webpack-plugin": "^6.4.1" } }, + "react-slick": { + "version": "0.29.0", + "resolved": "https://registry.npmjs.org/react-slick/-/react-slick-0.29.0.tgz", + "integrity": "sha512-TGdOKE+ZkJHHeC4aaoH85m8RnFyWqdqRfAGkhd6dirmATXMZWAxOpTLmw2Ll/jPTQ3eEG7ercFr/sbzdeYCJXA==", + "requires": { + "classnames": "^2.2.5", + "enquire.js": "^2.1.6", + "json2mq": "^0.2.0", + "lodash.debounce": "^4.0.8", + "resize-observer-polyfill": "^1.5.0" + } + }, "read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -33193,6 +33289,11 @@ "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz", "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==" }, + "resize-observer-polyfill": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz", + "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==" + }, "resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", @@ -33618,6 +33719,12 @@ "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==" }, + "slick-carousel": { + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/slick-carousel/-/slick-carousel-1.8.1.tgz", + "integrity": "sha512-XB9Ftrf2EEKfzoQXt3Nitrt/IPbT+f1fgqBdoxO3W/+JYvtEOW6EgxnWfr9GH6nmULv7Y2tPmEX3koxThVmebA==", + "requires": {} + }, "sockjs": { "version": "0.3.24", "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.24.tgz", @@ -33750,6 +33857,11 @@ "safe-buffer": "~5.2.0" } }, + "string-convert": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/string-convert/-/string-convert-0.2.1.tgz", + "integrity": "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A==" + }, "string-length": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/string-length/-/string-length-4.0.2.tgz", diff --git a/package.json b/package.json index 12f2e11..ae101ed 100644 --- a/package.json +++ b/package.json @@ -10,15 +10,14 @@ "@fortawesome/free-regular-svg-icons": "^6.4.0", "@fortawesome/free-solid-svg-icons": "^6.4.0", "@fortawesome/react-fontawesome": "^0.2.0", - "@testing-library/jest-dom": "^5.16.5", - "@testing-library/react": "^13.4.0", - "@testing-library/user-event": "^13.5.0", "i": "^0.3.7", "npm": "^9.7.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.14.1", "react-scripts": "5.0.1", + "react-slick": "^0.29.0", + "slick-carousel": "^1.8.1", "styled-components": "^6.0.4", "styled-reset": "^4.5.1", "web-vitals": "^2.1.4" diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index eb01384..eb43322 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -4,8 +4,8 @@ function Footer() { return (
- 11번가(주)는 통신판매중개자로서 오픈마켓 11번가의 거래당사자가 아니며, 입점판매자가 등록한 - 상품정보 및 거래에 대해 11번가(주)는 일체 책임을 지지 않습니다. + MANGO(주)는 통신판매중개자로서 오픈마켓 MANGO의 거래당사자가 아니며, 입점판매자가 등록한 + 상품정보 및 거래에 대해 MANGO(주)는 일체 책임을 지지 않습니다.
); @@ -17,8 +17,6 @@ const Container = styled.div` align-items: center; width: 100%; height: 100px; - position: relative; - transform: translateY(0%); background-color: #fffd55; color: #25b00d; `; diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx index 17ab5cc..a83f650 100644 --- a/src/components/Header/Header.jsx +++ b/src/components/Header/Header.jsx @@ -55,7 +55,7 @@ function Header() { const Container = styled.header` width: 100%; - min-height: 186px; + min-height: 120px; `; const Box = styled.div` diff --git a/src/pages/Home/Carousel.jsx b/src/pages/Home/Carousel.jsx new file mode 100644 index 0000000..8f85eda --- /dev/null +++ b/src/pages/Home/Carousel.jsx @@ -0,0 +1,161 @@ +import { styled } from 'styled-components'; +import Slider from 'react-slick'; +import 'slick-carousel/slick/slick.css'; +import 'slick-carousel/slick/slick-theme.css'; +// import { useState } from 'react'; + +function Carousel() { + const settings = { + infinite: true, // loop를 만들지(마지막 이미지-처음 이미지-중간 이미지들-마지막 이미지) + speed: 300, // 애미메이션의 속도, 단위는 milliseconds + slidesToShow: 1, // 한번에 몇개의 슬라이드를 보여줄 지 + slidesToScroll: 1, // 한번 스크롤시 몇장의 슬라이드를 넘길지 + dots: true, + arrows: true, + pauseOnHover: true, + draggable: true + // 캐러셀이미지가 몇번째인지 알려주는 점을 보여줄지 정한다. + // dotsClass: 'custom_paging', + // customPaging: function (slider, i) { + // const thumb = slider.$slides[i].data(); + // return '' + i + ''; + // } + // centerPadding: '0px' // 0px 하면 슬라이드 끝쪽 이미지가 안잘림 + // beforeChange: (_current, next) => { + // changeCarouselImage(items[next].imageUrl[1]); + // setImg(next); + // }, + // autoplay: true, + // autoplaySpeed: 3000, //자동으로 슬라이드되게 만들어준다. + }; + return ( +
+ +
+

1

+
+
+

2

+
+
+

3

+
+
+

4

+
+
+

5

+
+
+

6

+
+ +
+ ); +} + +const StyledSlider = styled(Slider)` + width: 1920px; + height: 400px; + + .slick-slide { + background-color: #eaf8ff; + width: 100%; + height: 430px; + z-index: 1; + border-bottom: 1px solid lightgray; + } + + .slick-prev { + background-color: black; + opacity: 0.35; + width: 38.5px; + height: 30px; + top: 90%; + left: 90%; + z-index: 1; + padding-top: 2px; + border-radius: 50% 0% 0% 50%; + } + + .slick-next { + background-color: black; + opacity: 0.35; + width: 38px; + height: 30px; + top: 90%; + right: 6%; + z-index: 1; + padding-top: 2px; + border-radius: 0% 50% 50% 0%; + } + + .slick-prev:before, + .slick-next:before { + font-family: 'Font Awesome Free'; + font-size: 36px; + color: #ffffff; + } + + .slides .slick-prev, + .slides .slick-next { + position: absolute; + } + + .slick-dots { + // 점 스타일 관련 코드 + } +`; + +export default Carousel; + +// const [oldSlide, setOldSlide] = useState(0); +// const [activeSlide, setActiveSlide] = useState(0); +// const [activeSlide2, setActiveSlide2] = useState(0); + +// const settings = { +// dots: true, +// infinite: true, +// speed: 1000, +// slidesToShow: 1, +// slidesToScroll: 1, +// beforeChange: (current, next) => { +// setOldSlide(current); +// setActiveSlide(next); +// }, +// afterChange: (current) => setActiveSlide2(current) +// }; +// return ( +//
+//

beforeChange and afterChange hooks

+//

+// BeforeChange {'=>'} oldSlide: {oldSlide} +//

+//

+// BeforeChange {'=>'} activeSlide: {activeSlide} +//

+//

+// AfterChange {'=>'} activeSlide: {activeSlide2} +//

+// +//
+//

1

+//
+//
+//

2

+//
+//
+//

3

+//
+//
+//

4

+//
+//
+//

5

+//
+//
+//

6

+//
+// +//
+// ); diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx index 81f5795..c6d81bb 100644 --- a/src/pages/Home/Home.jsx +++ b/src/pages/Home/Home.jsx @@ -1,6 +1,7 @@ import { styled } from 'styled-components'; import Header from 'components/Header/Header'; import Footer from 'components/Footer/Footer'; +import Carousel from './Carousel'; import MainImg from 'asset/HomePhoto.png'; function Home() { @@ -8,32 +9,23 @@ function Home() {
- - MainImg - MainImg - {/*
오늘의 브랜드
+ + MainImg + + {/*
오늘의 브랜드
최근 본 상품과 함께 볼만한 상품
타임딜
*/} -
); } -const Wrap = styled.div` - min-height: 600px; - /* display: flex; */ -`; - const Content = styled.div` display: flex; - justify-content: center; + flex-direction: column; align-items: center; - width: 100%; - height: auto; - min-height: 100%; - padding-bottom: 100px; + justify-content: center; `; export default Home;