..

.env.development

@@ -1,6 +1,6 @@
 VITE_APP_ENV=development 
-# VITE_APP_AUTH_PROXY_HOST='http://3.35.79.250:8090'
-# VITE_APP_API_PROXY_HOST='http://3.35.79.250:8080'
+#VITE_APP_AUTH_PROXY_HOST='http://3.35.79.250:8090'
+#VITE_APP_API_PROXY_HOST='http://3.35.79.250:8080'
 VITE_APP_AUTH_PROXY_HOST='https://auth.nicepay.co.kr'
 VITE_APP_API_PROXY_HOST='https://rest.nicepay.co.kr'
 GENERATE_SOURCEMAP=false

src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx

@@ -69,13 +69,13 @@ export const AccountHolderSearchList = ({
 	return (
 		<>
 				<section className="transaction-list">
-						{getListDateGroup()}
+					{ getListDateGroup() }
 				</section>
 				<div className="apply-row">
-						<button
-								className="btn-50 btn-blue flex-1"
-								onClick={() => onClickToNavigate()}
-						>{t('additionalService.accountHolderSearch.searchRequest')}</button>
+					<button
+						className="btn-50 btn-blue flex-1"
+						onClick={ () => onClickToNavigate() }
+					>{ t('additionalService.accountHolderSearch.searchRequest') }</button>
 				</div>
 		</>
 	);

src/entities/alarm/ui/alarm-item.tsx

@@ -3,11 +3,12 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import moment from 'moment';
 import { useAppAlarmMarkMutation } from '../api/use-app-alarm-mark-mutation';
-import { AppAlarmMarkParams, AppAlarmMarkResponse } from '../model/types';
+import { AlarmLinkOptions, AppAlarmMarkParams, AppAlarmMarkResponse } from '../model/types';
 import { useStore } from '@/shared/model/store';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
+
 export interface AlarmItemProps {
   appNotificationSequence?: number;
   appNotificationCategory?: string;
@@ -16,6 +17,8 @@ export interface AlarmItemProps {
   appNotificationContent?: string;
   appNotificationLink?: string;
   appNotificationCategories: Array<any>;
+  setAlarmRoutesOn: (alarmRoutesOn: boolean) => void;
+  setAlarmOptions: (alarmOptions: AlarmLinkOptions) => void; 
 };
 
 export const AlarmItem = ({
@@ -25,9 +28,10 @@ export const AlarmItem = ({
   appNotificationTitle,
   appNotificationContent,
   appNotificationLink,
-  appNotificationCategories
+  appNotificationCategories,
+  setAlarmRoutesOn,
+  setAlarmOptions
 }: AlarmItemProps) => {
-  const { navigate } = useNavigate();
   const { t } = useTranslation();
 
   let userInfo = useStore.getState().UserStore.userInfo;
@@ -42,40 +46,11 @@ export const AlarmItem = ({
     return myCategory[0].desc1;
   };
   const onClickToNavigate = () => {
-    let path = PATHS.support.notice.list + appNotificationSequence;
-    let pathState = {};
-
-    console.log('appNotificationSequence : [' + appNotificationSequence + ']');
-    console.log('appNotificationCategory : [' + appNotificationCategory + ']');
-    console.log('notificationReceivedDate : [' + notificationReceivedDate + ']');
-    console.log('appNotificationTitle : [' + appNotificationTitle + ']');
-    console.log('appNotificationContent : [' + appNotificationContent + ']');
-    console.log('appNotificationLink : [' + appNotificationLink + ']');
     
     if(appNotificationLink){
-      path = appNotificationLink;
-      /*
-      if(appNotificationCategory === '10'){
-        
-      }
-      else if(appNotificationCategory === '20'){
-
-      }
-      else if(appNotificationCategory === '30'){
-
-      }
-      else if(appNotificationCategory === '40'){
-
-      }
-      else if(appNotificationCategory === '60'){
-        
-      }
-      */
+      setAlarmRoutesOn(true);
+      setAlarmOptions({ linkUrl: appNotificationLink });
     }
-    
-    navigate(path, {
-      state: pathState
-    });
   };
 
   const callAppAlarmMark = () => {
@@ -97,23 +72,25 @@ export const AlarmItem = ({
   }, [appNotificationCategory]);
 
   return (
-    <div 
-      className="notice-item" 
-      onClick={ () => callAppAlarmMark() }
-    >
-      <div className="notice-content">
-        <div className="notice-title">{ appNotificationTitle }</div>
-        <div className="notice-meta">
-          <strong>{ appNotificationCategoryName }</strong>
-          <span>{ moment(notificationReceivedDate).format('YYYY.MM.DD HH:mm:ss') }</span>
+    <>
+      <div 
+        className="notice-item" 
+        onClick={ () => callAppAlarmMark() }
+      >
+        <div className="notice-content">
+          <div className="notice-title">{ appNotificationTitle }</div>
+          <div className="notice-meta">
+            <strong>{ appNotificationCategoryName }</strong>
+            <span>{ moment(notificationReceivedDate).format('YYYY.MM.DD HH:mm:ss') }</span>
+          </div>
+        </div>
+        <div className="notice-arrow">
+          <img
+            src={ IMAGE_ROOT + '/Forward.svg' }
+            alt={t('alarm.goTo', { category: appNotificationCategoryName })}
+          />
         </div>
       </div>
-      <div className="notice-arrow">
-        <img
-          src={ IMAGE_ROOT + '/Forward.svg' }
-          alt={t('alarm.goTo', { category: appNotificationCategoryName })}
-        />
-      </div>
-    </div>
+    </>
   );
 };

src/entities/alarm/ui/alarm-list.tsx

@@ -1,6 +1,6 @@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { AlarmItem  } from './alarm-item';
-import { AlarmListContent, AppAlarmListParams, AppAlarmListResponse, MERCHANT_ADMIN_APP } from '../model/types';
+import { AlarmLinkOptions, AlarmListContent, AppAlarmListParams, AppAlarmListResponse, MERCHANT_ADMIN_APP } from '../model/types';
 import { useEffect, useState } from 'react';
 import { useAppAlarmListMutation } from '../api/use-app-alarm-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
@@ -9,6 +9,7 @@ import { useNavigate } from '@/shared/lib/hooks';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useStore } from '@/shared/model/store';
 import { DefaultRequestPagination } from '@/entities/common/model/types';
+import { AlarmRoutes } from './alarm-routes';
 
 export interface AlarmListProps {
   appNotificationCategory: string;
@@ -27,7 +28,9 @@ export const AlarmList = ({
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [appCl, setAppCl] = useState<MERCHANT_ADMIN_APP>(MERCHANT_ADMIN_APP.MERCHANT_ADMIN_APP)
   const [resultList, setResultList] = useState<Array<AlarmListContent>>([]);
-  
+  const [alarmRoutesOn, setAlarmRoutesOn] = useState<boolean>(false);
+  const [alarmOptions, setAlarmOptions] = useState<AlarmLinkOptions>();
+
   const { mutateAsync: appAlarmList } = useAppAlarmListMutation();
 
   const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
@@ -107,6 +110,8 @@ export const AlarmList = ({
           appNotificationContent={ resultList[i]?.appNotificationContent }
           appNotificationLink={ resultList[i]?.appNotificationLink }
           appNotificationCategories={ appNotificationCategories }
+          setAlarmRoutesOn={ setAlarmRoutesOn }
+          setAlarmOptions={ setAlarmOptions }
         ></AlarmItem>
       );
     }
@@ -116,6 +121,12 @@ export const AlarmList = ({
   useEffect(() => {
     callList();
   }, [appNotificationCategory]);
+
+  useEffect(() => {
+    if(!!alarmRoutesOn){
+      console.log(alarmOptions)
+    }
+  }, [alarmRoutesOn, alarmOptions]);
   
   return (
     <>
@@ -124,6 +135,11 @@ export const AlarmList = ({
       </div>
       <div ref={ setTarget }></div>
       <div className="notice-alert">{t('alarm.retentionNotice')}</div>
+      { alarmRoutesOn &&
+        <AlarmRoutes
+          options={ alarmOptions }
+        ></AlarmRoutes>
+      }
     </>
   );
 };

src/entities/alarm/ui/alarm-routes.tsx

@@ -0,0 +1,86 @@
+import { AlarmLinkOptions } from '@/entities/alarm/model/types';
+import { NoticeDetail } from '@/entities/support/ui/detail/notice-detail';
+import { useEffect, useState } from 'react';
+import { QnaDetail } from '@/entities/support/ui/detail/qna-detail';
+import { SettlementDetail } from '@/entities/settlement/ui/detail/settlement-detail';
+import { SettlementPeriodType } from '@/entities/settlement/model/types';
+
+export interface AlarmRoutesProps {
+  options?: AlarmLinkOptions;
+};
+
+export const AlarmRoutes = ({
+  options
+}: AlarmRoutesProps) => {
+  const [noticeDetailOn, setNoticeDetailOn] = useState<boolean>(false);
+  const [qnaDetailOn, setQnaDetailOn] = useState<boolean>(false);
+  const [settlementDetailOn, setSettlementDetailOn] = useState<boolean>(false);
+  const [seq, setSeq] = useState<number | string>();
+  const [settlementId, setSettlementId] = useState<string>();
+  
+  const initOptions = () => {
+    if(options?.linkUrl){
+      let linkUrl = options.linkUrl;
+      if(linkUrl.indexOf('notice') > -1){
+        let linkArr: Array<any> = linkUrl.split('/');
+        setSeq(linkArr[linkArr.length - 1]);
+        setNoticeDetailOn(true);
+        setQnaDetailOn(false);
+        setSettlementDetailOn(false);
+      }
+      else if(linkUrl.indexOf('qna') > -1){
+        let linkArr: Array<any> = linkUrl.split('/');
+        setSeq(linkArr[linkArr.length - 1]);
+        setNoticeDetailOn(false);
+        setQnaDetailOn(true);
+        setSettlementDetailOn(false);
+      }
+      else if(linkUrl.indexOf('settlement') > -1){
+        let linkArr: Array<any> = linkUrl.split('/');
+        setSettlementId(linkArr[linkArr.length - 1]);
+        setNoticeDetailOn(false);
+        setQnaDetailOn(false);
+        setSettlementDetailOn(true);
+      }
+      else{
+        if(linkUrl.indexOf('http') > -1){
+          window.open(linkUrl);
+        }
+      }
+    }
+  }
+  
+  
+  useEffect(() => {
+    if(options){
+      initOptions();
+    }
+  }, [options]);
+
+  return (
+    <>
+      { !!noticeDetailOn &&
+        <NoticeDetail
+          detailOn={ noticeDetailOn }
+          setDetailOn={ setNoticeDetailOn }
+          seq={ seq }
+        ></NoticeDetail>
+      }
+      { !!qnaDetailOn &&
+        <QnaDetail
+          detailOn={ qnaDetailOn }
+          setDetailOn={ setQnaDetailOn }
+          seq={ seq }
+        ></QnaDetail>
+      }
+      { !!settlementDetailOn &&
+        <SettlementDetail
+          detailOn={ settlementDetailOn }
+          setDetailOn={ setSettlementDetailOn }
+          periodType={ SettlementPeriodType.SETTLEMENT_DATE }
+          settlementId={ settlementId }
+        ></SettlementDetail>
+      }
+    </>
+  );
+};

src/entities/home/ui/home-notice-list.tsx

@@ -12,7 +12,7 @@ export const HomeNoticeList = () => {
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
   const [detailOn, setDetailOn] = useState<boolean>(false);
-  const [detailSeq, setDetailSeq] = useState<number>(0);
+  const [detailSeq, setDetailSeq] = useState<number | string>();
 
   const { mutateAsync: noticeList } = useNoticeListMutation();
 

src/entities/settlement/ui/detail/settlement-detail.tsx

@@ -21,6 +21,7 @@ import moment from 'moment';
 import { useTranslation } from 'react-i18next';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { snackBar } from '@/shared/lib';
 
 export interface SettlementDetailProps {
   detailOn: boolean;
@@ -60,10 +61,16 @@ export const SettlementDetail = ({
       };
 
       settlementsHistoryDetail(params).then((rs: SettlementsHistoryDetailResponse) => {
-        setAmountInfo(rs.amountInfo);
-        setSettlementInfo(rs.settlementInfo);
-        setSettlementAmount(rs.settlementAmount);
-        setSettlementDate(rs.settlementDate);
+        if(rs.amountInfo){
+          setAmountInfo(rs.amountInfo);
+          setSettlementInfo(rs.settlementInfo);
+          setSettlementAmount(rs.settlementAmount);
+          setSettlementDate(rs.settlementDate);
+        }
+        else{
+          snackBar('데이터가 존재하지 않습니다.');
+          onClickToClose();
+        }
       });
     }
   };

src/entities/support/api/use-qna-detail-mutation.ts

@@ -0,0 +1,39 @@
+import axios from 'axios';
+import { API_URL_SUPPORT } from '@/shared/api/api-url-support';
+import { resultify } from '@/shared/lib/resultify';
+import { NiceAxiosError } from '@/shared/@types/error';
+import { 
+  QnaDetailParams,
+  QnaDetailResponse
+} from '../model/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+import { getHeaderUserAgent } from '@/shared/constants/url';
+
+export const qnaDetail = (params: QnaDetailParams) => {
+  let headerOptions = {
+    menuId: 62,
+    apiType: 'SELECT'
+  };
+  let options = {
+    headers: {
+      'X-User-Agent': getHeaderUserAgent(headerOptions)
+    }
+  };
+  return resultify(
+    axios.post<QnaDetailResponse>(API_URL_SUPPORT.qnaDetail(), params, options),
+  );
+};
+
+export const useQnaDetailMutation = (options?: UseMutationOptions<QnaDetailResponse, NiceAxiosError, QnaDetailParams>) => {
+  const mutation = useMutation<QnaDetailResponse, NiceAxiosError, QnaDetailParams>({
+    ...options,
+    mutationFn: (params: QnaDetailParams) => qnaDetail(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/support/model/types.ts

@@ -29,6 +29,10 @@ export interface QnaListParams extends SupportParams {
   statusCode?: string;
   page?: DefaultRequestPagination;
 };
+export interface QnaDetailParams {
+  seq: string | number;
+};
+export interface QnaDetailResponse extends QnaItem {};
 export interface QnaItem {
   answer?: string;
   answerDate?: string;
@@ -47,9 +51,8 @@ export interface QnaListResponse extends DefaulResponsePagination {
   content: Array<QnaItem>
 };
 export interface DetailData {
-  qnaItem?: QnaItem;
   faqItem?: FaqItem;
-  seq?: number;
+  seq?: string | number;
   detailOn: boolean;
 };
 export interface QnaItemProps {
@@ -103,7 +106,7 @@ export enum InformCl {
   OTHERS = 'OTHERS'
 };
 export interface NoticeDetailParams {
-  seq: number;
+  seq: number | string;
 };
 export interface NoticeDetailResponse extends NoticeItem {
   

src/entities/support/ui/detail/notice-detail.tsx

@@ -11,27 +11,26 @@ import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 export interface NoticeDetaillProps {
   detailOn: boolean;
   setDetailOn: (detailOn: boolean) => void;
-  seq: number;
+  seq?: number | string;
 };
 export const NoticeDetail = ({
   detailOn,
   setDetailOn,
   seq
 }: NoticeDetaillProps) => {
-  const location = useLocation();
   const { t } = useTranslation();
-
   const [result, setResult] = useState<NoticeItem>({});
-  
   const { mutateAsync: noticeDetail } = useNoticeDetailMutation();
 
   const callDetail = () => {
-    let detailParams: NoticeDetailParams = {
-      seq: seq,
-    };
-    noticeDetail(detailParams).then((rs: NoticeDetailResponse) => {
-      setResult(rs);
-    });
+    if(!!seq){
+      let detailParams: NoticeDetailParams = {
+        seq: seq,
+      };
+      noticeDetail(detailParams).then((rs: NoticeDetailResponse) => {
+        setResult(rs);
+      });
+    }
   };
 
   const onClickToClose = () => {

src/entities/support/ui/detail/qna-detail.tsx

@@ -2,53 +2,45 @@ import moment from 'moment';
 import { motion } from 'framer-motion';
 import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { QnaItem } from '../../model/types';
+import { QnaDetailParams, QnaDetailResponse, QnaItem } from '../../model/types';
 import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
 import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+import { useQnaDetailMutation } from '../../api/use-qna-detail-mutation';
 
 export interface qnaDetaillProps {
   detailOn: boolean;
   setDetailOn: (detailOn: boolean) => void;
-  qnaItem: QnaItem;
+  seq?: string | number;
 };
 export const QnaDetail = ({
   detailOn,
   setDetailOn,
-  qnaItem
+  seq
 }: qnaDetaillProps) => {
   const { t } = useTranslation();
-  
-  const [answer, setAnswer] = useState<string>();
-  const [answerDate, setAnswerDate] = useState<string>();
-  const [contents, setContents] = useState<string>();
-  const [corpName, setCorpName] = useState<string | null>();
-  const [cursorId, setCursorId] = useState<number>();
-  const [requestDate, setRequestDate] = useState<string>();
-  const [requestName, setRequestName] = useState<string>();
-  const [requestType, setRequestType] = useState<string>();
-  const [sendEmail, setSendEmail] = useState<string | null>();
-  const [seq, setSeq] = useState<string>();
-  const [statusCode, setStatusCode] = useState<string>();
-  const [title, setTitle] = useState<string>();
+  const [result, setResult] = useState<QnaItem>({});
+  const { mutateAsync: qnaDetail } = useQnaDetailMutation();
+
+  const callDetail = () => {
+    if(!!seq){
+      let detailParams: QnaDetailParams = {
+        seq: seq,
+      };
+      qnaDetail(detailParams).then((rs: QnaDetailResponse) => {
+        setResult(rs);
+      });
+    }
+  };
   
   const onClickToClose = () => {
     setDetailOn(false);
   };
 
   useEffect(() => {
-    setAnswer(qnaItem?.answer);
-    setAnswerDate(qnaItem?.answerDate);
-    setContents(qnaItem?.contents);
-    setCorpName(qnaItem?.corpName);
-    setCursorId(qnaItem?.cursorId);
-    setRequestDate(qnaItem?.requestDate);
-    setRequestName(qnaItem?.requestName);
-    setRequestType(qnaItem?.requestType);
-    setSendEmail(qnaItem?.sendEmail);
-    setSeq(qnaItem?.seq);
-    setStatusCode(qnaItem?.statusCode);
-    setTitle(qnaItem?.title);
-  }, [qnaItem]);
+    if(!!seq){
+      callDetail();
+    }
+  }, [seq]);
 
   return (
     <>
@@ -60,7 +52,7 @@ export const QnaDetail = ({
         transition={ DetailMotionDuration }
         style={ DetailMotionStyle }
       >
-        { statusCode &&
+        { result?.statusCode &&
           <div className="full-menu-container pdw-16">
             <div className="full-menu-header">
               <div className="full-menu-title center">{ t('support.qna.title') }</div>
@@ -76,29 +68,29 @@ export const QnaDetail = ({
                 <div className="inq-detail__head">
                   <div className="inq-detail__row">
                     <span className="inq-badge">{t('support.qna.detailLabels.title')}</span>
-                    <span className="inq-head-text bold">{ title }</span>
+                    <span className="inq-head-text bold">{ result?.title }</span>
                   </div>
                   <div className="inq-detail__row">
                     <span className="inq-badge">{t('support.qna.detailLabels.type')}</span>
-                    <span className="inq-head-text">{ t(`support.qna.categories.${requestType}`) }</span>
+                    <span className="inq-head-text">{ result?.requestType? t(`support.qna.categories.${result?.requestType}`): '' }</span>
                   </div>
                   <div className="inq-detail__row">
                     <span className="inq-badge">{t('support.qna.detailLabels.registrationDate')}</span>
-                    <span className="inq-head-text">{ !!requestDate? moment(requestDate).format('YYYY.MM.DD'): '' }</span>
+                    <span className="inq-head-text">{ result?.requestDate? moment(result?.requestDate).format('YYYY.MM.DD'): '' }</span>
                   </div>
                   <div className="inq-detail__row">
                     <span className="inq-badge">{t('support.qna.detailLabels.answerDate')}</span>
-                    <span className="inq-head-text">{ !!answerDate? moment(answerDate).format('YYYY.MM.DD'): '' }</span>
+                    <span className="inq-head-text">{ result?.answerDate? moment(result?.answerDate).format('YYYY.MM.DD'): '' }</span>
                   </div>
                 </div>
                 <div className="inq-detail__divider"></div>
                 <div className="inq-detail__section">
                   <div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryAnswer')}</div>
-                  <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: answer || '' }}></div>
+                  <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.answer || '' }}></div>
                 </div>
                 <div className="inq-detail__section">
                   <div className="inq-detail__section-title">{t('support.qna.detailLabels.inquiryContents')}</div>
-                  <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: contents || '' }}></div>
+                  <div className="inq-detail__body" dangerouslySetInnerHTML={{ __html: result?.contents || '' }}></div>
                 </div>
               </div>
             </div>

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

@@ -10,7 +10,7 @@ export const SupportQnaItem = ({
   const onClickToDetail = () => {
     if(setDetailData){
       setDetailData({
-        qnaItem: qnaItem,
+        seq: qnaItem.seq,
         detailOn: true
       });
     }

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

@@ -15,9 +15,11 @@ import {
 } from '@/widgets/sub-layout/use-sub-layout';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { NoticeDetail } from '@/entities/support/ui/detail/notice-detail';
+import { useParams } from 'react-router';
 
 export const NoticeListPage = () => {
   const { navigate } = useNavigate();
+  const { seq } = useParams();
   const { t } = useTranslation();
 
   const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
@@ -26,7 +28,7 @@ export const NoticeListPage = () => {
   const [searchKeyword, setSearchKeyword] = useState<string>('');
   const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
   const [detailOn, setDetailOn] = useState<boolean>(false);
-  const [detailSeq, setDetailSeq] = useState<number>(0);
+  const [detailSeq, setDetailSeq] = useState<number | string>();
 
   useSetHeaderTitle(t('support.notice.title'));
   useSetHeaderType(HeaderType.LeftArrow);
@@ -133,6 +135,12 @@ export const NoticeListPage = () => {
   useEffect(() => {
     callList();
   }, [informCl]);
+  useEffect(() => {
+    if(seq){
+      setDetailOn(true);
+      setDetailSeq(parseInt(seq));
+    }
+  }, [seq]);
 
   return (
     <>

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

@@ -16,9 +16,11 @@ import {
   useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { QnaDetail } from '@/entities/support/ui/detail/qna-detail';
+import { useParams } from 'react-router';
 
 export const QnaListPage = () => {
   const { navigate } = useNavigate();
+  const { seq } = useParams();
   const { t } = useTranslation();
   
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
@@ -33,7 +35,7 @@ export const QnaListPage = () => {
   const [statusCode, setStatusCode] = useState<string>(''); // 02, 03
   const [resultList, setResultList] = useState<Array<QnaItem>>([]);
   const [detailOn, setDetailOn] = useState<boolean>(false);
-  const [detailQnaItem, setDetailQnaItem] = useState<QnaItem>({});
+  const [detailSeq, setDetailSeq] = useState<string | number>();
  
   useSetHeaderTitle(t('support.qna.title'));
   useSetHeaderType(HeaderType.LeftArrow);
@@ -108,8 +110,8 @@ export const QnaListPage = () => {
 
   const setDetailData = (detailData: DetailData) => {
     setDetailOn(detailData.detailOn);
-		if(detailData?.qnaItem){
-			setDetailQnaItem(detailData?.qnaItem);
+		if(detailData?.seq){
+			setDetailSeq(detailData?.seq);
 		}
   };
   
@@ -138,6 +140,12 @@ export const QnaListPage = () => {
     callList();
   }, [mid, statusCode]);
 
+  useEffect(() => {
+    if(!!seq){
+
+    }
+  });
+
   return (
     <>
       <main>
@@ -191,7 +199,7 @@ export const QnaListPage = () => {
       <QnaDetail
         detailOn={ detailOn }
         setDetailOn={ setDetailOn }
-        qnaItem={ detailQnaItem }
+        seq={ detailSeq }
       ></QnaDetail>
     </>
   );

src/pages/support/support-pages.tsx

@@ -12,12 +12,14 @@ export const SupportPages = () => {
       <SentryRoutes>
         <Route path={ROUTE_NAMES.support.notice.base}>
           <Route path={ROUTE_NAMES.support.notice.list} element={<NoticeListPage />} />
+          <Route path={ROUTE_NAMES.support.notice.list + '/:seq'} element={<NoticeListPage />} />
         </Route>
         <Route path={ROUTE_NAMES.support.faq.base}>
           <Route path={ROUTE_NAMES.support.faq.list} element={<FaqListPage />} />
         </Route>
         <Route path={ROUTE_NAMES.support.qna.base}>
           <Route path={ROUTE_NAMES.support.qna.list} element={<QnaListPage />} />
+          <Route path={ROUTE_NAMES.support.qna.list + '/:seq'} element={<QnaListPage />} />
           <Route path={ROUTE_NAMES.support.qna.register} element={<QnaRegisterPage />} />
         </Route>
       </SentryRoutes>

src/shared/api/api-url-support.ts

@@ -19,6 +19,10 @@ export const API_URL_SUPPORT = {
     // POST: 1:1 문의 목록 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/counsel/list`;
   },
+  qnaDetail: () => {
+    // POST: 1:1 문의 상세 조회
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/counsel/detail`;
+  },
   qnaSave: () => {  
     // POST: 1:1 문의 등록
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/counsel/save`;

src/widgets/sub-layout/index.tsx

@@ -34,6 +34,7 @@ import { useUserFindAuthMethodMutation } from '@/entities/user/api/use-user-find
 import { useCodesSelectMutation } from '@/entities/common/api/use-codes-select-mutation';
 import { MenuItems } from '@/entities/common/model/constant';
 import { AlarmLinkOptions } from '@/entities/alarm/model/types';
+import { AlarmRoutes } from '@/entities/alarm/ui/alarm-routes';
 
 export interface ContextType {
   setOnBack: (onBack: () => void) => void;
@@ -73,6 +74,8 @@ export const SubLayout = () => {
   const [headerNavigationKey, setHeaderNavigationKey] = useState<number>(1);
   const [loginSuccess, setLoginSuccess] = useState<boolean>(false);
   const [mid, setMid] = useState<string>();
+  const [alarmRoutesOn, setAlarmRoutesOn] = useState<boolean>(false);
+  const [alarmOptions, setAlarmOptions] = useState<AlarmLinkOptions>();
 
   const { isNativeEnvironment } = useAppBridge();
   const { mutateAsync: homeGroups } = useHomeGroupsMutation();
@@ -328,6 +331,10 @@ export const SubLayout = () => {
   };
   const alarmLink = (options: AlarmLinkOptions) => {
     console.log(options);
+    if(options?.linkUrl){
+      setAlarmRoutesOn(true);
+      setAlarmOptions(options);
+    }
   };
 
   window.saveToken = saveToken;
@@ -380,6 +387,11 @@ export const SubLayout = () => {
             setFavoriteEdit={ setFavoriteEdit }
           ></FooterNavigation>
         }
+        { alarmRoutesOn &&
+          <AlarmRoutes
+            options={ alarmOptions }
+          ></AlarmRoutes>
+        }
         
       </Fragment>
     </div>