From 337ac1bf97da5fbb7caf6b8f69336ac1abb11d15 Mon Sep 17 00:00:00 2001 From: "focp212@naver.com" Date: Tue, 9 Sep 2025 09:46:01 +0900 Subject: [PATCH] =?UTF-8?q?=EC=B6=94=EA=B0=80=EC=9D=B4=EB=AF=B8=EC=A7=80?= =?UTF-8?q?=20/=20css=20=EC=88=98=EC=A0=95=20/=20=EA=B2=B0=EC=A0=9C=20?= =?UTF-8?q?=EC=A0=95=EB=B3=B4=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/images/ico_search_16.svg | 11 + public/images/mail_download.svg | 21 + public/images/mail_nicepay_logo.svg | 9 + public/images/mail_nicepay_logo_gray.svg | 9 + public/images/pay_21.svg | 10 + public/images/pay_22.svg | 8 + public/images/pay_23.svg | 7 + public/images/pay_24.svg | 12 + src/entities/payment/model/types.ts | 5 + src/entities/payment/ui/info-item.tsx | 34 ++ src/entities/payment/ui/info-wrap.tsx | 405 +++--------------- src/shared/ui/assets/css/style.css | 7 +- src/shared/ui/assets/images/mail_download.svg | 21 + .../ui/assets/images/mail_nicepay_logo.svg | 9 + .../assets/images/mail_nicepay_logo_gray.svg | 9 + 15 files changed, 231 insertions(+), 346 deletions(-) create mode 100644 public/images/ico_search_16.svg create mode 100644 public/images/mail_download.svg create mode 100644 public/images/mail_nicepay_logo.svg create mode 100644 public/images/mail_nicepay_logo_gray.svg create mode 100644 public/images/pay_21.svg create mode 100644 public/images/pay_22.svg create mode 100644 public/images/pay_23.svg create mode 100644 public/images/pay_24.svg create mode 100644 src/entities/payment/ui/info-item.tsx create mode 100644 src/shared/ui/assets/images/mail_download.svg create mode 100644 src/shared/ui/assets/images/mail_nicepay_logo.svg create mode 100644 src/shared/ui/assets/images/mail_nicepay_logo_gray.svg diff --git a/public/images/ico_search_16.svg b/public/images/ico_search_16.svg new file mode 100644 index 0000000..e5dc1e9 --- /dev/null +++ b/public/images/ico_search_16.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/images/mail_download.svg b/public/images/mail_download.svg new file mode 100644 index 0000000..1163cca --- /dev/null +++ b/public/images/mail_download.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/mail_nicepay_logo.svg b/public/images/mail_nicepay_logo.svg new file mode 100644 index 0000000..8a03e99 --- /dev/null +++ b/public/images/mail_nicepay_logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/mail_nicepay_logo_gray.svg b/public/images/mail_nicepay_logo_gray.svg new file mode 100644 index 0000000..d9f4b4e --- /dev/null +++ b/public/images/mail_nicepay_logo_gray.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/images/pay_21.svg b/public/images/pay_21.svg new file mode 100644 index 0000000..25cf43b --- /dev/null +++ b/public/images/pay_21.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/images/pay_22.svg b/public/images/pay_22.svg new file mode 100644 index 0000000..8ac914a --- /dev/null +++ b/public/images/pay_22.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/images/pay_23.svg b/public/images/pay_23.svg new file mode 100644 index 0000000..6ccfa1c --- /dev/null +++ b/public/images/pay_23.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/images/pay_24.svg b/public/images/pay_24.svg new file mode 100644 index 0000000..2f8e612 --- /dev/null +++ b/public/images/pay_24.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/entities/payment/model/types.ts b/src/entities/payment/model/types.ts index 484ab81..1386132 100644 --- a/src/entities/payment/model/types.ts +++ b/src/entities/payment/model/types.ts @@ -4,4 +4,9 @@ export enum PaymentTabKeys { }; export interface PaymentTabProps { activeTab: PaymentTabKeys; +}; +export interface InfoItemProps { + payName?: string; + payImage?: string; + infoLink?: string; }; \ No newline at end of file diff --git a/src/entities/payment/ui/info-item.tsx b/src/entities/payment/ui/info-item.tsx new file mode 100644 index 0000000..58e9f18 --- /dev/null +++ b/src/entities/payment/ui/info-item.tsx @@ -0,0 +1,34 @@ +import { InfoItemProps } from '../model/types'; + +export const InfoItem = ({ + payName, + payImage, + infoLink +}: InfoItemProps) => { + + const onClickToShow = () => { + if(!!infoLink){ + + } + }; + return ( + <> +
  • +
    +
    + { +
    + { payName } +
    + +
    • + + ) +}; \ No newline at end of file diff --git a/src/entities/payment/ui/info-wrap.tsx b/src/entities/payment/ui/info-wrap.tsx index 85ef15c..388fb31 100644 --- a/src/entities/payment/ui/info-wrap.tsx +++ b/src/entities/payment/ui/info-wrap.tsx @@ -1,361 +1,76 @@ import { IMAGE_ROOT } from "@/shared/constants/common"; +import { InfoItem } from "./info-item"; +import { InfoItemProps } from "../model/types"; export const InfoWrap = () => { + const list1 = [ + {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''}, + {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: ''}, + {payName: '네이버페이', payImage: 'pay_03.svg', infoLink: ''}, + {payName: '삼성페이', payImage: 'pay_04.svg', infoLink: ''}, + {payName: '계좌이체', payImage: 'pay_05.svg', infoLink: ''}, + {payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: ''}, + {payName: '문화상품권', payImage: 'pay_07.svg', infoLink: ''}, + {payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: ''}, + {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''}, + {payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: ''}, + {payName: '애플페이', payImage: 'pay_11.svg', infoLink: ''}, + {payName: '토스페이', payImage: 'pay_12.svg', infoLink: ''}, + {payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: ''}, + {payName: '리브페이', payImage: 'pay_14.svg', infoLink: ''}, + {payName: '대만결제', payImage: 'pay_15.svg', infoLink: ''}, + {payName: '티머니페이', payImage: 'pay_16.svg', infoLink: ''}, + {payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: ''}, + {payName: 'PAYU', payImage: 'pay_18.svg', infoLink: ''}, + {payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: ''}, + {payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: ''}, + {payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: ''}, + {payName: '가상계좌', payImage: 'pay_23.svg', infoLink: ''}, + {payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: ''}, + {payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: ''}, + ]; + + const list2 = [ + {payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''}, + {payName: 'SK PAY', payImage: 'pay_20.svg', infoLink: ''}, + {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''}, + {payName: '삼성페이(카드)', payImage: 'pay_04.svg', infoLink: ''}, + ]; + + const getList = (type: 'comission' | 'NoInterest') => { + let rs = []; + let arr: Array = []; + if(type === 'comission'){ + arr = list1; + } + else if(type === 'NoInterest'){ + arr = list2; + } + for(let i=0;i + ); + } + return rs; + } + + return ( <>
    서비스 이용, 수수료 및 정산주기
      -
    • -
      -
      - 신용카드 -
      - 신용카드 -
      - -
      • -
    • -
      -
      - 카카오페이 -
      - 카카오페이 -
      - -
      • -
    • -
      -
      - 네이버페이 -
      - 네이버페이 -
      - -
      • -
    • -
      -
      - 삼성페이 -
      - 삼성페이 -
      - -
      • -
    • -
      -
      - 계좌이체 -
      - 계좌이체 -
      - -
      • -
    • -
      -
      - 휴대폰결제 -
      - 휴대폰결제 -
      - -
      • -
    • -
      -
      - 문화상품권 -
      - 문화상품권 -
      - -
      • -
    • -
      -
      - SSG머니 -
      - SSG머니 -
      - -
      • -
    • -
      -
      - TV페이 -
      - TV페이 -
      - -
      • -
    • -
      -
      - 삼성페이(카드) -
      - 삼성페이(카드) -
      - -
      • -
    • -
      -
      - 애플페이 -
      - 애플페이 -
      - -
      • -
    • -
      -
      - 토스페이 -
      - 토스페이 -
      - -
      • -
    • -
      -
      - PAYCO -
      - PAYCO -
      - -
      • -
    • -
      -
      - 리브페이 -
      - 리브페이 -
      - -
      • -
    • -
      -
      - 대만결제 -
      - 대만결제 -
      - -
      • -
    • -
      -
      - 티머니페이 -
      - 티머니페이 -
      - -
      • -
    • -
      -
      - L.PAY -
      - L.PAY -
      - -
      • -
    • -
      -
      - PAYU -
      - PAYU -
      - -
      • -
    • -
      -
      - TW라인페이 -
      - TW라인페이 -
      - -
      • + { getList('comission') }
    가맹점 분담 무이자 정보
      -
    • -
      -
      - 신용카드 -
      - 신용카드 -
      - -
      • -
    • -
      -
      - SK PAY -
      - SK PAY -
      - -
      • -
    • -
      -
      - TV페이 -
      - TV페이 -
      - -
      • -
    • -
      -
      - 삼성페이(카드) -
      - 삼성페이(카드) -
      - -
      • + { getList('NoInterest') }
    diff --git a/src/shared/ui/assets/css/style.css b/src/shared/ui/assets/css/style.css index bbde3f6..8a5b14e 100644 --- a/src/shared/ui/assets/css/style.css +++ b/src/shared/ui/assets/css/style.css @@ -1,7 +1,6 @@ @charset "utf-8"; @import 'reset.css'; @import 'fonts.css'; -@import 'safearea.css'; :root { @@ -5681,6 +5680,7 @@ ul.txn-amount-detail li span:last-child { .inq-form { padding: 0 10px; } + .inq-field { display: grid; grid-template-columns: 90px 1fr; @@ -5688,17 +5688,20 @@ ul.txn-amount-detail li span:last-child { gap: 10px; padding-bottom: 16px; } + .inq-label { font-size: var(--fs-16); font-weight: var(--fw-500); color: var(--color-2D3436); } + .inq-label .red, .inq-text-label .red { color: var(--color-EB5757); } .inq-control input, .inq-control select { width: 100%; text-align: right; } + .inq-text { display: flex; flex-direction: column; @@ -5706,11 +5709,13 @@ ul.txn-amount-detail li span:last-child { padding: 0 0 30px 0; margin-top: 40px; } + .inq-text-label { font-size: var(--fs-16); font-weight: var(--fw-500); color: var(--color-2D3436); } + .inq-text-body textarea { width: 100%; min-height: 150px; diff --git a/src/shared/ui/assets/images/mail_download.svg b/src/shared/ui/assets/images/mail_download.svg new file mode 100644 index 0000000..1163cca --- /dev/null +++ b/src/shared/ui/assets/images/mail_download.svg @@ -0,0 +1,21 @@ + + + + + + + + + + + + + + + + + + + + + diff --git a/src/shared/ui/assets/images/mail_nicepay_logo.svg b/src/shared/ui/assets/images/mail_nicepay_logo.svg new file mode 100644 index 0000000..8a03e99 --- /dev/null +++ b/src/shared/ui/assets/images/mail_nicepay_logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/shared/ui/assets/images/mail_nicepay_logo_gray.svg b/src/shared/ui/assets/images/mail_nicepay_logo_gray.svg new file mode 100644 index 0000000..d9f4b4e --- /dev/null +++ b/src/shared/ui/assets/images/mail_nicepay_logo_gray.svg @@ -0,0 +1,9 @@ + + + + + + + + +