qna

2025-09-08 17:14:21 +09:00
parent c92fdc2bd1
commit 065a4fd348
15 changed files with 319 additions and 91 deletions
--- a/src/pages/support/faq/list-page.tsx
+++ b/src/pages/support/faq/list-page.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
 import { useFaqListMutation } from '@/entities/support/api/use-faq-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
-import { FaqListItem } from '@/entities/support/model/types';
+import { FaqItem } from '@/entities/support/model/types';
 import { SupportFaqItem } from '@/entities/support/ui/faq-item';
 import { 
 	useSetHeaderTitle,
@@ -18,7 +18,7 @@ export const FaqListPage = () => {

  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
  const [searchValue, setSearchValue] = useState<string>('');
-  const [resultList, setResultList] = useState<Array<FaqListItem>>([]);
+  const [resultList, setResultList] = useState<Array<FaqItem>>([]);

  useSetHeaderTitle('자주 묻는 질문');
  useSetHeaderType(HeaderType.LeftArrow);
--- a/src/pages/support/qna/detail-page.tsx
+++ b/src/pages/support/qna/detail-page.tsx
@@ -1,18 +1,91 @@
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useLocation } from 'react-router';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
 import { 
  useSetHeaderTitle,
  useSetHeaderType,
-  useSetFooterMode
+  useSetFooterMode,
+  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';

 export const QnaDetailPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+
+  const [statusCode, setStatusCode] = useState<string>('');
+  const [statusName, setStatusName] = useState<string>('');
+  const [requestDate, setRequestDate] = useState<string>('');
+  const [requestName, setRequestName] = useState<string>('');
+  const [title, setTitle] = useState<string>('');
+  const [contents, setContents] = useState<string>('');
+  const [answer, setAnswer] = useState<string>('');
+
  useSetHeaderTitle('1:1 문의');
-  useSetHeaderType(HeaderType.RightClose);
+  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.support.faq.list);
+  });
+
+  useEffect(() => {
+    setStatusCode(location?.state.statusCode);
+    setStatusName(location?.state.statusName);
+    setRequestDate(location?.state.requestDate);
+    setRequestName(location?.state.requestName);
+    setTitle(location?.state.title);
+    setContents(location?.state.contents);
+    setAnswer(location?.state.answer);
+  }, []);

  return (
    <>
-
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane active">
+            <div className="inq-detail">
+              <div className="inq-detail__head">
+                <div className="inq-detail__row">
+                  <span className="inq-badge">제목</span>
+                  <span className="inq-head-text bold">보증보험 가입 완료에 따른 한도증액 요청...</span>
+                </div>
+                <div className="inq-detail__row">
+                  <span className="inq-badge">유형</span>
+                  <span className="inq-head-text">한도/보증보험 문의</span>
+                </div>
+                <div className="inq-detail__row">
+                  <span className="inq-badge">등록일</span>
+                  <span className="inq-head-text">{ moment(requestDate).format('YYYY.MM.DD') }</span>
+                </div>
+                <div className="inq-detail__row">
+                  <span className="inq-badge">답변일</span>
+                  <span className="inq-head-text">2025.07.31</span>
+                </div>
+              </div>
+              <div className="inq-detail__divider"></div>
+              <div className="inq-detail__section">
+                <div className="inq-detail__section-title">문의 답변</div>
+                <div className="inq-detail__body">{ answer }</div>
+              </div>
+              <div className="inq-detail__section">
+                <div className="inq-detail__section-title">문의 내용</div>
+                <div className="inq-detail__box">
+                  <div className="inq-detail__kv">
+                    <div className="k">제목</div>
+                    <div className="v">{ title }</div>
+                  </div>
+                  <div className="inq-detail__kv">
+                    <div className="k">내용</div>
+                    <div className="v">{ contents }</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
    </>
  );
 };
--- a/src/pages/support/qna/list-page.tsx
+++ b/src/pages/support/qna/list-page.tsx
@@ -1,18 +1,106 @@
+import { ChangeEvent, useEffect, useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
+import { useQnaListMutation } from '@/entities/support/api/use-qna-list-mutation';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
+import { QnaItem } from '@/entities/support/model/types';
+import { SupportQnaItem } from '@/entities/support/ui/qna-item';
+
 import { 
 	useSetHeaderTitle,
 	useSetHeaderType,
-	useSetFooterMode
+	useSetFooterMode,
+  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';

 export const QnaListPage = () => {
+  const { navigate } = useNavigate();
+
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [resultList, setResultList] = useState<Array<QnaItem>>([]);
+
  useSetHeaderTitle('1:1 문의');
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  const { mutateAsync: qnaList } = useQnaListMutation();
+  const callList = () => {
+    let listParams = {
+      ...{page: pageParam}
+    };
+    
+    qnaList(listParams).then((rs) => {
+      console.log(rs)
+      setResultList(rs.content);
+    });
+  };
+  
+  const getQnaList = () => {
+    let rs = [];
+    for(let i=0;i<resultList.length;i++){
+      rs.push(
+        <SupportQnaItem
+          key={ `key-support-faq-item-${i}` }
+          sortNo={ resultList[i]?.sortNo }
+          seq={ resultList[i]?.seq }
+          statusCode={ resultList[i]?.statusCode }
+          statusName={ resultList[i]?.statusName }
+          requestDate={ resultList[i]?.requestDate }
+          requestName={ resultList[i]?.requestName }
+          title={ resultList[i]?.title }
+          contents={ resultList[i]?.contents }
+          answer={ resultList[i]?.answer }
+        ></SupportQnaItem>
+      )
+    }
+    return rs;
+  };
+
+  const onClickToNavigation = () => {
+    navigate(PATHS.support.qna.register);
+  };
+
+  useEffect(() => {
+    callList();
+  }, []);

  return (
    <>
-
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="inq117">
+              <div className="inq-merchant">
+                <div className="inq-title">가맹점</div>
+                <div className="notice-filter">
+                  <select className="flex-1">
+                    <option>전체</option>
+                  </select>
+                </div>
+              </div>
+              <div className="notice-filter">
+                <select className="flex-1">
+                  <option>전체</option>
+                </select>
+              </div>
+              <div className="inq-list">
+              { getQnaList() }  
+              </div>
+            </div>
+            <div className="apply-row bottom-padding">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToNavigation }
+              >1:1 문의하기</button>
+            </div>
+          </div>
+        </div>
+      </main>
    </>
  );
 };