style: expense list flex 컴포넌트로 이용

woowacourse-teams · Sep 13, 2024 · b626ed3 · b626ed3
1 parent 41fdb33
commit b626ed3
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 23 deletions.
diff --git a/client/src/components/Design/components/ExpenseList/ExpenseList.style.ts b/client/src/components/Design/components/ExpenseList/ExpenseList.style.ts
@@ -2,28 +2,11 @@ import {css} from '@emotion/react';
 
 import {Theme} from '@theme/theme.type';
 
-export const expenseItemStyle = () =>
-  css({
-    display: 'flex',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    width: '100%',
-    height: '2.5rem',
-    padding: '0.5rem 1rem',
-  });
-
-export const expenseItemLeftStyle = () =>
-  css({
-    display: 'flex',
-    alignItems: 'center',
-    gap: '0.5rem',
-  });
-
 export const expenseListStyle = (theme: Theme) =>
   css({
     width: '100%',
     backgroundColor: theme.colors.white,
-    padding: '0.5rem 0',
+    padding: '0.5rem 1rem',
     borderRadius: '1rem',
     height: '100%',
   });
diff --git a/client/src/components/Design/components/ExpenseList/ExpenseList.tsx b/client/src/components/Design/components/ExpenseList/ExpenseList.tsx
@@ -8,17 +8,18 @@ import isMobileDevice from '@utils/isMobileDevice';
 import BankSendButton from '../BankSendButton/BankSendButton';
 import Icon from '../Icon/Icon';
 import IconButton from '../IconButton/IconButton';
+import Flex from '../Flex/Flex';
 
 import {ExpenseItemProps, ExpenseListProps} from './ExpenseList.type';
-import {expenseItemStyle, expenseListStyle, expenseItemLeftStyle} from './ExpenseList.style';
+import {expenseListStyle} from './ExpenseList.style';
 
 // TODO: (@soha) 따로 파일 분리할까 고민중.. 여기서만 사용할 것 같긴 한데.. 흠
 // TODO: (@todari) : 추후 클릭 시 상호작용이 생기면 iconButton으로 변경할 수 있음
 function ExpenseItem({name, price, onBankButtonClick, clipboardText, ...divProps}: ExpenseItemProps) {
   return (
-    <div css={expenseItemStyle} {...divProps}>
+    <Flex justifyContent="spaceBetween" alignItems="center" height="2.5rem" padding="0.5rem 1rem" {...divProps}>
       <Text size="bodyBold">{name}</Text>
-      <div css={expenseItemLeftStyle}>
+      <Flex alignItems="center" gap="0.5rem">
         <Text>{price.toLocaleString('ko-kr')}원</Text>
         {isMobileDevice() ? (
           <BankSendButton clipboardText={clipboardText} onBankButtonClick={onBankButtonClick} />
@@ -27,8 +28,8 @@ function ExpenseItem({name, price, onBankButtonClick, clipboardText, ...divProps
             <Icon iconType="rightChevron" />
           </IconButton>
         )}
-      </div>
-    </div>
+      </Flex>
+    </Flex>
   );
 }