- 안드로이드 알림 설정 AppBridge 추가

- KeyIn Request 필드 수정

package.json

@@ -105,6 +105,7 @@
     "@tanstack/router-plugin": "^1.131.41",
     "@types/react": "^19.1.12",
     "@types/react-dom": "^19.1.9",
+    "@types/ua-parser-js": "^0.7.39",
     "@typescript-eslint/eslint-plugin": "^8.43.0",
     "@typescript-eslint/parser": "^8.43.0",
     "@vitejs/plugin-react": "^4.7.0",

src/entities/additional-service/model/ars/types.ts

@@ -23,7 +23,9 @@ export interface ExtensionArsResendParams {
   mid: string;
   tid: string;
 };
-export interface ExtensionArsResendResponse {};
+export interface ExtensionArsResendResponse {
+  status: boolean;
+};
 export interface ExtensionArsListParams {
   mid?: string;
   moid?: string;

src/entities/additional-service/model/key-in/constant.ts

@@ -1,11 +1,11 @@
-import { KeyInPaymentPaymentStatus } from "./types";
+import { KeyInPaymentTansactionType } from "./types";
 
 // contant로 옮기기
 export const keyInPaymentPaymentStatusBtnGroup = [
-  { name: '전체', value: KeyInPaymentPaymentStatus.ALL },
+  { name: '전체', value: KeyInPaymentTansactionType.ALL },
-  { name: '승인', value: KeyInPaymentPaymentStatus.APPROVAL },
+  { name: '승인', value: KeyInPaymentTansactionType.APPROVAL },
-  { name: '전취소', value: KeyInPaymentPaymentStatus.PRE_CANCEL },
+  { name: '전취소', value: KeyInPaymentTansactionType.FULL_CANCEL },
-  { name: '후취소', value: KeyInPaymentPaymentStatus.POST_CANCEL }
+  { name: '후취소', value: KeyInPaymentTansactionType.PARTIAL_CANCEL }
 ];
 
 export const getKeyInPaymentPaymentStatusName = (status?: string): string => {

src/entities/additional-service/model/key-in/types.ts

@@ -4,18 +4,30 @@ import { AdditionalServiceCategory, ExtensionRequestParams, FilterProps } from "
 // ========================================
 // 키인결제 관련 타입들
 // ========================================
-export enum KeyInPaymentPaymentStatus {
+export enum KeyInPaymentTansactionType {
   ALL = 'ALL',
   APPROVAL = 'APPROVAL',
-  PRE_CANCEL = 'PRE_CANCEL',
+  FULL_CANCEL = 'FULL_CANCEL',
-  POST_CANCEL = 'POST_CANCEL'
+  PARTIAL_CANCEL = 'PARTIAL_CANCEL'
+}
+
+export enum KeyInPaymentStatus {
+  ALL = 'ALL',
+  REGISTRED = 'REGISTRED',
+  WAITING = 'WAITING',
+  PROCESSING = 'PROCESSING',
+  COMPLETED = 'COMPLETED'
 }
 
 export interface KeyInPaymentListItem {
+  transactionDate?: string;
+  transactionTime?: string;
+  customerName?: string;
+  transactionCode?: string;
   tid?: string;
-  paymentDate?: string;
-  paymentStatus?: string;
   amount?: number;
+  statusLabel?: string;
+  transactionType?: string;
 }
 
 export interface KeyInPaymentListProps {
@@ -28,13 +40,13 @@ export interface KeyInPaymentFilterProps extends FilterProps {
   mid: string,
   startDate: string;
   endDate: string;
-  transactionStatus: KeyInPaymentPaymentStatus;
+  transactionStatus: KeyInPaymentTansactionType;
   minAmount?: number;
   maxAmount?: number;
   setMid: (mid: string) => void;
   setStartDate: (startDate: string) => void;
   setEndDate: (endDate: string) => void;
-  setTransactionStatus: (transactionStatus: KeyInPaymentPaymentStatus) => void;
+  setTransactionStatus: (transactionStatus: KeyInPaymentTansactionType) => void;
   setMinAmount: (minAmount?: number) => void;
   setMaxAmount: (maxAmount?: number) => void;
 }
@@ -42,19 +54,25 @@ export interface KeyInPaymentFilterProps extends FilterProps {
 // KEY-IN 결제 확장 서비스
 // ========================================
 export interface ExtensionKeyinListParams extends ExtensionRequestParams {
-  fromDate: string;
+  startDate: string;
-  toDate: string;
+  endDate: string;
-  paymentStatus: string;
+  transactionType: string;
+  status: string;
   minAmount?: number;
   maxAmount?: number;
   page?: DefaultRequestPagination;
 }
 
 export interface ExtensionKeyinListItemProps {
+  transactionDate: string;
+  transactionTime: string;
+  customerName: string;
+  transactionCode: string;
   tid: string;
-  paymentDate: string;
-  paymentStatus: string;
   amount: number;
+  statusLabel: string;
+  transactionType: string;
+  status: string;
 }
 
 export interface ExtensionKeyinListResponse extends DefaulResponsePagination {
@@ -74,15 +92,16 @@ export interface ExtensionKeyinDownloadExcelResponse {
 }
 
 export interface ExtensionKeyinApplyParams extends ExtensionRequestParams {
-  goodsName: string;
-  amount: number;
-  buyerName: string;
-  email: string;
-  phoneNumber: string;
   cardNo: string;
-  cardExpirationDate: string;
+  expYear: string;
-  instmntMonth: string;
+  expMon: string;
-  moid: string;
+  instmnt: string;
+  amount: number;
+  productName: string;
+  orderNumber: string;
+  customerName: string;
+  phoneNumber: string;
+  email: string;
 }
 
 export interface ExtensionKeyinApplyResponse {

src/entities/additional-service/ui/key-in-payment/filter/key-in-payment-filter.tsx

@@ -8,7 +8,7 @@ import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 import { useStore } from '@/shared/model/store';
-import { KeyInPaymentFilterProps, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types';
+import { KeyInPaymentFilterProps, KeyInPaymentTansactionType } from '@/entities/additional-service/model/key-in/types';
 import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
 
 export const KeyInPaymentFilter = ({
@@ -31,7 +31,7 @@ export const KeyInPaymentFilter = ({
 	const [filterMid, setFilterMid] = useState<string>(mid);
 	const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
 	const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
-	const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentPaymentStatus>(transactionStatus);
+	const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTansactionType>(transactionStatus);
 	const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
 	const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
 

src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx

@@ -18,13 +18,13 @@ export const KeyInPaymentList = ({
     for (let i = 0; i < listItems.length; i++) {
       let items = listItems[i];
       if (!!items) {
-        let paymentDate = items?.paymentDate;
+        let transactionDate = items?.transactionDate;
-        paymentDate = paymentDate?.substring(0, 8)
+        transactionDate = transactionDate?.substring(0, 8)
-        if (!!paymentDate) {
+        if (!!transactionDate) {
           if (i === 0) {
-            date = paymentDate;
+            date = transactionDate;
           }
-          if (date !== paymentDate) {
+          if (date !== transactionDate) {
             if (list.length > 0) {
               rs.push(
                 <ListDateGroup
@@ -35,7 +35,7 @@ export const KeyInPaymentList = ({
                 ></ListDateGroup>
               );
             }
-            date = paymentDate;
+            date = transactionDate;
             list = [];
           }
           list.push(items);

src/entities/additional-service/ui/list-date-group.tsx

@@ -38,6 +38,12 @@ export const ListDateGroup = ({
             resultStatus={ items[i]?.resultStatus }
             resultMessage={ items[i]?.resultMessage }
             applicationDate={ items[i]?.applicationDate }
+            transactionTime={ items[i]?.transactionTime }
+            transactionDate={ items[i]?.transactionDate }
+            transactionCode={ items[i]?.transactionCode }
+            transactionType={ items[i]?.transactionType }
+            customerName={ items[i]?.customerName }
+            statusLabel={ items[i]?.statusLabel }
 
             amount={ items[i]?.amount }
             sendDate={ items[i]?.sendDate }

src/entities/additional-service/ui/list-item.tsx

@@ -24,7 +24,6 @@ export const ListItem = ({
   accountName,
 
   submallId, settlementDate, companyName,
-  status: disbursementStatus, amount: disbursementAmount,
 
   orderStatus, arsPaymentMethod,
 
@@ -452,7 +451,7 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
       rs.push(
         <div className="transaction-details">
-          <span>{getPayoutStatusText(disbursementStatus)}</span>
+          <span>{getPayoutStatusText(status)}</span>
           <span className="separator">|</span>
           <span>{submallId}</span>
         </div>
@@ -580,7 +579,7 @@ export const ListItem = ({
           className="transaction-amount"
         >
           <NumericFormat
-            value={disbursementAmount}
+            value={amount}
             thousandSeparator
             displayType="text"
             suffix='원'

src/hooks/useAppBridge.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback } from 'react';
 import { appBridge } from '@/utils/appBridge';
-import { DeviceInfo, ShareContent } from '@/types';
+import { DeviceInfo, NotificationSettingResponse, ShareContent } from '@/types';
 import { LoginResponse } from '@/entities/user/model/types';
 
 interface UseAppBridgeReturn {
@@ -8,23 +8,23 @@ interface UseAppBridgeReturn {
   isAndroid: boolean;
   isIOS: boolean;
   deviceInfo: DeviceInfo | null;
-  
+
   // 네비게이션
   navigateBack: () => Promise<void>;
   navigateTo: (path: string) => Promise<void>;
   navigateToLogin: () => Promise<void>;
   closeWebView: () => Promise<void>;
-  
+
   // 알림
   showToast: (message: string, duration?: number) => Promise<void>;
   showAlert: (title: string, message: string) => Promise<void>;
   showConfirm: (title: string, message: string) => Promise<boolean>;
-  
+
   // 저장소
   setStorage: (key: string, value: unknown) => Promise<void>;
   // getStorage: <T = unknown>(key: string) => Promise<T | null>;
   removeStorage: (key: string) => Promise<void>;
-  
+
   /*
   // 미디어
   openCamera: (options?: { quality?: number; allowEdit?: boolean }) => Promise<string>;
@@ -62,11 +62,15 @@ interface UseAppBridgeReturn {
 
   // 로그인 방식 설정 조회
   getLoginType: () => Promise<string>;
+
+  getNotificationSetting: () => Promise<boolean>;
+
+  setNotificationSetting: (enabled: boolean) => Promise<NotificationSettingResponse>;
 }
 
 export const useAppBridge = (): UseAppBridgeReturn => {
   const [deviceInfo, setDeviceInfo] = useState<DeviceInfo | null>(null);
-  
+
   const isNativeEnvironment = appBridge.isNativeEnvironment();
   const isAndroid = appBridge.isAndroid();
   const isIOS = appBridge.isIOS();
@@ -124,7 +128,7 @@ export const useAppBridge = (): UseAppBridgeReturn => {
       toast.className = 'fixed top-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-md z-50 animate-fade-in';
       toast.textContent = message;
       document.body.appendChild(toast);
-      
+
       setTimeout(() => {
         document.body.removeChild(toast);
       }, duration);
@@ -207,7 +211,7 @@ export const useAppBridge = (): UseAppBridgeReturn => {
     }
     return appBridge.safeCall(() => appBridge.closeBiometricRegistrationPopup());
   }, [isNativeEnvironment]);
-  
+
   const shareContent = useCallback(async (content: ShareContent): Promise<void> => {
     if (!isNativeEnvironment) {
       // 웹 환경에서는 Web Share API 사용 (지원되는 경우)
@@ -261,6 +265,35 @@ export const useAppBridge = (): UseAppBridgeReturn => {
     return result || 'ID';
   }, [isNativeEnvironment]);
 
+  const getNotificationSetting = useCallback(async (): Promise<boolean> => {
+    if (!isAndroid) {
+      console.log('getNotificationSetting: Not Android, skipping');
+      return true;
+    }
+
+    try {
+      const result = await appBridge.safeCall(() => appBridge.getNotificationSetting(), { enabled: true });
+      return result?.enabled ?? true;
+    } catch (error) {
+      console.error('Failed to get notification setting:', error);
+      return true;
+    }
+  }, [isAndroid]);
+
+  const setNotificationSetting = useCallback(async (enabled: boolean): Promise<any> => {
+    if (!isAndroid) {
+      console.log('setNotificationSetting: Not Android, skipping');
+      return null;
+    }
+    try {
+      const result = await appBridge.safeCall(() => appBridge.setNotificationSetting(enabled));
+      return result;
+    } catch (error) {
+      console.error('Failed to set notification setting:', error);
+      return null;
+    }
+  }, [isAndroid]);
+
   return {
     isNativeEnvironment,
     isAndroid,
@@ -284,6 +317,8 @@ export const useAppBridge = (): UseAppBridgeReturn => {
     closeBiometricRegistrationPopup,
     isPushNotificationEnabled,
     openAppSettings,
-    getLoginType
+    getLoginType,
+    getNotificationSetting,
+    setNotificationSetting
   };
 }; 

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -19,7 +19,7 @@ import { useExtensionKeyinListMutation } from '@/entities/additional-service/api
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { KeyInPaymentList } from '@/entities/additional-service/ui/key-in-payment/key-in-payment-list';
 import { useStore } from '@/shared/model/store';
-import { KeyInPaymentListItem, KeyInPaymentPaymentStatus } from '@/entities/additional-service/model/key-in/types';
+import { KeyInPaymentListItem, KeyInPaymentStatus, KeyInPaymentTansactionType } from '@/entities/additional-service/model/key-in/types';
 import { keyInPaymentPaymentStatusBtnGroup } from '@/entities/additional-service/model/key-in/constant';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
@@ -40,9 +40,10 @@ export const KeyInPaymentPage = () => {
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>(userMid);
-  const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
+  const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
-  const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
+  const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
-  const [paymentStatus, setPaymentStatus] = useState<KeyInPaymentPaymentStatus>(KeyInPaymentPaymentStatus.ALL)
+  const [transactionType, setTransactionType] = useState<KeyInPaymentTansactionType>(KeyInPaymentTansactionType.ALL)
+  const [status, setStatus] = useState<KeyInPaymentStatus>(KeyInPaymentStatus.ALL);
   const [minAmount, setMinAmount] = useState<number>();
   const [maxAmount, setMaxAmount] = useState<number>();
   const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
@@ -72,13 +73,15 @@ export const KeyInPaymentPage = () => {
     onIntersect 
   });
 
+  // 목록 조회
   const callList = (type?: string) => {
     setOnActionIntersect(false);
     let listParams = {
       mid: mid,
-      fromDate: startDate,
+      startDate: startDate,
-      toDate: endDate,
+      endDate: endDate,
-      paymentStatus: paymentStatus,
+      transactionType: transactionType,
+      status: status,
       minAmount: minAmount,
       maxAmount: maxAmount,
       page: {
@@ -131,13 +134,14 @@ export const KeyInPaymentPage = () => {
     setEmailBottomSheetOn(true);
   };
 
+  // 엑셀 다운로드
   const onSendRequest = (selectedEmail?: string) => {
     if (selectedEmail) {
       downloadExcel({
         mid: mid,
         fromDate: startDate,
         toDate: endDate,
-        paymentStatus: paymentStatus,
+        paymentStatus: transactionType,
         minAmount: minAmount,
         maxAmount: maxAmount,
         //email: selectedEmail
@@ -152,8 +156,8 @@ export const KeyInPaymentPage = () => {
     setSortType(sort);
   };
 
-  const onClickToPaymentStatus = (val: KeyInPaymentPaymentStatus) => {
+  const onClickToPaymentStatus = (val: KeyInPaymentTansactionType) => {
-    setPaymentStatus(val);
+    setTransactionType(val);
   };
 
   useEffect(() => {
@@ -162,7 +166,7 @@ export const KeyInPaymentPage = () => {
     mid,
     startDate,
     endDate,
-    paymentStatus,
+    transactionType,
     minAmount,
     maxAmount,
     sortType
@@ -222,7 +226,7 @@ export const KeyInPaymentPage = () => {
                     keyInPaymentPaymentStatusBtnGroup.map((value, index) => (
                       <span
                         key={`key-service-code=${index}`}
-                        className={`keyword-tag ${(paymentStatus === value.value) ? 'active' : ''}`}
+                        className={`keyword-tag ${(transactionType === value.value) ? 'active' : ''}`}
                         onClick={() => onClickToPaymentStatus(value.value)}
                       >{value.name}</span>
                     ))
@@ -245,13 +249,13 @@ export const KeyInPaymentPage = () => {
         mid={mid}
         startDate={startDate}
         endDate={endDate}
-        transactionStatus={paymentStatus}
+        transactionStatus={transactionType}
         minAmount={minAmount}
         maxAmount={maxAmount}
         setMid={setMid}
         setStartDate={setStartDate}
         setEndDate={setEndDate}
-        setTransactionStatus={setPaymentStatus}
+        setTransactionStatus={setTransactionType}
         setMinAmount={setMinAmount}
         setMaxAmount={setMaxAmount}
       ></KeyInPaymentFilter>

src/pages/additional-service/key-in-payment/requeset-page.tsx

@@ -14,6 +14,7 @@ import {
 import { overlay } from 'overlay-kit';
 import { Dialog } from '@/shared/ui/dialogs/dialog';
 import { useStore } from '@/shared/model/store';
+import { snackBar } from '@/shared/lib';
 
 export const KeyInPaymentRequestPage = () => {
     const { navigate } = useNavigate();
@@ -22,19 +23,19 @@ export const KeyInPaymentRequestPage = () => {
     const userMid = useStore.getState().UserStore.mid;
 
     const [mid, setMid] = useState<string>(userMid || '');
-    const [goodsName, setGoodsName] = useState<string>('');
+    const [productName, setProductName] = useState<string>('');
     const [amount, setAmount] = useState<number>(0);
-    const [buyerName, setBuyerName] = useState<string>('');
+    const [customerName, setCustomerName] = useState<string>('');
     const [email, setEmail] = useState<string>('');
     const [phoneNumber, setPhoneNumber] = useState<string>('');
     const [cardNo1, setCardNo1] = useState<string>('');
     const [cardNo2, setCardNo2] = useState<string>('');
     const [cardNo3, setCardNo3] = useState<string>('');
     const [cardNo4, setCardNo4] = useState<string>('');
-    const [cardExpirationMonth, setCardExpirationMonth] = useState<string>('');
+    const [expMon, setExpMon] = useState<string>('');
-    const [cardExpirationYear, setCardExpirationYear] = useState<string>('');
+    const [expYear, setExpYear] = useState<string>('');
-    const [instmntMonth, setInstmntMonth] = useState<string>('00');
+    const [instmnt, setInstmnt] = useState<string>('00');
-    const [moid, setMoid] = useState<string>('');
+    const [orderNumber, setOrderNumber] = useState<string>('');
 
     const { mutateAsync: keyInApply } = useExtensionKeyinApplyMutation();
 
@@ -46,43 +47,43 @@ export const KeyInPaymentRequestPage = () => {
     });
 
     const resetForm = () => {
-        setGoodsName('');
+        setProductName('');
         setAmount(0);
-        setBuyerName('');
+        setCustomerName('');
         setEmail('');
         setPhoneNumber('');
         setCardNo1('');
         setCardNo2('');
         setCardNo3('');
         setCardNo4('');
-        setCardExpirationMonth('');
+        setExpMon('');
-        setCardExpirationYear('');
+        setExpYear('');
-        setInstmntMonth('00');
+        setInstmnt('00');
-        setMoid('');
+        setOrderNumber('');
     };
 
     const callKeyInPaymentRequest = () => {
         const cardNo = `${cardNo1}${cardNo2}${cardNo3}${cardNo4}`;
-        const cardExpirationDate = `${cardExpirationMonth}${cardExpirationYear}`;
 
         let keyInApplyParams = {
             mid: mid,
-            goodsName: goodsName,
-            amount: amount,
-            buyerName: buyerName,
-            email: email,
-            phoneNumber: phoneNumber,
             cardNo: cardNo,
-            cardExpirationDate: cardExpirationDate,
+            expYear: expYear,
-            instmntMonth: instmntMonth,
+            expMon: expMon,
-            moid: moid,
+            instmnt: instmnt,
+            amount: amount,
+            productName: productName,
+            orderNumber: orderNumber,
+            customerName: customerName,
+            phoneNumber: phoneNumber,
+            email: email,
         };
 
         keyInApply(keyInApplyParams).then((rs) => {
             console.log('결제 응답:', rs);
             if (rs.status) {
                 // 성공: 화면 유지 & 입력 내용 초기화
-                showSuccessDialog();
+                snackBar("KEY-IN 결제 신청을 성공하였습니다.")
                 resetForm();
             } else {
                 // 실패: 화면 유지 & 입력 내용 유지
@@ -140,19 +141,19 @@ export const KeyInPaymentRequestPage = () => {
     };
 
     const isValidCardExpiration = () => {
-        if (cardExpirationMonth.length !== 2 || cardExpirationYear.length !== 2) {
+        if (expMon.length !== 2 || expYear.length !== 2) {
             return false;
         }
-        const month = parseInt(cardExpirationMonth);
+        const month = parseInt(expMon);
         return month >= 1 && month <= 12;
     };
 
     const isFormValid = () => {
         return (
             mid.trim() !== '' &&
-            goodsName.trim() !== '' &&
+            productName.trim() !== '' &&
             amount > 0 &&
-            buyerName.trim() !== '' &&
+            customerName.trim() !== '' &&
             isValidEmail(email) &&
             isValidPhoneNumber(phoneNumber) &&
             isValidCardNumber() &&
@@ -187,8 +188,8 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field">
                                         <input
                                             type="text"
-                                            value={goodsName}
+                                            value={productName}
-                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value)}
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value)}
                                         />
                                     </div>
                                 </div>
@@ -215,8 +216,8 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field">
                                         <input
                                             type="text"
-                                            value={buyerName}
+                                            value={customerName}
-                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setCustomerName(e.target.value)}
                                         />
                                     </div>
                                 </div>
@@ -318,10 +319,10 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                                         <input
                                             type="text"
-                                            value={cardExpirationMonth}
+                                            value={expMon}
                                             onChange={(e: ChangeEvent<HTMLInputElement>) => {
                                                 const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
-                                                if (onlyNumbers.length <= 2) setCardExpirationMonth(onlyNumbers);
+                                                if (onlyNumbers.length <= 2) setExpMon(onlyNumbers);
                                             }}
                                             inputMode="numeric"
                                             pattern="[0-9]*"
@@ -332,10 +333,10 @@ export const KeyInPaymentRequestPage = () => {
                                         <span>/</span>
                                         <input
                                             type="text"
-                                            value={cardExpirationYear}
+                                            value={expYear}
                                             onChange={(e: ChangeEvent<HTMLInputElement>) => {
                                                 const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
-                                                if (onlyNumbers.length <= 2) setCardExpirationYear(onlyNumbers);
+                                                if (onlyNumbers.length <= 2) setExpYear(onlyNumbers);
                                             }}
                                             inputMode="numeric"
                                             pattern="[0-9]*"
@@ -351,8 +352,8 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field">
                                         <select
                                             disabled={amount < 50000}
-                                            value={instmntMonth}
+                                            value={instmnt}
-                                            onChange={(e: ChangeEvent<HTMLSelectElement>) => setInstmntMonth(e.target.value)}
+                                            onChange={(e: ChangeEvent<HTMLSelectElement>) => setInstmnt(e.target.value)}
                                         >
                                             <option value="00">일시불 (무이자)</option>
                                             {amount >= 50000 && (
@@ -379,8 +380,8 @@ export const KeyInPaymentRequestPage = () => {
                                     <div className="billing-field">
                                         <input
                                             type="text"
-                                            value={moid}
+                                            value={orderNumber}
-                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
+                                            onChange={(e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value)}
                                         />
                                     </div>
                                 </div>

src/pages/additional-service/link-payment/link-payment-detail-page.tsx

@@ -154,21 +154,21 @@ export const LinkPaymentDetailPage = () => {
                 additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
                 detailInfo={detailInfo}
               ></DetailInfoWrap>
+              <div className="link-payment-detail-button">
+                <button
+                  className="btn-50 btn-blue flex-1"
+                  onClick={() => onClickToSeparateApproval()}
+                  disabled={false}
+                >분리승인 상세</button>
+              </div>
             </div>
             <div className="apply-row">
-              <button
-                className="btn-50 btn-blue flex-1"
-                onClick={() => onClickToSeparateApproval()}
-                disabled={false}
-              >분리승인 상세</button>
-            </div>
-            {/* <div className="apply-row">
               <button
                 className="btn-50 btn-blue flex-1"
                 onClick={() => onClickToResend()}
                 disabled={!isResendEnabled()}
               >재발송</button>
-            </div> */}
+            </div>
           </div>
         </div>
       </main >

src/pages/setting/setting-page.tsx

@@ -16,7 +16,15 @@ import { useAppBridge } from '@/hooks/useAppBridge';
 
 export const SettingPage = () => {
   let userInfo = useStore.getState().UserStore.userInfo;
-  const { isPushNotificationEnabled, openAppSettings, logout, getLoginType } = useAppBridge();
+  const {
+    isPushNotificationEnabled,
+    openAppSettings,
+    logout,
+    getLoginType,
+    getNotificationSetting,
+    setNotificationSetting: updateNotificationSetting,
+    isAndroid
+  } = useAppBridge();
 
   useSetHeaderTitle('설정');
   useSetHeaderType(HeaderType.LeftArrow);
@@ -31,6 +39,7 @@ export const SettingPage = () => {
   const {mutateAsync: appAlarmConsent} = useAppAlarmConsentMutation();
 
   const [pushNotificationEnabled, setPushNotificationEnabled] = useState<boolean>(false);
+  const [notificationSetting, setNotificationSetting] = useState<boolean>(true);
   const [alarmSetting, setAlarmSetting] = useState<Record<string, boolean>>({
     '21': false,
     '11': false,
@@ -65,7 +74,74 @@ export const SettingPage = () => {
   const onClickPushNotificationToggle = () => {
     openAppSettings();
   };
-  
+
+  // 알림 설정 로드 (Android만)
+  const loadNotificationSetting = useCallback(async () => {
+    if (!isAndroid) {
+      console.log('[loadNotificationSetting] Not Android, skipping');
+      return;
+    }
+
+    try {
+      console.log('[loadNotificationSetting] Calling getNotificationSetting()...');
+      const enabled = await getNotificationSetting();
+      console.log('[loadNotificationSetting] Received value from bridge:', enabled);
+      console.log('[loadNotificationSetting] Type of enabled:', typeof enabled);
+
+      setNotificationSetting(enabled);
+      console.log('[loadNotificationSetting] State updated to:', enabled);
+    } catch (error) {
+      console.error('[loadNotificationSetting] Failed to load notification setting:', error);
+    }
+  }, [isAndroid, getNotificationSetting]);
+
+  // 알림 설정 토글 핸들러 (Android만)
+  const onClickNotificationSettingToggle = useCallback(async () => {
+    if (!isAndroid) {
+      console.log('[onClickNotificationSettingToggle] Not Android, skipping');
+      return;
+    }
+
+    try {
+      const newValue = !notificationSetting;
+      console.log('[onClickNotificationSettingToggle] to save:', newValue);
+
+      const result = await updateNotificationSetting(newValue);
+      console.log('[onClickNotificationSettingToggle] result:', result);
+
+      // ✅ needsPermission이 true이면 설정 화면으로 이동한 것
+      if (result && typeof result === 'object' && 'needsPermission' in result && result.needsPermission) {
+        console.log('[onClickNotificationSettingToggle] Permission needed - opened settings');
+        // 설정이 변경되지 않았으므로 상태 유지
+        return;
+      }
+
+      // ✅ 성공한 경우에만 상태 업데이트
+      if (result && typeof result === 'object' && 'enabled' in result) {
+        setNotificationSetting(result.enabled);
+        console.log('[onClickNotificationSettingToggle] State updated to:', result.enabled);
+      } else {
+        // Fallback
+        setNotificationSetting(newValue);
+        console.log('[onClickNotificationSettingToggle] State updated to (fallback):', newValue);
+      }
+
+      // ✅ 저장 후 바로 다시 읽어서 확인
+      console.log('[onClickNotificationSettingToggle] Verifying saved value...');
+      const verifyValue = await getNotificationSetting();
+      console.log('[onClickNotificationSettingToggle] Verified value:', verifyValue);
+
+      if (verifyValue !== result?.enabled && !result?.needsPermission) {
+        console.error('[onClickNotificationSettingToggle] WARNING: Saved value != Verified value', {
+          saved: result?.enabled,
+          verified: verifyValue
+        });
+      }
+    } catch (error) {
+      console.error('[onClickNotificationSettingToggle] Failed to update notification setting:', error);
+    }
+  }, [isAndroid, notificationSetting, updateNotificationSetting, getNotificationSetting]);
+
   const callAppAlarmFind = () => {
     if(userInfo.usrid){
       let params: AppAlarmFindParams = {
@@ -115,16 +191,19 @@ export const SettingPage = () => {
     callAppAlarmFind();
     checkPushNotificationStatus();
     loadLoginType();
+    loadNotificationSetting(); // ✅ 추가
 
     // 앱이 포어그라운드로 돌아올 때 푸시 알림 권한 상태 재확인
     const handleVisibilityChange = () => {
       if (document.visibilityState === 'visible') {
         checkPushNotificationStatus();
+        loadNotificationSetting(); // ✅ 추가
       }
     };
 
     const handleFocus = () => {
       checkPushNotificationStatus();
+      loadNotificationSetting(); // ✅ 추가
     };
 
     document.addEventListener('visibilitychange', handleVisibilityChange);
@@ -134,20 +213,28 @@ export const SettingPage = () => {
       document.removeEventListener('visibilitychange', handleVisibilityChange);
       window.removeEventListener('focus', handleFocus);
     };
-  }, [checkPushNotificationStatus, loadLoginType]);
+  }, [checkPushNotificationStatus, loadLoginType, loadNotificationSetting]);
 
   return (
     <>
       <main className="pop">
         <div className="sub-wrap">
+          {/* ✅ Android일 때는 앱 내 설정, 아니면 시스템 권한 표시 */}
           <div className="settings-header">
             <div className="settings-title">알림 수신 설정</div>
-            <label className="settings-switch" onClick={onClickPushNotificationToggle}>
+            <label className="settings-switch">
               <input
                 type="checkbox"
-                checked={pushNotificationEnabled}
+                checked={isAndroid ? notificationSetting : pushNotificationEnabled}
                 readOnly
-                onClick={(e) => e.preventDefault()}
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (isAndroid) {
+                    onClickNotificationSettingToggle();
+                  } else {
+                    onClickPushNotificationToggle();
+                  }
+                }}
               />
               <span className="slider"></span>
             </label>

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

@@ -403,4 +403,14 @@ main.home-main{
 }
 .auth-list{
   padding-bottom: 0px;
+}
+
+/* 링크 결제 상세 페이지 */
+.link-payment-detail-button {
+  padding: 16px 0px 16px 0px;
+  display: flex;
+}
+
+.link-payment-detail-button button {
+  width: 100%;
 }

src/types/bridge.ts

@@ -74,7 +74,11 @@ export enum BridgeMessageType {
   OPEN_APP_SETTINGS = 'openAppSettings',
 
   // 로그인 방식 설정
-  GET_LOGIN_TYPE = 'getLoginType'
+  GET_LOGIN_TYPE = 'getLoginType',
+
+    // 알림 수신 설정 (Android only)
+  GET_NOTIFICATION_SETTING = 'getNotificationSetting',
+  SET_NOTIFICATION_SETTING = 'setNotificationSetting'
 }
 
 export interface DeviceInfo {
@@ -103,4 +107,11 @@ export interface ShareContent {
   text: string;
   url?: string;
   image?: string;
+}
+
+export interface NotificationSettingResponse {
+  success: boolean;
+  enabled: boolean;
+  needsPermission?: boolean;
+  message?: string;
 }

src/utils/appBridge.ts

@@ -210,6 +210,16 @@ class AppBridge {
     return this.sendMessage(BridgeMessageType.GET_LOGIN_TYPE);
   }
 
+    // 알림 수신 설정 가져오기 (Android only)
+  async getNotificationSetting(): Promise<{ enabled: boolean }> {
+    return this.sendMessage(BridgeMessageType.GET_NOTIFICATION_SETTING);
+  }
+
+  // 알림 수신 설정 저장하기 (Android only)
+  async setNotificationSetting(enabled: boolean): Promise<any> {
+    return this.sendMessage(BridgeMessageType.SET_NOTIFICATION_SETTING, { enabled });
+  }
+
   // 네이티브 환경 체크
   isNativeEnvironment(): boolean {
     return !!(