diff --git a/public/images/ico_del_minus.svg b/public/images/ico_del_minus.svg new file mode 100644 index 0000000..1a67536 --- /dev/null +++ b/public/images/ico_del_minus.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/ico_menu_plus_no.svg b/public/images/ico_menu_plus_no.svg new file mode 100644 index 0000000..8b86aca --- /dev/null +++ b/public/images/ico_menu_plus_no.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/icon_ing11.svg b/public/images/icon_ing11.svg new file mode 100644 index 0000000..74eb248 --- /dev/null +++ b/public/images/icon_ing11.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/images/sample_banner_0.png b/public/images/sample_banner_0.png new file mode 100644 index 0000000..b793423 Binary files /dev/null and b/public/images/sample_banner_0.png differ diff --git a/public/images/sample_banner_1.png b/public/images/sample_banner_1.png new file mode 100644 index 0000000..0167924 Binary files /dev/null and b/public/images/sample_banner_1.png differ diff --git a/src/entities/transaction/api/use-billing-charge-mutation.ts b/src/entities/transaction/api/use-billing-charge-mutation.ts new file mode 100644 index 0000000..30d8913 --- /dev/null +++ b/src/entities/transaction/api/use-billing-charge-mutation.ts @@ -0,0 +1,29 @@ +import axios from 'axios'; +import { API_URL } from '@/shared/api/urls'; +import { resultify } from '@/shared/lib/resultify'; +import { CBDCAxiosError } from '@/shared/@types/error'; +import { + BillingChargeParams, + BillingChargeResponse +} from '../model/types'; +import { + useMutation, + UseMutationOptions +} from '@tanstack/react-query'; + +export const billingCharge = (params: BillingChargeParams) => { + return resultify( + axios.post(API_URL.billingDetail(), params), + ); +}; + +export const useBillingChargeMutation = (options?: UseMutationOptions) => { + const mutation = useMutation({ + ...options, + mutationFn: (params: BillingChargeParams) => billingCharge(params), + }); + + return { + ...mutation, + }; +}; diff --git a/src/entities/transaction/api/use-escrow-mail-resend-mutation.ts b/src/entities/transaction/api/use-escrow-mail-resend-mutation.ts new file mode 100644 index 0000000..b356dbc --- /dev/null +++ b/src/entities/transaction/api/use-escrow-mail-resend-mutation.ts @@ -0,0 +1,29 @@ +import axios from 'axios'; +import { API_URL } from '@/shared/api/urls'; +import { resultify } from '@/shared/lib/resultify'; +import { CBDCAxiosError } from '@/shared/@types/error'; +import { + EscrowMailResendParams, + EscrowMailResendResponse +} from '../model/types'; +import { + useMutation, + UseMutationOptions +} from '@tanstack/react-query'; + +export const escrowMailResend = (params: EscrowMailResendParams) => { + return resultify( + axios.post(API_URL.escrowMailResend(), params), + ); +}; + +export const useEscrowMailResendMutation = (options?: UseMutationOptions) => { + const mutation = useMutation({ + ...options, + mutationFn: (params: EscrowMailResendParams) => escrowMailResend(params), + }); + + return { + ...mutation, + }; +}; diff --git a/src/entities/transaction/model/types.ts b/src/entities/transaction/model/types.ts index 01736f6..bfecdb6 100644 --- a/src/entities/transaction/model/types.ts +++ b/src/entities/transaction/model/types.ts @@ -451,3 +451,22 @@ export interface CashReceiptManualIssueResponse { issueDateTime: string, issueResult: SuccessResult }; +export interface BillingChargeParams { + billKey: string; + productName: string; + productAmount: number | string; + orderNumber: string; + buyerName: string; + paymentRequestDate: string; + installmentMonth: string; +}; +export interface BillingChargeResponse { + +}; +export interface EscrowMailResendParams { + orderNumber?: string; + tid?: string; +}; +export interface EscrowMailResendResponse { + +}; \ No newline at end of file diff --git a/src/entities/transaction/ui/billing-list.tsx b/src/entities/transaction/ui/billing-list.tsx index 61c2403..ac0ac76 100644 --- a/src/entities/transaction/ui/billing-list.tsx +++ b/src/entities/transaction/ui/billing-list.tsx @@ -25,7 +25,7 @@ export const BillingList = ({ }; const onClickToNavigate = () => { - navigate(PATHS.transaction.billing.paymentRequest); + navigate(PATHS.transaction.billing.charge); }; return ( diff --git a/src/entities/transaction/ui/bottom-sheet-cash-receit-purpose-update.tsx b/src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx similarity index 92% rename from src/entities/transaction/ui/bottom-sheet-cash-receit-purpose-update.tsx rename to src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx index 71d5f83..7508e61 100644 --- a/src/entities/transaction/ui/bottom-sheet-cash-receit-purpose-update.tsx +++ b/src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx @@ -1,17 +1,17 @@ import { IMAGE_ROOT } from '@/shared/constants/common'; import { motion } from 'framer-motion'; -export interface BottomSheetCashReceitPurposeUpdateProps { +export interface CashReceitPurposeUpdateBottomSheetProps { setBottomSheetOn: (bottomSheetOn: boolean) => void; bottomSheetOn: boolean; callPurposeUpdate: () => void; }; -export const BottomSheetCashReceitPurposeUpdate = ({ +export const CashReceitPurposeUpdateBottomSheet = ({ setBottomSheetOn, bottomSheetOn, callPurposeUpdate -}: BottomSheetCashReceitPurposeUpdateProps) => { +}: CashReceitPurposeUpdateBottomSheetProps) => { const onClickToClose = () => { setBottomSheetOn(false); diff --git a/src/entities/transaction/ui/bottom-sheet-email.tsx b/src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx similarity index 62% rename from src/entities/transaction/ui/bottom-sheet-email.tsx rename to src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx index a12f1f8..380cde3 100644 --- a/src/entities/transaction/ui/bottom-sheet-email.tsx +++ b/src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx @@ -1,11 +1,42 @@ import { IMAGE_ROOT } from '@/shared/constants/common'; +import { motion } from 'framer-motion'; -export const BottomSheetEmail = () => { +export interface EscrowMailResendBottomSheetProps { + setBottomSheetOn: (bottomSheetOn: boolean) => void; + bottomSheetOn: boolean; + callMailResend: () => void; +}; + +export const EscrowMailResendBottomSheet = ({ + setBottomSheetOn, + bottomSheetOn, + callMailResend +}: EscrowMailResendBottomSheetProps) => { + + const onClickToClose = () => { + setBottomSheetOn(false); + }; + const onClickToMailResend = () => { + callMailResend(); + }; + + const variants = { + hidden: { y: '100%' }, + visible: { y: '0%' }, + }; return ( <> -
-
+ { (bottomSheetOn) && +
+ } +

이메일 주소를 선택하세요

@@ -16,6 +47,7 @@ export const BottomSheetEmail = () => { 닫기 onClickToClose() } />
@@ -27,7 +59,7 @@ export const BottomSheetEmail = () => {
메일
@@ -54,10 +86,10 @@ export const BottomSheetEmail = () => {
-
+ ); }; \ No newline at end of file diff --git a/src/pages/transaction/billing/payment-request-page.tsx b/src/pages/transaction/billing/charge-page.tsx similarity index 55% rename from src/pages/transaction/billing/payment-request-page.tsx rename to src/pages/transaction/billing/charge-page.tsx index 31825c1..5b33abc 100644 --- a/src/pages/transaction/billing/payment-request-page.tsx +++ b/src/pages/transaction/billing/charge-page.tsx @@ -1,7 +1,9 @@ +import { ChangeEvent, useState } from 'react'; import { PATHS } from '@/shared/constants/paths'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { HeaderType } from '@/entities/common/model/types'; +import { useBillingChargeMutation } from '@/entities/transaction/api/use-billing-charge-mutation'; import { useSetOnBack, useSetHeaderTitle, @@ -9,9 +11,17 @@ import { useSetFooterMode } from '@/widgets/sub-layout/use-sub-layout'; -export const BillingPaymentRequestPage = () => { +export const BillingChargePage = () => { const { navigate } = useNavigate(); + const [billKey, setBillKey] = useState('BIKYvattest01m'); + const [productName, setProductName] = useState('테스트상품123'); + const [productAmount, setProductAmount] = useState(1000000); + const [orderNumber, setOrderNumber] = useState('P146733723'); + const [buyerName, setBuyerName] = useState('김테스트'); + const [paymentRequestDate, setPaymentRequestDate] = useState('2025-06-08'); + const [installmentMonth, setInstallmentMonth] = useState('00'); + useSetHeaderTitle('빌링 결제 신청'); useSetHeaderType(HeaderType.RightClose); useSetOnBack(() => { @@ -19,6 +29,52 @@ export const BillingPaymentRequestPage = () => { }); useSetFooterMode(false); + const { mutateAsync: billingCharge } = useBillingChargeMutation(); + + const onClickToBillingCharge = () => { + let params = { + billKey: billKey, + productName: productName, + productAmount: productAmount, + orderNumber: orderNumber, + buyerName: buyerName, + paymentRequestDate: paymentRequestDate, + installmentMonth: installmentMonth + }; + billingCharge(params).then((rs) => { + console.log(rs); + alert('성공') + navigate(PATHS.transaction.billing.list); + }); + }; + + const makeInstallmentMonthSelect = () => { + let rs = []; + + rs.push( + + ); + rs.push( + + ); + for(let i=2;i<=24;i++){ + let val = (i < 10)? '0'+i: ''+i; + rs.push( + + ); + }; + return rs; + }; + return ( <>
@@ -26,15 +82,14 @@ export const BillingPaymentRequestPage = () => {
결제 정보 입력
-
빌키 *
@@ -43,7 +98,8 @@ export const BillingPaymentRequestPage = () => {
) => setProductName(e.target.value) } />
@@ -52,7 +108,8 @@ export const BillingPaymentRequestPage = () => {
) => setProductAmount(e.target.value) } />
@@ -61,7 +118,8 @@ export const BillingPaymentRequestPage = () => {
) => setOrderNumber(e.target.value) } />
@@ -70,7 +128,8 @@ export const BillingPaymentRequestPage = () => {
) => setBuyerName(e.target.value) } />
@@ -81,8 +140,8 @@ export const BillingPaymentRequestPage = () => {
- +
diff --git a/src/pages/transaction/cash-receipt/detail-page.tsx b/src/pages/transaction/cash-receipt/detail-page.tsx index b3e369b..48db671 100644 --- a/src/pages/transaction/cash-receipt/detail-page.tsx +++ b/src/pages/transaction/cash-receipt/detail-page.tsx @@ -21,7 +21,7 @@ import { useSetHeaderType, useSetFooterMode } from '@/widgets/sub-layout/use-sub-layout'; -import { BottomSheetCashReceitPurposeUpdate } from '@/entities/transaction/ui/bottom-sheet-cash-receit-purpose-update'; +import { CashReceitPurposeUpdateBottomSheet } from '@/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet'; import { useCashReceiptPurposeUpdateMutation } from '@/entities/transaction/api/use-cash-receipt-purpose-update'; export const CashReceiptDetailPage = () => { @@ -116,11 +116,11 @@ export const CashReceiptDetailPage = () => {
- + > ); }; \ No newline at end of file diff --git a/src/pages/transaction/escrow/detail-page.tsx b/src/pages/transaction/escrow/detail-page.tsx index cf658f6..797a32e 100644 --- a/src/pages/transaction/escrow/detail-page.tsx +++ b/src/pages/transaction/escrow/detail-page.tsx @@ -28,6 +28,8 @@ import { useSetHeaderType, useSetFooterMode } from '@/widgets/sub-layout/use-sub-layout'; +import { EscrowMailResendBottomSheet } from '@/entities/transaction/ui/escrow-mail-resend-bottom-sheet'; +import { useEscrowMailResendMutation } from '@/entities/transaction/api/use-escrow-mail-resend-mutation'; export const EscrowDetailPage = () => { const { navigate } = useNavigate(); @@ -45,7 +47,10 @@ export const EscrowDetailPage = () => { const [showPaymentInfo, setShowPaymentInfo] = useState(false); const [showTransactionInfo, setShowTransactionInfo] = useState(false); const [showSettlementInfo, setShowSettlementInfo] = useState(false); - + const [bottomSheetOn, setBottomSheetOn] = useState(false); + + const [orderNumber, setOrderNumber] = useState(); + const [tid, setTid] = useState(); useSetHeaderTitle('에스크로 상세'); useSetHeaderType(HeaderType.RightClose); @@ -54,23 +59,41 @@ export const EscrowDetailPage = () => { }); useSetFooterMode(false); - const { mutateAsync: escroDetail } = useEscrowDetailMutation(); + const { mutateAsync: escrowDetail } = useEscrowDetailMutation(); + const { mutateAsync: escrowMailResend } = useEscrowMailResendMutation() const callDetail = () => { let escroDetailParams: EscrowDetailParams = { issueNumber: location?.state.issueNumber, }; - escroDetail(escroDetailParams).then((rs: DetailResponse) => { + escrowDetail(escroDetailParams).then((rs: DetailResponse) => { setImportantInfo(rs.importantInfo); setEscrowInfo(rs.escrowInfo); setPaymentInfo(rs.paymentInfo); setTransactionInfo(rs.transactionInfo); setSettlementInfo(rs.settlementInfo); + + setOrderNumber(rs.importantInfo?.ordNo); + setTid(rs.importantInfo?.tid); }); }; useEffect(() => { callDetail(); }, []); + + const onClickToShowMailResend = () => { + setBottomSheetOn(true); + }; + + const callMailResend = () => { + let params = { + orderNumber: orderNumber, + tid: tid, + }; + escrowMailResend(params).then((rs: any) => { + console.log(rs); + }); + }; const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => { if(infoWrapKey === InfoWrapKeys.Amount){ @@ -136,9 +159,20 @@ export const EscrowDetailPage = () => {
+
+ +
+ ); }; \ No newline at end of file diff --git a/src/pages/transaction/transaction-pages.tsx b/src/pages/transaction/transaction-pages.tsx index a8b1c1b..cafc6b1 100644 --- a/src/pages/transaction/transaction-pages.tsx +++ b/src/pages/transaction/transaction-pages.tsx @@ -11,7 +11,7 @@ import { EscrowListPage } from './escrow/list-page'; import { EscrowDetailPage } from './escrow/detail-page'; import { BillingListPage } from './billing/list-page'; import { BillingDetailPage } from './billing/detail-page'; -import { BillingPaymentRequestPage } from './billing/payment-request-page'; +import { BillingChargePage } from './billing/charge-page'; export const TransactionPages = () => { @@ -35,7 +35,7 @@ export const TransactionPages = () => { } /> } /> - } /> + } /> diff --git a/src/shared/api/urls.ts b/src/shared/api/urls.ts index 718b01e..34f839f 100644 --- a/src/shared/api/urls.ts +++ b/src/shared/api/urls.ts @@ -154,7 +154,7 @@ export const API_URL = { // POST: 에스크로 목록 상세 조회 return `${API_BASE_URL}/api/v1/escrows/detail`; }, - escroMailResend: () => { + escrowMailResend: () => { // POST: 에스크로 메일 재발송 return `${API_BASE_URL}/api/v1/escrows/mail/resend`; }, diff --git a/src/shared/constants/paths.ts b/src/shared/constants/paths.ts index 2ba693b..139eb0b 100644 --- a/src/shared/constants/paths.ts +++ b/src/shared/constants/paths.ts @@ -65,9 +65,9 @@ export const PATHS: RouteNamesType = { `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.billing.base}`, ROUTE_NAMES.transaction.billing.detail, ), - paymentRequest: generatePath( + charge: generatePath( `${ROUTE_NAMES.transaction.base}${ROUTE_NAMES.transaction.billing.base}`, - ROUTE_NAMES.transaction.billing.paymentRequest, + ROUTE_NAMES.transaction.billing.charge, ), } }, diff --git a/src/shared/constants/route-names.ts b/src/shared/constants/route-names.ts index 289ffa3..4478733 100644 --- a/src/shared/constants/route-names.ts +++ b/src/shared/constants/route-names.ts @@ -23,7 +23,7 @@ export const ROUTE_NAMES = { base: '/billing/*', list: 'list', detail: 'detail', - paymentRequest: 'payment-request', + charge: 'charge', } }, settlement: { diff --git a/src/shared/ui/assets/css/style.css b/src/shared/ui/assets/css/style.css index 8a5b14e..55b763c 100644 --- a/src/shared/ui/assets/css/style.css +++ b/src/shared/ui/assets/css/style.css @@ -105,7 +105,11 @@ body {} } .ht-20 {height: 20px !important;} +.pt-10 {padding-top: 10px !important;} +.pt-16 {padding-top: 16px !important;} .pt-20 {padding-top: 20px !important;} +.pt-30 {padding-top: 30px !important;} +.pt-46 {padding-top: 46px !important;} .pb-120 {padding-bottom: 120px !important;} .mt-30 {margin-top: 30px !important;} @@ -114,6 +118,7 @@ body {} .mt-10 {margin-top: 10px !important;} .mb-16 {margin-bottom: 16px !important;} .mb-20 {margin-bottom: 20px !important;} +.mb-30 {margin-bottom: 30px !important;} .mr-0 {margin-right: 0px !important;} .mr-10 {margin-right: 10px !important;} @@ -127,10 +132,10 @@ body {} text-align: right; } -.flex-1 {flex: 1;} -.flex-2 {flex: 2;} -.flex-3 {flex: 3;} -.flex-4 {flex: 4;} +.flex-1 {flex: 1; min-width: inherit !important;} +.flex-2 {flex: 2; min-width: inherit !important;} +.flex-3 {flex: 3; min-width: inherit !important;} +.flex-4 {flex: 4; min-width: inherit !important;} /* layout */ @@ -147,6 +152,18 @@ header { z-index: 1000; } +.wrapper.bg-blue { + background: var(--color-F4F8FF); +} + +.wrapper.bg-blue header { + background: transparent; +} + +.wrapper.bg-blue header .heading-select { + background: transparent; +} + .header-content { display: flex; justify-content: space-between; @@ -231,12 +248,12 @@ main { padding-bottom: 70px; /* 하단 탭바 공간 확보 */ } -main.pop { - padding-bottom: 0; +main.pop, main.pb-0 { + padding-bottom: 0 !important; } main.full-height { - padding-bottom: 0; + padding-bottom: 0 !important; } .lnb { @@ -352,15 +369,20 @@ footer { background: #F4F8FF; } +main.pb-0 .tab-pane { + min-height: inherit; +} + .tab-pane { + position: relative; display: none; padding: 1rem; min-height: calc(100vh - 120px); box-sizing: border-box; } + .tab-pane.sub { - padding-top: 0!important; - padding-bottom: 60px; + padding-bottom: 60px !important; } .tab-pane.active { @@ -391,6 +413,10 @@ footer { -ms-overflow-style: none; /* Internet Explorer 10+ */ } +.flex-wrap { + flex-wrap: wrap; +} + .swiper-wrapper::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } @@ -490,7 +516,6 @@ footer { .day-tab-btn { padding: 2px 16px; - /* border: 1px solid var(--color-E5E5E5); */ background: var(--color-white); color: #999; border-radius: 6px; @@ -532,7 +557,7 @@ footer { font-size: var(--fs-20); font-weight: var(--fw-700); color: #000; - margin-top: 20px; + margin-top: 16px; } .won01 { @@ -607,7 +632,7 @@ footer { /* Heading */ h3 { - font-size: var(--fs-18); + font-size: var(--fs-20); font-weight: var(--fw-700); color: var(--color-111111); } @@ -630,7 +655,7 @@ input { appearance:none; height: 40px; font-size: var(--fs-15); - color: var(--color-111111); + color: var(--color-2D3436); border: none; outline: 1px solid rgba(217, 217, 217, 1); padding: 6px 12px; @@ -686,13 +711,15 @@ input:disabled { background: #f5f5f5; } +input:disabled + button img {opacity: .3;} + input[readonly] { color: var(--color-2D3436); - background: var(--color-white); + background: #f5f5f5; } input[readonly] + button.date-btn { - opacity: 1; + opacity: .3; } input::placeholder { @@ -793,9 +820,6 @@ textarea { textarea:focus { outline: 1px solid var(--color-111111); - /* border-color: var(--input-border-focus); - outline: none; - box-shadow: 0 0 0 3px rgba(11, 102, 195, 0.2); */ } textarea[disabled] { @@ -830,10 +854,10 @@ select::-ms-expand { select { height: 40px; - padding: 6px 40px 6px 12px; + padding: 6px 35px 6px 12px; border: 0; border: 1px solid var(--color-CCCCCC); - color: var(--color-111111); + color: var(--color-2D3436); font-size: var(--fs-15); border-radius: 8px; -moz-border-radius: 6px; @@ -854,7 +878,7 @@ select.heading-select:active { } select:disabled { - background-color: #f9f9f9; + background-color: #f5f5f5; } /* link */ @@ -976,13 +1000,6 @@ button:disabled { border: 1px solid #999; } -/* .btn-exel { - padding-left: 36px; - padding-right: 10px; - background: url("../images/ico_excel.svg") no-repeat left 10px center; -} */ - - /* checkbox */ .check_box { @@ -996,7 +1013,7 @@ button:disabled { .check_box label { position: absolute; left: 0; - top: 3px; + top: 2px; cursor: pointer; } @@ -1093,6 +1110,11 @@ input[type="radio"] { /* dashboard */ /* 진행률 표시줄 스타일 */ + +.issue-progress { + margin-top: 10px; +} + .progressbar { width: 100%; padding: 1rem 0 0 0; @@ -1102,7 +1124,7 @@ input[type="radio"] { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 6px; + margin-bottom: 8px; } .progress-title { @@ -1153,7 +1175,8 @@ input[type="radio"] { font-size: var(--fs-14); color: var(--color-111111); font-weight: var(--fw-400); - margin-top: 10px; + margin-top: 12px; + text-align: right; } .remain-limit strong { @@ -1248,8 +1271,7 @@ input[type="radio"] { .notice-box { background: var(--color-white); - margin-top: 1rem; - padding-bottom: 26px; + padding-bottom: 1rem; border-radius: 12px; } @@ -1262,7 +1284,7 @@ input[type="radio"] { display: flex; align-items: center; justify-content: space-between; - padding: 1rem; + padding: 1.188rem 1rem; border-bottom: 1px solid #eaeaea; cursor: pointer; transition: background-color 0.2s ease; @@ -1335,7 +1357,7 @@ input[type="radio"] { } .today-sales.mt-sty { - margin-top: 0.8rem !important; + margin-top: 0.7rem !important; } .two-account { @@ -1364,7 +1386,7 @@ input[type="radio"] { .ranking ul { display: block; - margin-top: 1rem; + margin-top: 12px; } .ranking ul li { @@ -1419,7 +1441,7 @@ input[type="radio"] { width: 100%; height: 100%; background: #fff; - z-index: 9999; + z-index: 2000; display: none; overflow-y: auto; } @@ -1464,10 +1486,10 @@ input[type="radio"] { } .option-list { - padding: 16px 10px; + padding: 0 10px; display: flex; flex-direction: column; - gap: 28px; + gap: 16px; } .option-list-nopadding { @@ -1487,7 +1509,7 @@ input[type="radio"] { } .opt-field.mt_top { - margin-top: -20px; + margin-top: -10px; } .opt-label { @@ -1503,7 +1525,7 @@ input[type="radio"] { .opt-controls { display: flex; align-items: center; - gap: 10px; + gap: 12px; flex-wrap: nowrap; } @@ -1568,6 +1590,14 @@ input[type="radio"] { width: 110px; } +.w-120 { + width: 120px; +} + +.w-130 { + width: 125px; +} + .w-140 { width: 140px; } @@ -1889,7 +1919,7 @@ input[type="radio"] { /* 요약 섹션 */ .summary-section { - padding: 30px 26px; + padding: 0 26px 30px 26px; margin-left: -16px; margin-right: -16px; border-bottom: 1px solid #e6e6e6; @@ -1903,7 +1933,7 @@ input[type="radio"] { font-size: var(--fs-16); color: var(--color-111111); font-weight: var(--fw-700); - margin-bottom: 3px; + margin-bottom: 1px; } .summary-label.label { @@ -1912,11 +1942,13 @@ input[type="radio"] { /* subTab (정산달력/정산내역) */ .subTab { + position: absolute; + left: 0; + right: 0; + top: 0; display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #e6e6e6; - margin-left: -26px; - margin-right: -26px; width: calc(100% + 52px); max-width: 100vw; box-sizing: border-box; @@ -1943,7 +1975,7 @@ input[type="radio"] { display: flex; justify-content: space-between; align-items: center; - margin-bottom: 20px; + margin-bottom: 16px; } /* Place button right next to amount-text for divTop variant */ @@ -2008,7 +2040,7 @@ input[type="radio"] { .summary-details { display: flex; flex-direction: column; - gap: 6px; + gap: 2px; margin-bottom: 10px; } @@ -2030,7 +2062,7 @@ input[type="radio"] { display: flex; justify-content: space-between; align-items: center; - padding: 16px 10px; + padding: 15px 10px; margin-bottom: 10px; } @@ -2054,8 +2086,8 @@ input[type="radio"] { } .sort-divider { - color: var(--color-CCCCCC); - font-size: var(--fs-12); + color: var(--color-d6d6d6); + font-size: var(--fs-13); } @@ -2086,7 +2118,7 @@ input[type="radio"] { } .transaction-status { - margin-right: 12px; + margin-right: 10px; margin-top: 8px; } @@ -2129,9 +2161,12 @@ input[type="radio"] { } .transaction-details .separator { + position: relative; + top: 1px; color: var(--color-d6d6d6); font-size: 13px; font-weight: 100; + padding: 0 2px; } .transaction-amount { @@ -2268,6 +2303,7 @@ div .credit-period { margin: 0; padding: 16px; background-color: var(--color-F4F8FF); + border-radius: 6px; } .summary-extend .summary-amount-list .bdr-6 { @@ -2278,7 +2314,7 @@ div .credit-period { display: flex; justify-content: space-between; align-items: center; - padding: 3px 0; + padding: 2px 0; font-size: var(--fs-15); } @@ -2297,7 +2333,7 @@ div .credit-period { } .summary-extend .summary-amount-item .value { - color: var(--color-111111); + color: var(--color-2D3436); font-weight: var(--fw-500); font-size: var(--fs-16); } @@ -2337,14 +2373,14 @@ div .credit-period { /* 알림함 */ .sub-wrap { width: 100%; - padding: 20px 26px 20px; + padding: 16px 26px; overflow: auto; } .notice-tabs { display: flex; gap: 8px; - margin-bottom: 22px; + margin-bottom: 16px; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; @@ -2375,7 +2411,7 @@ div .credit-period { .tab36.on { background: var(--color-3E6AFC); - color: #fff; + color: var(--color-white); border-color: var(--color-3E6AFC); } @@ -2383,14 +2419,21 @@ div .credit-period { display: flex; justify-content: center; padding: 14px 16px; - margin-top: 10px; - background: #F4F8FF; + margin-top: 26px; + background: var(--color-F4F8FF); border-radius: 8px; } .notice-tip { - font-size: 14px !important; - color: #2D3436 !important; + position: relative; + font-size: var(--fs-14) !important; + color: var(--color-2D3436) !important; +} + +.notice-tip span { + position: absolute; + left: 0; + top: 0; } .sub .notice-item { @@ -2399,41 +2442,37 @@ div .credit-period { } /* 공지사항 상세 (Figma 1651:3135) */ -.notice-detail{ - /* padding:20px 0 0 */ -} - .notice-detail__title{ - font-size:var(--fs-20); - font-weight:var(--fw-600); - line-height:1.4; - color:var(--color-2D3436); - margin:0 0 10px + font-size: var(--fs-20); + font-weight: var(--fw-600); + color: var(--color-2D3436); + margin: 0 0 10px } .notice-detail__meta{ font-size:var(--fs-17); - color:#999; - margin-bottom:30px + color: var(--color-999999); + margin-bottom: 20px } .notice-detail__divider{ - height:1px; - background:#EAEAEA; - margin-bottom:30px + height: 1px; + background: var(--color-EaEaEa); + margin-bottom: 30px } .notice-detail__body{ - white-space:pre-line; - font-size:var(--fs-17); - line-height:1.4; - color:var(--color-2D3436) + white-space: pre-line; + font-size: var(--fs-17); + line-height: 1.3; + color: var(--color-2D3436) } .notice-alert { padding: 14px 16px; background: var(--color-F4F8FF); font-size: var(--fs-14); color: var(--color-2D3436); + margin-bottom: 26px; } /* 설정 (Figma 1651:3409) */ @@ -2467,7 +2506,7 @@ div .credit-period { font-size: var(--fs-16); font-weight: var(--fw-700); color: var(--color-2D3436); - padding-bottom: 16px; + padding-bottom: 10px; } .settings-row { @@ -2489,15 +2528,8 @@ div .credit-period { background: url("../images/Forward.svg") no-repeat right center; } -.settings-row-title { - font-size: var(--fs-16); - color: var(--color-2D3436); -} - .bd-style { - font-size: var(--fs-16); - font-weight: var(--fw-700); - color: var(--color-2D3436); + font-weight: var(--fw-700) !important; } .settings-switch { @@ -2608,8 +2640,8 @@ div .credit-period { .txn-doc{ display: flex; align-items: center; - padding: 10px 0 0; - margin-bottom: 20px; + padding: 30px 0 0; + margin-bottom: 5px; } .doc-btn{ @@ -2625,7 +2657,7 @@ div .credit-period { .txn-divider{ border-bottom: 1px solid #EAEAEA; - margin: 0; + margin-top: 16px; } .txn-divider.minus { @@ -2660,7 +2692,7 @@ div .credit-period { justify-content: space-between; align-items: start; gap: 10px; - padding: 0 0 20px; + padding: 0 0 19px; flex-wrap: wrap; } @@ -2673,7 +2705,6 @@ div .credit-period { } .kv-row .k{ - min-width: 32%; font-size: var(--fs-17); color: var(--color-666666) } @@ -2693,6 +2724,7 @@ div .credit-period { color: var(--color-2D3436); font-weight: var(--fw-500); text-align: right; + max-width: 60%; } .amount-expand { @@ -2703,7 +2735,6 @@ div .credit-period { } .amount-info { - margin-top: 30px; background: var(--color-F4F8FF); padding: 16px; border-radius: 6px; @@ -2731,7 +2762,7 @@ div .credit-period { .amount-item .value { font-size: var(--fs-16); font-weight: var(--fw-500); - color: var(--color-111111); + color: var(--color-2D3436); text-align: right; } @@ -2739,6 +2770,35 @@ div .credit-period { color: #000; } +/* 토스트바 */ +.toast-bar { + position: fixed; + left: 0; + right: 0; + bottom: 6%; + display: flex; + justify-content: center; + pointer-events: none; + z-index: 2100; +} +.toast-bar .toast { + max-width: 358px; + width: calc(100% - 32px); + background: rgba(45, 52, 54, 0.8); + border-radius: 8px; + padding: 16px; + display: flex; + justify-content: center; + align-items: center; + pointer-events: auto; +} +.toast-bar .toast-text { + font-size: var(--fs-16); + font-weight: var(--fw-500); + color: var(--color-white); + text-align: center; +} + /* 바텀시트 이메일 선택 */ .bg-dim { position: fixed; @@ -2772,11 +2832,15 @@ div .credit-period { margin-bottom: 0; } +.bottomsheet.banner .bottomsheet-content img { + width: 100%; +} + .bottom-btn { display: flex; justify-content: space-between; align-items: center; - padding: 5px 26px 16px 26px; + padding: 5px 26px 20px 26px; } .bottom-btn span { @@ -2787,7 +2851,7 @@ div .credit-period { } .bottomsheet-header { - margin-bottom: 26px; + margin-bottom: 30px; } .bottomsheet-title { @@ -2834,7 +2898,7 @@ div .credit-period { .bottomsheet-content { position: relative; - margin-bottom: 24px; + margin-bottom: 30px; } .banner-page { @@ -3061,9 +3125,8 @@ div .credit-period { /* 부분취소 테이블 */ .tb_both { border-bottom: 1px solid #D9D9D9; - /* border-radius: 8px; */ - margin-top: 10px; - padding: 7px 0 30px 0; + margin-top: 16px; + padding: 0 0 30px 0; } .partial-cancel-table { width: 100%; @@ -3213,7 +3276,7 @@ div .credit-period { font-size: var(--fs-20) !important; font-weight: var(--fw-700); color: var(--color-2D3436); - padding: 0; + padding: 0 0 10px 0; margin-bottom: 0 !important; } @@ -3303,7 +3366,7 @@ div .credit-period { font-size: var(--fs-20); font-weight: var(--fw-700); color: var(--color-2D3436); - padding: 0; + padding: 0 0 5px 0; } .billing-form { @@ -3318,11 +3381,11 @@ div .credit-period { } .gap-16 { - gap: 16px; + gap: 16px !important; } .gap-30 { - gap: 30px; + gap: 30px !important; } .billing-row { @@ -3355,7 +3418,7 @@ div .credit-period { text-align: right; } .billing-field .date input, .billing-field select { - padding-right: 40px; + padding-right: 35px; } .billing-inline { @@ -3373,7 +3436,7 @@ div .credit-period { /* 정산달력 */ .calendar-wrap { - padding: 30px 10px 0 10px; + padding: 0 10px 0 10px; } .top-select, .top-select select { @@ -3554,7 +3617,7 @@ span.scheduled { } .calendar-wrap .settlement-list { - padding: 16px 0 30px; + padding: 16px 0; } .calendar-wrap .settlement-item { @@ -3601,7 +3664,7 @@ span.scheduled { /* 부가서비스 소개 (option-list 하위 전용) */ .ing-list { - padding: 16px 10px; + padding: 10px; display: flex; flex-direction: column; gap: 16px; @@ -3796,7 +3859,7 @@ ul.txn-amount-detail li span:last-child { font-size: var(--fs-17); font-weight: var(--fw-500); color: var(--color-2D3436); - padding-bottom: 26px; + padding-bottom: 30px; padding-left: 15px; } @@ -3818,6 +3881,7 @@ ul.txn-amount-detail li span:last-child { background: #F5F5F5; border-radius: 8px; margin-bottom: 8px; + margin-top: 26px; } .card-fee-box .label { @@ -3907,6 +3971,8 @@ ul.txn-amount-detail li span:last-child { flex-direction: column; margin-left: -26px; margin-right: -26px; + max-height: 300px; + overflow-y: auto; } .card-option { @@ -3973,7 +4039,7 @@ ul.txn-amount-detail li span:last-child { padding: 10px 16px; background: #F5F5F5; border-radius: 8px; - margin-bottom: 20px; + margin-bottom: 26px; } .fee-cycle .card-fee-box .label { @@ -4057,7 +4123,7 @@ ul.txn-amount-detail li span:last-child { .notify-bar span { display: block; width: 100%; - padding: 1px 16px 1px 30px; + padding: 0 16px 0 30px; font-size: var(--fs-14); color: var(--color-2D3436); } @@ -4078,6 +4144,9 @@ ul.txn-amount-detail li span:last-child { } /* 가맹점 정보 화면 전용 */ +.merchant-info { + padding: 0 10px; +} .merchant-info .section + .section { margin-top: 10px; } @@ -4085,10 +4154,11 @@ ul.txn-amount-detail li span:last-child { .merchant-info .section-title { font-size: var(--fs-17); font-weight: var(--fw-700); - padding: 4px 0 20px 0; - display:flex; - align-items:center; - gap:6px; + padding: 2px 0 2px 0; + display: flex; + align-items: center; + gap: 6px; + margin-bottom: 16px; } .merchant-info .kv-list { @@ -4125,7 +4195,7 @@ ul.txn-amount-detail li span:last-child { .pwd-buttons { display: grid; grid-template-columns: 1fr; - gap: 10px; + gap: 20px; } .pwd-btn { width: 100%; @@ -4249,14 +4319,14 @@ ul.txn-amount-detail li span:last-child { .ic20.plus { width: 20px; height: 20px; - background: url('../images/ico_menu_plus.svg') no-repeat center center; + background: url('../images/ico_menu_plus_no.svg') no-repeat center center; } .icon-btn.minus { width: 36px; height: 36px; border-radius: 6px; - background: #F5F5F5 url('../images/ico_app_delete.svg') no-repeat center center; + background: #F5F5F5 url('../images/ico_del_minus.svg') no-repeat center center; } .notice-bar { @@ -4346,9 +4416,9 @@ ul.txn-amount-detail li span:last-child { } .settings-row-title { - color: var(--color-777777); - font-size: var(--fs-15); - font-weight: var(--fw-500); + color: var(--color-2D3436); + font-size: var(--fs-16); + font-weight: var(--fw-400); } .bd-sub.dot { @@ -4371,6 +4441,10 @@ ul.txn-amount-detail li span:last-child { gap: 16px; } +/* .user-add.gap-30 { + gap: 30px +} */ + .user-add.info { display: flex; flex-direction: column; @@ -4386,7 +4460,7 @@ ul.txn-amount-detail li span:last-child { .ua-label { font-size: var(--fs-16); - font-weight: var(--fw-700); + font-weight: var(--fw-500); color: var(--color-2D3436); } @@ -4402,7 +4476,7 @@ ul.txn-amount-detail li span:last-child { .ua-help.error { color: var(--color-EB5757); - margin-top: -10px; + margin-top: -20px; } .ua-desc .ua-title { @@ -4445,7 +4519,7 @@ ul.txn-amount-detail li span:last-child { } .ing-list.add { - gap: 30px; + gap: 40px; } /* 세금 계산서_리스트 (80) */ @@ -4683,7 +4757,7 @@ ul.txn-amount-detail li span:last-child { .summary-section.no-border { /* ensure same as 94 page */ border-bottom: 0; - padding-bottom: 16px; + padding-bottom: 0; } /* 95_SMS 결제 통보_재발송 bottomsheet */ @@ -4704,7 +4778,7 @@ ul.txn-amount-detail li span:last-child { background: #F5F5F5; border-radius: 10px; padding: 16px; - margin-bottom: 26px; + margin-bottom: 30px; } .resend-text { @@ -4718,9 +4792,9 @@ ul.txn-amount-detail li span:last-child { flex: 1; white-space: wrap; height: auto !important; - padding: 5px 0; + padding: 5px 10px; text-align: center; - line-height: 150% !important; + line-height: 1.4 !important; } /* 98 알림톡 결제 통보_서비스 설정_토스트포함 */ @@ -4838,6 +4912,7 @@ ul.txn-amount-detail li span:last-child { display: flex; align-items: center; gap: 10px; + color: var(--color-2D3436); } /* 101 링크결제_결제신청_2단계 */ @@ -4911,6 +4986,7 @@ ul.txn-amount-detail li span:last-child { .account-frame .credit-summary { margin-top: 26px; } + .account-frame .credit-summary .row { display: flex; flex-direction: column; @@ -4921,6 +4997,7 @@ ul.txn-amount-detail li span:last-child { font-size: var(--fs-16); margin-bottom: 6px; } + .account-frame .credit-summary .row > span { width: 100%; display: block; @@ -4949,30 +5026,38 @@ ul.txn-amount-detail li span:last-child { .transaction-details.gap-0 { gap: 0; } + /* 104 지급대행_상세 */ .pay-top { display: flex; flex-direction: column; gap: 0; - padding: 30px 10px 0; + padding: 10px 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 { + +.pay-top .num-store { + margin-top: 2px; +} + +.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; @@ -4981,20 +5066,24 @@ ul.txn-amount-detail li span:last-child { border-radius: 6px; background: #F4F8FF; } + .detail-divider { height: 1px; background: #EAEAEA; - margin: 26px -26px; + margin: 20px -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; @@ -5170,14 +5259,14 @@ ul.txn-amount-detail li span:last-child { .agree-desc { font-size: var(--fs-17); color: var(--color-2D3436); - padding-left: 16px; + padding-left: 22px; } .agree-desc::before { content: '●'; display: block; position: absolute; - left: 26px; + left: 32px; right: 0; font-size: 5px; } @@ -5206,8 +5295,7 @@ ul.txn-amount-detail li span:last-child { display: flex; flex-direction: column; gap: 16px; - padding-top: 16px; - padding-bottom: 26px; + padding: 16px 10px 26px 10px } /* 113 정산매장 */ @@ -5217,6 +5305,7 @@ ul.txn-amount-detail li span:last-child { .store-filter { width: 100%; + margin-bottom: 26px; } .store-input { @@ -5237,7 +5326,7 @@ ul.txn-amount-detail li span:last-child { /* 114 공지사항 */ .notice114 { - padding: 16px 10px 20px 10px; + padding: 0 10px; } .notice-controls { @@ -5383,7 +5472,7 @@ ul.txn-amount-detail li span:last-child { /* 115 자주 묻는 질문 */ .faq-section { - padding: 20px 10px 16px 10px; + padding: 0 10px; } .faq-search { position: relative; @@ -5458,7 +5547,7 @@ ul.txn-amount-detail li span:last-child { /* 116 자주 묻는 질문_상세 */ .faq-detail { - padding: 20px 10px 30px 10px; + padding: 0 10px; } .faq-detail__title { @@ -5475,15 +5564,13 @@ ul.txn-amount-detail li span:last-child { } .faq-detail__body { - white-space: pre-line; font-size: var(--fs-17); - line-height: 1.4; color: var(--color-2D3436); } /* 117 1:1 문의 */ .inq117 { - padding: 20px 10px 16px 10px; + padding: 0 10px; } .inq-merchant { @@ -5723,4 +5810,5 @@ ul.txn-amount-detail li span:last-child { border-radius: 8px; padding: 12px; box-sizing: border-box; -} \ No newline at end of file +} + diff --git a/src/shared/ui/assets/images/ico_del_minus.svg b/src/shared/ui/assets/images/ico_del_minus.svg new file mode 100644 index 0000000..1a67536 --- /dev/null +++ b/src/shared/ui/assets/images/ico_del_minus.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/ui/assets/images/ico_menu_plus_no.svg b/src/shared/ui/assets/images/ico_menu_plus_no.svg new file mode 100644 index 0000000..8b86aca --- /dev/null +++ b/src/shared/ui/assets/images/ico_menu_plus_no.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/shared/ui/assets/images/icon_ing11.svg b/src/shared/ui/assets/images/icon_ing11.svg new file mode 100644 index 0000000..74eb248 --- /dev/null +++ b/src/shared/ui/assets/images/icon_ing11.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/shared/ui/assets/images/sample_banner_0.png b/src/shared/ui/assets/images/sample_banner_0.png new file mode 100644 index 0000000..b793423 Binary files /dev/null and b/src/shared/ui/assets/images/sample_banner_0.png differ diff --git a/src/shared/ui/assets/images/sample_banner_1.png b/src/shared/ui/assets/images/sample_banner_1.png new file mode 100644 index 0000000..0167924 Binary files /dev/null and b/src/shared/ui/assets/images/sample_banner_1.png differ