문의하기, 이체하기 api 연결 완료, 관리자 문의 세부 내역 UI 완료 #15 #16 #20

front-end/timepay-manager/src/constants/path.ts

@@ -4,5 +4,6 @@ export const PATH = {
   USER_PAGE: '/users',
   TRANSFER_PAGE: '/transfers',
   INQUIRY_PAGE: '/inquiries',
+  INQUIRY_DETAIL: '/inquiries/:no',
   SERVER: 'http://localhost:8080/',
 };

front-end/timepay-manager/src/pages/InquiryPage/InquiryDetail.tsx

@@ -1,5 +1,116 @@
 import React from 'react';
+import axios from 'axios';
+import moment from 'moment';
+
+import { useState, useEffect } from 'react';
+import { useLocation  } from 'react-router-dom';
+import { Select, Card } from 'antd';
+
+import { PATH } from '../../constants/path';
+import './inquiry_detail.css';
+
+type COMMENT = {
+  "commentid": string,
+  "commentSeq": string,
+  "content": string,
+  "commentDate": string,
+  "replyStatus": string,
+  "userId": string,
+  "inquiryId": string
+}
+
 
 export function InquiryDetail() {
-  return <div>TransferPage</div>;
+  const location = useLocation();
+  const inquiryId = location.state.inquiryId;
+  const inquiryTitle = location.state.inquiryTitle;
+  const inquiryContent = location.state.inquiryContent;
+  const inquiryDate = location.state.inquiryDate;
+  var replyStatus = location.state.replyStatus === 'PENDING' ? '답변 대기' : '답변 완료';
+
+  const [comments, setComments] = useState<COMMENT[]>([]);
+  const [inquiryStatus, setInquiryStatus] = useState(replyStatus);
+  const [commentDetail, setCommentDetail] = useState('');
+
+  const accessToken = 1;
+  const adminId = '10';
+
+  const status = [
+    {id:'PENDING', value: '답변 대기',}, 
+    {id:'ANSWERED', value: '답변 완료',}, 
+  ];
+
+  const getComment = () => {
+    axios.get<COMMENT[]>(PATH.SERVER + `api/v1/inquiries/${inquiryId}/comments`, {
+        headers:{
+        'Authorization':`Bearer ${accessToken}`
+        }
+    }).then(response => {
+        //console.log(response.data);
+        setComments(response.data);
+    }).catch(function(error){
+        console.log(error)
+    })
+  };
+
+  const postComment = () =>{
+    let statchanger;
+    if (inquiryStatus === '답변 대기') statchanger = 'PENDING';
+    else statchanger = 'ANSWERED';
+
+    console.log(inquiryStatus + "reply stat " + replyStatus);
+    if (inquiryStatus !== replyStatus) {
+      axios.put(PATH.SERVER + `api/v1/inquiries/${inquiryId}/status`,{
+        'status': statchanger
+      },{headers:{
+        'Authorization': `Bearer ${accessToken}`        
+      }}
+      ).then(response => {
+        console.log(response);
+      }).catch(function(error){
+        console.log(error);
+      });
+      replyStatus = inquiryStatus;
+    }
+
+    if (commentDetail !== ''){
+      axios.post(PATH.SERVER + `api/v1/inquiries/${inquiryId}/comments`,{
+        'content': commentDetail,
+        'userId': adminId,
+        'inquiryId': inquiryId,
+        'commentDate': "2023-05-13T12:39:26.556Z"
+      },{
+
+      })
+    }
+  };
+
+  useEffect(() =>{
+    getComment();
+  },[]);
+
+  return (
+
+    <div className='background'>
+      <Card title={inquiryTitle} extra={inquiryDate} className='mainBox'>
+          <Card className='detail'>{inquiryContent}</Card>
+          {comments.map((comment) => (
+              <Card title={comment.userId == adminId ? <p className='fontBlack'>답변</p> : <p className='fontOrange'>문의</p>} 
+                    extra={moment(comment.commentDate).format('YYYY-MM-DD HH:mm')}  key={comment.commentid} className='comment'>
+                  <p>{"content : " + comment.content}</p>
+
+              </Card>
+          ))}
+      </Card>
+      <div className='registerBox'>
+        <textarea onChange={(e)=>{setCommentDetail(e.target.value)}} placeholder='답변 내용을 입력하세요'></textarea>
+        <Select options = {status} size = 'small'  dropdownStyle={{textAlign : 'center'}} onChange={(e)=>setInquiryStatus(e)} defaultValue={replyStatus} className="status"></Select>
+        <button onClick = {postComment}>답변 등록</button>
+      </div>
+    </div>
+
+
+
+
+  );
 }

