퍼블 업뎃

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 .numbox .numbox_n {width: 300px; color: #fff; text-align: center;}
-    .P_MAIN .c_wrap .bannerbox {width: 100%; height:80px;}
+    .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;}*/

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) {
                 <div className="qnabox">
 
                 </div>
-                <div className="numbox">
+                <div className="numbox d-flex justify-content-center align-items-center">
-
+                    <div className="numbox_n"><div className="num_text">다운로드 수</div><div className="num_count"><CountUp start={0} end={334345} duration={2.5} separator="," /><span className="unit">건</span></div></div>
+                    <div className="numbox_n"><div className="num_text">회원가입자 수</div><div className="num_count"><CountUp start={0} end={12345} duration={2.5} separator="," /><span className="unit">명</span></div></div>
+                    <div className="numbox_n"><div className="num_text">일 편균 방문자</div><div className="num_count"><CountUp start={0} end={56427} duration={2.5} separator="," /><span className="unit">명</span></div></div>
+                    <div className="numbox_n"><div className="num_text">개정고시</div><div className="num_count"><CountUp start={0} end={99875} duration={2.5} separator="," /><span className="unit">건</span></div></div>
                 </div>
-                <div className="bbsbox">
+                <div className="bbsbox d-flex justify-content-center align-items-center">
-
+                    <div className="bbsbox_1">1</div>
+                    <div className="bbsbox_2">2</div>
                 </div>
                 <div className="bannerbox">
-
+                    <Slider {...settings}>
+                        {banners.map((banner, index) => (
+                            <div key={index} className="banner_slide d-flex justify-content-center align-items-center">
+                                <a href={banner.url} target="_blank" rel="noopener noreferrer">
+                                    <img src={banner.src} alt={`Banner ${index + 1}`} />
+                                </a>
+                            </div>
+                        ))}
+                    </Slider>
                 </div>
             </div>
         </div>