support

2025-10-17 13:20:58 +09:00
parent c2079b1204
commit e00bb69832
8 changed files with 81 additions and 43 deletions
--- a/src/entities/support/model/constants.ts
+++ b/src/entities/support/model/constants.ts
--- a/src/entities/support/model/types.ts
+++ b/src/entities/support/model/types.ts
@@ -26,13 +26,13 @@ export interface FaqItemProps extends FaqItem {
  
 }
 export interface QnaListParams extends SupportParams {
+  statusCode?: string;
  page?: DefaultRequestPagination;
 };
 export interface QnaItem {
-  sortNo?: string;
+  cursorId?: number;
  seq?: string;
  statusCode?: string;
-  statusName?: string;
  requestDate?: string;
  requestName?: string;
  title?: string;
--- a/src/entities/support/ui/qna-item.tsx
+++ b/src/entities/support/ui/qna-item.tsx
@@ -2,12 +2,12 @@ import moment from 'moment';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { QnaItemProps } from '../model/types';
+import { useTranslation } from 'react-i18next';

 export const SupportQnaItem = ({
-  sortNo,
+  cursorId,
  seq,
  statusCode,
-  statusName,
  requestDate,
  requestName,
  title,
@@ -15,12 +15,11 @@ export const SupportQnaItem = ({
  answer
 }: QnaItemProps) => {
  const { navigate } = useNavigate();
-
+  const { t } = useTranslation();
  const onClickToDetail = () => {
    navigate(PATHS.support.qna.detail, {
      state: {
        statusCode,
-        statusName,
        requestDate,
        requestName,
        title,
@@ -34,13 +33,13 @@ export const SupportQnaItem = ({
    <>
      <div 
        className="inq-item"
-       onClick={ () => onClickToDetail() }
+        onClick={ () => onClickToDetail() }
      >
        <div className="inq-line">
-          <div className="inq-title-text">{ contents }</div>
+          <div className="inq-title-text">{ title }</div>
          <div className="inq-meta">
            등록일<span>{ moment(requestDate).format('YYYY.MM.DD') }</span>
-            <span className="sai">ㅣ</span>상태 <span>[{ statusName }]</span>
+            <span className="sai">ㅣ</span>상태 <span>[{t(`support.qna.statusCode.${statusCode}`)}]</span>
          </div>
          <span className={`dot ${(statusCode === '03')? 'blue': 'gray'}`}></span>
        </div>
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -112,6 +112,7 @@
            "inquiryButton": "Submit Inquiry",
            "categories": {
                "all": "All",
+                "choose": "Choose",
                "01": "Billing & Tax Inquiry",
                "02": "Transaction & Cancellation Inquiry",
                "03": "Contract & Service Request Inquiry",
@@ -119,6 +120,13 @@
                "05": "Others",
                "06": "Service Usage Inquiry",
                "09": "Credit Limit & Insurance Inquiry"
+            },
+            "statusCode": {
+                "all": "All",
+                "00": "Submit",
+                "01": "Save",
+                "02": "Submit Inquiry",
+                "03": "Completed"
            }
        }
    }
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -112,6 +112,7 @@
            "inquiryButton": "1:1 문의하기",
            "categories": {
                "all": "모두",
+                "choose": "선택",
                "01": "정산/세금계산서/부가세 문의",
                "02": "거래내역/거래취소 문의",
                "03": "계약/서비스 추가신청 문의",
@@ -119,6 +120,13 @@
                "05": "기타",
                "06": "서비스이용문의",
                "09": "한도/보증보험 문의"
+            },
+            "statusCode": {
+                "all": "모두",
+                "00": "작성",
+                "01": "저장",
+                "02": "문의",
+                "03": "답변완료"
            }
        }
    }
--- a/src/pages/support/qna/detail-page.tsx
+++ b/src/pages/support/qna/detail-page.tsx
@@ -16,7 +16,6 @@ export const QnaDetailPage = () => {
  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>('');
@@ -27,12 +26,11 @@ export const QnaDetailPage = () => {
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
-    navigate(PATHS.support.faq.list);
+    navigate(PATHS.support.qna.list);
  });

  useEffect(() => {
    setStatusCode(location?.state.statusCode);
-    setStatusName(location?.state.statusName);
    setRequestDate(location?.state.requestDate);
    setRequestName(location?.state.requestName);
    setTitle(location?.state.title);
@@ -49,7 +47,7 @@ export const QnaDetailPage = () => {
              <div className="inq-detail__head">
                <div className="inq-detail__row">
                  <span className="inq-badge">제목</span>
-                  <span className="inq-head-text bold">보증보험 가입 완료에 따른 한도증액 요청...</span>
+                  <span className="inq-head-text bold">{ requestName }</span>
                </div>
                <div className="inq-detail__row">
                  <span className="inq-badge">유형</span>
@@ -67,10 +65,12 @@ export const QnaDetailPage = () => {
              <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 className="inq-detail__body" dangerouslySetInnerHTML={{ __html: answer || '' }}></div>
              </div>
              <div className="inq-detail__section">
                <div className="inq-detail__section-title">문의 내용</div>  
+                <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
+                {/*
                <div className="inq-detail__box">
                  <div className="inq-detail__kv">
                    <div className="k">제목</div>
@@ -81,6 +81,7 @@ export const QnaDetailPage = () => {
                    <div className="v" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
                  </div>
                </div>
+                */}
              </div>
            </div>
          </div>
--- a/src/pages/support/qna/list-page.tsx
+++ b/src/pages/support/qna/list-page.tsx
@@ -5,7 +5,7 @@ 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/constant';
-import { QnaItem } from '@/entities/support/model/types';
+import { QnaItem, QnaListParams, QnaListResponse } from '@/entities/support/model/types';
 import { SupportQnaItem } from '@/entities/support/ui/qna-item';
 import { 
 	useSetHeaderTitle,
@@ -17,11 +17,13 @@ import { useStore } from '@/shared/model/store';

 export const QnaListPage = () => {
  const { navigate } = useNavigate();
+  const midOptions = useStore.getState().UserStore.selectOptionsMids;
  const userMid = useStore.getState().UserStore.mid;
  const { t } = useTranslation();

+  const [mid, setMid] = useState<string>(userMid);
  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
-  const [selectedCategory, setSelectedCategory] = useState<string>('');
+  const [statusCode, setStatusCode] = useState<string>(''); // 02, 03
  const [resultList, setResultList] = useState<Array<QnaItem>>([]);

  useSetHeaderTitle(t('support.qna.title'));
@@ -33,13 +35,13 @@ export const QnaListPage = () => {

  const { mutateAsync: qnaList } = useQnaListMutation();
  const callList = () => {
-    let listParams = {
-      mid: userMid,
+    let listParams: QnaListParams = {
+      mid: mid,
+      statusCode: statusCode,
      ...{page: pageParam}
    };
    
-    qnaList(listParams).then((rs) => {
-      console.log(rs)
+    qnaList(listParams).then((rs: QnaListResponse) => {
      setResultList(rs.content);
    });
  };
@@ -50,10 +52,9 @@ export const QnaListPage = () => {
      rs.push(
        <SupportQnaItem
          key={ `key-support-faq-item-${i}` }
-          sortNo={ resultList[i]?.sortNo }
+          cursorId={ resultList[i]?.cursorId }
          seq={ resultList[i]?.seq }
          statusCode={ resultList[i]?.statusCode }
-          statusName={ resultList[i]?.statusName }
          requestDate={ resultList[i]?.requestDate }
          requestName={ resultList[i]?.requestName }
          title={ resultList[i]?.title }
@@ -71,7 +72,7 @@ export const QnaListPage = () => {

  useEffect(() => {
    callList();
-  }, [selectedCategory]);
+  }, [statusCode]);

  return (
    <>
@@ -82,25 +83,32 @@ export const QnaListPage = () => {
              <div className="inq-merchant">
                <div className="inq-title">{t('support.qna.merchant')}</div>
                <div className="notice-filter">
-                  <select className="flex-1">
-                    <option>{t('support.qna.all')}</option>
+                  <select 
+                    className="flex-1"
+                    value={ mid } 
+                    onChange={ (e: ChangeEvent<HTMLSelectElement>) => setMid(e.target.value) }
+                  >
+                  { 
+                    midOptions.map((value, index) => (
+                      <option
+                        key={ value.value }
+                        value={ value.value }
+                        selected={ (userMid === value.value)? true: false }
+                      >{ value.name }</option>
+                    )) 
+                  }  
                  </select>
                </div>
              </div>
              <div className="notice-filter">
                <select
                  className="flex-1"
-                  value={selectedCategory}
-                  onChange={(e: ChangeEvent<HTMLSelectElement>) => setSelectedCategory(e.target.value)}
+                  value={ statusCode }
+                  onChange={(e: ChangeEvent<HTMLSelectElement>) => setStatusCode(e.target.value)}
                >
-                  <option value="">{t('support.qna.categories.all')}</option>
-                  <option value="01">{t('support.qna.categories.01')}</option>
-                  <option value="02">{t('support.qna.categories.02')}</option>
-                  <option value="03">{t('support.qna.categories.03')}</option>
-                  <option value="04">{t('support.qna.categories.04')}</option>
-                  <option value="05">{t('support.qna.categories.05')}</option>
-                  <option value="06">{t('support.qna.categories.06')}</option>
-                  <option value="09">{t('support.qna.categories.09')}</option>
+                  <option value="">{t('support.qna.statusCode.all')}</option>
+                  <option value="02">{t('support.qna.statusCode.02')}</option>
+                  <option value="03">{t('support.qna.statusCode.03')}</option>
                </select>
              </div>
              <div className="inq-list">
--- a/src/pages/support/qna/register-page.tsx
+++ b/src/pages/support/qna/register-page.tsx
@@ -10,6 +10,8 @@ import {
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useStore } from '@/shared/model/store';
+import { useTranslation } from 'react-i18next';
+import { PatternFormat } from 'react-number-format';

 export enum QnaRegisterPropsName {
  Mid = 'Mid',
@@ -23,6 +25,7 @@ export enum QnaRegisterPropsName {

 export const QnaRegisterPage = () => {
  const { navigate } = useNavigate();
+  const { t } = useTranslation();
  const userMid = useStore.getState().UserStore.mid;

  const [mid, setMid] = useState<string>(userMid);
@@ -33,7 +36,7 @@ export const QnaRegisterPage = () => {
  const [title, setTitle] = useState<string>('');
  const [contents, setContents] = useState<string>('');

-  useSetHeaderTitle('1:1 문의');
+  useSetHeaderTitle(t('support.qna.title'));
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);
  useSetOnBack(() => {
@@ -73,15 +76,14 @@ export const QnaRegisterPage = () => {
  const callRegister = () => {
    let params = {
      mid: mid,
+      title: title,
      counselType: counselType,
      requestName: requestName,
      requestTel: requestTel,
      requestEmail: requestEmail,
-      title: title,
      contents: contents,
    };
    qnaSave(params).then((rs) => {  
-      console.log(rs);
      alert('성공');
      navigate(PATHS.support.qna.list);
    });
@@ -105,6 +107,7 @@ export const QnaRegisterPage = () => {
                  <input 
                    type="text" 
                    value={ title }
+                    required= { true }
                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.Title) }
                  />
                </div>
@@ -116,9 +119,17 @@ export const QnaRegisterPage = () => {
                <div className="inq-control">
                  <select
                    value={ counselType }
+                    required= { true }
                    onChange={ (e: ChangeEvent<HTMLSelectElement>) => setInputValue(e, QnaRegisterPropsName.CounselType) } 
                  >
-                    <option>선택</option>
+                    <option value="">{t('support.qna.categories.choose')}</option>
+                    <option value="01">{t('support.qna.categories.01')}</option>
+                    <option value="02">{t('support.qna.categories.02')}</option>
+                    <option value="03">{t('support.qna.categories.03')}</option>
+                    <option value="04">{t('support.qna.categories.04')}</option>
+                    <option value="05">{t('support.qna.categories.05')}</option>
+                    <option value="06">{t('support.qna.categories.06')}</option>
+                    <option value="09">{t('support.qna.categories.09')}</option>
                  </select>
                </div>
              </div>
@@ -130,6 +141,7 @@ export const QnaRegisterPage = () => {
                  <input 
                    type="text" 
                    value={ requestName }
+                    required= { true }
                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestName) }
                  />
                </div>
@@ -139,12 +151,13 @@ export const QnaRegisterPage = () => {
                  휴대폰번호 <span className="red">*</span>
                </div>
                <div className="inq-control">
-                  <input 
-                    type="text"
+                  <PatternFormat
                    placeholder="‘-’를 빼고 입력하세요"
                    value={ requestTel }
+                    valueIsNumericString
+                    format="###########"
                    onChange={ (e: ChangeEvent<HTMLInputElement>) => setInputValue(e, QnaRegisterPropsName.RequestTel) }
-                  />
+                  ></PatternFormat>
                </div>
              </div>
              <div className="inq-field">
@@ -165,6 +178,7 @@ export const QnaRegisterPage = () => {
                <div className="inq-text-body">
                  <textarea
                    value={ contents }
+                    required= { true }
                    onChange={ (e: ChangeEvent<HTMLTextAreaElement>) => setInputValue(e, QnaRegisterPropsName.Contents) }
                  ></textarea>
                </div>