김지은
11 months ago
2 changed files with 334 additions and 8 deletions
@ -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: ( |
||||||
|
<div className='faq-q'> |
||||||
|
<h5> |
||||||
|
<span className='faq-icon-q'>Q</span> |
||||||
|
<span className='ti'><span>[장치신고]</span>드론을 구매했는데 기체신고를 해야하나요?</span> |
||||||
|
</h5> |
||||||
|
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple> |
||||||
|
</div> |
||||||
|
), |
||||||
|
content: ( |
||||||
|
<div className='faq-a'> |
||||||
|
<span className='faq-icon-a'>A</span> |
||||||
|
<span className='faq-a-text'> |
||||||
|
{/* br처리? 줄바꿈.. 추후에 생각 */} |
||||||
|
네 그렇습니다.<br/><br/> |
||||||
|
- 사용용도가 영리 목적인 경우 : 무게에 상관없이 모두 신고<br/> |
||||||
|
- 사용용도가 비영리 목적인 경우<br/> |
||||||
|
· (무인멀티콥터, 무인비행기, 무인헬리콥터) 최대이륙중량 2kg 초과 시 신고<br/> |
||||||
|
· (무인비행선) 연료의 무게를 제외한 자체무게가 12kg 초과, 길이 7m 초과 시 신고 <br/> |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
) |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: ( |
||||||
|
<div className='faq-q'> |
||||||
|
<h5> |
||||||
|
<span className='faq-icon-q'>Q</span> |
||||||
|
<span className='ti'><span>[비행승인]</span>실내에서 비행할 때에도 비행승인을 받아야 할까?</span> |
||||||
|
</h5> |
||||||
|
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple> |
||||||
|
</div> |
||||||
|
), |
||||||
|
content: ( |
||||||
|
<div className='faq-a'> |
||||||
|
<span className='faq-icon-a'>A</span> |
||||||
|
<span className='faq-a-text'> |
||||||
|
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다. |
||||||
|
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다. |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
) |
||||||
|
} |
||||||
|
] |
||||||
|
|
||||||
function FaqView() { |
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 <> |
||||||
|
<CustomMainLayout title={'자주묻는 질문'}> |
||||||
|
<div className='faq'> |
||||||
|
{/* 검색바 */} |
||||||
|
<div className='faq-search'> |
||||||
|
<InputGroup className='search-feather'> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
id='searchInput' |
||||||
|
name='searchInput' |
||||||
|
autoComplete='on' |
||||||
|
placeholder='검색명을 입력하세요.' |
||||||
|
/> |
||||||
|
<InputGroupAddon addonType='prepend'> |
||||||
|
<InputGroupText> |
||||||
|
<Search size={14}/> |
||||||
|
</InputGroupText> |
||||||
|
</InputGroupAddon> |
||||||
|
</InputGroup> |
||||||
|
<Button size='lg' className='faq-admin-plus' outline color='primary' onClick={() => setCenteredModal(!centeredModal)}>질문 등록하기</Button> |
||||||
|
<Modal isOpen={centeredModal} toggle={() => setCenteredModal(!centeredModal)} className='modal-dialog-centered modal-lg faq-modal'> |
||||||
|
<ModalHeader toggle={() => setCenteredModal(!centeredModal)}>질문 등록하기</ModalHeader> |
||||||
|
<ModalBody> |
||||||
|
<div> |
||||||
|
<Row> |
||||||
|
<Col className='list-input' md='3'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>카테고리 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='select' |
||||||
|
size='sm' |
||||||
|
> |
||||||
|
<option value=''>장치 신고</option> |
||||||
|
<option value=''>사업 등록</option> |
||||||
|
<option value=''>비행 승인</option> |
||||||
|
<option value=''>항공 촬영</option> |
||||||
|
<option value=''>기타</option> |
||||||
|
</Input> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='3'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
생성 사용자 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
size='sm' |
||||||
|
placeholder='' |
||||||
|
value='홍길동' |
||||||
|
disabled |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='3'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
생성 일자 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
size='sm' |
||||||
|
placeholder='' |
||||||
|
value='2023-10-15 00:00' |
||||||
|
disabled |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='3'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>표출 여부 |
||||||
|
</Label> |
||||||
|
<div className='input-radio-inline'> |
||||||
|
<CustomInput type='radio' id='exampleCustomRadio' name='customRadio' inline label='표출' defaultChecked /> |
||||||
|
<CustomInput type='radio' id='exampleCustomRadio2' name='customRadio' inline label='미표출' /> |
||||||
|
</div> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='12'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>제목 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
type='text' |
||||||
|
size='sm' |
||||||
|
placeholder='' |
||||||
|
/> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
<Col className='list-input' md='12'> |
||||||
|
<FormGroup> |
||||||
|
<Label for='test'> |
||||||
|
<span className='necessary'>*</span>내용 |
||||||
|
</Label> |
||||||
|
<Input |
||||||
|
className='faq-textarea' |
||||||
|
type='textarea' |
||||||
|
size='sm' |
||||||
|
placeholder='' |
||||||
|
onChange={e => setValue(e.target.value)} |
||||||
|
/> |
||||||
|
{/* 하단 필요없으면제거 */} |
||||||
|
<span |
||||||
|
className={classnames('textarea-counter-value float-right', { |
||||||
|
'bg-danger': value.length > 300 |
||||||
|
})} |
||||||
|
> |
||||||
|
{`${value.length}/300`} |
||||||
|
</span> |
||||||
|
</FormGroup> |
||||||
|
</Col> |
||||||
|
</Row> |
||||||
|
</div> |
||||||
|
</ModalBody> |
||||||
|
<ModalFooter> |
||||||
|
<Button color='dark' onClick={() => setCenteredModal(!centeredModal)}> |
||||||
|
취소 |
||||||
|
</Button> |
||||||
|
<Button color='primary' onClick={() => setCenteredModal(!centeredModal)}> |
||||||
|
저장 |
||||||
|
</Button> |
||||||
|
</ModalFooter> |
||||||
|
</Modal> |
||||||
|
</div> |
||||||
|
{/* 탭 컨텐츠 */} |
||||||
|
<div> |
||||||
|
<div className='tab-menu'> |
||||||
|
<Nav pills> |
||||||
|
<NavItem> |
||||||
|
<NavLink active={activeTab === '1'} onClick={() => toggle('1')}> |
||||||
|
<span className=''>전체</span> |
||||||
|
</NavLink> |
||||||
|
</NavItem> |
||||||
|
<NavItem> |
||||||
|
<NavLink active={activeTab === '2'} onClick={() => toggle('2')}> |
||||||
|
<span className=''>장치 신고</span> |
||||||
|
</NavLink> |
||||||
|
</NavItem> |
||||||
|
<NavItem> |
||||||
|
<NavLink active={activeTab === '3'} onClick={() => toggle('3')}> |
||||||
|
<span className=''>사업 등록</span> |
||||||
|
</NavLink> |
||||||
|
</NavItem> |
||||||
|
<NavItem> |
||||||
|
<NavLink active={activeTab === '4'} onClick={() => toggle('4')}> |
||||||
|
<span className=''>비행 승인</span> |
||||||
|
</NavLink> |
||||||
|
</NavItem> |
||||||
|
<NavItem> |
||||||
|
<NavLink active={activeTab === '5'} onClick={() => toggle('5')}> |
||||||
|
<span className=''>항공 촬영</span> |
||||||
|
</NavLink> |
||||||
|
</NavItem> |
||||||
|
<NavItem> |
||||||
|
<NavLink active={activeTab === '6'} onClick={() => toggle('6')}> |
||||||
|
<span className=''>기타</span> |
||||||
|
</NavLink> |
||||||
|
</NavItem> |
||||||
|
</Nav> |
||||||
|
</div> |
||||||
|
<div> |
||||||
|
<TabContent activeTab={activeTab}> |
||||||
|
<TabPane tabId='1'> |
||||||
|
<div> |
||||||
|
<AppCollapse data={data} accordion type='margin' /> |
||||||
|
</div> |
||||||
|
</TabPane> |
||||||
|
<TabPane tabId='2'> |
||||||
|
장치신고
|
||||||
|
</TabPane> |
||||||
|
<TabPane tabId='3'> |
||||||
|
사업 등록
|
||||||
|
</TabPane> |
||||||
|
<TabPane tabId='4'> |
||||||
|
비행 승인
|
||||||
|
</TabPane> |
||||||
|
<TabPane tabId='5'> |
||||||
|
항공 촬영
|
||||||
|
</TabPane> |
||||||
|
<TabPane tabId='6'> |
||||||
|
기타
|
||||||
|
</TabPane> |
||||||
|
</TabContent> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</CustomMainLayout> |
||||||
|
</>; |
||||||
} |
} |
||||||
|
|
||||||
export default FaqView; |
export default FaqView; |
||||||
|
Loading…
Reference in new issue