refactor: 클립보드 복사 후 토스 열기에서 토스 url스킴을 자세히 이용해 송금정보 자동 입력되도록 변경

woowacourse-teams · Sep 28, 2024 · bc47a36 · bc47a36
1 parent 10d0a6d
commit bc47a36
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 49 deletions.
diff --git 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<HTMLButtonElement> & {
-  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 = ({
       </Flex>
     </button>
   ) : (
-    <CopyToClipboard text={clipboardText} onCopy={onBankButtonClick}>
-      <button css={bankButtonStyle(theme)} {...buttonProps}>
-        <Flex justifyContent="center" alignItems="center" gap="0.125rem">
-          <Text size="tiny" textColor="black">
-            송금
-          </Text>
-          <Icon iconType="toss" />
-        </Flex>
-      </button>
-    </CopyToClipboard>
+    <button onClick={onBankButtonClick} css={bankButtonStyle(theme)} {...buttonProps}>
+      <Flex justifyContent="center" alignItems="center" gap="0.125rem">
+        <Text size="tiny" textColor="black">
+          송금
+        </Text>
+        <Icon iconType="toss" />
+      </Flex>
+    </button>
   );
 };
 

diff --git 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 (
     <Flex
       justifyContent="spaceBetween"
@@ -39,11 +32,7 @@ function ExpenseItem({
       <Flex alignItems="center" gap="0.5rem">
         <Amount amount={price} />
         {isMobileDevice() ? (
-          <BankSendButton
-            clipboardText={clipboardText}
-            onBankButtonClick={onBankButtonClick}
-            isDeposited={price <= 0 || isDeposited}
-          />
+          <BankSendButton onBankButtonClick={() => onBankButtonClick(price)} isDeposited={price <= 0 || isDeposited} />
         ) : (
           <IconButton variants="none" size="small">
             <Icon iconType="rightChevron" />

diff --git 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
@@ -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,
   }));