퍼블 업뎃

egovframe-template-simple-react-contribution/src/components/leftmenu/EgovLeftNavSupport.jsx

@@ -1,18 +1,131 @@
-import React from 'react';
+import React, {useState} from 'react';
 
-import { NavLink } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 import URL from 'constants/url';
+import Button from 'react-bootstrap/Button'
+import Row from 'react-bootstrap/Row'
+import Col from 'react-bootstrap/Col'
+import { Box, Tabs, Tab, Typography } from '@mui/material';
+
+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>{children}</Typography>
+                </Box>
+            )}
+        </div>
+    );
+}
 
 function EgovLeftNavSupport() {
+    const [value, setValue] = useState(0);
+    const handleChange = (event, newValue) => {
+        setValue(newValue);
+    };
+
     return (
-        <div className="nav">
+        <div className="nav3">
             <div className="inner">
-                <h2>고객지원</h2>
+                <div className="menu11">
-                <ul className="menu4">
+                    <Row className={"m-0 pb-4"}>
-                    <li><NavLink to={URL.SUPPORT_DOWNLOAD} className={({ isActive }) => (isActive ? "cur" : "")}>자료실</NavLink></li>
+                        <Col xs={"auto"} className={"person"}></Col>
-                    <li><NavLink to={URL.SUPPORT_QNA} className={({ isActive }) => (isActive ? "cur" : "")}>묻고답하기</NavLink></li>
+                        <Col className={"pt-2 ps-0"}>
-                    <li><NavLink to={URL.SUPPORT_APPLY} className={({ isActive }) => (isActive ? "cur" : "")}>서비스신청</NavLink></li>
+                            <Row>
-                </ul>
+                                <Col><span className={"fs-5 fw-bold"}>관리자</span> 님</Col>
+                            </Row>
+                            <Row className={"f_11"}>
+                                <Col xs={"auto"}><Link to={URL.CHANGE_PW} className={"text-secondary"}>비밀번호변경</Link></Col>
+                                <Col xs={"auto"}><Link to="" className={"text-secondary"}>회원탈퇴</Link></Col>
+                            </Row>
+                        </Col>
+                    </Row>
+                    <Box sx={{ borderBottom: 2, borderColor: '#22498E' }}>
+                        <Tabs
+                            value={value}
+                            onChange={handleChange}
+                            indicatorColor="secondary"
+                            textColor="#fff"
+                        >
+                            <Tab value={0} {...a11yProps(0)} sx={{ fontWeight: 700, width: '50%',  }} label="내 Q&A" wrapped />
+                            <Tab value={1} {...a11yProps(1)} sx={{ fontWeight: 700, width: '50%',  }} label="다운로드" />
+                        </Tabs>
+                    </Box>
+                    <TabPanel value={value} index={0} className={"myPanel"}>
+                        {/*<Row>*/}
+                        {/*    <Col className={"text-center py-4 f_14"}>질문한 Q&A가 없습니다.</Col>*/}
+                        {/*</Row>*/}
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">일반 건축 콘크리트공사 시공 허용 오차 기준 질의</Col>
+                            <Col xs={4} className={"text-end p-0"}>2023.01.02</Col>
+                        </Row>
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">매입형 합성기둥의 설계기준 관련</Col>
+                            <Col xs={4} className={"text-end p-0"}>2023.01.02</Col>
+                        </Row>
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">일반 건축 콘크리트공사 시공 허용 오차 기준 질의</Col>
+                            <Col xs={4} className={"text-end p-0"}>2023.01.02</Col>
+                        </Row>
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">매입형 합성기둥의 설계기준 관련</Col>
+                            <Col xs={4} className={"text-end p-0"}>2023.01.02</Col>
+                        </Row>
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">일반 건축 콘크리트공사 시공 허용 오차 기준 질의</Col>
+                            <Col xs={4} className={"text-end p-0"}>2023.01.02</Col>
+                        </Row>
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">매입형 합성기둥의 설계기준 관련</Col>
+                            <Col xs={4} className={"text-end p-0"}>2023.01.02</Col>
+                        </Row>
+                    </TabPanel>
+                    <TabPanel value={value} index={1} className={"myPanel"}>
+                        {/*<Row>*/}
+                        {/*    <Col className={"text-center py-4 f_14"}>다운로드한 파일이 없습니다.</Col>*/}
+                        {/*</Row>*/}
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">매입형 합성기둥의 설계기준 관련</Col>
+                            <Col xs={4} className={"text-end p-0"}>2024.01.02</Col>
+                        </Row>
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">일반 건축 콘크리트공사 시공 허용 오차 기준 질의</Col>
+                            <Col xs={4} className={"text-end p-0"}>2024.01.02</Col>
+                        </Row>
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">매입형 합성기둥의 설계기준 관련</Col>
+                            <Col xs={4} className={"text-end p-0"}>2024.01.02</Col>
+                        </Row>
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">일반 건축 콘크리트공사 시공 허용 오차 기준 질의</Col>
+                            <Col xs={4} className={"text-end p-0"}>2023.01.02</Col>
+                        </Row>
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">매입형 합성기둥의 설계기준 관련</Col>
+                            <Col xs={4} className={"text-end p-0"}>2023.01.02</Col>
+                        </Row>
+                        <Row className={"f_11"}>
+                            <Col xs={8} className="text-truncate">일반 건축 콘크리트공사 시공 허용 오차 기준 질의</Col>
+                            <Col xs={4} className={"text-end p-0"}>2023.01.02</Col>
+                        </Row>
+                    </TabPanel>
+                </div>
+                <div className="mt-3"><Link to={URL.SUPPORT_QNA}><Button variant={"22498E"} className={"w-100"} >+ 새 질문 작성</Button></Link> </div>
             </div>
         </div>
     );

egovframe-template-simple-react-contribution/src/css/layout.css

@@ -116,7 +116,13 @@ body {min-width: 1400px;}
 .c_wrap .layout .nav1 ul li a:hover::after {content: ""; display: block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 9px; height: 15px; background: url(css/images/ico_arrow_r_gray_9x15.png) no-repeat; }
 .c_wrap .layout .nav1 ul li a.cur {color: #fff; font-weight: 700; background-color: #004994; }
 
-    /* location */
+/* 내정보 (왼쪽메뉴) */
+.c_wrap .layout .nav3:not(.tabs) {display: table-cell; width: 300px; vertical-align: top; padding-right: 30px;}
+.c_wrap .layout .nav3 .menu11 {height : 300px; margin: 0; border: 1px solid #AFAFAF; border-radius: 10px;}
+.c_wrap .layout .nav3 .menu11 .person::before {content: ""; display: inline-block; width: 50px; height: 50px; background: url(css/images/ico_user.png) no-repeat center bottom; background-size: 30px 30px; }
+.c_wrap .layout .nav3 .menu11 .myPanel {height: 145px; overflow-x: hidden; overflow-y: auto;}
+
+/* location */
 .location {height: 30px; padding-top: 23px; text-align: right;}     /* chagned by lim   height: 70px; padding-top: 43px; */
 .location ul, .location ul li {display: inline-block; vertical-align: top;}
 .location ul li {position: relative; color: #666; font-size: 14px;}

egovframe-template-simple-react-contribution/src/css/page.css

@@ -534,6 +534,17 @@
     .BRD022 .result .list_item > div:nth-child(2) {width: 30%; text-align: center;}
     .BRD022 .result .list_item > div:nth-child(3) {width: 30%; text-align: center;}
 
+    /* 즐겨찾기 */
+    .BRD023 .head > span:nth-child(1) {position: relative; width: 100px; }
+    .BRD023 .head > span:nth-child(2) {position: relative; }
+    .BRD023 .head > span:nth-child(3) {position: relative; width: 200px; }
+    .BRD023 .head > span:nth-child(4) {position: relative; width: 100px; }
+    .BRD023 .head > span:nth-child(-n+3)::after {position: absolute; content: ''; right: 0; bottom: 0; height: 50%; border-right: 1px solid #B5B5B5;}
+    .BRD023 .result .list_item > div:nth-child(1) {width: 100px; text-align: center;}
+    .BRD023 .result .list_item > div:nth-child(2) {text-align: left; padding-left: 10px;}
+    .BRD023 .result .list_item > div:nth-child(3) {width: 200px; text-align: center;}
+    .BRD023 .result .list_item > div:nth-child(4) {width: 100px; text-align: center;}
+
     /* 찾아오시는길 */
     .SITE_CONTACT_US .map {margin-top: 43px;}
     .SITE_CONTACT_US .map img {max-width: 100%;}

egovframe-template-simple-react-contribution/src/pages/login/My.jsx

@@ -1,13 +1,96 @@
 import React, { useState } from 'react';
 import {Link, useLocation, useNavigate} from 'react-router-dom';
 import * as EgovNet from 'api/egovFetch';
+import URL from "constants/url";
+
+import { default as EgovLeftNav } from 'components/leftmenu/EgovLeftNavSupport';
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Button from "react-bootstrap/Button";
 
 function My(){
 
 
 
     return (
-        <div>마이 페이지</div>
+        <div className="container">
+            <div className="c_wrap">
+                {/* <!-- Location --> */}
+                <div className="location">
+                    <ul>
+                        <li><Link to={URL.MAIN} className="home" >Home</Link></li>
+                        <li>내정보</li>
+                    </ul>
+                </div>
+                {/* <!--// Location --> */}
+
+                <div className="layout">
+                    {/* <!-- Navigation --> */}
+                    <EgovLeftNav></EgovLeftNav>
+                    {/* <!--// Navigation --> */}
+
+                    <div className="contents" id="contents">
+                        {/* <!-- 본문 --> */}
+                        <h1 className="tit_3">내정보</h1>
+
+                        <div className="card bg-fa mb-3">
+                            <Row className="p-3">
+                                <Col xs={"auto"} className="px-4"><img src="/assets/images/icon_qna.png" /></Col>
+                                <Col xs={"auto"} className="">
+                                    사용자가 즐겨찾기한 목록입니다.<br />
+                                    코드명을 선택하시면 즐겨찾기한 페이지로 이동됩니다.
+                                </Col>
+                            </Row>
+                        </div>
+
+                        {/* <!-- 게시판목록 --> */}
+                        <div className="board_list BRD023">
+                            <div className="head">
+                                <span>선택</span>
+                                <span>코드명</span>
+                                <span>개정이력</span>
+                                <span>파일</span>
+                            </div>
+                            <div className="result">
+                                {/* <!-- case : 데이터 없을때 --> */}
+                                {/* <p className="no_data" key="0">검색된 결과가 없습니다.</p> */}
+
+                                {/* <!-- case : 데이터 있을때 --> */}
+                                <Row className="list_item m-0">
+                                    <Col><input type={"checkbox"} name={"list1"} id={"list1"} /></Col>
+                                    <Col><Link to="" className={"text-secondary"}>1212</Link></Col>
+                                    <Col></Col>
+                                    <Col><img src="/assets/images/down.png" className={"h_20"} /></Col>
+                                </Row>
+                                <Row className="list_item m-0">
+                                    <Col><input type={"checkbox"} name={"list1"} id={"list1"} /></Col>
+                                    <Col><Link to="" className={"text-secondary"}>1212</Link></Col>
+                                    <Col></Col>
+                                    <Col><img src="/assets/images/down.png" className={"h_20"} /></Col>
+                                </Row>
+                                <Row className="list_item m-0">
+                                    <Col><input type={"checkbox"} name={"list1"} id={"list1"} /></Col>
+                                    <Col><Link to="" className={"text-secondary"}>1212</Link></Col>
+                                    <Col></Col>
+                                    <Col><img src="/assets/images/down.png" className={"h_20"} /></Col>
+                                </Row>
+                            </div>
+                        </div>
+                        {/* <!--// 게시판목록 --> */}
+
+                        <Row className="board_bot justify-content-between">
+                            <Col xs={3} className=""><Button type={"button"} variant={"22498E"} className={"px-3 f_13"} >선택삭제</Button></Col>
+                            {/* <!-- Paging --> */}
+                            <Col xs={6}></Col>
+                            {/* <!--/ Paging --> */}
+
+                            {/* 수요조사는 버튼명 "의견 접수"  수요조사와 QNA만 작성가능하게 관리자 세팅되어야 함/관리자 쓰기권한만 작성가능 */}
+                            <Col xs={3} className="text-end"></Col>
+                        </Row>
+                    </div>
+                </div>
+            </div>
+        </div>
     );
 }