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

결제 정보 하단 시트 수정

Browse Source
This commit is contained in:
focp212@naver.com
2025-10-10 17:57:11 +09:00
parent a9439b5241
commit 005941bc8b
5 changed files with 120 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/entities/payment/ui/card-commission-bottom-sheet.tsx
View File

@@ -1,15 +1,26 @@
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant'; import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
import { GeneralTabItems, InstallmentTabItems, MoneyPointTabItems } from '../model/types';
export interface CardCommissionBottomSheetProps { export interface CardCommissionBottomSheetProps {
cardCommissionBottomSheetOn: boolean; cardCommissionBottomSheetOn: boolean;
setCardCommissionBottomSheetOn: (cardCommissionBottomSheetOn: boolean) => void; setCardCommissionBottomSheetOn: (cardCommissionBottomSheetOn: boolean) => void;
payType: number;
settlementPeriod?: string;
generalTabItems: Array<GeneralTabItems>,
installmentTabItems: Array<InstallmentTabItems>,
moneyPointTabItems: Array<MoneyPointTabItems>
}; };
export const CardCommissionBottomSheet = ({ export const CardCommissionBottomSheet = ({
cardCommissionBottomSheetOn, cardCommissionBottomSheetOn,
setCardCommissionBottomSheetOn setCardCommissionBottomSheetOn,
payType,
settlementPeriod,
generalTabItems,
installmentTabItems,
moneyPointTabItems
}: CardCommissionBottomSheetProps) => { }: CardCommissionBottomSheetProps) => {
const onClickToClose = () => { const onClickToClose = () => {
@@ -46,21 +57,27 @@ export const CardCommissionBottomSheet = ({
<div className="bottomsheet-content"> <div className="bottomsheet-content">
<div className="card-fee"> <div className="card-fee">
<div className="desc">정산주기 : 일일(+3일)</div> <div className="desc">정산주기 : { settlementPeriod }</div>
<div className="notice-tabs"> <div className="notice-tabs">
<button { (payType === 2 || payType === 3) &&
className="tab36 on" <button
type="button" className="tab36 on"
>일반</button> type="button"
<button >일반</button>
className="tab36" }
type="button" { (payType === 2 || payType === 3) &&
>무이자</button> <button
className="tab36"
type="button"
>무이자</button>
}
{ (payType === 3) &&
<button <button
className="tab36" className="tab36"
type="button" type="button"
>머니/포인트</button> >머니/포인트</button>
}
</div> </div>
<div className="card-fee-box"> <div className="card-fee-box">

15
src/entities/payment/ui/info-item.tsx
View File

@@ -7,7 +7,9 @@ export interface InfoItemProps {
payName?: string; payName?: string;
payImage?: string; payImage?: string;
infoLink?: string; infoLink?: string;
setNoInterestInfoBottomSheetOn?: (noInterestInfoBottomSheetOn: boolean) => void; payType?: number;
setPayType?: (payType: number) => void;
setBottomSheetOn?: (bottomSheetOn: boolean) => void;
}; };
export const InfoItem = ({ export const InfoItem = ({
@@ -15,12 +17,17 @@ export const InfoItem = ({
payName, payName,
payImage, payImage,
infoLink, infoLink,
setNoInterestInfoBottomSheetOn payType,
setPayType,
setBottomSheetOn
}: InfoItemProps) => { }: InfoItemProps) => {
const onClickToOpenBottomSheet = () => { const onClickToOpenBottomSheet = () => {
if(setNoInterestInfoBottomSheetOn){ if(setPayType && payType){
setNoInterestInfoBottomSheetOn(true); setPayType(payType);
}
if(setBottomSheetOn){
setBottomSheetOn(true);
} }
}; };
return ( return (

117
src/entities/payment/ui/info-wrap.tsx
View File

@@ -7,12 +7,12 @@ import { NoInterestInfoBottomSheet } from './no-interest-info-bottom-sheet';
import { usePaymentInstallmentDetailMutation } from '../api/use-payment-installment-detail-mutation'; import { usePaymentInstallmentDetailMutation } from '../api/use-payment-installment-detail-mutation';
import { import {
AccountTransferData, AccountTransferData,
GeneralTab, GeneralTabItems,
InstallmentData, InstallmentData,
InstallmentDetails, InstallmentDetails,
InstallmentTab, InstallmentTabItems,
MobilePaymentData, MobilePaymentData,
MoneyPointTab, MoneyPointTabItems,
OtherPaymentData, OtherPaymentData,
PaymentCardParams, PaymentCardParams,
PaymentCardResponse, PaymentCardResponse,
@@ -40,10 +40,11 @@ export const InfoWrap = () => {
const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>(); const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]); const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
const [payType, setPayType] = useState<number>(2);
const [settlementPeriod, setSettlementPeriod] = useState<string>(); const [settlementPeriod, setSettlementPeriod] = useState<string>();
const [generalTab, setGeneralTab] = useState<GeneralTab>(); const [generalTabItems, setGeneralTabItems] = useState<Array<GeneralTabItems>>([]);
const [installmentTab, setInstallmentTab] = useState<InstallmentTab>(); const [installmentTabItems, setInstallmentTabItems] = useState<Array<InstallmentTabItems>>([]);
const [moneyPointTab, setMoneyPointTab] = useState<MoneyPointTab>(); const [moneyPointTabItems, setMoneyPointTabItems] = useState<Array<MoneyPointTabItems>>([]);
const [accountTransferData, setAccountTransferData] = useState<AccountTransferData>(); const [accountTransferData, setAccountTransferData] = useState<AccountTransferData>();
const [mobilePaymentData, setMobilePaymentData] = useState<MobilePaymentData>(); const [mobilePaymentData, setMobilePaymentData] = useState<MobilePaymentData>();
@@ -57,30 +58,30 @@ export const InfoWrap = () => {
const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation(); const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();
const list1 = [ const list1 = [
{payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''}, {payName: '신용카드', payImage: 'pay_01.svg', infoLink: '', payType: 2},
{payName: '카카오페이', payImage: 'pay_02.svg', infoLink: ''}, {payName: '카카오페이', payImage: 'pay_02.svg', infoLink: '', payType: 3},
{payName: '네이버페이', payImage: 'pay_03.svg', infoLink: ''}, {payName: '네이버페이', payImage: 'pay_03.svg', infoLink: '', payType: 3},
{payName: '삼성페이', payImage: 'pay_04.svg', infoLink: ''}, {payName: '삼성페이', payImage: 'pay_04.svg', infoLink: '', payType: 2},
{payName: '계좌이체', payImage: 'pay_05.svg', infoLink: ''}, {payName: '계좌이체', payImage: 'pay_05.svg', infoLink: '', payType: 1},
{payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: ''}, {payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: '', payType: 1},
{payName: '문화상품권', payImage: 'pay_07.svg', infoLink: ''}, {payName: '문화상품권', payImage: 'pay_07.svg', infoLink: '', payType: 1},
{payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: ''}, {payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: '', payType: 1},
{payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''}, {payName: 'TV페이', payImage: 'pay_09.svg', infoLink: '', payType: 1},
{payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: ''}, {payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: '', payType: 2},
{payName: '애플페이', payImage: 'pay_11.svg', infoLink: ''}, {payName: '애플페이', payImage: 'pay_11.svg', infoLink: '', payType: 2},
{payName: '토스페이', payImage: 'pay_12.svg', infoLink: ''}, {payName: '토스페이', payImage: 'pay_12.svg', infoLink: '', payType: 3},
{payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: ''}, {payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: '', payType: 2},
{payName: '리브페이', payImage: 'pay_14.svg', infoLink: ''}, {payName: '리브페이', payImage: 'pay_14.svg', infoLink: '', payType: 2},
{payName: '대만결제', payImage: 'pay_15.svg', infoLink: ''}, {payName: '대만결제', payImage: 'pay_15.svg', infoLink: '', payType: 1},
{payName: '티머니페이', payImage: 'pay_16.svg', infoLink: ''}, {payName: '티머니페이', payImage: 'pay_16.svg', infoLink: '', payType: 1},
{payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: ''}, {payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: '', payType: 2},
{payName: 'PAYU', payImage: 'pay_18.svg', infoLink: ''}, {payName: 'PAYU', payImage: 'pay_18.svg', infoLink: '', payType: 2},
{payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: ''}, {payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: '', payType: 2},
{payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: ''}, {payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: '', payType: 3},
{payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: ''}, {payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: '', payType: 2},
{payName: '가상계좌', payImage: 'pay_23.svg', infoLink: ''}, {payName: '가상계좌', payImage: 'pay_23.svg', infoLink: '', payType: 1},
{payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: ''}, {payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: '', payType: 1},
{payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: ''}, {payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: '', payType: 1},
]; ];
const list2 = [ const list2 = [
@@ -100,6 +101,9 @@ export const InfoWrap = () => {
payName={ list1[i]?.payName } payName={ list1[i]?.payName }
payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage } payImage={ IMAGE_ROOT + '/' + list1[i]?.payImage }
infoLink={ list1[i]?.infoLink } infoLink={ list1[i]?.infoLink }
payType={ list1[i]?.payType }
setPayType={ setPayType }
setBottomSheetOn={ setCardCommissionBottomSheetOn }
></InfoItem> ></InfoItem>
); );
} }
@@ -112,7 +116,7 @@ export const InfoWrap = () => {
payName={ list2[i]?.payName } payName={ list2[i]?.payName }
payImage={ IMAGE_ROOT + '/' + list2[i]?.payImage } payImage={ IMAGE_ROOT + '/' + list2[i]?.payImage }
infoLink={ list2[i]?.infoLink } infoLink={ list2[i]?.infoLink }
setNoInterestInfoBottomSheetOn={ setNoInterestInfoBottomSheetOn } setBottomSheetOn={ setNoInterestInfoBottomSheetOn }
></InfoItem> ></InfoItem>
); );
} }
@@ -130,9 +134,9 @@ export const InfoWrap = () => {
paymentCard(params).then((rs: PaymentCardResponse) => { paymentCard(params).then((rs: PaymentCardResponse) => {
console.log(rs); console.log(rs);
setSettlementPeriod(rs.settlementPeriod); setSettlementPeriod(rs.settlementPeriod);
setGeneralTab(rs.generalTab); setGeneralTabItems(rs.generalTab.items);
setInstallmentTab(rs.installmentTab); setInstallmentTabItems(rs.installmentTab.items);
setMoneyPointTab(rs.moneyPointTab); setMoneyPointTabItems(rs.moneyPointTab.items);
}); });
}; };
const callPaymentNonCard = () => { const callPaymentNonCard = () => {
@@ -161,46 +165,59 @@ export const InfoWrap = () => {
}); });
}; };
const callPaymentIntallmentDetail = () => { const callPaymentIntallmentDetail = (selectedCardCompany: string) => {
if(!!cardCompany){ let params: PaymentInstallmentDetailParams = {
let params: PaymentInstallmentDetailParams = { mid: mid,
mid: mid, cardCompany: selectedCardCompany
cardCompany: cardCompany };
};
paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => { paymentInstallmentDetail(params).then((rs: PaymentInstallmentDetailResponse) => {
console.log(rs); console.log(rs);
if(rs.cardCompany){
setCardCompany(rs.cardCompany); setCardCompany(rs.cardCompany);
}
if(rs.cardCompanyOptions){
setCardCompanyOptions(rs.cardCompanyOptions); setCardCompanyOptions(rs.cardCompanyOptions);
}
if(rs.installmentDetails){
setInstallmentDetails(rs.installmentDetails); setInstallmentDetails(rs.installmentDetails);
}); }
} });
};
const changeToCardCompany = (cardCompany: string) => {
setCardCompany(cardCompany);
callPaymentIntallmentDetail(cardCompany);
}; };
useEffect(() => { useEffect(() => {
callPaymentCard(); callPaymentCard();
callPaymentNonCard(); callPaymentNonCard();
callPaymentIntallment(); callPaymentIntallment();
callPaymentIntallmentDetail(cardCompany);
}, []); }, []);
useEffect(() => {
callPaymentIntallmentDetail();
}, [cardCompany]);
return ( return (
<> <>
<div className="ing-list"> <div className="ing-list">
<div className="ing-title">서비스 이용, 수수료 및 정산주기</div> <div className="ing-title">서비스 이용, 수수료 및 정산주기</div>
<ul className="ing-card-list"> <ul className="ing-card-list">
{ getList(PaymentInfoItemType.Comission) } { getList(PaymentInfoItemType.Comission) }
</ul> </ul>
<div className="ing-title">가맹점 분담 무이자 정보</div> <div className="ing-title">가맹점 분담 무이자 정보</div>
<ul className="ing-card-list"> <ul className="ing-card-list">
{ getList(PaymentInfoItemType.NoInterest) } { getList(PaymentInfoItemType.NoInterest) }
</ul> </ul>
</div> </div>
<CardCommissionBottomSheet <CardCommissionBottomSheet
cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn } cardCommissionBottomSheetOn={ cardCommissionBottomSheetOn }
setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn } setCardCommissionBottomSheetOn={ setCardCommissionBottomSheetOn }
payType={ payType }
settlementPeriod={ settlementPeriod }
generalTabItems={ generalTabItems }
installmentTabItems={ installmentTabItems }
moneyPointTabItems= { moneyPointTabItems }
></CardCommissionBottomSheet> ></CardCommissionBottomSheet>
<CreditCardListBottomSheet <CreditCardListBottomSheet
creditCardListBottomSheetOn={ creditCardListBottomSheetOn } creditCardListBottomSheetOn={ creditCardListBottomSheetOn }
@@ -212,7 +229,7 @@ export const InfoWrap = () => {
cardCompany={ cardCompany } cardCompany={ cardCompany }
cardCompanyOptions={ cardCompanyOptions } cardCompanyOptions={ cardCompanyOptions }
installmentDetails={ installmentDetails } installmentDetails={ installmentDetails }
setCardCompany={ setCardCompany } changeToCardCompany={ changeToCardCompany }
></NoInterestInfoBottomSheet> ></NoInterestInfoBottomSheet>
</> </>
); );

8
src/entities/payment/ui/no-interest-info-bottom-sheet.tsx
View File

@@ -11,7 +11,7 @@ export interface NoInterestInfoBottomSheetProps {
cardCompany?: string; cardCompany?: string;
cardCompanyOptions?: Array<string>; cardCompanyOptions?: Array<string>;
installmentDetails?: Array<InstallmentDetails>; installmentDetails?: Array<InstallmentDetails>;
setCardCompany?: (cardCompany: string) => void; changeToCardCompany?: (cardCompany: string) => void;
}; };
export const NoInterestInfoBottomSheet = ({ export const NoInterestInfoBottomSheet = ({
@@ -20,7 +20,7 @@ export const NoInterestInfoBottomSheet = ({
cardCompany, cardCompany,
cardCompanyOptions, cardCompanyOptions,
installmentDetails, installmentDetails,
setCardCompany changeToCardCompany
}: NoInterestInfoBottomSheetProps) => { }: NoInterestInfoBottomSheetProps) => {
const onClickToClose = () => { const onClickToClose = () => {
@@ -29,8 +29,8 @@ export const NoInterestInfoBottomSheet = ({
const onChangeToCardCompany = (e: ChangeEvent<HTMLSelectElement>) => { const onChangeToCardCompany = (e: ChangeEvent<HTMLSelectElement>) => {
let value = e.target.value; let value = e.target.value;
if(setCardCompany){ if(changeToCardCompany){
setCardCompany(value); changeToCardCompany(value);
} }
}; };

11
src/widgets/navigation/header.tsx
View File

@@ -7,7 +7,7 @@ import {
HeaderNavigationProps HeaderNavigationProps
} from '@/entities/common/model/types'; } from '@/entities/common/model/types';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { useEffect, useState } from 'react'; import { ChangeEvent, useEffect, useState } from 'react';
export const HeaderNavigation = ({ export const HeaderNavigation = ({
onBack, onBack,
@@ -45,6 +45,10 @@ export const HeaderNavigation = ({
const onClickToGoToAlarm = () => { const onClickToGoToAlarm = () => {
navigate(PATHS.alarm.list); navigate(PATHS.alarm.list);
}; };
const onChangeToMid = (e: ChangeEvent<HTMLSelectElement>) => {
let value = e.target.value;
useStore.getState().UserStore.setMid(value);
};
useEffect(() => { useEffect(() => {
let mids = useStore.getState().UserStore.selectOptionsMids; let mids = useStore.getState().UserStore.selectOptionsMids;
@@ -73,7 +77,10 @@ export const HeaderNavigation = ({
<div className="header-left"> <div className="header-left">
<h1 className="app-title blind">나이스가맹점관리자</h1> <h1 className="app-title blind">나이스가맹점관리자</h1>
<div className="input-wrapper"> <div className="input-wrapper">
<select className="heading-select"> <select
className="heading-select"
onChange={ onChangeToMid }
>
{ selectOptions && selectOptions.length > 0 && { selectOptions && selectOptions.length > 0 &&
selectOptions.map((value, index) => ( selectOptions.map((value, index) => (
<option <option