상세 수정

2025-11-03 20:57:55 +09:00
parent 344e5c324a
commit d2b477e7bd
38 changed files with 1569 additions and 256 deletions
--- a/src/pages/support/faq/list-page.tsx
+++ b/src/pages/support/faq/list-page.tsx
@@ -5,7 +5,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
 import { useFaqListMutation } from '@/entities/support/api/use-faq-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { FaqItem, FaqListParams, FaqListResponse, SearchCl } from '@/entities/support/model/types';
+import { DetailData, FaqItem, FaqListParams, FaqListResponse, SearchCl } from '@/entities/support/model/types';
 import { SupportFaqItem } from '@/entities/support/ui/faq-item';
 import { 
 	useSetHeaderTitle,
@@ -14,6 +14,7 @@ import {
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { FaqDetail } from '@/entities/support/ui/detail/faq-detail';

 export const FaqListPage = () => {
  const { navigate } = useNavigate();
@@ -24,6 +25,8 @@ export const FaqListPage = () => {
  const [searchValue, setSearchValue] = useState<string>('');
  const [selectedCategory, setSelectedCategory] = useState<string>('');
  const [resultList, setResultList] = useState<Array<FaqItem>>([]);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailFaqItem, setDetailFaqItem] = useState<FaqItem>({});

  useSetHeaderTitle(t('support.faq.title'));
  useSetHeaderType(HeaderType.LeftArrow);
@@ -103,19 +106,26 @@ export const FaqListPage = () => {
    callList();
  };

+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    if(detailData?.faqItem){
+      setDetailFaqItem(detailData?.faqItem);
+    }
+  };
+
  const getFaqList = () => {
    let rs = [];
    for(let i=0;i<resultList.length;i++){
-      rs.push(
-        <SupportFaqItem
-          key={ `key-support-faq-item-${i}` }
-          cursorId={ resultList[i]?.cursorId }
-          seq={ resultList[i]?.seq }
-          category={ resultList[i]?.category }
-          title={ resultList[i]?.title }
-          contents={ resultList[i]?.contents }
-        ></SupportFaqItem>
-      )
+      let faqItem = resultList[i];
+      if(faqItem){
+        rs.push(
+          <SupportFaqItem
+            key={ `key-support-faq-item-${i}` }
+            faqItem={ faqItem }
+            setDetailData={ setDetailData }
+          ></SupportFaqItem>
+        );
+      }
    }
    return rs;
  };
@@ -175,15 +185,20 @@ export const FaqListPage = () => {
              </div>
              <div ref={ setTarget }></div>
            </div>
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToNavigation() }
-              >{t('support.faq.inquiryButton')}</button>
-            </div>
          </div>
        </div>
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToNavigation() }
+          >{t('support.faq.inquiryButton')}</button>
+        </div>
      </main>
+      <FaqDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        faqItem={ detailFaqItem }
+      ></FaqDetail>
    </>
  );
 };
