diff --git a/client/src/components/AccountView/index.tsx b/client/src/components/AccountView/index.tsx index 004a09da2..0adcdf0cc 100644 --- a/client/src/components/AccountView/index.tsx +++ b/client/src/components/AccountView/index.tsx @@ -5,18 +5,18 @@ import {Text} from '@components/Design'; import getImageUrl from '@utils/getImageUrl'; -import BANKS from '@constants/bank'; +import BANKS, {BankIconId} from '@constants/bank'; export const AccountView = ({bankName, accountNumber}: BankAccount) => { - const bankIconId = BANKS.filter(bank => bank.name === bankName)[0].iconId; + const bankIconId: BankIconId | undefined = BANKS.filter(bank => bank.name === bankName)[0]?.iconId; return ( {accountNumber === '' ? ( - '기본 계좌번호를 설정하여\n 행사마다 입력하는 번거로움을 줄이세요' + {`기본 계좌번호를 설정하여\n 행사마다 입력하는 번거로움을 줄이세요`} ) : ( <> - {bankIconId} + {bankIconId && {bankIconId}} {accountNumber} diff --git a/client/src/components/Design/components/Stack/HStack.tsx b/client/src/components/Design/components/Stack/HStack.tsx index 1887a097c..34ee55e9a 100644 --- a/client/src/components/Design/components/Stack/HStack.tsx +++ b/client/src/components/Design/components/Stack/HStack.tsx @@ -15,10 +15,10 @@ export const HStack = forwardRef(function HStack( {childrenArray.map((child, index) => { const key = React.isValidElement(child) ? child.key || index : index; return ( - <> - {child} + + {child} {index !== childrenArray.length - 1 && divider} - + ); })} diff --git a/client/src/components/Design/components/Stack/Stack.style.ts b/client/src/components/Design/components/Stack/Stack.style.ts index 635747075..3f5cde9a9 100644 --- a/client/src/components/Design/components/Stack/Stack.style.ts +++ b/client/src/components/Design/components/Stack/Stack.style.ts @@ -44,6 +44,7 @@ export const hStackStyle = ({gap, justify, p, m, br, b, bg}: HStackProps) => { return css` flex-direction: row; display: flex; + width: '100%'; gap: ${gapValue}; justify-content: ${justify}; align-items: center; @@ -67,6 +68,7 @@ export const vStackStyle = ({gap, align, p, m, br, b, bg}: VStackProps) => { return css` flex-direction: column; display: flex; + width: '100%'; gap: ${gapValue}; justify-content: center; align-items: ${align}; diff --git a/client/src/components/Design/components/Stack/Stack.tsx b/client/src/components/Design/components/Stack/Stack.tsx index 63b350a72..5c1c0632f 100644 --- a/client/src/components/Design/components/Stack/Stack.tsx +++ b/client/src/components/Design/components/Stack/Stack.tsx @@ -30,10 +30,10 @@ export const Stack = forwardRef(function Stack( {childrenArray.map((child, index) => { const key = React.isValidElement(child) ? child.key || index : index; return ( - <> - {child} + + {child} {index !== childrenArray.length - 1 && divider} - + ); })} diff --git a/client/src/components/Design/components/Stack/VStack.tsx b/client/src/components/Design/components/Stack/VStack.tsx index 052362482..e191b05a9 100644 --- a/client/src/components/Design/components/Stack/VStack.tsx +++ b/client/src/components/Design/components/Stack/VStack.tsx @@ -15,10 +15,10 @@ export const VStack = forwardRef(function VStack( {childrenArray.map((child, index) => { const key = React.isValidElement(child) ? child.key || index : index; return ( - <> - {child} + + {child} {index !== childrenArray.length - 1 && divider} - + ); })}