faq 추가

src/entities/support/model/types.ts

@@ -7,17 +7,22 @@ export interface FaqListParams {
   category: string;
   searchValue: string;
 };
-export interface FaqListItemProps {
+export interface FaqListItem {
-  sortNo: string;
+  sortNo?: string;
-  seq: string;
+  seq?: string;
-  category: string;
+  category?: string;
-  categoryName: string;
+  categoryName?: string;
-  title: string;
+  title?: string;
-  contents: string;
+  contents?: string;
 };
 export interface FaqListResponse extends DefaulResponsePagination {
-  content: Array<FaqListItemProps>;
+  content: Array<FaqListItem>;
+  hasNext: boolean;
+  nextCursor: string | null;
 };
+export interface FaqItemProps extends FaqListItem {
+  
+}
 export interface CounselListParams extends SupportParams {
   
 };

src/entities/support/ui/faq-item.tsx

@@ -0,0 +1,37 @@
+import { PATHS } from '@/shared/constants/paths';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { FaqItemProps } from '../model/types';
+
+export const SupportFaqItem = ({
+  sortNo,
+  seq,
+  category,
+  categoryName,
+  title,
+  contents,
+}: FaqItemProps) => {
+  const { navigate } = useNavigate();
+
+  const onClickToDetail = () => {
+    navigate(PATHS.support.faq.detail, {
+      state: {
+        title,
+        contents
+      }
+    });
+  };
+
+  return (
+    <>
+      <div 
+        className="faq-row"
+        onClick={ () => onClickToDetail() }
+      >
+        <div className="faq-txt">
+          <div className="faq-title">{ title }</div>
+          <div className="faq-tag">{ categoryName }</div>
+        </div>
+      </div>
+    </>
+  );
+}

src/pages/support/faq/detail-page.tsx

@@ -1,18 +1,46 @@
+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 FaqDetailPage = () => {
-  useSetHeaderTitle('자주 묻는 질문');
+  const { navigate } = useNavigate();
-  useSetHeaderType(HeaderType.RightClose);
+  const location = useLocation();
-  useSetFooterMode(false);
 
+  const [title, setTitle] = useState<string>('');
+  const [contents, setContents] = useState<string>('');
+
+  useSetHeaderTitle('자주 묻는 질문');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(false);
+  useSetOnBack(() => {
+    navigate(PATHS.support.faq.list);
+  });
+
+  useEffect(() => {
+    setTitle(location?.state.title);
+    setContents(location?.state.contents);
+  }, []);
   return (
     <>
-
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="faq-detail">
+              <div className="faq-detail__title">{ title }</div>
+              <div className="faq-detail__divider"></div>
+              <div className="faq-detail__body">{ contents }</div>
+            </div>
+          </div>
+        </div>
+      </main>
     </>
   );
 };

src/pages/support/faq/list-page.tsx

@@ -1,18 +1,115 @@
+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 { 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 { SupportFaqItem } from '@/entities/support/ui/faq-item';
 import { 
 	useSetHeaderTitle,
 	useSetHeaderType,
-	useSetFooterMode
+	useSetFooterMode,
+  useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 
 export const FaqListPage = () => {
+  const { navigate } = useNavigate();
+
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [searchValue, setSearchValue] = useState<string>('');
+  const [resultList, setResultList] = useState<Array<FaqListItem>>([]);
+
   useSetHeaderTitle('자주 묻는 질문');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
+
+  const { mutateAsync: faqList } = useFaqListMutation();
+  const callList = () => {
+    let listParams = {
+      category: 'st',
+      searchValue: searchValue,
+      ...{page: pageParam}
+    };
+    
+    faqList(listParams).then((rs) => {
+      console.log(rs)
+      setResultList(rs.content);
+    });
+  };
+
+  const onClickToAction = () => {
+    callList();
+  };
+
+  const getFaqList = () => {
+    let rs = [];
+    for(let i=0;i<resultList.length;i++){
+      rs.push(
+        <SupportFaqItem
+          key={ `key-support-faq-item-${i}` }
+          sortNo={ resultList[i]?.sortNo }
+          seq={ resultList[i]?.seq }
+          category={ resultList[i]?.category }
+          categoryName={ resultList[i]?.categoryName }
+          title={ resultList[i]?.title }
+          contents={ resultList[i]?.contents }
+        ></SupportFaqItem>
+      )
+    }
+    return rs;
+  };
+
+  const onClickToNavigation = () => {
+    navigate(PATHS.support.qna.list);
+  };
+
+  useEffect(() => {
+    callList();
+  }, []);
 
   return (
     <>
-
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="faq-section">
+              <div className="faq-search">
+                <span 
+                  className="ic16 search" 
+                  aria-hidden="true"
+                  onClick={ () => onClickToAction() }
+                ></span>
+                <input 
+                  type="text" 
+                  placeholder="검색어를 입력하세요"
+                  value={ searchValue }
+                  onChange={ (e: ChangeEvent<HTMLInputElement>) => setSearchValue(e.target.value) } 
+                />
+              </div>
+              <div className="faq-filter">
+                <span className="text">전체</span>
+                <span 
+                  className="ic20 arrow-down" 
+                  aria-hidden="true"
+                ></span>
+              </div>
+              <div className="faq-list">
+              { getFaqList() }
+              </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>
     </>
   );
 };

src/pages/support/notice/list-page.tsx

@@ -1,18 +1,85 @@
+import { PATHS } from '@/shared/constants/paths';
+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 NoticeListPage = () => {
+  const { navigate } = useNavigate();
+
   useSetHeaderTitle('공지사항');
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(true);
-
+  useSetOnBack(() => {
+    navigate(PATHS.home);
+  });
   return (
     <>
-
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="notice114">
+              <div className="notice-controls">
+                <div className="notice-search">
+                  <span className="ic16 search" aria-hidden="true"></span>
+                  <input type="text" placeholder="검색어를 입력하세요" />
+                </div>
+                <div className="notice-filter">
+                  <select className="flex-1">
+                    <option>전체</option>
+                  </select>
+                </div>
+              </div>
+              <div className="notice-list-114">
+                <div className="notice-row-114">
+                  <div className="notice-txt">
+                    <div className="notice-title-114">신한은행 시스템 작업 안내신한은행 시스템 작업 <span className="blue">안내신한은행 시스템 작업</span> 안내신한은행 시스템 작업 안내신한은행 시스템 작업 안내</div>
+                    <div className="notice-meta-114">
+                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="notice-row-114">
+                  <div className="notice-txt">
+                    <div className="notice-title-114">NICE페이먼츠 도메인 인증서 G2교체 작업 안내</div>
+                    <div className="notice-meta-114">
+                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="notice-row-114">
+                  <div className="notice-txt">
+                    <div className="notice-title-114">N자금이체 서비스 도메인 인증서 G2 교체 <span className="blue">작업 및 TLS 프로토콜</span> 개선 안내 ...</div>
+                    <div className="notice-meta-114">
+                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="notice-row-114">
+                  <div className="notice-txt">
+                    <div className="notice-title-114">N자금이체 서비스 <span className="blue">도메인 인증서 G2</span> 교체 작업 및 TLS 프로토콜 개선 안내 ...</div>
+                    <div className="notice-meta-114">
+                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
+                    </div>
+                  </div>
+                </div>
+                <div className="notice-row-114">
+                  <div className="notice-txt">
+                    <div className="notice-title-114">NICE페이먼츠 도메인 인증서 G2교체 작업 안내</div>
+                    <div className="notice-meta-114">
+                      <span className="blue">공지사항</span> ㅣ <span>2025.06.01 10:00:00</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
     </>
   );
 };

src/shared/constants/route-names.ts

@@ -118,7 +118,7 @@ export const ROUTE_NAMES = {
     faq: {
       base: '/faq/*',
       list: 'list',
-      detail: 'detail/:faqId',
+      detail: 'detail',
     },
     qna: {
       base: '/qna/*',