--- a/src/pages/support/notice/list-page.tsx
+++ b/src/pages/support/notice/list-page.tsx
@@ -4,7 +4,7 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
-import { InformCl, NoticeItem, NoticeListParams, NoticeListResponse, SearchCl } from '@/entities/support/model/types';
+import { DetailData, InformCl, NoticeItem, NoticeListParams, NoticeListResponse, SearchCl } from '@/entities/support/model/types';
 import { SupportNoticeItem } from '@/entities/support/ui/notice-item';
 import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
 import {
@@ -14,6 +14,7 @@ import {
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import useIntersectionObserver from '@/widgets/intersection-observer';
+import { NoticeDetail } from '@/entities/support/ui/detail/notice-detail';

 export const NoticeListPage = () => {
  const { navigate } = useNavigate();
@@ -24,6 +25,8 @@ export const NoticeListPage = () => {
  const [informCl, setInformCl] = useState<InformCl | string>('');
  const [searchKeyword, setSearchKeyword] = useState<string>('');
  const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailSeq, setDetailSeq] = useState<number>(0);

  useSetHeaderTitle(t('support.notice.title'));
  useSetHeaderType(HeaderType.LeftArrow);
@@ -102,19 +105,27 @@ export const NoticeListPage = () => {
    }
    callList();
  };
+  
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    if(detailData?.seq){
+      setDetailSeq(detailData?.seq);
+    }
+  };

  const getNoticeList = () => {
    let rs = [];
    for(let i=0;i<resultList.length;i++){
-      rs.push(
-        <SupportNoticeItem
-          key={ `key-support-notice-item-${i}` }
-          seq={ resultList[i]?.seq }
-          title={ resultList[i]?.title }
-          informCl={ resultList[i]?.informCl }
-          regDt={ resultList[i]?.regDt }
-        ></SupportNoticeItem>
-      )
+      let noticeItem = resultList[i];
+      if(noticeItem){
+        rs.push(
+          <SupportNoticeItem
+            key={ `key-support-notice-item-${i}` }
+            noticeItem={ noticeItem }
+            setDetailData={ setDetailData }
+          ></SupportNoticeItem>
+        );
+      }
    }
    return rs;
  };
@@ -173,6 +184,11 @@ export const NoticeListPage = () => {
            </div>
          </div>
        </div>
+        <NoticeDetail
+          detailOn={ detailOn }
+          setDetailOn={ setDetailOn }
+          seq={ detailSeq }
+        ></NoticeDetail>
      </main>
    </>
  );
--- a/src/pages/support/qna/list-page.tsx
+++ b/src/pages/support/qna/list-page.tsx
@@ -6,7 +6,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { DefaultRequestPagination, 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, QnaListParams, QnaListResponse } from '@/entities/support/model/types';
+import { DetailData, QnaItem, QnaListParams, QnaListResponse } from '@/entities/support/model/types';
 import { SupportQnaItem } from '@/entities/support/ui/qna-item';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { 
@@ -15,6 +15,7 @@ import {
 	useSetFooterMode,
  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
+import { QnaDetail } from '@/entities/support/ui/detail/qna-detail';

 export const QnaListPage = () => {
  const { navigate } = useNavigate();
@@ -31,6 +32,8 @@ export const QnaListPage = () => {
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
  const [statusCode, setStatusCode] = useState<string>(''); // 02, 03
  const [resultList, setResultList] = useState<Array<QnaItem>>([]);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailQnaItem, setDetailQnaItem] = useState<QnaItem>({});
 
  useSetHeaderTitle(t('support.qna.title'));
  useSetHeaderType(HeaderType.LeftArrow);
@@ -102,27 +105,27 @@ export const QnaListPage = () => {
      );
    });
  };
+
+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+		if(detailData?.qnaItem){
+			setDetailQnaItem(detailData?.qnaItem);
+		}
+  };
  
  const getQnaList = () => {
    let rs = [];
    for(let i=0;i<resultList.length;i++){
-      rs.push(
-        <SupportQnaItem
-          key={ `key-support-faq-item-${i}` }
-          answer={ resultList[i]?.answer }
-          answerDate={ resultList[i]?.answerDate }
-          contents={ resultList[i]?.contents }
-          corpName={ resultList[i]?.corpName }
-          cursorId={ resultList[i]?.cursorId }
-          requestDate={ resultList[i]?.requestDate }
-          requestName={ resultList[i]?.requestName } 
-          requestType={ resultList[i]?.requestType }
-          sendEmail={ resultList[i]?.sendEmail }
-          seq={ resultList[i]?.seq }
-          statusCode={ resultList[i]?.statusCode }
-          title={ resultList[i]?.title }
-        ></SupportQnaItem>
-      );
+      let qnaItem = resultList[i];
+      if(qnaItem){
+        rs.push(
+          <SupportQnaItem
+            key={ `key-support-faq-item-${i}` }
+            qnaItem={ qnaItem }
+            setDetailData={ setDetailData }
+          ></SupportQnaItem>
+        );  
+      }
    }
    return rs;
  };
@@ -176,16 +179,20 @@ export const QnaListPage = () => {
              </div>
              <div ref={ setTarget }></div>
            </div>
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToNavigation() }
-              >{t('support.qna.inquiryButton')}</button>
-            </div>
          </div>
        </div>
+        <div className="apply-row">
+          <button 
+            className="btn-50 btn-blue flex-1"
+            onClick={ () => onClickToNavigation() }
+          >{t('support.qna.inquiryButton')}</button>
+        </div>
      </main>
-      
+      <QnaDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        qnaItem={ detailQnaItem }
+      ></QnaDetail>
    </>
  );
 };