diff --git a/src/assets/css/custom.css b/src/assets/css/custom.css index ec2c649..ee5deee 100644 --- a/src/assets/css/custom.css +++ b/src/assets/css/custom.css @@ -458,21 +458,25 @@ h1.logo span{display:block;color:#8a1c05;font-weight:bold;letter-spacing:2px;fon .search-list-cont .list-input + .list-input{margin-top:10px;} } .tooltip-test{position:absolute;left:500px;top:500px;} -.tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width:150px;word-break: break-all;} +.tooltip-box{background:#fff;padding:10px;border-radius:6px;position:relative;max-width:150px;word-break: break-all;} /* .tooltip-box div{text-align:left;font-size:13px;} */ -.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:3px;font-size:0.875rem;color:#f4f4f4;} -/* .tooltip-ti span, .tooltip-txt .ti{color:#f4f4f4;font-weight:400;} */ -.tooltip-txt{font-weight:400;font-size:12px;padding-top:6px;line-height:1.4;word-break: keep-all;} +.tooltip-ti{border-bottom:1px solid #bbb;padding-bottom:3px;font-size:0.875rem;color:#555;font-weight:600;} +.tooltip-ti span, .tooltip-txt .ti{color:#777;font-weight:400;} +.tooltip-txt{font-size:12px;padding-top:6px;line-height:1.4;word-break: keep-all;} .tooltip-txt-list + .tooltip-txt-list{margin-top:4px;} .tooltip-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid transparent;} .tooltip-txt-list .ti:before{content:'/';margin:0 2px;} .tooltip-txt-list .ti:first-child::before{display:none;} +.dark-layout .tooltip-ti span, .dark-layout .tooltip-txt .ti{color:#f4f4f4} +.dark-layout .tooltip-box{background:#283046;padding:10px;border-radius:6px;position:relative;max-width:150px;word-break: break-all;} +.dark-layout .tooltip-box .arrow {border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid transparent;} + /* 데이터블록 */ -.dblock-box{background:#283046;padding:6px 8px;border-radius:6px;width:150px;word-break: break-all;position:absolute} -.dblock-box div{text-align:left;font-size:11px;color:#bbb;} +.dblock-box{background:#fff;padding:6px 8px;border-radius:6px;width:150px;word-break: break-all;position:absolute;} +.dblock-box div{text-align:left;font-size:11px;color:#555;} /* .dblock-ti{border-bottom:1px solid #bbb;padding-bottom:4px;} */ -.dblock-ti span, .dblock-txt .ti{color:#f4f4f4;font-weight:500;display:block;} +.dblock-ti span, .dblock-txt .ti{color:#777;font-weight:500;display:block;} .dblock-txt{line-height: 1.2;} .dblock-txt-list + .dblock-txt-list{margin-top:4px;} /* .dblock-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid transparent;} */ @@ -480,6 +484,12 @@ h1.logo span{display:block;color:#8a1c05;font-weight:bold;letter-spacing:2px;fon .dblock-txt-list span::before{content:'/';margin:0 2px;} .dblock-txt-list span:first-child::before{display:none;} +.dark-layout .dblock-box{background:#283046;} +.dark-layout .dblock-box div{color:#bbb;} +/* .dblock-ti{border-bottom:1px solid #bbb;padding-bottom:4px;} */ +.dark-layout .dblock-ti span, .dark-layout .dblock-txt .ti{color:#f4f4f4;} +/* .dblock-box .arrow {position:absolute;bottom:-10px;left:50%;transform: translateX(-50%);display:block;width: 0px;height: 0px;border-top:10px solid #283046;border-bottom:10px solid none;border-right: 10px solid transparent;border-left: 10px solid transparent;} */ + /*회원가입*/ .pal-register .auth-wrapper.auth-v1 .auth-inner{max-width:1200px;} .pal-register .content-header .sub-txt{display:block;margin-bottom:1rem;} @@ -1015,3 +1025,31 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;} .report-link a + a{margin-left:1rem} .react-pdf__Document{height:700px;overflow-y:scroll;overflow-x:hidden;} + +.faq .input-group-prepend{margin-left:-1px;} +.faq .input-group-prepend .input-group-text{border-radius:0.357rem;border-right:1px solid #d8d6de} +.faq .search-feather{width:100%;max-width:50%} +.faq .faq-search{display:flex;align-items:center;} +.faq .tab-menu{margin-top:1rem} +.faq .tab-menu .nav-pills .nav-link{background:#f4f4f4;color:#555} +.faq .tab-menu .nav-pills .nav-item + .nav-item{margin-left:14px} +.faq .tab-menu .nav-pills .nav-link.active{background:#8a1c05;color:#fff;font-weight:600;} +.faq .tab-content{display:block;} +.faq-admin-plus{font-size:1rem;margin-left:1rem;width:100%;max-width:300px;height:43px;line-height:1;padding:0;font-weight:500;background-color:#fff;} +.faq .collapse-margin .card-header{border-radius:0px;} +.faq .collapse-margin .card{box-shadow:none!important;border-bottom:1px solid #ddd!important;border-radius:0px;} +.faq [class*='faq-icon-']{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:100%;color:#fff;font-weight:600;} +.faq-icon-q{background:#ff9f43;margin-right:10px} +.faq-icon-a{background:#28c76f;} +.faq-q{display:flex;justify-content:space-between;width:100%} +.faq-q h5 .ti{font-weight:500;font-size:1.125rem;line-height:1.6} +.faq-q h5 .ti span{font-weight:500;font-size:1.125rem;line-height:1.6;margin-right:4px} +.faq .app-collapse .collapse-title{width:100%;} +.faq-q button{min-width:100px;position: relative;z-index: 2;} +.faq-a{display:flex;background:#f4f4f4;padding:1rem} +.faq-a-text{margin-top:4px;word-break: keep-all;margin-left:10px;display:block} +.faq-modal .form-group label{font-size:0.875rem;font-weight:400;} +.input-radio-inline{display:flex;height:34px;align-items: center;} +.input-radio-inline label:hover{cursor: pointer;} +.faq-textarea{resize:none;min-height:250px} +.faq-modal .modal-footer button{min-width:120px} \ No newline at end of file diff --git a/src/views/cstmrService/FaqView.js b/src/views/cstmrService/FaqView.js index 448dd5b..b31ad10 100644 --- a/src/views/cstmrService/FaqView.js +++ b/src/views/cstmrService/FaqView.js @@ -1,5 +1,293 @@ +import '../../assets/css/custom.css'; +import '@styles/react/libs/flatpickr/flatpickr.scss'; +import '@styles/react/libs/tables/react-dataTable-component.scss'; +import { useState, useEffect } from 'react' +import { useParams, Link } from 'react-router-dom' +import { useSelector, useDispatch } from 'react-redux' +import { CustomMainLayout } from '../../components/layout/CustomMainLayout'; +import { + Card, + CardBody, + CardText, + Button, + ButtonGroup, + Input, + InputGroup, + InputGroupAddon, + InputGroupText, + Modal, + ModalHeader, + ModalBody, + ModalFooter, + Nav, + NavItem, + NavLink, + TabContent, + TabPane, + Row, + Col, + FormGroup, + Label, + CustomInput +} from 'reactstrap'; + +import AppCollapse from '@components/app-collapse' +import Select from 'react-select' +import { selectThemeColors } from '@utils' +import classnames from 'classnames' + +import { Search, HelpCircle, Info } from 'react-feather'; + +const data = [ + { + title: ( +
+
+ Q + [장치신고]드론을 구매했는데 기체신고를 해야하나요? +
+ 수정하기 +
+ ), + content: ( +
+ A + + {/* br처리? 줄바꿈.. 추후에 생각 */} + 네 그렇습니다.

+ - 사용용도가 영리 목적인 경우 : 무게에 상관없이 모두 신고
+ - 사용용도가 비영리 목적인 경우
+ · (무인멀티콥터, 무인비행기, 무인헬리콥터) 최대이륙중량 2kg 초과 시 신고
+ · (무인비행선) 연료의 무게를 제외한 자체무게가 12kg 초과, 길이 7m 초과 시 신고
+ +
+ ) + }, + { + title: ( +
+
+ Q + [비행승인]실내에서 비행할 때에도 비행승인을 받아야 할까? +
+ 수정하기 +
+ ), + content: ( +
+ A + + 사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다. + 또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다. + +
+ ) + } +] + function FaqView() { - return <>faq; + // ** States & Vars + const [activeTab, setActiveTab] = useState('1'), + store = useSelector(state => state.users), + dispatch = useDispatch(), + { id } = useParams() + // ** Function to toggle tabs + const toggle = tab => setActiveTab(tab) + const [centeredModal, setCenteredModal] = useState(false) + const [value, setValue] = useState('') + + return <> + +
+ {/* 검색바 */} +
+ + + + + + + + + + setCenteredModal(!centeredModal)} className='modal-dialog-centered modal-lg faq-modal'> + setCenteredModal(!centeredModal)}>질문 등록하기 + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + + + + + + + + + setValue(e.target.value)} + /> + {/* 하단 필요없으면제거 */} + 300 + })} + > + {`${value.length}/300`} + + + + +
+ + + + + + +
+ {/* 탭 컨텐츠 */} +
+
+ +
+
+ + +
+ +
+ + + 장치신고 + + + 사업 등록 + + + 비행 승인 + + + 항공 촬영 + + + 기타 + + +
+
+
+ + ; } export default FaqView;