diff --git a/client/src/components/Design/components/BankSendButton/BankSendButton.tsx b/client/src/components/Design/components/BankSendButton/BankSendButton.tsx index 3351b7dcc..893b7cf3d 100644 --- a/client/src/components/Design/components/BankSendButton/BankSendButton.tsx +++ b/client/src/components/Design/components/BankSendButton/BankSendButton.tsx @@ -1,6 +1,4 @@ /** @jsxImportSource @emotion/react */ -import CopyToClipboard from 'react-copy-to-clipboard'; - import {useTheme} from '@components/Design/theme/HDesignProvider'; import Icon from '../Icon/Icon'; @@ -10,17 +8,11 @@ import Flex from '../Flex/Flex'; import {bankButtonStyle, isDepositedStyle} from './BankSendButton.style'; type BankSendButtonProps = React.HTMLAttributes & { - clipboardText: string; onBankButtonClick: () => void; isDeposited?: boolean; }; -const BankSendButton = ({ - clipboardText, - onBankButtonClick, - isDeposited = false, - ...buttonProps -}: BankSendButtonProps) => { +const BankSendButton = ({onBankButtonClick, isDeposited = false, ...buttonProps}: BankSendButtonProps) => { const {theme} = useTheme(); return isDeposited ? ( @@ -32,16 +24,14 @@ const BankSendButton = ({ ) : ( - - - + ); }; diff --git a/client/src/components/Design/components/ExpenseList/ExpenseList.tsx b/client/src/components/Design/components/ExpenseList/ExpenseList.tsx index 4741780a3..23f6e2fdf 100644 --- a/client/src/components/Design/components/ExpenseList/ExpenseList.tsx +++ b/client/src/components/Design/components/ExpenseList/ExpenseList.tsx @@ -13,14 +13,7 @@ import DepositCheck from '../DepositCheck/DepositCheck'; import {ExpenseItemProps, ExpenseListProps} from './ExpenseList.type'; -function ExpenseItem({ - memberName, - price, - isDeposited, - onBankButtonClick, - clipboardText, - ...divProps -}: ExpenseItemProps) { +function ExpenseItem({memberName, price, isDeposited, onBankButtonClick, ...divProps}: ExpenseItemProps) { return ( {isMobileDevice() ? ( - + onBankButtonClick(price)} isDeposited={price <= 0 || isDeposited} /> ) : ( diff --git a/client/src/components/Design/components/ExpenseList/ExpenseList.type.ts b/client/src/components/Design/components/ExpenseList/ExpenseList.type.ts index 90a44c842..7ac189579 100644 --- a/client/src/components/Design/components/ExpenseList/ExpenseList.type.ts +++ b/client/src/components/Design/components/ExpenseList/ExpenseList.type.ts @@ -1,8 +1,7 @@ import {Report} from 'types/serviceType'; export type ExpenseItemCustomProps = Report & { - onBankButtonClick: () => void; - clipboardText: string; + onBankButtonClick: (amount: number) => void; }; export type ExpenseItemProps = React.ComponentProps<'div'> & ExpenseItemCustomProps; diff --git a/client/src/hooks/useReportsPage.ts b/client/src/hooks/useReportsPage.ts index 87ab2c59f..27083b297 100644 --- a/client/src/hooks/useReportsPage.ts +++ b/client/src/hooks/useReportsPage.ts @@ -3,8 +3,6 @@ import {useOutletContext} from 'react-router-dom'; import {EventPageContextProps} from '@pages/EventPage/EventPageLayout'; -import {isAndroid, isIOS} from '@utils/detectDevice'; - import {ERROR_MESSAGE} from '@constants/errorMessage'; import {useSearchReports} from './useSearchReports'; @@ -19,7 +17,7 @@ const useReportsPage = () => { setMemberName(target.value); }; - const onBankButtonClick = () => { + const onBankButtonClick = (amount: number) => { if (bankName.trim() === '' || accountNumber.trim() === '') { toast.error(ERROR_MESSAGE.emptyBank, { showingTime: 3000, @@ -28,22 +26,12 @@ const useReportsPage = () => { return; } - if (isAndroid()) { - const url = 'supertoss://'; - window.location.href = url; - return; - } - - if (isIOS()) { - const url = 'supertoss://send'; - window.location.href = url; - return; - } + const url = `supertoss://send?amount=${amount}&bank=${bankName}&accountNo=${accountNumber}`; + window.location.href = url; }; const expenseListProp = matchedReports.map(member => ({ ...member, - clipboardText: `${bankName} ${accountNumber} ${member.price}원`, onBankButtonClick, }));