diff --git a/egovframe-template-simple-react-contribution/src/css/page.css b/egovframe-template-simple-react-contribution/src/css/page.css index 6f1b22e..3d0e016 100644 --- a/egovframe-template-simple-react-contribution/src/css/page.css +++ b/egovframe-template-simple-react-contribution/src/css/page.css @@ -59,8 +59,19 @@ .P_MAIN .c_wrap .menubox .menu_text {font-size: 16px; font-weight: 700; padding-top: 10px; justify-content: center; color: #222;} .P_MAIN .c_wrap .qnabox {width: 100%; height:390px; background: #F8FAFC;} .P_MAIN .c_wrap .numbox {width: 100%; height:200px; background: #4C6C84;} - .P_MAIN .c_wrap .bbsbox {width: 100%; height:430px; border-bottom: 1px solid #E6E6E6;} - .P_MAIN .c_wrap .bannerbox {width: 100%; height:80px;} + .P_MAIN .c_wrap .numbox .numbox_n {width: 300px; color: #fff; text-align: center;} + .P_MAIN .c_wrap .numbox .num_text {font-size: 22px; font-weight: 700;} + .P_MAIN .c_wrap .numbox .num_count {font-size: 40px; font-weight: 700; padding-top: 10px;} + .P_MAIN .c_wrap .numbox .num_count span.unit {font-size: 22px;} + .P_MAIN .c_wrap .bbsbox {width: 100%; height:430px; border-bottom: 1px solid #E6E6E6; margin: 0 auto;} + .P_MAIN .c_wrap .bbsbox .bbsbox_1 {width: 980px; } + .P_MAIN .c_wrap .bbsbox .bbsbox_2 {width: 370px; margin-left: 50px;} + + .P_MAIN .c_wrap .bannerbox {width: 1400px; height:80px; margin: 0 auto;} + /*.P_MAIN .c_wrap .bannerbox .slick-list {width: 1400px; margin: 0 auto;}*/ + .P_MAIN .c_wrap .bannerbox .banner_slide {max-width: 210px; max-height: 60px; border: 1px solid #dde2e5; border-radius: 15px; text-align: center; padding: 10px; margin: 10px;} + .P_MAIN .c_wrap .bannerbox .slick-slide img {max-width: 180px; max-height: 60px;} + /*.P_MAIN .c_wrap {position: relative;}*/ /*.P_MAIN .colbox::after {content: ""; display: block; clear: both;}*/ /*.P_MAIN .colbox > * {float: left;}*/ diff --git a/egovframe-template-simple-react-contribution/src/pages/main/EgovMain.jsx b/egovframe-template-simple-react-contribution/src/pages/main/EgovMain.jsx index d328320..d67cae5 100644 --- a/egovframe-template-simple-react-contribution/src/pages/main/EgovMain.jsx +++ b/egovframe-template-simple-react-contribution/src/pages/main/EgovMain.jsx @@ -3,6 +3,12 @@ import { Link, useLocation } from 'react-router-dom'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; import Button from 'react-bootstrap/Button'; +import CountUp from 'react-countup'; + +import Slider from "react-slick"; +import "slick-carousel/slick/slick.css"; +import "slick-carousel/slick/slick-theme.css"; + import * as EgovNet from 'api/egovFetch'; import URL from 'constants/url'; @@ -14,6 +20,38 @@ function EgovMain(props) { const location = useLocation(); console.log("EgovMain [location] : ", location); + const settings = { + dots: false, + infinite: true, + speed: 500, + slidesToShow: 6, + slidesToScroll: 1, + arrows: false, + autoplay: true, + autoplaySpeed: 3000, + pauseOnHover: true + }; + + const banners = [ + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/copy2.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/copy2.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/copy2.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/copy2.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + { src: '/assets/images/f-logo.png', url: 'https://talbakkum.com' }, + // 필요한 만큼 배너 이미지를 추가합니다. + ]; + // eslint-disable-next-line no-unused-vars const [noticeBoard, setNoticeBoard] = useState(); // eslint-disable-next-line no-unused-vars @@ -24,7 +62,7 @@ function EgovMain(props) { const retrieveList = useCallback(() => { console.groupCollapsed("EgovMain.retrieveList()"); - const retrieveListURL = '/cmm/main/mainPageAPI.do'; + const retrieveListURL = '/'; const requestOptions = { method: "POST", headers: { @@ -120,14 +158,26 @@ function EgovMain(props) {
-
- +
+
다운로드 수
+
회원가입자 수
+
일 편균 방문자
+
개정고시
-
- +
+
1
+
2
- + + {banners.map((banner, index) => ( +
+ + {`Banner + +
+ ))} +