qna 사용자 문의 상세 api 연결

src/components/cstmrService/inquiry/InquiryWrite.js

@@ -19,7 +19,7 @@ import {
 import classnames from 'classnames';
 import { X } from 'react-feather';
 
-function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal }) {
+function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal, detail }) {
   const fileInputRef = useRef(null);
   const [value, setValue] = useState('');
   const [selectedFile, setSelectedFile] = useState(null);
@@ -33,6 +33,7 @@ function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal }) {
     setSelectedFile(null);
   };
 
+  console.log('데이터 보시겟습니당', detail);
   return (
     <Modal
       isOpen={isInquiryModalOpen}
@@ -48,12 +49,17 @@ function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal }) {
                 <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
+                  type='select'
+                  bsSize='sm'
+                  value={detail.category}
+                  onChange={() => {}}
+                >
+                  <option value='칭찬'>칭찬</option>
+                  <option value='불만'>불만</option>
+                  <option value='문의'>문의</option>
+                  <option value='제안'>제안</option>
+                  <option value='기타'>기타</option>
                 </Input>
               </FormGroup>
             </Col>
@@ -62,8 +68,12 @@ function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal }) {
                 <Label for='test'>
                   <span className='necessary'>*</span>연락처
                 </Label>
-                <Input type='number' size='sm' placeholder='' />
-                <div class='feedback'>
+                <Input
+                  type='number'
+                  bsSize='sm'
+                  defaultValue={detail.contact || ''}
+                />
+                <div className='feedback'>
                   <p>
                     * 확인이 필요할 경우 연락을 드릴 수 있으니, 정확히 입력
                     부탁드립니다.
@@ -76,9 +86,9 @@ function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal }) {
                 <Label for='test'>생성 사용자</Label>
                 <Input
                   type='text'
-                  size='sm'
+                  bsSize='sm'
                   placeholder=''
-                  value='홍길동'
+                  defaultValue={detail.createUserNm || ''}
                   disabled
                 />
               </FormGroup>
@@ -88,9 +98,8 @@ function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal }) {
                 <Label for='test'>생성 일자</Label>
                 <Input
                   type='text'
-                  size='sm'
-                  placeholder=''
-                  value='2023-10-15 00:00'
+                  bsSize='sm'
+                  defaultValue={detail.createDt.slice(0, -3) || ''}
                   disabled
                 />
               </FormGroup>
@@ -100,7 +109,7 @@ function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal }) {
                 <Label for='test'>
                   <span className='necessary'>*</span>제목
                 </Label>
-                <Input type='text' size='sm' placeholder='' />
+                <Input type='text' bsSize='sm' defaultValue={detail.title} />
               </FormGroup>
             </Col>
             <Col className='list-input' md='12'>
@@ -111,8 +120,8 @@ function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal }) {
                 <Input
                   className='faq-textarea'
                   type='textarea'
-                  placeholder=''
                   onChange={e => setValue(e.target.value)}
+                  defaultValue={detail.content}
                 />
                 {/* 하단 필요없으면제거 */}
                 <span
@@ -122,7 +131,7 @@ function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal }) {
                 >
                   {`${value.length}/300`}
                 </span>
-                <div class='feedback'>
+                <div className='feedback'>
                   <p>
                     * 주민번호, 이메일 등 불필요한 개인정보는 기재하지 마시기
                     바랍니다.
@@ -163,7 +172,7 @@ function InquiryWrite({ isInquiryModalOpen, handlerInquiryModal }) {
                       : '선택된 파일이 없습니다.'}
                   </Label>
                 </div>
-                <div class='feedback'>
+                <div className='feedback'>
                   <p>
                     * 파일 형식은 jpg, png, jpeg, gif 형식만 가능합니다.
                     <br />* 최대 허용 용량 : 3MB까지 가능합니다.

src/containers/cstmrService/inquiry/UserInquiryContainer.js

@@ -1,19 +1,29 @@
 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 {
+  ADMIN_DETAIL,
+  ADMIN_DETAIL_INITAL,
+  USER_LIST
+} from '../../../modules/cstmrService/inquiry/action';
 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 { userList: lists, adminDetail: detail } = useSelector(
+    state => state.qnaState
+  );
 
   const [isInquiryModalOpen, setIsInquiryModalOpen] = useState(false);
 
+  useEffect(() => {
+    dispatch(USER_LIST.request({ category: '', searchType: '', word: '' }));
+  }, []);
+
   const textLineBreaks = text => {
-    return text.replace((/\n/g, '<br>'));
+    return text.replace((/\n/g, '<br/>'));
   };
 
   const handlerQnaList = () => {
@@ -36,7 +46,10 @@ export default function UserInquiryContainer() {
             <div>
               <Button.Ripple
                 color='flat-primary'
-                onClick={() => handlerInquiryModal()}
+                onClick={e => {
+                  e.stopPropagation();
+                  handlerInquiryModal(i.qnaSno);
+                }}
               >
                 수정하기
               </Button.Ripple>
@@ -58,18 +71,15 @@ export default function UserInquiryContainer() {
               </span>
             </div>
             {i.anserStatus === 'Y' && (
-              <>
-                <br />
-                <div className='faq-a'>
-                  <span className='faq-icon-a'>A</span>
-                  <span
-                    className='faq-a-text'
-                    dangerouslySetInnerHTML={{
-                      __html: textLineBreaks(i.anserContent)
-                    }}
-                  ></span>
-                </div>
-              </>
+              <div className='faq-a' style={{ marginTop: '7px' }}>
+                <span className='faq-icon-a'>A</span>
+                <span
+                  className='faq-a-text'
+                  dangerouslySetInnerHTML={{
+                    __html: textLineBreaks(i.anserContent)
+                  }}
+                ></span>
+              </div>
             )}
           </>
         )
@@ -78,16 +88,15 @@ export default function UserInquiryContainer() {
   };
 
   const handlerInquiryModal = qnaSno => {
-    // if (!isInquiryModalOpen) {
-    //   dispatch(ADMIN_DETAIL.request(qnaSno));
-    // }
+    if (!isInquiryModalOpen && qnaSno) {
+      console.log(isInquiryModalOpen);
+      dispatch(ADMIN_DETAIL.request(qnaSno));
+    } else {
+      dispatch(ADMIN_DETAIL_INITAL());
+    }
     setIsInquiryModalOpen(!isInquiryModalOpen);
   };
 
-  useEffect(() => {
-    dispatch(USER_LIST.request({ category: '', searchType: '', word: '' }));
-  }, []);
-
   return (
     <div className='faq'>
       <div className='my-faq'>
@@ -108,6 +117,7 @@ export default function UserInquiryContainer() {
       <InquiryWrite
         isInquiryModalOpen={isInquiryModalOpen}
         handlerInquiryModal={handlerInquiryModal}
+        detail={detail}
       />
     </div>
   );

src/modules/cstmrService/inquiry/reducers/index.ts

@@ -23,7 +23,7 @@ export const qnaReducer = createReducer<IQnaState, Actions.QnaAction>(
   // 관리자 상세 초기화
   .handleAction(Actions.ADMIN_DETAIL_INITAL, (state, action) =>
     produce(state, draft => {
-      draft.adminDetail = state.adminDetail;
+      draft.adminDetail = initalState.adminDetail;
     })
   )
   // 사용자 목록