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

부가서비스 관련 1

Browse Source
This commit is contained in:
focp212@naver.com
2025-09-05 18:02:07 +09:00
parent 556ea4d7f2
commit 73bd36d6ec
14 changed files with 878 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/additional-service/additional-service-pages.tsx
View File

@@ -10,10 +10,14 @@ import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payme
import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page';
import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
import { LinkPaymentPage } from './link-payment/link-payment-page';
import { KakaoPaymentNotificationPage } from './kakao-payment-notification/kakao-payment-notification-page';
import { FundTransferPage } from './fund-transfer/fund-transfer-page';
import { KakaoPaymentNotificationListPage } from './kakao-payment-notification/list-page';
import { KakaoPaymentNotificationSettingPage } from './kakao-payment-notification/setting-page';
import { FundTransferRequestListPage } from './fund-transfer/request-list-page';
import { FundTransferRequestRegisterPage } from './fund-transfer/request-register-page';
import { SettlementAgencyPage } from './settlement-agency/settlement-agency-page';
import { PaymentAgencyPage } from './payment-agency/payment-agency-page';
import { PaymentAgencyListPage } from './payment-agency/list-page';
import { PaymentAgencyDetailPage } from './payment-agency/detail-page';
import { PaymentAgencyRequestPage } from './payment-agency/request-page';
export const AdditionalServicePages = () => {
return (
@@ -31,10 +35,20 @@ export const AdditionalServicePages = () => {
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch} element={<AccountHolderSearchPage />} />
<Route path={ROUTE_NAMES.additionalService.accountHolderAuth} element={<AccountHolderAuthPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment} element={<LinkPaymentPage />} />
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification} element={<KakaoPaymentNotificationPage />} />
<Route path={ROUTE_NAMES.additionalService.fundTransfer} element={<FundTransferPage />} />
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}>
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.list} element={<KakaoPaymentNotificationListPage />} />
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.setting} element={<KakaoPaymentNotificationSettingPage />} />
</Route>
<Route path={ROUTE_NAMES.additionalService.fundTransfer.base}>
<Route path={ROUTE_NAMES.additionalService.fundTransfer.requestList} element={<FundTransferRequestListPage />} />
<Route path={ROUTE_NAMES.additionalService.fundTransfer.requestRegister} element={<FundTransferRequestRegisterPage />} />
</Route>
<Route path={ROUTE_NAMES.additionalService.settlementAgency} element={<SettlementAgencyPage />} />
<Route path={ROUTE_NAMES.additionalService.paymentAgency} element={<PaymentAgencyPage />} />
<Route path={ROUTE_NAMES.additionalService.paymentAgency.base}>
<Route path={ROUTE_NAMES.additionalService.paymentAgency.list} element={<PaymentAgencyListPage />} />
<Route path={ROUTE_NAMES.additionalService.paymentAgency.detail} element={<PaymentAgencyDetailPage />} />
<Route path={ROUTE_NAMES.additionalService.paymentAgency.request} element={<PaymentAgencyRequestPage />} />
</Route>
</SentryRoutes>
</>
);

2
src/pages/additional-service/fund-transfer/fund-transfer-page.tsx → src/pages/additional-service/fund-transfer/request-list-page.tsx
View File

