786 lines
45 KiB
JavaScript
786 lines
45 KiB
JavaScript
import React, {useState, useEffect, useCallback, useRef} from 'react';
|
|
import { Link, useLocation, useNavigate } 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 { Box, Tabs, Tab, Typography } from '@mui/material';
|
|
|
|
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 EgovLogin from "../main/EgovLogin";
|
|
import {parseJwt} from "../../utils/parseJwt";
|
|
import {getLocalItem, setLocalItem} from "utils/storage";
|
|
import URL from 'constants/url';
|
|
import CODE from "constants/code";
|
|
|
|
import CustomModal from './EgovModal';
|
|
import { useCookies } from "react-cookie";
|
|
|
|
function a11yProps(index) {
|
|
return {
|
|
id: `wrapped-tab-${index}`,
|
|
'aria-controls': `wrapped-tabpanel-${index}`,
|
|
};
|
|
}
|
|
|
|
|
|
function TabPanel(props) {
|
|
const { children, value, index, ...other } = props;
|
|
|
|
return (
|
|
<div
|
|
role="tabpanel"
|
|
hidden={value !== index}
|
|
id={`wrapped-tabpanel-${index}`}
|
|
aria-labelledby={`wrapped-tab-${index}`}
|
|
{...other}
|
|
>
|
|
{value === index && (
|
|
<Box sx={{ p: 3 }}>
|
|
<Typography component="div">{children}</Typography>
|
|
</Box>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function EgovMain(props) {
|
|
console.group("EgovMain");
|
|
console.log("[Start] EgovMain ------------------------------");
|
|
console.log("EgovMain [props] : ", props);
|
|
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
console.log("EgovMain [location] : ", location);
|
|
|
|
const [user, setUser] = useState(parseJwt(getLocalItem('accessToken')) || null);
|
|
console.log(user);
|
|
|
|
// 모달 상태 및 콘텐츠 관리
|
|
const [show, setShow] = React.useState(false);
|
|
const [modalContent, setModalContent] = React.useState({});
|
|
const [showModals, setShowModals] = useState([]);
|
|
const [cookies, setCookie] = useCookies([`MainModal_${modalContent.id}`]);
|
|
|
|
const handleShow = (content) => {
|
|
setShowModals(prev => [...prev, content]);
|
|
};
|
|
const handleClose = (id) => {
|
|
setShowModals(prev => prev.filter(modal => modal.id !== id));
|
|
};
|
|
|
|
const handlePlusClick = (currentTabValue) => {
|
|
const urls = [
|
|
URL.SUPPORT_LIST_NOCODE+'/KCSC-NOT',
|
|
URL.SUPPORT_LIST_NOCODE+'/KCSC-NTC',
|
|
URL.COMMITTEE_PROGRESS,
|
|
URL.SUPPORT_RESEARCH,
|
|
URL.SUPPORT_LIST_NOCODE+'/KCSC-TEC',
|
|
URL.SUPPORT_LIST_NOCODE+'/KCSC-NWS'
|
|
];
|
|
if (currentTabValue >= 0 && currentTabValue < urls.length) {
|
|
navigate(urls[currentTabValue]);
|
|
}
|
|
};
|
|
|
|
const settings = {
|
|
dots: false,
|
|
infinite: true,
|
|
speed: 500,
|
|
slidesToShow: 6,
|
|
slidesToScroll: 1,
|
|
arrows: false,
|
|
autoplay: true,
|
|
autoplaySpeed: 3000,
|
|
pauseOnHover: true
|
|
};
|
|
|
|
const settings1 = {
|
|
dots: true,
|
|
infinite: true,
|
|
speed: 1000,
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
arrows: false,
|
|
autoplay: true,
|
|
autoplaySpeed: 5000,
|
|
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' },
|
|
// 필요한 만큼 배너 이미지를 추가합니다.
|
|
];
|
|
|
|
// TAB 상태를 정의합니다.
|
|
const [leftTabValue, setLeftTabValue] = useState(0);
|
|
const [rightTabValue, setRightTabValue] = useState(3);
|
|
|
|
const handleLeftTabChange = (event, newValue) => {
|
|
setLeftTabValue(newValue);
|
|
};
|
|
|
|
const handleRightTabChange = (event, newValue) => {
|
|
setRightTabValue(newValue);
|
|
};
|
|
|
|
// eslint-disable-next-line no-unused-vars
|
|
// const [noticeBoard, setNoticeBoard] = useState();
|
|
// // eslint-disable-next-line no-unused-vars
|
|
// const [gallaryBoard, setGallaryBoard] = useState();
|
|
// const [noticeListTag, setNoticeListTag] = useState();
|
|
// const [gallaryListTag, setGallaryListTag] = useState();
|
|
//
|
|
// const retrieveList = useCallback(() => {
|
|
// console.groupCollapsed("EgovMain.retrieveList()");
|
|
//
|
|
//
|
|
// const retrieveListURL = '/';
|
|
// const requestOptions = {
|
|
// method: "POST",
|
|
//
|
|
// headers: {
|
|
// 'Content-type': 'application/json'
|
|
// },
|
|
// body: JSON.stringify()
|
|
// }
|
|
//
|
|
// EgovNet.requestFetch(retrieveListURL,
|
|
// requestOptions,
|
|
// (resp) => {
|
|
//
|
|
// setNoticeBoard(resp.result.notiList);
|
|
// setGallaryBoard(resp.result.galList);
|
|
//
|
|
// let mutNotiListTag = [];
|
|
// mutNotiListTag.push(<li key="0">검색된 결과가 없습니다.</li>); // 게시판 목록 초기값
|
|
//
|
|
// // 리스트 항목 구성
|
|
// resp.result.notiList.forEach(function (item, index) {
|
|
// if (index === 0) mutNotiListTag = []; // 목록 초기화
|
|
// mutNotiListTag.push(
|
|
// <li key={item.nttId}>
|
|
// <Link
|
|
// to={{pathname: URL.INFORM_NOTICE_DETAIL}}
|
|
// state={{
|
|
// nttId: item.nttId,
|
|
// bbsId: item.bbsId
|
|
// }}
|
|
// >
|
|
// {item.nttSj}
|
|
// <span>{item.frstRegisterPnttm}</span>
|
|
// </Link>
|
|
// </li>
|
|
// );
|
|
// });
|
|
// setNoticeListTag(mutNotiListTag);
|
|
//
|
|
// let mutGallaryListTag = [];
|
|
// mutGallaryListTag.push(<li key="0">검색된 결과가 없습니다.</li>); // 게시판 목록 초기값
|
|
//
|
|
// // 리스트 항목 구성
|
|
// resp.result.galList.forEach(function (item, index) {
|
|
// if (index === 0) mutGallaryListTag = []; // 목록 초기화
|
|
// mutGallaryListTag.push(
|
|
// <li key={index}>
|
|
// <Link
|
|
// to={{pathname: URL.INFORM_GALLERY_DETAIL}}
|
|
// state={{
|
|
// nttId: item.nttId,
|
|
// bbsId: item.bbsId
|
|
// }}
|
|
// >
|
|
// {item.nttSj}
|
|
// <span>{item.frstRegisterPnttm}</span>
|
|
// </Link>
|
|
// </li>
|
|
// );
|
|
// });
|
|
// setGallaryListTag(mutGallaryListTag);
|
|
// },
|
|
// function (resp) {
|
|
// console.log("err response : ", resp);
|
|
// }
|
|
// );
|
|
// console.groupEnd("EgovMain.retrieveList()");
|
|
// },[]);
|
|
//
|
|
// useEffect(() => {
|
|
// retrieveList();
|
|
// }, [retrieveList]);
|
|
|
|
useEffect(() => {
|
|
// 모달 콘텐츠 배열
|
|
const modalContents = [
|
|
{
|
|
id: 1,
|
|
title: `제목 제목 제목 제목 제목 제목 1`,
|
|
body: `내용 내용 내용 내용 내용 내용 내용 내용 내용 내용\\n내용 내용 내용 내용 내용 내용 내용 내용 내용 내용\\n내용 내용 내용 내용 내용 내용 내용 내용 내용 내용 1`,
|
|
files: [
|
|
{ name: '파일1.txt', imageSrc: '/assets/images/file.png' },
|
|
{ name: '파일2.txt', imageSrc: '/assets/images/file.png' }
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
title: `제목 2`,
|
|
body: `내용 2\n내용 2`,
|
|
files: [
|
|
{ name: '파일3.txt', imageSrc: '/assets/images/file.png' },
|
|
{ name: '파일4.txt', imageSrc: '/assets/images/file.png' }
|
|
]
|
|
}
|
|
];
|
|
|
|
// 쿠키가 없는 모달만 열기
|
|
modalContents.forEach(content => {
|
|
if (!cookies[`MainModal_${content.id}`]) {
|
|
handleShow(content);
|
|
}
|
|
});
|
|
}, [cookies]);
|
|
|
|
const onChangeLogin = (user) => {
|
|
setUser(user);
|
|
// props.onChangeLogin(user);
|
|
}
|
|
|
|
const logOutHandler = () => {// 로그인 정보 존재할 때
|
|
const logOutUrl = '/auth/logout';
|
|
const requestOptions = {
|
|
headers: {
|
|
'Content-type': 'application/json',
|
|
},
|
|
credentials: 'include',
|
|
}
|
|
EgovNet.requestFetch(logOutUrl, requestOptions,
|
|
function (resp) {
|
|
console.log("===>>> logout resp= ", resp);
|
|
if (parseInt(resp.resultCode) === parseInt(CODE.RCV_SUCCESS)) {
|
|
onChangeLogin({ loginVO: {} });
|
|
setLocalItem('loginUser', {"id":""});
|
|
setLocalItem('accessToken', null);
|
|
setLocalItem('refreshToken', null);
|
|
window.alert("로그아웃되었습니다!");
|
|
|
|
// PC와 Mobile 열린메뉴 닫기: 2023.04.13(목) 김일국 추가
|
|
document.querySelector('.all_menu.WEB').classList.add('closed');
|
|
document.querySelector('.btnAllMenu').classList.remove('active');
|
|
document.querySelector('.btnAllMenu').title = '전체메뉴 닫힘';
|
|
document.querySelector('.all_menu.Mobile').classList.add('closed');
|
|
onChangeLogin(null);
|
|
}
|
|
}
|
|
);
|
|
}
|
|
|
|
console.log("------------------------------EgovMain [End]");
|
|
console.groupEnd("EgovMain");
|
|
|
|
return (
|
|
<div className="P_MAIN">{/* container */}
|
|
<div className="c_wrap">
|
|
<div className="topbox d-flex justify-content-center align-items-center">
|
|
<Row className="topbox_1">
|
|
<Col className={"topbox_11"}>
|
|
<Row>
|
|
<Col xs={6}>
|
|
<Row className={"topbox_12 justify-content-between"}>
|
|
<Col className={"topbox_13"}>설계기준</Col>
|
|
<Col className={"topbox_14"}><span>더보기 +</span></Col>
|
|
</Row>
|
|
</Col>
|
|
<Col xs={6}>
|
|
<Row className={"topbox_15 justify-content-between"}>
|
|
<Col className={"topbox_13"}>표준시방서</Col>
|
|
<Col className={"topbox_16"}><span>더보기 +</span></Col>
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
<Row className={"pt-3 mx-0"}>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/1010" title="공통코드">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col xs={7}>공통</Col>
|
|
<Col xs={5} className={"text-end"}><img src={"/assets/images/x1.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/101011" title="지반">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>지반</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x2.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/101014" title="구조">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>구조</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x3.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102034" title="조경">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>조경</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x4.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102041" title="건축">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>건축</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x5.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102067" title="농업기반">
|
|
<Row className={"topbox_2 justify-content-between me-0"}>
|
|
<Col>농업기반</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x6.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
</Row>
|
|
<Row className={"pt-2 mx-0"}>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/101017" title="내진">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>내진</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x7.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102021" title="가설">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>가설</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x8.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102024" title="교량">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>교량</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x9.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102047" title="철도">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>철도</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x10.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102051" title="하천">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>하천</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x11.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102054" title="댐">
|
|
<Row className={"topbox_2 justify-content-between me-0"}>
|
|
<Col>댐</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x12.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
</Row>
|
|
<Row className={"pt-2 mx-0"}>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102027" title="터널">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>터널</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x13.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102029" title="공동구">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>공동구</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x14.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102031" title="설비">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>설비</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x15.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102057" title="상수도">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>상수도</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x16.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102061" title="하수도">
|
|
<Row className={"topbox_2 justify-content-between me-1"}>
|
|
<Col>하수도</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x17.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Link to="/standardCode/list/102044" title="도로">
|
|
<Row className={"topbox_2 justify-content-between me-0"}>
|
|
<Col>도로</Col>
|
|
<Col className={"text-end"}><img src={"/assets/images/x18.png"} className={"h_25"} /></Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
</Row>
|
|
<Row className={"pt-3 mx-0 justify-content-between"}>
|
|
<Col xs={"auto"} className={"p-0"}>
|
|
<Link to={URL.STANDARD_CODE_INFO} title="건설기준안내" className={"w_75"}>
|
|
<Row className={"topbox_4 justify-content-center"}>
|
|
<Col><img src="/assets/images/ico-landing2.png" className={"w_50 h_50"} /></Col>
|
|
</Row>
|
|
<Row className={"topbox_5 justify-content-center"}>
|
|
<Col className={"text-222 text-center"}>건설기준안내</Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={"auto"}>
|
|
<Link to={URL.COMMITTEE_SCHEDULE} title="위원회일정" className={"w_75"}>
|
|
<Row className={"topbox_4 justify-content-center"}>
|
|
<Col><img src="/assets/images/ico-landing3.png" className={"w_50 h_50"} /></Col>
|
|
</Row>
|
|
<Row className={"topbox_5 justify-content-center"}>
|
|
<Col className={"text-222"}>위원회일정</Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={"auto"}>
|
|
<Link to={URL.STANDARD_CODE_LIST + '/5000'} title="전문시방서" className={"w_75"}>
|
|
<Row className={"topbox_4 justify-content-center"}>
|
|
<Col><img src="/assets/images/ico-landing4.png" className={"w_50 h_50"} /></Col>
|
|
</Row>
|
|
<Row className={"topbox_5 justify-content-center"}>
|
|
<Col className={"text-222"}>전문시방서</Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={"auto"}>
|
|
<Link to={URL.STANDARD_CODE_OLD_NOCODE+'/5'} title="훈련/예규/지침" className={"w_75"}>
|
|
<Row className={"topbox_4 justify-content-center"}>
|
|
<Col><img src="/assets/images/ico-landing5.png" className={"w_50 h_50"} /></Col>
|
|
</Row>
|
|
<Row className={"topbox_5 justify-content-center"}>
|
|
<Col className={"text-222"}>훈련/예규/지침</Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={"auto"}>
|
|
<Link to={URL.STANDARD_CODE_ENG} title="영문건설기준" className={"w_75"}>
|
|
<Row className={"topbox_4 justify-content-center"}>
|
|
<Col><img src="/assets/images/ico-landing6.png" className={"w_50 h_50"} /></Col>
|
|
</Row>
|
|
<Row className={"topbox_5 justify-content-center"}>
|
|
<Col className={"text-222"}>영문건설기준</Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={"auto"}>
|
|
<Link to={URL.STANDARD_CODE_TERM} title="건설기준용어" className={"w_75"}>
|
|
<Row className={"topbox_4 justify-content-center"}>
|
|
<Col><img src="/assets/images/ico-landing8.png" className={"w_50 h_50"} /></Col>
|
|
</Row>
|
|
<Row className={"topbox_5 justify-content-center"}>
|
|
<Col className={"text-222"}>건설기준용어</Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={"auto"}>
|
|
<Link to={URL.STANDARD_CODE_LIST} title="최근수정코드" className={"w_75"}>
|
|
<Row className={"topbox_4 justify-content-center"}>
|
|
<Col><img src="/assets/images/ico-landing13.png" className={"w_50 h_50"} /></Col>
|
|
</Row>
|
|
<Row className={"topbox_5 justify-content-center"}>
|
|
<Col className={"text-222"}>최근수정코드</Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={"auto"}>
|
|
<Link to={URL.SUPPORT_LIST_NOCODE+'/KCKC-INV'} title="수요조사" className={"w_75"}>
|
|
<Row className={"topbox_4 justify-content-center"}>
|
|
<Col><img src="/assets/images/ico-landing12.png" className={"w_50 h_50"} /></Col>
|
|
</Row>
|
|
<Row className={"topbox_5 justify-content-center"}>
|
|
<Col className={"text-222"}>수요조사</Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
<Col xs={"auto"}>
|
|
<Link to={URL.SUPPORT_API} title="오픈 API" className={"w_75"}>
|
|
<Row className={"topbox_4 justify-content-center"}>
|
|
<Col><img src="/assets/images/ico-landing10.png" className={"w_50 h_50"} /></Col>
|
|
</Row>
|
|
<Row className={"topbox_5 justify-content-center"}>
|
|
<Col className={"text-222"}>오픈 API</Col>
|
|
</Row>
|
|
</Link>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
<Col xs={"auto"} className={"justify-content-end p-0"}>
|
|
<div className="topbox_3">
|
|
<div className={"topbox_31"}>{user ? (
|
|
<>
|
|
<Row>
|
|
<Col xs={6}>{user.id} 님.</Col>
|
|
<Col xs={6} className={"text-end"}><Button type={"button"} className={"btn btn-22498E btn-sm"} onClick={logOutHandler}>로그아웃</Button> </Col>
|
|
</Row>
|
|
</>
|
|
) : ('로그인')}
|
|
</div>
|
|
<div>
|
|
<EgovLogin onChangeLogin={onChangeLogin}></EgovLogin>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
|
|
<div className="bbsbox d-flex justify-content-center align-items-start">
|
|
<div className="bbsbox_1">
|
|
<Box sx={{ borderBottom: 2, borderColor: 'divider' }}>
|
|
<Tabs
|
|
value={leftTabValue}
|
|
onChange={handleLeftTabChange}
|
|
indicatorColor="secondary"
|
|
textColor="inherit"
|
|
sx={{
|
|
'& .Mui-selected': {
|
|
color: '#22498E', // 선택된 탭의 색상
|
|
},
|
|
}}
|
|
>
|
|
<Tab value={0} {...a11yProps(0)} sx={{ fontSize: leftTabValue === 0 ? '1.3rem' : '1rem', fontWeight: 700, color: leftTabValue === 0 ? '#22498E' : 'secondary'}} label="건설기준고시" wrapped />
|
|
<Tab value={1} {...a11yProps(1)} sx={{ fontSize: leftTabValue === 1 ? '1.3rem' : '1rem', fontWeight: 700, color: leftTabValue === 1 ? '#22498E' : 'secondary'}} label="건설기준연구" />
|
|
<Tab value={2} {...a11yProps(2)} sx={{ fontSize: leftTabValue === 2 ? '1.3rem' : '1rem', fontWeight: 700, color: leftTabValue === 2 ? '#22498E' : 'secondary'}} label="위원회 진행현황" />
|
|
<Tab value="" label="+" sx={{ fontSize: '1.75rem', ml: 'auto' }} onClick={() => handlePlusClick(leftTabValue)} />
|
|
</Tabs>
|
|
</Box>
|
|
<TabPanel value={leftTabValue} index={0}>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>국토교통부고시_제2024-147호(내진설계일반(KDS_17_10_00))_정정_고시</Link></Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
{/*<Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>*/}
|
|
</Row>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>국토교통부고시_제2024-147호(내진설계일반(KDS_17_10_00))_정정_고시</Link></Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
</Row>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>국토교통부고시_제2024-147호(내진설계일반(KDS_17_10_00))_정정_고시</Link></Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
</Row>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>국토교통부고시_제2024-147호(내진설계일반(KDS_17_10_00))_정정_고시_정정_고시_정정_고시_정정_고시_정정_고시_정정_고시_정정_고시</Link></Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
</Row>
|
|
</TabPanel>
|
|
<TabPanel value={leftTabValue} index={1}>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>2024년 제7차 건설기준연구</Link></Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
</Row>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준위원회</Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
</Row>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준위원회</Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
</Row>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준위원회</Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
</Row>
|
|
</TabPanel>
|
|
<TabPanel value={leftTabValue} index={2}>위원회 진행현황 리스트 출력</TabPanel>
|
|
</div>
|
|
<div className="bbsbox_3">
|
|
<Box sx={{ borderBottom: 2, borderColor: 'divider' }}>
|
|
<Tabs
|
|
value={rightTabValue}
|
|
onChange={handleRightTabChange}
|
|
indicatorColor="secondary"
|
|
textColor="inherit"
|
|
sx={{
|
|
'& .Mui-selected': {
|
|
color: '#22498E', // 선택된 탭의 색상
|
|
},
|
|
}}
|
|
>
|
|
<Tab value={3} {...a11yProps(3)} sx={{ fontSize: rightTabValue === 3 ? '1.3rem' : '1rem', fontWeight: 700, color: rightTabValue === 3 ? '#22498E' : 'secondary'}} label="공지사항" />
|
|
<Tab value={4} {...a11yProps(4)} sx={{ fontSize: rightTabValue === 4 ? '1.3rem' : '1rem', fontWeight: 700, color: rightTabValue === 4 ? '#22498E' : 'secondary'}} label="기술자료" />
|
|
<Tab value={5} {...a11yProps(5)} sx={{ fontSize: rightTabValue === 5 ? '1.3rem' : '1rem', fontWeight: 700, color: rightTabValue === 5 ? '#22498E' : 'secondary'}} label="보도자료" />
|
|
<Tab value="" label="+" sx={{ fontSize: '1.75rem', ml: 'auto' }} onClick={() => handlePlusClick(rightTabValue)} />
|
|
</Tabs>
|
|
</Box>
|
|
<TabPanel value={rightTabValue} index={3}>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}><Link to={URL.SUPPORT_DETAIL} className={"bbsbox_11_title"}>2024년 제7차 공지사항</Link></Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
</Row>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준연구</Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
</Row>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준연구</Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
</Row>
|
|
<Row className={"bbsbox_11"}>
|
|
<Col xs={9} className={"text-truncate"}>2024년 제7차 건설기준연구</Col>
|
|
<Col xs={3} className={"text-end"}>2024.01.23.</Col>
|
|
</Row>
|
|
</TabPanel>
|
|
<TabPanel value={rightTabValue} index={4}>기술자료 리스트 출력</TabPanel>
|
|
<TabPanel value={rightTabValue} index={5}>보도자료 리스트 출력</TabPanel>
|
|
</div>
|
|
<div className="bbsbox_2">
|
|
{/*<Link to={URL.ABOUT_PROMOTE}><img src="/assets/images/narae.jpg" /></Link>*/}
|
|
<Slider {...settings1}>
|
|
<Link to={URL.ABOUT_PROMOTE}><img src="/assets/images/narae.jpg" /></Link>
|
|
<Link to={URL.ABOUT_PROMOTE}><img src="/assets/images/narae.jpg" /></Link>
|
|
</Slider>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<Row className={"qna_count d-flex justify-content-center"}>
|
|
<Col className="qnabox">
|
|
<div className="qnabox_1 d-flex justify-content-center">
|
|
<div className="qnabox_11 text-start align-items-end">Q&A</div>
|
|
<Row className="qnabox_12 text-center justify-content-center align-items-end">
|
|
<Col xs={8}></Col>
|
|
<Col xs={1} className={"rounded_circle_qna"}><img src={"/assets/images/left.png"} /></Col>
|
|
<Col xs={2} className={""}> 1/2 </Col>
|
|
<Col xs={1} className={"rounded_circle_qna"}><img src={"/assets/images/right.png"} /></Col>
|
|
</Row>
|
|
</div>
|
|
<div className="qnabox_2 d-flex justify-content-center align-items-center">
|
|
<div className="qnabox_n">
|
|
<Row>
|
|
<Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
|
|
<Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
|
|
</Row>
|
|
<Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 정말 잘 되나요? 정말 잘 되나요? 정말 잘 되나요? 정말 잘 되나요?</Link></Row>
|
|
<Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
|
|
</div>
|
|
<div className="qnabox_n">
|
|
<Row>
|
|
<Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
|
|
<Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
|
|
</Row>
|
|
<Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요?</Link></Row>
|
|
<Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
|
|
</div>
|
|
<div className="qnabox_n">
|
|
<Row>
|
|
<Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
|
|
<Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
|
|
</Row>
|
|
<Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요?</Link></Row>
|
|
<Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
|
|
</div>
|
|
<div className="qnabox_n">
|
|
<Row>
|
|
<Col xs={10} className={"qnabox_n_file py-1"}>00.jpg</Col>
|
|
<Col xs={2} className={"text-end p-0"}><img src={"/assets/images/file.png"} /></Col>
|
|
</Row>
|
|
<Row className={"qnabox_n_title pt-2"}><Link to={URL.SUPPORT_DETAIL} className={"text-secondary p-0"}>콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요? 콘크리트 내구성 설계 및 평가 문의요.. 정말 잘 되나요?</Link></Row>
|
|
<Row className={"qnabox_n_date justify-content-end"}>2024.01.23</Row>
|
|
</div>
|
|
</div>
|
|
</Col>
|
|
<Col className={"numbox"}>
|
|
<Row className="numbox_n">
|
|
<Col className="num_text">다운로드 수</Col>
|
|
<Col className="num_count"><CountUp start={0} end={334345} duration={2.5} separator="," /><span className="unit">건</span></Col>
|
|
</Row>
|
|
<Row className="numbox_n">
|
|
<Col className="num_text">회원가입자 수</Col>
|
|
<Col className="num_count"><CountUp start={0} end={12345} duration={2.5} separator="," /><span className="unit">명</span></Col>
|
|
</Row>
|
|
<Row className="numbox_n">
|
|
<Col className="num_text">일 평균 방문자</Col>
|
|
<Col className="num_count"><CountUp start={0} end={56427} duration={2.5} separator="," /><span className="unit">명</span></Col>
|
|
</Row>
|
|
<Row className="numbox_n">
|
|
<Col className="num_text">개정고시</Col>
|
|
<Col className="num_count"><CountUp start={0} end={99875} duration={2.5} separator="," /><span className="unit">건</span></Col>
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
|
|
<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>
|
|
|
|
{showModals.map(modalContent => (
|
|
<CustomModal
|
|
key={modalContent.id}
|
|
show={true}
|
|
handleClose={() => handleClose(modalContent.id)}
|
|
modalContent={modalContent}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|
|
|
|
export default EgovMain;
|