support

2025-10-17 13:20:58 +09:00
parent c2079b1204
commit e00bb69832
8 changed files with 81 additions and 43 deletions
--- 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__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>