@@ -5,7 +5,7 @@ import {
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const FundTransferPage = () => {
export const FundTransferRequestListPage = () => {
useSetHeaderTitle('자금이체');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);

6
src/pages/additional-service/fund-transfer/request-register-page.tsx Normal file
View File

@@ -0,0 +1,6 @@
export const FundTransferRequestRegisterPage = () => {
return (
<></>
);
};

6
src/pages/additional-service/intro/intro-page.tsx
View File

@@ -41,7 +41,7 @@ export const IntroPage = () => {
const requestList = [
{
className: 'list-wrap02', serviceName: '지급대행', serviceDesc: '하위 가맹점에 빠른 정산금 지급 지급대행 서비스',
icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.paymentAgency
icon: IMAGE_ROOT + '/icon_ing05.svg', path: PATHS.additionalService.paymentAgency.list
},
{
className: 'list-wrap02', serviceName: '정산대행', serviceDesc: '하위 가맹점 정산금 계산부터 지급까지 자동 해결 서비스',
@@ -53,7 +53,7 @@ export const IntroPage = () => {
},
{
className: 'list-wrap02', serviceName: '자금이체', serviceDesc: '예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능',
icon: IMAGE_ROOT + '/icon_ing08.svg', path: PATHS.additionalService.fundTransfer
icon: IMAGE_ROOT + '/icon_ing08.svg', path: PATHS.additionalService.fundTransfer.requestList
},
{
className: 'list-wrap02', serviceName: '계좌점유인증', serviceDesc: '1원 송금으로 실제 계좌 점유 확인 여부',
@@ -61,7 +61,7 @@ export const IntroPage = () => {
},
{
className: 'list-wrap02', serviceName: '알림톡 결제통보', serviceDesc: '결제 상태를 알림톡으로 쉽고 빠른 안내',
icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.kakaoPaymentNotification
icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.kakaoPaymentNotification.list
},
];

24
src/pages/additional-service/kakao-payment-notification/kakao-payment-notification-page.tsx → src/pages/additional-service/kakao-payment-notification/list-page.tsx
View File

@@ -1,15 +1,27 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const KakaoPaymentNotificationPage = () => {
export const KakaoPaymentNotificationListPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('알림톡 결제통보');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
const onClickToNavigate = () => {
navigate(PATHS.additionalService.kakaoPaymentNotification.setting);
};
return (
<>
@@ -124,6 +136,12 @@ export const KakaoPaymentNotificationPage = () => {
</div>
</div>
</main>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
>서비스 설정</button>
</div>
</>
);
};

161
src/pages/additional-service/kakao-payment-notification/setting-page.tsx Normal file
View File

@@ -0,0 +1,161 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const KakaoPaymentNotificationSettingPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('알림톡 결제통보');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.additionalService.kakaoPaymentNotification.list);
});
const onClickToSave = () => {
};
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="option-list pb-120">
<div className="service-settings">
<div className="service-notice">
<div>알림톡을 발송할 대상을 설정할 수 있습니다.</div>
<div>알림톡 발송 대상과 유형을 설정해 주세요.</div>
</div>
<div className="service-merchant">
<div className="service-title">가맹점</div>
<div className="service-select">
<select>
<option>nictest001m</option>
</select>
<span className="ic20 arrow-down" aria-hidden="true"></span>
</div>
</div>
<div className="service-section">
<div className="service-row align-right">
<span>가맹점에 발송</span>
<span>고객에게 발송</span>
</div>
</div>
<div className="service-section">
<div className="service-row">
<span>신용카드(승인)</span>
<div className="switch-group">
<label className="settings-switch">
<input type="checkbox"/>
<span className="slider"></span>
</label>
<label className="settings-switch">
<input type="checkbox"/>
<span className="slider"></span>
</label>
</div>
</div>
<div className="service-row">
<span>신용카드(취소)</span>
<div className="switch-group">
<label className="settings-switch">
<input type="checkbox" checked/>
<span className="slider"></span>
</label>
<label className="settings-switch">
<input type="checkbox" checked/>
<span className="slider"></span>
</label>
</div>
</div>
<div className="service-row">
<span>계좌이체(승인)</span>
<div className="switch-group">
<label className="settings-switch">
<input type="checkbox" checked/>
<span className="slider"></span>
</label>
<label className="settings-switch">
<input type="checkbox" checked/>
<span className="slider"></span>
</label>
</div>
</div>
<div className="service-row">
<span>계좌이체(취소)</span>
<div className="switch-group">
<label className="settings-switch">
<input type="checkbox" checked/>
<span className="slider"></span>
</label>
<label className="settings-switch">
<input type="checkbox" checked/>
<span className="slider"></span>
</label>
</div>
</div>
<div className="service-row">
<span>가상계좌(입금요청)</span>
<div className="switch-group">
<label className="settings-switch">
<input type="checkbox"/>
<span className="slider"></span>
</label>
<label className="settings-switch">
<input type="checkbox"/>
<span className="slider"></span>
</label>
</div>
</div>
<div className="service-row">
<span>가상계좌(입금완료)</span>
<div className="switch-group">
<label className="settings-switch">
<input type="checkbox"/>
<span className="slider"></span>
</label>
<label className="settings-switch">
<input type="checkbox"/>
<span className="slider"></span>
</label>
</div>
</div>
<div className="service-row">
<span>가상계좌(환불)</span>
<div className="switch-group">
<label className="settings-switch">
<input type="checkbox"/>
<span className="slider"></span>
</label>
<label className="settings-switch">
<input type="checkbox"/>
<span className="slider"></span>
</label>
</div>
</div>
</div>
</div>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToSave() }
>저장</button>
</div>
</div>
</div>
</main>
</>
);
};

