nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- KeyIn Request 필드 수정
This commit is contained in:
HyeonJongKim
2025-10-28 11:33:24 +09:00
parent feaaac73f7
commit e125a73228
16 changed files with 298 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -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",

4
src/entities/additional-service/model/ars/types.ts
View File

@@ -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;

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

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

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

@@ -4,18 +4,30 @@ import { AdditionalServiceCategory, ExtensionRequestParams, FilterProps } from "
// ========================================
// 키인결제 관련 타입들
// ========================================
export enum KeyInPaymentPaymentStatus {
export enum KeyInPaymentTansactionType {
ALL = 'ALL',
APPROVAL = 'APPROVAL',
PRE_CANCEL = 'PRE_CANCEL',
POST_CANCEL = 'POST_CANCEL'
FULL_CANCEL = 'FULL_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;
toDate: string;
paymentStatus: string;
startDate: string;
endDate: 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;
instmntMonth: string;
moid: string;
expYear: string;
expMon: string;
instmnt: string;
amount: number;
productName: string;
orderNumber: string;
customerName: string;
phoneNumber: string;
email: string;
}
export interface ExtensionKeyinApplyResponse {

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

@@ -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);

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

@@ -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;
paymentDate = paymentDate?.substring(0, 8)
if (!!paymentDate) {
let transactionDate = items?.transactionDate;
transactionDate = transactionDate?.substring(0, 8)
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);

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

@@ -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 }

5
src/entities/additional-service/ui/list-item.tsx
View File

@@ -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='원'

39
src/hooks/useAppBridge.tsx
View File

@@ -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 {
@@ -62,6 +62,10 @@ interface UseAppBridgeReturn {
// 로그인 방식 설정 조회
getLoginType: () => Promise<string>;
getNotificationSetting: () => Promise<boolean>;
setNotificationSetting: (enabled: boolean) => Promise<NotificationSettingResponse>;
}
export const useAppBridge = (): UseAppBridgeReturn => {
@@ -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
};
};

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

@@ -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 [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
const [paymentStatus, setPaymentStatus] = useState<KeyInPaymentPaymentStatus>(KeyInPaymentPaymentStatus.ALL)
const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
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,
toDate: endDate,
paymentStatus: paymentStatus,
startDate: startDate,
endDate: endDate,
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) => {
setPaymentStatus(val);
const onClickToPaymentStatus = (val: KeyInPaymentTansactionType) => {
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>

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

@@ -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 [cardExpirationYear, setCardExpirationYear] = useState<string>('');
const [instmntMonth, setInstmntMonth] = useState<string>('00');
const [moid, setMoid] = useState<string>('');
const [expMon, setExpMon] = useState<string>('');
const [expYear, setExpYear] = useState<string>('');
const [instmnt, setInstmnt] = useState<string>('00');
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('');
setCardExpirationYear('');
setInstmntMonth('00');
setMoid('');
setExpMon('');
setExpYear('');
setInstmnt('00');
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,
instmntMonth: instmntMonth,
moid: moid,
expYear: expYear,
expMon: expMon,
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}
onChange={(e: ChangeEvent<HTMLInputElement>) => setGoodsName(e.target.value)}
value={productName}
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}
onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
value={customerName}
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}
onChange={(e: ChangeEvent<HTMLSelectElement>) => setInstmntMonth(e.target.value)}
value={instmnt}
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}
onChange={(e: ChangeEvent<HTMLInputElement>) => setMoid(e.target.value)}
value={orderNumber}
onChange={(e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value)}
/>
</div>
</div>

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

@@ -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 >

97
src/pages/setting/setting-page.tsx
View File

@@ -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,
@@ -66,6 +75,73 @@ export const SettingPage = () => {
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>

10
src/shared/ui/assets/css/style-fix.css
View File

@@ -404,3 +404,13 @@ 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%;
}

13
src/types/bridge.ts
View File

@@ -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 {
@@ -104,3 +108,10 @@ export interface ShareContent {
url?: string;
image?: string;
}
export interface NotificationSettingResponse {
success: boolean;
enabled: boolean;
needsPermission?: boolean;
message?: string;
}

10
src/utils/appBridge.ts
View File

@@ -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 !!(