김지은 11 months ago
parent
commit
5992c59aae
  1. 38
      src/components/cstmrService/inquiry/InquiryWrite.js
  2. 9
      src/components/laanc/map/LaancAreaMap.js
  3. 32
      src/components/laanc/map/LaancDrawControl.js
  4. 69
      src/containers/cstmrService/inquiry/UserInquiryContainer.js
  5. 14
      src/modules/cstmrService/inquiry/model/index.ts
  6. 4
      src/modules/laanc/sagas/laancSagas.ts

38
src/components/cstmrService/inquiry/InquiryWrite.js

@ -26,20 +26,11 @@ function InquiryWrite({
handlerSubmitInquiryForm,
memberName,
inquiryForm,
handlerDeleteConfirmInquiry
handlerDeleteConfirmInquiry,
fileInputRef,
handlerFileChange,
handlerFileClear
}) {
const fileInputRef = useRef(null);
const [selectedFile, setSelectedFile] = useState(null);
const handleFileChange = event => {
const file = event.target.files[0];
setSelectedFile(file);
};
const handleFileClear = () => {
setSelectedFile(null);
};
return (
<Modal
isOpen={isInquiryModalOpen}
@ -170,7 +161,7 @@ function InquiryWrite({
</Label>
<div
className={`custom-file ${
selectedFile ? 'file-selected' : ''
inquiryForm.fileInfos.length > 0 ? 'file-selected' : ''
}`}
>
<Input
@ -178,21 +169,22 @@ function InquiryWrite({
id='inputFile'
name=''
className='custom-file-input pal'
onChange={e => handleFileChange(e)}
onChange={e => handlerFileChange(e)}
ref={fileInputRef}
/>
{/* 현재는 text만 바뀌는상태! input 초기화 작업해주세용 */}
{selectedFile && ( // Display the trash icon only if a file is selected
{inquiryForm.fileInfos.length > 0 && ( // 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}
onClick={() => handlerFileClear('edit')}
/>
</span>
)}
<Label for='inputFile' className='custom-file-label'>
{selectedFile
? selectedFile.name
{inquiryForm.fileInfos.length > 0
? inquiryForm.fileInfos[0].fileName ||
inquiryForm.fileInfos[0].name
: '선택된 파일이 없습니다.'}
</Label>
</div>
@ -208,9 +200,11 @@ function InquiryWrite({
</ModalBody>
<ModalFooter>
<div className='pal-form-btn'>
<Button color='danger' onClick={handlerDeleteConfirmInquiry}>
삭제
</Button>
{detail.createDt && (
<Button color='danger' onClick={handlerDeleteConfirmInquiry}>
삭제
</Button>
)}
<Button color='secondary' onClick={() => handlerInquiryModal()}>
취소
</Button>

9
src/components/laanc/map/LaancAreaMap.js

@ -47,7 +47,6 @@ export default function LaancAreaMap({
const dispatch = useDispatch();
const mapControl = useSelector(state => state.controlMapReducer);
const { areaCoordList } = useSelector(state => state.flightState);
const { inAirArea } = useSelector(state => state.flightState);
const [mapObject, setMapObject] = useState();
const [isMapLoad, setIsMapLoad] = useState(false);
@ -82,10 +81,6 @@ export default function LaancAreaMap({
setMode(mapControl.drawType);
}, [mapControl.drawType]);
// useEffect(() => {
// console.log(inAirArea, '--inairARea');
// }, [inAirArea]);
useEffect(() => {
if (areaCoordList && mapObject) {
if (
@ -301,11 +296,11 @@ export default function LaancAreaMap({
const handlerCoordinates = areaInfo => {
const areaList = handlerAreaInfoToAreaList(areaInfo);
// dispatch(LaancAction.LAANC_ALTITUDE.request(areaList));
dispatch(LaancAction.LAANC_VALID_AREA.request(areaList));
if (areaInfo.areaType === 'LINE' || areaInfo.areaType === 'POLYGON') {
dispatch(FLIGHT_PLAN_AREA_BUFFER_LIST.request(areaList));
} else {
dispatch(LaancAction.LAANC_ALTITUDE.request(areaList));
dispatch(LaancAction.LAANC_VALID_AREA.request(areaList));
setMapAreaCoordList(areaList);
}
};

32
src/components/laanc/map/LaancDrawControl.js

@ -14,11 +14,14 @@ import { drawTypeChangeAction } from '../../../modules/control/map/actions/contr
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import { CircleMode } from 'mapbox-gl-draw-circle';
import axios from '../../../modules/utils/customAxiosUtil';
import * as LaancAction from '../../../modules/laanc/actions/laancActions';
export const LaancDrawControl = props => {
const dispatch = useDispatch();
const mapControl = useSelector(state => state.controlMapReducer);
const { laancElev } = useSelector(state => state.laancState);
const drawObj = props.drawObj;
const mapObject = props.mapObject;
@ -32,6 +35,10 @@ export const LaancDrawControl = props => {
desc: ''
});
// useEffect(() => {
// console.log(laancElev, '----elev');
// }, [laancElev]);
useEffect(() => {
const areaType = props.areaCoordList[0].areaType;
const drawType = mapControl.drawType;
@ -200,38 +207,28 @@ export const LaancDrawControl = props => {
const areaInfo = handlerSettingAreaInfo(coords, mode);
const areaList = props.handlerAreaInfoToAreaList(areaInfo);
let isBreak = false;
// 비행금지 구역 체크
console.log('unableElev');
try {
const elev1 = await axios.post(`api/bas/laanc/valid/elev`, areaList);
dispatch(LaancAction.LAANC_ALTITUDE.success(elev1.data));
const elev2 = [];
if (mode === 'CIRCLE') {
const point = mapObject.project(coords);
const formatCoords = mode === 'CIRCLE' ? [coords] : coords;
for (let i = 0; i < formatCoords.length; i++) {
const point = mapObject.project(formatCoords[i]);
const maine = mapObject.queryRenderedFeatures(point, {
layers: ['maine']
});
if (maine.length > 0) {
if (maine[0].properties.description.includes('김포공항 비행불가')) {
elev2.push(maine[0]);
isBreak = true;
}
}
} else {
for (let i = 0; i < coords.length; i++) {
const point = mapObject.project(coords[i]);
const maine = mapObject.queryRenderedFeatures(point, {
layers: ['maine']
});
if (maine.length > 0) {
if (maine[0].properties.description.includes('김포공항 비행불가')) {
elev2.push(maine[0]);
isBreak = true;
break;
}
break;
}
}
}
@ -239,6 +236,7 @@ export const LaancDrawControl = props => {
if (elev1.data[0] === 0 || elev2.length > 0) isBreak = true;
} catch (error) {
alert('에러 발생');
return;
}
if (isBreak) {

69
src/containers/cstmrService/inquiry/UserInquiryContainer.js

@ -2,7 +2,7 @@ import { Button, Badge } from 'reactstrap';
import AppCollapse from '@components/app-collapse';
import { useDispatch, useSelector } from 'react-redux';
import * as Actions from '../../../modules/cstmrService/inquiry/action';
import { Fragment, useCallback, useEffect, useState } from 'react';
import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
import moment from 'moment';
import InquiryWrite from '../../../components/cstmrService/inquiry/InquiryWrite';
import { InfoModal } from '../../../components/modal/InfoModal';
@ -15,13 +15,16 @@ export default function UserInquiryContainer({ memberName }) {
state => state.qnaState
);
const fileInputRef = useRef(null);
const [isInquiryModalOpen, setIsInquiryModalOpen] = useState(false);
const [inquiryForm, setInquiryForm] = useState({
category: '칭찬',
contact: '',
title: '',
content: ''
content: '',
fileInfos: []
});
const [validationModal, setValidationModal] = useState({
errorType: {
isOpen: false,
@ -129,7 +132,8 @@ export default function UserInquiryContainer({ memberName }) {
category: '칭찬',
contact: '',
title: '',
content: ''
content: '',
fileInfos: []
});
}
setIsInquiryModalOpen(!isInquiryModalOpen);
@ -148,9 +152,25 @@ export default function UserInquiryContainer({ memberName }) {
[inquiryForm]
);
const handlerFileChange = e => {
const file = e.target.files[0];
setInquiryForm({
...inquiryForm,
fileInfos: [file]
});
};
const handlerFileClear = () => {
setInquiryForm({
...inquiryForm,
fileInfos: []
});
};
// 문의 등록 event handler
const handlerSubmitInquiryForm = type => {
const { category, title, content, contact, qnaSno } = inquiryForm;
const { category, title, content, contact, fileInfos, qnaSno } =
inquiryForm;
if (!contact) {
setValidationModal({
@ -192,6 +212,34 @@ export default function UserInquiryContainer({ memberName }) {
}
});
return;
} else if (fileInfos.length > 0) {
const allowedExtensions = ['jpg', 'png', 'jpeg', 'gif'];
const fileExtension = fileInfos[0].name.split('.').pop().toLowerCase();
const maxFileSize = 3 * 1024 * 1024; // 3MB
if (!allowedExtensions.includes(fileExtension)) {
setValidationModal({
...validationModal,
errorType: {
title: '파일 형식 오류',
isOpen: true,
desc: '파일 형식은 jpg, png, jpeg, gif 형식만 가능합니다.'
}
});
return;
}
if (fileInfos[0].size > maxFileSize) {
setValidationModal({
...validationModal,
errorType: {
title: '파일 크기 오류',
isOpen: true,
desc: '파일 크기는 3MB를 초과할 수 없습니다.'
}
});
return;
}
}
if (type === 'post') {
@ -201,6 +249,10 @@ export default function UserInquiryContainer({ memberName }) {
form.append('title', title);
form.append('content', content);
if (fileInfos.length > 0) {
form.append('files', fileInfos[0]);
}
dispatch(Actions.USER_INQUIRY.request(form));
} else if (type === 'edit') {
dispatch(
@ -249,13 +301,16 @@ export default function UserInquiryContainer({ memberName }) {
<InquiryWrite
isInquiryModalOpen={isInquiryModalOpen}
handlerInquiryModal={handlerInquiryModal}
detail={detail}
inquiryForm={inquiryForm}
memberName={memberName}
fileInputRef={fileInputRef}
handlerChangeInquiryForm={handlerChangeInquiryForm}
handlerSubmitInquiryForm={handlerSubmitInquiryForm}
memberName={memberName}
inquiryForm={inquiryForm}
handlerInquiryModal={handlerInquiryModal}
handlerDeleteConfirmInquiry={handlerDeleteConfirmInquiry}
handlerFileChange={handlerFileChange}
handlerFileClear={handlerFileClear}
/>
<InfoModal

14
src/modules/cstmrService/inquiry/model/index.ts

@ -28,6 +28,7 @@ export interface IQnaAdminSearch {
export interface IQnaFiles {
fileSno: number;
fileGroupNo: number;
downloadUrl: string;
fileName: string;
}
@ -95,6 +96,15 @@ export interface IQnaUserInquiry {
title: string;
contact: string;
content: string;
files: IQnaUserFileUpload[];
}
export interface IQnaUserFileUpload {
lastModified: number;
lastModifiedDate: Date;
name: string;
type: string;
webkitRelativePath: string;
}
export interface IQnaUserDetail {
@ -115,7 +125,7 @@ export interface IQnaUserDetail {
createDt: string;
updateUserId: string;
updateDt: string;
files: IQnaFiles[];
fileInfos: IQnaFiles[];
}
export interface IQnaUserUpdate extends IQnaUserInquiry {
@ -163,6 +173,6 @@ export const initalState = {
createDt: '',
updateUserId: '',
updateDt: '',
files: []
fileInfos: []
}
};

4
src/modules/laanc/sagas/laancSagas.ts

@ -120,8 +120,8 @@ function* postValidElevSaga(
) {
try {
const deail = action.payload;
const res = yield call(Apis.laancApi.postValidElev, deail);
yield put(Actions.LAANC_ALTITUDE.success(res.data));
// const res = yield call(Apis.laancApi.postValidElev, deail);
// yield put(Actions.LAANC_ALTITUDE.success(detail));
} catch (error) {
yield put(
MessageActions.IS_ERROR({

Loading…
Cancel
Save