93
src/pages/additional-service/payment-agency/detail-page.tsx Normal file
View File

@@ -0,0 +1,93 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const PaymentAgencyDetailPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('지급대행 상세');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.additionalService.paymentAgency.list);
});
return (
<>
<main className="full-height">
<div className="tab-content">
<div className="tab-pane sub active">
<div className="pay-top">
<div className="num-amount">
<span className="amount">10,000,000원</span>
</div>
<div className="num-store">나이스테스트가맹점</div>
<div className="num-day">2025.08.19</div>
<div className="receipt-row">
<button
className="receipt-btn"
type="button"
>
<span className="icon-24 download"></span>
<span>입출금 확인증</span>
</button>
</div>
</div>
<div className="detail-divider"></div>
<div className="pay-detail">
<div className="detail-title">상세 정보</div>
<ul className="kv-list">
<li className="kv-row">
<span className="k">지급상태</span>
<span className="v">요청</span>
</li>
<li className="kv-row">
<span className="k">거래유형</span>
<span className="v">최초요청</span>
</li>
<li className="kv-row">
<span className="k">요청일</span>
<span className="v">2025.06.05</span>
</li>
<li className="kv-row">
<span className="k">지급일시</span>
<span className="v">2025.06.08 11:00:00</span>
</li>
<li className="kv-row">
<span className="k">사업자번호</span>
<span className="v">'123456789'</span>
</li>
<li className="kv-row">
<span className="k">예금주</span>
<span className="v">김테스트</span>
</li>
<li className="kv-row">
<span className="k">은행</span>
<span className="v">기업은행</span>
</li>
<li className="kv-row">
<span className="k">계좌번호</span>
<span className="v">'1123456789'</span>
</li>
<li className="kv-row">
<span className="k">입금인자</span>
<span className="v">나이스정산금</span>
</li>
<li className="kv-row">
<span className="k">실패사유</span>
<span className="v">&nbsp;</span>
</li>
</ul>
</div>
</div>
</div>
</main>
</>
);
};

170
src/pages/additional-service/payment-agency/list-page.tsx Normal file
View File

@@ -0,0 +1,170 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const PaymentAgencyListPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('지급대행');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
const onClickToNavigation = () => {
navigate(PATHS.additionalService.paymentAgency.request);
};
const onClickToGoDetail = (tid?: string) => {
navigate(PATHS.additionalService.paymentAgency.detail, {
state: {
tid: 'A123456'
}
});
};
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<section className="summary-section">
<div className="credit-controls">
<div>
<input
className="credit-period"
type="text"
value="2025.06.01 ~ 2025.06.30"
readOnly={ true }
/>
<button
className="filter-btn"
aria-label="필터"
>
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt="검색옵션"
/>
</button>
</div>
<button
className="download-btn"
aria-label="다운로드"
>
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt="다운로드"
/>
</button>
</div>
<div className="account-frame">
<div className="credit-summary">
<div className="row">
<span className="label">예치금 잔액</span>
<span className="amount22">
50,000,000<span className="unit">원</span>
</span>
</div>
</div>
</div>
</section>
<section className="filter-section">
<div className="sort-options">
<button className="sort-btn active">최신순</button>
<span className="sort-divider">|</span>
<button className="sort-btn">고액순</button>
</div>
<div className="excrow">
<div className="full-menu-keywords no-padding">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">요청</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">실패</span>
</div>
</div>
</section>
<section className="transaction-list">
<div className="date-header">25.06.08(일)</div>
<div
className="transaction-item approved"
onClick={ () => onClickToGoDetail() }
>
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">카카오스타일</div>
<div className="transaction-details gap-0">
<span>요청</span>
<span className="separator">ㅣ</span>
<span>cruiquis01m</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">카카오스타일</div>
<div className="transaction-details gap-0">
<span>요청</span>
<span className="separator">ㅣ</span>
<span>cruiquis01m</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
<div className="date-header">25.06.08(일)</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">카카오스타일</div>
<div className="transaction-details gap-0">
<span>요청</span>
<span className="separator">ㅣ</span>
<span>cruiquis01m</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
<div className="transaction-item approved">
<div className="transaction-status">
<div className="status-dot blue"></div>
</div>
<div className="transaction-content">
<div className="transaction-title">카카오스타일</div>
<div className="transaction-details gap-0">
<span>요청</span>
<span className="separator">ㅣ</span>
<span>cruiquis01m</span>
</div>
</div>
<div className="transaction-amount">5,254,000원</div>
</div>
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigation() }
>지급대행 신청</button>
</div>
</div>
</div>
</main>
</>
);
};

