Browse Source

service

pull/2/head
김지은 11 months ago
parent
commit
edcea95478
  1. 26
      src/assets/css/custom.css
  2. 8
      src/router/routes/RouterCstmrService.js
  3. 482
      src/views/cstmrService/AdminInquiryList.js
  4. 198
      src/views/cstmrService/AdminInquiryWrite.js
  5. 13
      src/views/cstmrService/FaqView.js
  6. 444
      src/views/cstmrService/InquiryList.js
  7. 160
      src/views/cstmrService/InquiryWrite.js

26
src/assets/css/custom.css

@ -1037,11 +1037,11 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
.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 .collapse-margin .card{box-shadow:none!important;border-bottom:1px solid #ddd!important;border-radius:0px;margin-top:0;}
.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{display:flex;justify-content:space-between;align-items: center;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%;}
@ -1053,3 +1053,25 @@ caption {overflow: hidden; line-height: 0;text-indent: -2000px;}
.input-radio-inline label:hover{cursor: pointer;}
.faq-textarea{resize:none;min-height:250px}
.faq-modal .modal-footer button{min-width:120px}
.faq .my-faq .faq-q h5 .ti, .faq .my-faq .faq-q h5 .ti span{font-size:1rem}
.faq .my-faq .faq-q h5 .badge{margin-right:10px}
.faq .my-faq .app-collapse.card .card-header{padding:0.5em}
.faq .faq-q .date{margin:0 10px;font-size:1rem;font-weight:400;}
.faq .my-faq .collapse-margin .card{margin-top:0;}
.my-faq{max-height:650px;overflow:auto;}
.inquiry-btn{margin-top:1rem;text-align: center;}
.inquiry-btn button{min-width:450px;font-size:1rem;}
.pal-form .form-group label{font-size:0.875rem;font-weight:500;}
.feedback-input{position: relative;}
.feedback{position:absolute;left:3px;font-size:0.75rem;word-break: keep-all;color:#ed1125}
.feedback p{line-height:1.6;padding-top:4px}
.pal-form .custom-file-input.pal:lang(en) ~ .custom-file-label::after{content: "찾아보기";display:flex;align-items:center;}
.pal-form .custom-file .custom-file-label{display:flex;align-items:center;color:#999;font-weight:300;}
.pal-form .custom-file.file-selected{position: relative;}
.pal-form .custom-file.file-selected label{color:#777;font-weight:400}
.pal-form .custom-file-control{position: absolute;top:20px;top: 10px;right: 100px;z-index: 999;transition: 0.5s ease;-webkit-transition: 0.5s ease;}
.pal-form .custom-file-control:hover{cursor: pointer;}
.pal-form .pal-form-btn{margin:1rem 0;text-align: right;}
.pal-form .pal-form-btn button{min-width:120px}
.pal-form .pal-form-btn button + button{margin-left:20px}

8
src/router/routes/RouterCstmrService.js

@ -16,6 +16,14 @@ const RouteSystem = [
{
path: '/cstmrService/inquirywrite',
component: lazy(() => import('../../views/cstmrService/InquiryWrite'))
},
{
path: '/cstmrService/admininquirylist',
component: lazy(() => import('../../views/cstmrService/AdminInquiryList'))
},
{
path: '/cstmrService/admininquirywrite',
component: lazy(() => import('../../views/cstmrService/AdminInquiryWrite'))
}
];

482
src/views/cstmrService/AdminInquiryList.js

@ -0,0 +1,482 @@
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,
Badge
} 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>
<Badge color='light-secondary'>답변대기</Badge>
<span className='ti'><span>[불만]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
{/* br처리? 줄바꿈.. 추후에 생각 */}
그렇습니다.<br/><br/>
- 사용용도가 영리 목적인 경우 : 무게에 상관없이 모두 신고<br/>
- 사용용도가 비영리 목적인 경우<br/>
· (무인멀티콥터, 무인비행기, 무인헬리콥터) 최대이륙중량 2kg 초과 신고<br/>
· (무인비행선) 연료의 무게를 제외한 자체무게가 12kg 초과, 길이 7m 초과 신고 <br/>
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
}
]
function AdminInquiryList() {
return <>
<CustomMainLayout title={'문의 목록'}>
<div className='faq'>
<div className='my-faq'>
<AppCollapse data={data} accordion type='margin' />
</div>
<div className='inquiry-btn'>
{/* 링크 연결 임시 하드코딩 */}
<Button color='primary' size='lg' onClick={() => { window.location.href = '/cstmrService/InquiryWrite'; }}>1:1 문의하기</Button>
</div>
</div>
</CustomMainLayout>
</>;
}
export default AdminInquiryList;

198
src/views/cstmrService/AdminInquiryWrite.js

@ -0,0 +1,198 @@
import '../../assets/css/custom.css';
import '@styles/react/libs/flatpickr/flatpickr.scss';
import '@styles/react/libs/tables/react-dataTable-component.scss';
import { useState, useEffect, useRef } 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, X } from 'react-feather';
function AdminInquiryWrite() {
const fileInputRef = useRef(null);
const [value, setValue] = useState('')
const [selectedFile, setSelectedFile] = useState(null);
const handleFileChange = (event) => {
const file = event.target.files[0];
setSelectedFile(file);
};
const handleFileClear = () => {
setSelectedFile(null);
};
return <>
<CustomMainLayout title={'문의내역 답변'}>
<div className='pal-form'>
<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 className='feedback-input'>
<Label for='test'>
<span className='necessary'>*</span>
</Label>
<Input
type='number'
size='sm'
placeholder=''
/>
<div class="feedback"><p>* 확인이 필요할 경우 연락을 드릴 있으니, 정확히 입력 부탁드립니다.</p></div>
</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='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 className='feedback-input'>
<Label for='test'>
<span className='necessary'>*</span>
</Label>
<Input
className='faq-textarea'
type='textarea'
placeholder=''
onChange={e => setValue(e.target.value)}
/>
{/* 하단 필요없으면제거 */}
<span
className={classnames('textarea-counter-value float-right', {
'bg-danger': value.length > 300
})}
>
{`${value.length}/300`}
</span>
<div class="feedback"><p>* 주민번호, 이메일 불필요한 개인정보는 기재하지 마시기 바랍니다.</p></div>
</FormGroup>
</Col>
<Col className='list-input mt-1' md='12'>
<FormGroup className='feedback-input'>
<Label for='test'>
<span className='necessary'></span>
</Label>
<div className={`custom-file ${selectedFile ? 'file-selected' : ''}`}>
<Input
type='file'
id='inputFile'
name=''
className='custom-file-input pal'
onChange={handleFileChange}
ref={fileInputRef}
/>
{/* 현재는 text만 바뀌는상태! input 초기화 작업해주세용 */}
{selectedFile && ( // Display the trash icon only if a file is selected
<span className='custom-file-control'>
<X // Display a trash icon
className='clear-file-button'
onClick={handleFileClear}
/>
</span>
)}
<Label for='inputFile' className='custom-file-label'>
{selectedFile ? selectedFile.name : '선택된 파일이 없습니다.'}
</Label>
</div>
<div class="feedback">
<p>
* 파일 형식은 jpg, png, jpeg, gif 형식만 가능합니다.<br/>
* 최대 허용 용량 : 3MB까지 가능합니다.
</p>
</div>
</FormGroup>
</Col>
</Row>
<div className='pal-form-btn'>
<Button color='danger'>삭제</Button>
<Button color='secondary'>취소</Button>
<Button color='primary'>저장</Button>
</div>
</div>
</CustomMainLayout>
</>;
}
export default AdminInquiryWrite;

