alarm

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

@@ -83,7 +83,7 @@ export const AlarmItem = ({
         onClick={ () => callAppAlarmMark() }
       >
         <div className="notice-content">
-          <div className="notice-title">{ appNotificationTitle }</div>
+          <div className={ `notice-title ${!!appNotificationAllowed? '': 'unread'}` }>{ appNotificationTitle }</div>
           <div className="notice-meta">
             <strong>{ appNotificationCategoryName }</strong>
             <span>{ moment(notificationReceivedDate).format('YYYY.MM.DD HH:mm:ss') }</span>

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

@@ -21,26 +21,33 @@ export const AlarmRoutes = ({
   const initOptions = () => {
     if(options?.linkUrl){
       let linkUrl = options.linkUrl;
-      if(linkUrl.indexOf('notice') > -1){
+      if(linkUrl.indexOf('/support/notice/list/') > -1){
         let linkArr: Array<any> = linkUrl.split('/');
-        setSeq(linkArr[linkArr.length - 1]);
-        setNoticeDetailOn(true);
-        setQnaDetailOn(false);
-        setSettlementDetailOn(false);
+        if(linkArr.length === 4){
+          setSeq(linkArr[linkArr.length - 1]);
+          setNoticeDetailOn(true);
+          setQnaDetailOn(false);
+          setSettlementDetailOn(false);
+        }
+        
       }
-      else if(linkUrl.indexOf('qna') > -1){
+      else if(linkUrl.indexOf('/support/qna/list/') > -1){
         let linkArr: Array<any> = linkUrl.split('/');
-        setSeq(linkArr[linkArr.length - 1]);
-        setNoticeDetailOn(false);
-        setQnaDetailOn(true);
-        setSettlementDetailOn(false);
+        if(linkArr.length === 4){
+          setSeq(linkArr[linkArr.length - 1]);
+          setNoticeDetailOn(false);
+          setQnaDetailOn(true);
+          setSettlementDetailOn(false);
+        }
       }
-      else if(linkUrl.indexOf('settlement') > -1){
+      else if(linkUrl.indexOf('/settlement/list/') > -1){
         let linkArr: Array<any> = linkUrl.split('/');
-        setSettlementId(linkArr[linkArr.length - 1]);
-        setNoticeDetailOn(false);
-        setQnaDetailOn(false);
-        setSettlementDetailOn(true);
+        if(linkArr.length === 3){
+          setSettlementId(linkArr[linkArr.length - 1]);
+          setNoticeDetailOn(false);
+          setQnaDetailOn(false);
+          setSettlementDetailOn(true);
+        }
       }
       else{
         if(linkUrl.indexOf('http') > -1){

src/shared/ui/assets/css/style.css

@@ -598,23 +598,23 @@ main.pb-0 .tab-pane {
     height: 22px;
 }
 
-.sales-detail {
+.dales-detail {
     margin-top: 1rem;
     margin-left: 4px;
     margin-right: 4px;
 }
 
-.sales-detail li {
+.dales-detail li {
     display: inline-block;
     font-size: var(--fs-15);
     margin-right: 30px;
 }
 
-.sales-detail li:last-child {
+.dales-detail li:last-child {
     margin-right: 0;
 }
 
-.sales-detail li strong {
+.dales-detail li strong {
     font-weight: var(--fw-600);
 }
 
@@ -1313,6 +1313,7 @@ input[type="radio"] {
 }
 
 .notice-title {
+    position: relative;
     font-size: var(--fs-17);
     font-weight: 400;
     color: var(--color-111111);
@@ -1323,6 +1324,19 @@ input[type="radio"] {
     overflow: hidden;
 }
 
+.notice-title.unread::after {
+    content: '';
+    position: relative;
+    bottom: 2px;
+    left: 5px;
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    background-color: var(--color-EB5757);
+    border-radius: 50%;
+    margin-left: 4px;
+}
+
 .notice-meta {
     font-size: var(--fs-14);
     color: #999;
@@ -2081,6 +2095,7 @@ input[type="radio"] {
 /* 필터 및 정렬 */
 .excrow {
     max-width: 67%;
+    margin-right: -26px;
 }
 
 .filter-section {
@@ -2089,13 +2104,12 @@ input[type="radio"] {
     align-items: center;
     padding: 15px 10px;
     margin-bottom: 10px;
-    gap: 10px;
 }
 
 .sort-options {
     display: flex;
     align-items: center;
-    gap: 4px;
+    gap: 10px;
 }
 
 .sort-btn {
@@ -4542,6 +4556,17 @@ ul.txn-amount-detail li span:last-child {
     color: var(--color-2D3436);
 }
 
+.pdw-16 {
+    padding: 0 16px;
+}
+
+.pdw-16 .option-list {padding-top: 16px;}
+
+.pdw-16 .full-menu-header {
+    margin-left: -16px;
+    margin-right: -16px;
+}
+
 .ing-list.pdtop {
     padding-top: 26px;
     gap: 10px;