관리자 문의내역 메인 화면 완료 #20

front-end/timepay-manager/package.json

@@ -16,6 +16,7 @@
     "antd": "^5.2.4",
     "axios": "^1.3.4",
     "craco": "^0.0.3",
+    "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",

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

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

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

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export function InquiryDetail() {
+  return <div>TransferPage</div>;
+}

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

@@ -0,0 +1,152 @@
+import React from 'react';
+import axios from 'axios';
+import moment from 'moment';
+
+import { useState, useEffect} from 'react';
+import { Select, Table, Card } from 'antd';
+import { ColumnsType } from 'antd/es/table';
+import { useNavigate } from 'react-router-dom';
+
+import { PATH } from '../../constants/path';
+import './inquiry_main.css'
+
+
+type QNA = {
+    "inquiryid": string,
+    "title": string,
+    "content": string,
+    "inquiryDate": string,
+    "replyStatus": string,
+    "userId": string
+}
+
+export function InquiryPage() {
+    const navigate = useNavigate();
+
+    const [qnaResponse, setQnaResponse] = useState<QNA[]>([]);
+    const [filteredQnaResponse, setFilteredQnaResponse] = useState<QNA[]>([]);
+
+    const [filteringStatus, setFilteringStatus] = useState("")
+    const [filteringTitle, setFilteringTitle] = useState("");
+
+    const columns: ColumnsType<QNA> = [
+        {
+            title: '답변 상태',
+            dataIndex: 'replyStatus',
+            key: 'replyStatus',
+            align: 'center',
+            render: (text:string) =>{
+                let content = '';
+                let color = '';
+
+                if (text === 'PENDING') {
+                    content = '답변대기';
+                    color = '#F1AF23';
+                }
+                else {
+                    content = '답변완료';
+                    color = '#C7C7C7';
+                }
+                return <span style={{color}}>{content}</span>
+            }
+        },
+        {
+            title: '제목',
+            dataIndex: 'title',
+            key: 'title',
+            align: 'center',
+        },
+        {
+            title: '작성자',
+            dataIndex: 'userId',
+            key: 'userId',
+            align: 'center',
+        },
+        {
+            title: '작성일시',
+            dataIndex: 'inquiryDate',
+            key: 'inquiryDate',
+            align: 'center',
+            render: (date:string) => moment(date).format('YYYY-MM-DD HH:mm:ss')
+        },
+        {
+            title: '문의번호',
+            dataIndex: 'inquiryid',
+            key: 'inquiryid',
+            align: 'center',
+        },
+    ];
+
+    const status = [
+        {id:'', value: '전체'},
+        {id:'PENDING', value: '답변 대기',}, 
+        {id:'ANSWERED', value: '답변 완료',}, 
+    ];
+
+    const getQnas = () => {
+    axios.get<QNA[]>(PATH.SERVER + `api/v1/inquiries`, {
+    }).
+    then(response => {
+        //console.log(response.data);
+        setQnaResponse(response.data);
+        setFilteredQnaResponse(response.data);
+    }).
+    catch(function(error){
+        console.log(error)})
+    };
+
+
+    useEffect(() => {
+        getQnas();
+    }, []);
+
+    const filterQnas = (searchText: string, searchStatus: string) => {
+
+        let status = '';
+        if (searchStatus === '답변 대기') status = 'PENDING';
+        else if (searchStatus === '답변 완료') status = 'ANSWERED';
+
+        let filteredData = qnaResponse;
+
+        // 상태가 입력된 경우
+        if (status !== '') {
+            filteredData = filteredData.filter(qna => qna.replyStatus === status);
+        }
+
+        // 검색어가 입력된 경우
+        if (searchText !== '') {
+            filteredData = filteredData.filter(qna =>
+                qna.title.toLowerCase().includes(searchText.toLowerCase()) ||
+                qna.content.toLowerCase().includes(searchText.toLowerCase())
+
+            );
+        }
+
+
+        setFilteredQnaResponse(filteredData);
+
+    }
+
+    const handleClick = (record : QNA) =>{
+        navigate(`/inquiries/${record.inquiryid}`);
+    }
+
+    return (
+        <div className='background'>
+            <Card size = 'small' className='searchBox'>
+                <Select options = {status} size = 'small'  dropdownStyle={{textAlign : 'center'}} onChange={(e)=>setFilteringStatus(e)} defaultValue="상태" className="status"></Select>
+                <span>검색어</span>
+                <input onChange={(e) => setFilteringTitle(e.target.value)} className="inputbox" placeholder='제목, 내용, 혹은 작성자 입력'></input>
+                <button onClick={() => filterQnas(filteringTitle, filteringStatus)} className="searchButton">검색</button>
+            </Card>
+
+            <Table columns={columns} dataSource={filteredQnaResponse} rowKey="inquiryid" size="middle" className='table' rowClassName={() => 'pointer'}
+                onRow={(record, rowIndex) => {
+                    return {
+                      onDoubleClick: () => {handleClick(record)},
+                    };
+                  }}
+            />
+        </div>
+    );
+}

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

@@ -0,0 +1 @@
+export { InquiryPage } from './InquiryPage';

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

@@ -0,0 +1,76 @@
+.background {
+    background-color: #FFFFFF;
+
+    position:relative;
+
+    width:100%;
+    height:100%;
+
+}
+
+.searchBox {
+    position:absolute;
+    top: 5%;
+    left:  5%;
+
+    width: 90%;
+
+}
+
+.searchBox .status{
+    position: relative;
+    left: 0%;
+    margin-right:3%;
+
+    width: 15%;
+    text-align: center;
+}
+
+.searchBox .inputbox{
+    margin-left:2%;
+
+    width: 55%;
+    height: 24px;
+}
+
+.searchBox .searchButton{
+    position: relative;
+    margin-left:3%;
+
+    width: 15%;
+    height: 24px;
+
+    border: 0px;
+    border-radius: 5px;
+    background-color: #444444;
+
+    font-size: 12px;
+    font-weight: 600;
+    color: #FFFFFF;
+
+    cursor:pointer;
+}
+
+.table {
+    position: absolute;
+    top:15%;
+    left:5%;
+
+    width:90%;
+    height: 80%;
+
+    /* font */
+    font-family: 'Lato';
+    font-style: normal;
+    font-weight: 700;
+    font-size: 10px;
+    line-height: 100%;
+    text-align: center;
+    text-transform: uppercase;
+    color: #000000;
+
+}
+
+.pointer {
+    cursor: pointer;
+}

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

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