13
src/views/cstmrService/FaqView.js

@ -46,7 +46,9 @@ const data = [
<span className='faq-icon-q'>Q</span>
<span className='ti'><span>[장치신고]</span> ?</span>
</h5>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
</div>
</div>
),
content: (
@ -70,7 +72,9 @@ const data = [
<span className='faq-icon-q'>Q</span>
<span className='ti'><span>[비행승인]</span> ?</span>
</h5>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
</div>
</div>
),
content: (
@ -215,7 +219,10 @@ function FaqView() {
</div>
</ModalBody>
<ModalFooter>
<Button color='dark' onClick={() => setCenteredModal(!centeredModal)}>
<Button color='danger' onClick={() => setCenteredModal(!centeredModal)}>
삭제
</Button>
<Button color='secondary' onClick={() => setCenteredModal(!centeredModal)}>
취소
</Button>
<Button color='primary' onClick={() => setCenteredModal(!centeredModal)}>

444
src/views/cstmrService/InquiryList.js

@ -28,7 +28,8 @@ import {
Col,
FormGroup,
Label,
CustomInput
CustomInput,
Badge
} from 'reactstrap';
import AppCollapse from '@components/app-collapse'
@ -38,13 +39,444 @@ import classnames from 'classnames'
import { Search, HelpCircle, Info } from 'react-feather';
function InquiryView() {
const data = [
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-secondary'>답변대기</Badge>
<span className='ti'><span>[불만]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
{/* br처리? 줄바꿈.. 추후에 생각 */}
그렇습니다.<br/><br/>
- 사용용도가 영리 목적인 경우 : 무게에 상관없이 모두 신고<br/>
- 사용용도가 비영리 목적인 경우<br/>
· (무인멀티콥터, 무인비행기, 무인헬리콥터) 최대이륙중량 2kg 초과 신고<br/>
· (무인비행선) 연료의 무게를 제외한 자체무게가 12kg 초과, 길이 7m 초과 신고 <br/>
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
},
{
title: (
<div className='faq-q'>
<h5>
<Badge color='light-primary'>답변완료</Badge>
<span className='ti'><span>[문의]</span> ?</span>
</h5>
<div>
<Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
<span className='date'>2022-02-02</span>
</div>
</div>
),
content: (
<div className='faq-a'>
<span className='faq-a-text'>
사방/천장이 막혀있는 밀폐된 실내 공간에서의 비행은 승인을 필요로 하지 않습니다.
또한, 적절한 조명장치가 있는 실내 공간이라면 야간에도 비행이 가능합니다. 다면 어떠한 경우에도 인명과 재산에 위험을 초래할 우려가 없도록 주의하여 비행하여야 합니다.
</span>
</div>
)
}
]
function InquiryList() {
return <>
<CustomMainLayout title={'자주묻는 질문'}>
dd
<CustomMainLayout title={'나의 문의 내역 확인'}>
<div className='faq'>
<div className='my-faq'>
<AppCollapse data={data} accordion type='margin' />
</div>
<div className='inquiry-btn'>
{/* 링크 연결 임시 하드코딩 */}
<Button color='primary' size='lg' onClick={() => { window.location.href = '/cstmrService/InquiryWrite'; }}>1:1 문의하기</Button>
</div>
</div>
</CustomMainLayout>
</>;
}
export default InquiryView;
export default InquiryList;

160
src/views/cstmrService/InquiryWrite.js

@ -1,7 +1,7 @@
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 { useState, useEffect, useRef } from 'react'
import { useParams, Link } from 'react-router-dom'
import { useSelector, useDispatch } from 'react-redux'
import { CustomMainLayout } from '../../components/layout/CustomMainLayout';
@ -36,15 +36,163 @@ import Select from 'react-select'
import { selectThemeColors } from '@utils'
import classnames from 'classnames'
import { Search, HelpCircle, Info } from 'react-feather';
import { Search, HelpCircle, Info, X } from 'react-feather';
function InquiryView() {
function InquiryWrite() {
const fileInputRef = useRef(null);
const [value, setValue] = useState('')
const [selectedFile, setSelectedFile] = useState(null);
const handleFileChange = (event) => {
const file = event.target.files[0];
setSelectedFile(file);
};
const handleFileClear = () => {
setSelectedFile(null);
};
return <>
<CustomMainLayout title={'자주묻는 질문'}>
dd
<CustomMainLayout title={'1:1 문의하기'}>
<div className='pal-form'>
<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 className='feedback-input'>
<Label for='test'>
<span className='necessary'>*</span>
</Label>
<Input
type='number'
size='sm'
placeholder=''
/>
<div class="feedback"><p>* 확인이 필요할 경우 연락을 드릴 있으니, 정확히 입력 부탁드립니다.</p></div>
</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='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 className='feedback-input'>
<Label for='test'>
<span className='necessary'>*</span>
</Label>
<Input
className='faq-textarea'
type='textarea'
placeholder=''
onChange={e => setValue(e.target.value)}
/>
{/* 하단 필요없으면제거 */}
<span
className={classnames('textarea-counter-value float-right', {
'bg-danger': value.length > 300
})}
>
{`${value.length}/300`}
</span>
<div class="feedback"><p>* 주민번호, 이메일 불필요한 개인정보는 기재하지 마시기 바랍니다.</p></div>
</FormGroup>
</Col>
<Col className='list-input mt-1' md='12'>
<FormGroup className='feedback-input'>
<Label for='test'>
<span className='necessary'></span>
</Label>
<div className={`custom-file ${selectedFile ? 'file-selected' : ''}`}>
<Input
type='file'
id='inputFile'
name=''
className='custom-file-input pal'
onChange={handleFileChange}
ref={fileInputRef}
/>
{/* 현재는 text만 바뀌는상태! input 초기화 작업해주세용 */}
{selectedFile && ( // Display the trash icon only if a file is selected
<span className='custom-file-control'>
<X // Display a trash icon
className='clear-file-button'
onClick={handleFileClear}
/>
</span>
)}
<Label for='inputFile' className='custom-file-label'>
{selectedFile ? selectedFile.name : '선택된 파일이 없습니다.'}
</Label>
</div>
<div class="feedback">
<p>
* 파일 형식은 jpg, png, jpeg, gif 형식만 가능합니다.<br/>
* 최대 허용 용량 : 3MB까지 가능합니다.
</p>
</div>
</FormGroup>
</Col>
</Row>
<div className='pal-form-btn'>
<Button color='danger'>삭제</Button>
<Button color='secondary'>취소</Button>
<Button color='primary'>저장</Button>
</div>
</div>
</CustomMainLayout>
</>;
}
export default InquiryView;
export default InquiryWrite;

Loading…
Cancel
Save