18
src/pages/additional-service/payment-agency/payment-agency-page.tsx
View File

@@ -1,18 +0,0 @@
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
export const PaymentAgencyPage = () => {
useSetHeaderTitle('지급대행');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(true);
return (
<>
</>
);
};

78
src/pages/additional-service/payment-agency/request-page.tsx Normal file
View File

@@ -0,0 +1,78 @@
import { IMAGE_ROOT } from "@/shared/constants/common";
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const PaymentAgencyRequestPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('지급대행 신청');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.additionalService.paymentAgency.list);
});
return (
<>
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="ing-list">
<div className="billing-form gap-30">
<div className="billing-row">
<div className="billing-label">서브ID</div>
<div className="billing-field">
<input
type="text"
value="BIKYvattest01m"
readOnly={ true }
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">지급액</div>
<div className="billing-field">
<input
type="text"
value="테스트상품123"
readOnly={ true }
/>
</div>
</div>
<div className="billing-row">
<div className="billing-label">지급일</div>
<div className="billing-field">
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
/>
<button
className="date-btn"
type="button"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</>
);
};

40
src/shared/constants/paths.ts
View File

@@ -162,10 +162,44 @@ export const PATHS: RouteNamesType = {
accountHolderSearch: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderSearch),
accountHolderAuth: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.accountHolderAuth),
linkPayment: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.linkPayment),
kakaoPaymentNotification: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.kakaoPaymentNotification),
fundTransfer: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.fundTransfer),
kakaoPaymentNotification: {
base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}`),
list: generatePath(
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}`,
ROUTE_NAMES.additionalService.kakaoPaymentNotification.list,
),
setting: generatePath(
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}`,
ROUTE_NAMES.additionalService.kakaoPaymentNotification.setting,
),
},
fundTransfer: {
base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundTransfer.base}`),
requestList: generatePath(
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundTransfer.base}`,
ROUTE_NAMES.additionalService.fundTransfer.requestList,
),
requestRegister: generatePath(
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.fundTransfer.base}`,
ROUTE_NAMES.additionalService.fundTransfer.requestRegister,
),
},
settlementAgency: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.settlementAgency),
paymentAgency: generatePath(ROUTE_NAMES.additionalService.base, ROUTE_NAMES.additionalService.paymentAgency),
paymentAgency: {
base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`),
list: generatePath(
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`,
ROUTE_NAMES.additionalService.paymentAgency.list,
),
detail: generatePath(
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`,
ROUTE_NAMES.additionalService.paymentAgency.detail,
),
request: generatePath(
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.paymentAgency.base}`,
ROUTE_NAMES.additionalService.paymentAgency.request,
),
},
},
support: {
base: generatePath(ROUTE_NAMES.support.base),

20
src/shared/constants/route-names.ts
View File

@@ -81,10 +81,24 @@ export const ROUTE_NAMES = {
accountHolderSearch: 'account-holder-search',
accountHolderAuth: 'account-holder-auth',
linkPayment: 'link-payment',
kakaoPaymentNotification: 'kakao-payment-notification',
fundTransfer: 'fund-transfer',
kakaoPaymentNotification: {
base: '/kakao-payment-notification/*',
list: 'list',
setting: 'setting',
},
fundTransfer: {
base: '/fund-transfer/*',
requestList: 'request-list',
requestRegister: 'request-register',
},
settlementAgency: 'settlement-agency',
paymentAgency: 'payment-agency',
paymentAgency: {
base: '/payment-agency/*',
list: 'list',
detail: 'detail',
request: 'request',
},
},
support: {
base: '/support/*',

276
src/shared/ui/assets/css/style.css
View File

@@ -115,8 +115,10 @@ body {}
.mb-16 {margin-bottom: 16px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mr-0 {margin-right: 0px !important;}
.mr-10 {margin-right: 10px !important;}
.mr-26 {margin-right: 26px !important;}
.max-70 {max-width: 70% !important;}
.wid-100 {
width: 100% !important;
}
@@ -1919,6 +1921,10 @@ input[type="radio"] {
box-sizing: border-box;
}
.subTab.three {
grid-template-columns: 1fr 1fr 1fr !important;
}
.subtab-btn {
height: 46px;
background: var(--color-white);
@@ -1972,6 +1978,17 @@ input[type="radio"] {
color: var(--color-111111);
}
.amount-text.states {
font-size: var(--fs-16);
font-weight: var(--fw-700);
color: var(--color-111111);
}
.amount-text.states-17 {
font-size: var(--fs-17);
font-weight: var(--fw-700);
color: var(--color-111111);
}
.summary-actions {
display: flex;
gap: 10px;
@@ -2054,7 +2071,7 @@ input[type="radio"] {
font-size: var(--fs-16);
font-weight: var(--fw-600);
color: var(--color-2D3436);
padding: 16px 0;
padding: 16px 0 12px 0;
}
.transaction-item {
@@ -2073,13 +2090,13 @@ input[type="radio"] {
}
.status-dot {
width: 8px;
height: 8px;
width: 9px;
height: 9px;
border-radius: 50%;
}
.status-dot.blue {
background: var(--color-4968BD);
background: var(--color-3E6AFC);
}
.status-dot.gray {
@@ -2103,8 +2120,8 @@ input[type="radio"] {
color: var(--color-999999);
display: flex;
flex-wrap: nowrap;
gap: 6px;
align-items: center;
gap: 0;
align-items: start;
width: 100%;
overflow-x: auto;
width: calc(100vw - 90px);
@@ -2240,6 +2257,10 @@ div .credit-period {
background-color: var(--color-F4F8FF);
}
.summary-extend .summary-amount-list .bdr-6 {
border-radius: 6px;
}
.summary-extend .summary-amount-item {
display: flex;
justify-content: space-between;
@@ -2259,7 +2280,7 @@ div .credit-period {
display: inline-block;
margin-right: 8px;
position: relative;
top: -2px;
top: -1px;
}
.summary-extend .summary-amount-item .value {
@@ -2320,6 +2341,10 @@ div .credit-period {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.notice-tabs.sub {
margin-bottom: 0;
}
.notice-tabs::-webkit-scrollbar{ display:none; height:0; }
.tab36 {
@@ -2626,6 +2651,10 @@ div .credit-period {
flex-wrap: wrap;
}
.kv-row:last-child {
padding-bottom: 0 !important;
}
.gap-50 .kv-row {
gap: 50px;
}
@@ -3279,6 +3308,10 @@ div .credit-period {
gap: 16px;
}
.gap-30 {
gap: 30px;
}
.billing-row {
display: flex;
align-items: center;
@@ -3297,6 +3330,7 @@ div .credit-period {
}
.billing-field {
position: relative;
flex: 1;
}
@@ -4458,6 +4492,7 @@ ul.txn-amount-detail li span:last-child {
background: #F5F5F5;
border-radius: 6px;
}
.transfer-filter { display:flex; align-items:center; gap:10px; padding:30px 26px 0; }
.icon-24.adjust {
width: 24px;
@@ -4877,15 +4912,240 @@ ul.txn-amount-detail li span:last-child {
width: 100%;
display: block;
}
.account-frame .credit-summary .row.horizontal > span {
width: inherit;
}
.account-frame .credit-summary .label {
font-size: var(--fs-16);
color: var(--color-111111);
font-weight: var(--fw-700);
}
.account-frame .credit-summary .amount22 {
font-size: var(--fs-28);
font-weight: var(--fw-700);
}
.account-frame .credit-summary .amount20 {
font-size: var(--fs-22);
font-weight: var(--fw-700);
}
.transaction-details.gap-0 {
gap: 0;
}
/* 104 지급대행_상세 */
.pay-top {
display: flex;
flex-direction: column;
gap: 0;
padding: 30px 10px 0;
}
.pay-top .num-amount .amount {
font-size: var(--fs-28);
font-weight: var(--fw-700);
color: var(--color-2D3436);
}
.pay-top .num-store,
.pay-top .num-day {
font-size: var(--fs-17);
font-weight: 600;
color: #999999;
}
.receipt-row {
display: flex;
align-items: center;
gap: 10px;
padding-top: 26px;
}
.receipt-btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 10px;
border-radius: 6px;
background: #F4F8FF;
}
.detail-divider {
height: 1px;
background: #EAEAEA;
margin: 26px -26px;
}
.pay-detail {
padding: 0 10px;
}
.pay-detail .detail-title {
font-size: var(--fs-17);
font-weight: var(--fw-700);
color: var(--color-2D3436);
padding-bottom: 16px;
}
/* 105 알림톡 결제 통보 -> 지급대행 신청 폼 */
.billing-form.gap-16 {
gap: 16px;
}
.billing-row {
display: flex;
align-items: center;
gap: 10px;
justify-content: space-between;
}
.billing-label {
width: 90px;
font-size: var(--fs-16);
font-weight: var(--fw-500);
color: var(--color-2D3436);
}
.billing-field {
flex: 1;
}
.billing-inline {
display: grid;
grid-template-columns: 1fr 40px;
gap: 10px;
}
.calendar-btn {
background: none;
border: none;
}
.notice-bar.style-note {
background: none;
padding: 0;
}
.notice-bar.style-note > span {
position: relative;
display: block;
padding-left: 13px;
}
.notice-bar.style-note > span > span {
position: absolute;
left: 0;
top: 0;
}
/* 107 자금이체_결과조회 */
/* Uses existing .summary-extend, .summary-amount-list styles from 106 */
/* 108 안면인증_리스트 */
.face-list {
padding: 0 10px;
}
.face-item {
display:flex;
justify-content: space-between;
align-items: flex-start;
gap:10px;
padding:16px 0;
border-bottom:1px solid #EAEAEA;
}
.face-item:last-child {
border-bottom:0;
}
.face-txt {
flex:1;
min-width:0;
}
.face-id {
font-size: var(--fs-16);
color: var(--color-2D3436);
}
.face-msg {
font-size: var(--fs-14);
color: #777777;
margin-top: 6px;
}
.face-status {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.face-status .dot {
width: 9px;
height: 9px;
border-radius: 50%;
display: inline-block;
}
.face-status .dot.blue {
background:#3E6AFC;
}
.face-status .dot.gray {
background:#C6C6C6;
}
.face-status .status {
font-size: var(--fs-16);
font-weight: var(--fw-500);
color: #3E6AFC;
}
.face-status .status.fail { color: #999999; }
/* 108 안면인증_리스트 - 두줄 말줄임 처리 */
.face-list .transaction-details span:last-child {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
}
/* 109 정산대행_정산대행관리_정산 데이터 펼침 */
/* Uses existing .summary-extend, .summary-amount-list, .notice-tabs, .tab36 styles */
.account-frame .credit-summary .row.horizontal {
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 10px;
}
/* 110 정산대행 관리_상세 - 상태 변경 이력 */
.sd-history {
padding: 0 10px;
}
.sd-history-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
height: 70px;
}
.sd-history-item .left { width: 180px; }
.sd-history-item .right { width: 140px; text-align: right; }
.sd-history-item .name {
font-size: 16px;
font-weight: 400;
color: var(--color-2D3436);
}
.sd-history-item .time {
font-size: 14px;
color: var(--color-777777);
}
.sd-history-item .reason {
font-size: 16px;
font-weight: 500;
color: var(--color-2D3436);
}
.detail-title.summary-amount.divTop {
justify-content: space-between;
}

6
src/shared/ui/menu/index.tsx
View File

@@ -88,10 +88,10 @@ export const Menu = ({
{title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch},
{title: '계좌점유인증', path: PATHS.additionalService.accountHolderAuth},
{title: '링크결제', path: PATHS.additionalService.linkPayment},
{title: '알림톡 결제통보', path: PATHS.additionalService.kakaoPaymentNotification},
{title: '자금이체', path: PATHS.additionalService.fundTransfer},
{title: '알림톡 결제통보', path: PATHS.additionalService.kakaoPaymentNotification.list},
{title: '자금이체', path: PATHS.additionalService.fundTransfer.requestList},
{title: '정산대행', path: PATHS.additionalService.settlementAgency},
{title: '지급대행', path: PATHS.additionalService.paymentAgency},
{title: '지급대행', path: PATHS.additionalService.paymentAgency.list},
]
},
support: {