부가서비스 관련 1

2025-09-05 18:02:07 +09:00
parent 556ea4d7f2
commit 73bd36d6ec
14 changed files with 878 additions and 48 deletions
--- a/src/shared/constants/paths.ts
+++ b/src/shared/constants/paths.ts
@@ -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),
--- a/src/shared/constants/route-names.ts
+++ b/src/shared/constants/route-names.ts
@@ -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/*',
--- a/src/shared/ui/assets/css/style.css
+++ b/src/shared/ui/assets/css/style.css
@@ -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;
 }
--- a/src/shared/ui/menu/index.tsx
+++ b/src/shared/ui/menu/index.tsx
@@ -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: {