QNA 사용자 문의하기 팝업 표출

src/components/cstmrService/inquiry/InquiryWrite.js

@@ -1,48 +1,28 @@
-import '../../assets/css/custom.css';
+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, useHistory } 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
+  Label
 } from 'reactstrap';
-
-import AppCollapse from '@components/app-collapse';
-import Select from 'react-select';
-import { selectThemeColors } from '@utils';
 import classnames from 'classnames';
+import { X } from 'react-feather';
 
-import { Search, HelpCircle, Info, X } from 'react-feather';
-
-function InquiryWrite() {
+function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal }) {
   const fileInputRef = useRef(null);
   const [value, setValue] = useState('');
   const [selectedFile, setSelectedFile] = useState(null);
-  const history = useHistory();
 
   const handleFileChange = event => {
     const file = event.target.files[0];
@@ -54,9 +34,14 @@ function InquiryWrite() {
   };
 
   return (
-    <>
-      <CustomMainLayout title={'1:1 문의하기'}>
-        <div className='pal-form'>
+    <Modal
+      isOpen={isInquiryModalOpen}
+      toggle={handlerInquiryModal}
+      className='modal-dialog-centered modal-xl faq-modal'
+    >
+      <ModalHeader toggle={handlerInquiryModal}>1:1 문의하기</ModalHeader>
+      <div className='pal-form'>
+        <ModalBody>
           <Row>
             <Col className='list-input' md='3'>
               <FormGroup>
@@ -187,16 +172,18 @@ function InquiryWrite() {
               </FormGroup>
             </Col>
           </Row>
+        </ModalBody>
+        <ModalFooter>
           <div className='pal-form-btn'>
             <Button color='danger'>삭제</Button>
-            <Button color='secondary' onClick={() => history.go(-1)}>
+            <Button color='secondary' onClick={() => handlerInquiryModal()}>
               취소
             </Button>
             <Button color='primary'>저장</Button>
           </div>
-        </div>
-      </CustomMainLayout>
-    </>
+        </ModalFooter>
+      </div>
+    </Modal>
   );
 }
 

src/containers/cstmrService/inquiry/UserInquiryContainer.js

@@ -2,14 +2,16 @@ import { Button, Badge } from 'reactstrap';
 import AppCollapse from '@components/app-collapse';
 import { useDispatch, useSelector } from 'react-redux';
 import { USER_LIST } from '../../../modules/cstmrService/inquiry/action';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import moment from 'moment';
+import InquiryWrite from '../../../components/cstmrService/inquiry/InquiryWrite';
 
 export default function UserInquiryContainer() {
   const dispatch = useDispatch();
-
   const { userList: lists } = useSelector(state => state.qnaState);
 
+  const [isInquiryModalOpen, setIsInquiryModalOpen] = useState(false);
+
   const textLineBreaks = text => {
     return text.replace((/\n/g, '<br>'));
   };
@@ -32,7 +34,12 @@ export default function UserInquiryContainer() {
               </span>
             </h5>
             <div>
-              <Button.Ripple color='flat-primary'>수정하기</Button.Ripple>
+              <Button.Ripple
+                color='flat-primary'
+                onClick={() => handlerInquiryModal()}
+              >
+                수정하기
+              </Button.Ripple>
               <span className='date'>
                 {moment(i.createDt).format('YYYY-MM-DD')}
               </span>
@@ -70,69 +77,12 @@ export default function UserInquiryContainer() {
     });
   };
 
-  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>
-      )
-    }
-  ];
+  const handlerInquiryModal = qnaSno => {
+    // if (!isInquiryModalOpen) {
+    //   dispatch(ADMIN_DETAIL.request(qnaSno));
+    // }
+    setIsInquiryModalOpen(!isInquiryModalOpen);
+  };
 
   useEffect(() => {
     dispatch(USER_LIST.request({ category: '', searchType: '', word: '' }));
@@ -144,17 +94,21 @@ export default function UserInquiryContainer() {
         <AppCollapse data={handlerQnaList()} accordion type='margin' />
       </div>
       <div className='inquiry-btn'>
-        {/* 링크 연결 임시 하드코딩 */}
         <Button
           color='primary'
           size='lg'
           onClick={() => {
-            window.location.href = '/cstmrService/InquiryWrite';
+            handlerInquiryModal();
           }}
         >
           1:1 문의하기
         </Button>
       </div>
+
+      <InquiryWrite
+        isInquiryModalOpen={isInquiryModalOpen}
+        handlerInquiryModal={handlerInquiryModal}
+      />
     </div>
   );
 }

src/router/routes/RouterCstmrService.js

@@ -15,7 +15,9 @@ const RouteSystem = [
   // },
   {
     path: '/cstmrService/inquirywrite',
-    component: lazy(() => import('../../views/cstmrService/InquiryWrite'))
+    component: lazy(() =>
+      import('../../components/cstmrService/inquiry/InquiryWrite')
+    )
   }
   // {
   //   path: '/cstmrService/admininquirylist',