fix: Bank icon 설정이 되어있지 않을 때 오류 해결 (#993)

* fix: 은행 이름이 세팅되지 않을 때 문제 해결결 * design: 계좌번호 설정되어있지 않을 때 텍스트 크기 설정 * fix: key prop 설정과, width 100% 추가가
woowacourse-teams · Feb 5, 2025 · 949df6c · 949df6c
1 parent bbf232e
commit 949df6c
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 13 deletions.
diff --git 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 (
     <HStack gap={8}>
       {accountNumber === '' ? (
-        '기본 계좌번호를 설정하여\n 행사마다 입력하는 번거로움을 줄이세요'
+        <Text size="smallBodyBold">{`기본 계좌번호를 설정하여\n 행사마다 입력하는 번거로움을 줄이세요`}</Text>
       ) : (
         <>
-          <img src={getImageUrl(`bankIcon/${bankIconId}`, 'svg')} alt={bankIconId} width={28} />
+          {bankIconId && <img src={getImageUrl(`bankIcon/${bankIconId}`, 'svg')} alt={bankIconId} width={28} />}
           <Text size="bodyBold" color="black">
             {accountNumber}
           </Text>

diff --git 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<HTMLDivElement, HStackProps>(function HStack(
       {childrenArray.map((child, index) => {
         const key = React.isValidElement(child) ? child.key || index : index;
         return (
-          <>
-            <React.Fragment key={key}>{child}</React.Fragment>
+          <React.Fragment key={key}>
+            {child}
             {index !== childrenArray.length - 1 && divider}
-          </>
+          </React.Fragment>
         );
       })}
     </div>

diff --git 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
@@ -30,10 +30,10 @@ export const Stack = forwardRef<HTMLDivElement, StackProps>(function Stack(
       {childrenArray.map((child, index) => {
         const key = React.isValidElement(child) ? child.key || index : index;
         return (
-          <>
-            <React.Fragment key={key}>{child}</React.Fragment>
+          <React.Fragment key={key}>
+            {child}
             {index !== childrenArray.length - 1 && divider}
-          </>
+          </React.Fragment>
         );
       })}
     </div>

diff --git 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<HTMLDivElement, VStackProps>(function VStack(
       {childrenArray.map((child, index) => {
         const key = React.isValidElement(child) ? child.key || index : index;
         return (
-          <>
-            <React.Fragment key={key}>{child}</React.Fragment>
+          <React.Fragment key={key}>
+            {child}
             {index !== childrenArray.length - 1 && divider}
-          </>
+          </React.Fragment>
         );
       })}
     </div>