front-end/timepay-manager/src/pages/InquiryPage/InquiryPage.tsx

@@ -29,6 +29,8 @@ export function InquiryPage() {
     const [filteringStatus, setFilteringStatus] = useState("")
     const [filteringTitle, setFilteringTitle] = useState("");
 
+    const accessToken = "1";
+
     const columns: ColumnsType<QNA> = [
         {
             title: '답변 상태',
@@ -84,7 +86,10 @@ export function InquiryPage() {
     ];
 
     const getQnas = () => {
-    axios.get<QNA[]>(PATH.SERVER + `api/v1/inquiries`, {
+    axios.get<QNA[]>(PATH.SERVER + `api/v1/inquiries`, {        
+        headers:{
+        'Authorization':`Bearer ${accessToken}`
+        }
     }).
     then(response => {
         //console.log(response.data);
@@ -128,7 +133,14 @@ export function InquiryPage() {
     }
 
     const handleClick = (record : QNA) =>{
-        navigate(`/inquiries/${record.inquiryid}`);
+        navigate(`/inquiries/${record.inquiryid}`, 
+        {state:{
+            inquiryId : record.inquiryid,
+            inquiryTitle: record.title,
+            inquiryContent : record.content,
+            inquiryDate: record.inquiryDate,
+            replyStatus: record.replyStatus,
+        }});
     }
 
     return (

front-end/timepay-manager/src/pages/InquiryPage/index.ts

@@ -1 +1,4 @@
-export { InquiryPage } from './InquiryPage';
+import { InquiryPage } from './InquiryPage';
+import { InquiryDetail } from './InquiryDetail';
+
+export { InquiryPage, InquiryDetail};

front-end/timepay-manager/src/pages/InquiryPage/inquiry_detail.css

@@ -0,0 +1,91 @@
+.background {
+    background-color: #FFFFFF;
+
+    position:relative;
+
+    width:100%;
+    height:100%;
+
+}
+
+.mainBox{
+    position:absolute;
+    top: 5%;
+    left: 5%;
+
+    width:90%;
+    height:70%;
+
+    overflow : auto;
+}
+.mainBox .detail{
+    margin-bottom: 3%;
+}
+.mainBox .comment{
+    margin-bottom: 3%;
+}
+
+.registerBox{
+    position:absolute;
+    top: 78%;
+    left: 5%;
+
+    width:90%;
+    height:17%;
+
+}
+.registerBox textarea{
+    width: 80%;
+    height: 100%;
+
+    border-radius: 10px;
+}
+.registerBox .status{
+    position:absolute;
+    top: 0%;
+    left: 83%;
+
+    width: 15%;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    text-transform: uppercase;
+    text-align: center;
+    color: #000000;
+}
+.registerBox button{
+    position: absolute;
+    top: 30%;
+    left: 83%;
+
+    width: 15%;
+    height: 70%;
+
+    border: 0px;
+    border-radius: 20px;
+    background-color: #F1AF23;
+
+    font-family: 'Lato';
+    font-style: normal;
+    font-size: 16px;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #FFFFFF;
+}
+
+.fontOrange {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #F1AF23;
+}
+
+.fontBlack {
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    text-transform: uppercase;
+    color: #000000;
+}

front-end/timepay-manager/src/pages/PageRoutes.tsx

@@ -5,7 +5,7 @@ import { UserPage } from './UserPage';
 import { HomePage } from './HomePage';
 import { PATH } from '../constants/path';
 import { TransferPage } from './TransferPage';
-import { InquiryPage } from './InquiryPage';
+import { InquiryPage, InquiryDetail } from './InquiryPage';
 
 export function PageRoutes() {
   return (
@@ -15,6 +15,7 @@ export function PageRoutes() {
         <Route path={PATH.USER_PAGE} element={<UserPage />} />
         <Route path={PATH.TRANSFER_PAGE} element={<TransferPage />} />
         <Route path={PATH.INQUIRY_PAGE} element={<InquiryPage />} />
+        <Route path={PATH.INQUIRY_DETAIL} element={<InquiryDetail />} />
       </Route>
     </Routes>
   );