kcscDev/egovframe-template-simple-r.../src/pages/main/EgovMain.jsx

494 lines
29 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";
function a11yProps(index) {
return {
id: `wrapped-tab-${index}`,
'aria-controls': `wrapped-tabpanel-${index}`,
};
}
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 handlePlusClick = () => {
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 (value >= 0 && value < urls.length) {
navigate(urls[value]);
}
};
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' },
// 필요한 만큼 배너 이미지를 추가합니다.
];
// TAB 상태를 정의합니다.
const [value, setValue] = useState(0);
const handleChange = (event, newValue) => {
setValue(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]);
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">
<div className="topbox_1">
<div className="topbox_11">실시간 인기키워드</div>
{/*<div className="topbox_12">현재 기준 사용자가 가장 많이 검색하는 키워드입니다.</div>*/}
<div className="topbox_13">2024 5 9 목요일 오전 11:45</div>
<Row className="topbox_14">
<Col xs={6}>
<div className={"text-truncate"}>1 가설공사</div>
<div className={"text-truncate"}>2 가설공사</div>
<div className={"text-truncate"}>3 가설공사</div>
<div className={"text-truncate"}>4 가설공사가설공사</div>
<div className={"text-truncate"}>5 가설공사</div>
</Col>
<Col xs={6}>
<div className={"text-truncate"}>&nbsp;&nbsp;6 가설공사</div>
<div className={"text-truncate"}>&nbsp;&nbsp;7 가설공사가설공사가설공사가설공사</div>
<div className={"text-truncate"}>&nbsp;&nbsp;8 가설공사</div>
<div className={"text-truncate"}>&nbsp;&nbsp;9 가설공사</div>
<div className={"text-truncate"}>10 가설공사</div>
</Col>
</Row>
</div>
<div className="topbox_2">
<div className={"topbox_11"}>자주찾는 서비스</div>
{/*<div className={"topbox_12"}>버튼을 선택하시면 해당 서비스로 이동합니다.</div>*/}
<Row>
<Col>
<Link to={URL.STANDARD_CODE_LIST} className="link-wrapper">
<div className={"topbox_13"}><img src="/assets/images/ico-landing1.png" /></div>
<div className={"topbox_14"}>코드검색</div>
{/*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*/}
</Link>
</Col>
<Col>
<Link to={URL.STANDARD_CODE_INFO} className="link-wrapper">
<div className={"topbox_13"}><img src="/assets/images/ico-landing2.png" /></div>
<div className={"topbox_14"}>코드안내</div>
{/*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*/}
</Link>
</Col>
<Col>
<Link to={URL.COMMITTEE_SCHEDULE} className="link-wrapper">
<div className={"topbox_13"}><img src="/assets/images/ico-landing3.png" /></div>
<div className={"topbox_14"}>위원회일정</div>
{/*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*/}
</Link>
</Col>
<Col>
<Link to={URL.STANDARD_CODE_LIST + '/5000'} className="link-wrapper">
<div className={"topbox_13"}><img src="/assets/images/ico-landing4.png" /></div>
<div className={"topbox_14"}>전문시방서</div>
{/*<div className={"topbox_15"}><Button type={"button"} className={"btn btn-22498E px-3"}>바로가기</Button> </div>*/}
</Link>
</Col>
</Row>
<Row>
<Col>
<Link to={URL.STANDARD_CODE_OLD} className="link-wrapper">
<div className={"topbox_13"}><img src="/assets/images/ico-landing5.png" /></div>
<div className={"topbox_14"}>훈령/예규/지침</div>
</Link>
</Col>
<Col>
<Link to={URL.STANDARD_CODE_ENG} className="link-wrapper">
<div className={"topbox_13"}><img src="/assets/images/ico-landing6.png" /></div>
<div className={"topbox_14"}>영문건설기준</div>
</Link>
</Col>
<Col>
<Link to={URL.STANDARD_CODE_TERM} className="link-wrapper">
<div className={"topbox_13"}><img src="/assets/images/ico-landing8.png" /></div>
<div className={"topbox_14"}>건설기준용어</div>
</Link>
</Col>
<Col>
<Link to={URL.SUPPORT_API} className="link-wrapper">
<div className={"topbox_13"}><img src="/assets/images/ico-landing10.png" /></div>
<div className={"topbox_14"}>API 서비스</div>
</Link>
</Col>
</Row>
</div>
<div className="topbox_3">
<div className={"topbox_11"}>{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>
</div>
<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="menubox d-flex justify-content-center align-items-center">*/}
{/* <div className="menubox_n text-center"><Link to={URL.STANDARD_CODE_OLD}><div className="menu_img"><img src="/assets/images/ico-landing5.png" /></div><div className="menu_text">훈령/예규/지침</div></Link></div>*/}
{/* <div className="menubox_n text-center"><Link to={URL.STANDARD_CODE_ENG}><div className="menu_img"><img src="/assets/images/ico-landing6.png" /></div><div className="menu_text">영문건설기준</div></Link></div>*/}
{/* <div className="menubox_n text-center"><Link to={URL.STANDARD_CODE_TERM}><div className="menu_img"><img src="/assets/images/ico-landing8.png" /></div><div className="menu_text">건설기준용어</div></Link></div>*/}
{/* <div className="menubox_n text-center"><Link to={URL.SUPPORT_LIST_NOCODE+'/KCSC-EVT'}><div className="menu_img"><img src="/assets/images/ico-landing7.png" /></div><div className="menu_text">주요행사</div></Link></div>*/}
{/* <div className="menubox_n text-center"><Link to={URL.SUPPORT_LIST_NOCODE+'/KCSC-INV'}><div className="menu_img"><img src="/assets/images/ico-landing9.png" /></div><div className="menu_text">수요조사</div></Link></div>*/}
{/* <div className="menubox_n text-center"><Link to={URL.SUPPORT_API}><div className="menu_img"><img src="/assets/images/ico-landing10.png" /></div><div className="menu_text">API 서비스</div></Link></div>*/}
{/* <div className="menubox_n text-center"><Link to={URL.SUPPORT_SITE}><div className="menu_img"><img src="/assets/images/ico-landing11.png" /></div><div className="menu_text">관련사이트</div></Link></div>*/}
{/*</div>*/}
<div className="bbsbox d-flex justify-content-center align-items-start">
<div className="bbsbox_1">
<Box sx={{ borderBottom: 2, borderColor: 'divider' }}>
<Tabs
value={value}
onChange={handleChange}
indicatorColor="secondary"
textColor="#22498E"
>
<Tab value={0} {...a11yProps(0)} sx={{ fontSize: value === 0 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 0 ? '#22498E' : 'secondary'}} label="건설기준고시" wrapped />
<Tab value={1} {...a11yProps(1)} sx={{ fontSize: value === 1 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 1 ? '#22498E' : 'secondary'}} label="공지사항" />
<Tab value={2} {...a11yProps(2)} sx={{ fontSize: value === 2 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 2 ? '#22498E' : 'secondary'}} label="위원회 진행현황" />
<Tab value={3} {...a11yProps(3)} sx={{ fontSize: value === 3 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 3 ? '#22498E' : 'secondary'}} label="건설기준연구" />
<Tab value={4} {...a11yProps(4)} sx={{ fontSize: value === 4 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 4 ? '#22498E' : 'secondary'}} label="기술자료" />
<Tab value={5} {...a11yProps(5)} sx={{ fontSize: value === 5 ? '1.5rem' : '1rem', fontWeight: 700, color: value === 5 ? '#22498E' : 'secondary'}} label="보도자료" />
<Tab value="" label="+" sx={{ fontSize: '1.75rem', ml: 'auto' }} onClick={handlePlusClick} />
</Tabs>
</Box>
<TabPanel value={value} 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={2} 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={2} 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={2} 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={2} className={"text-end"}>2024.01.23.</Col>
<Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>
</Row>
</TabPanel>
<TabPanel value={value} index={1}>
<Row className={"bbsbox_11"}>
<Col xs={9} className={"text-truncate"}>2024 제7차 건설기준위원회</Col>
<Col xs={2} 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"}>2024 제7차 건설기준위원회</Col>
<Col xs={2} 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"}>2024 제7차 건설기준위원회</Col>
<Col xs={2} 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"}>2024 제7차 건설기준위원회</Col>
<Col xs={2} className={"text-end"}>2024.01.23.</Col>
<Col xs={1} className={"text-end"}><img src={"/assets/images/file.png"} /></Col>
</Row></TabPanel>
<TabPanel value={value} index={2}>건설기준고시 리스트 출력</TabPanel>
<TabPanel value={value} index={3}>건설기준연구 리스트 출력</TabPanel>
<TabPanel value={value} index={4}>기술자료 리스트 출력</TabPanel>
<TabPanel value={value} index={5}>보도자료 리스트 출력</TabPanel>
</div>
<div className="bbsbox_2"><Link to={URL.ABOUT_PROMOTE}><img src="/assets/images/narae.jpg" /></Link></div>
</div>
<div className="qnabox">
<div className="qnabox_1 d-flex justify-content-center">
<div className="qnabox_11 d-flex justify-content-start align-items-end">Q&A</div>
<Row className="qnabox_12 text-center align-items-end">
<Col xs={9}></Col>
<Col xs={1} className={"rounded_circle_qna"}><img src={"/assets/images/left.png"} /></Col>
<Col xs={1} 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>
</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>
);
}
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>{children}</Typography>
</Box>
)}
</div>
);
}
export default EgovMain;