From 949df6c0df10ac9083e02ff3b9257970cf9a25a2 Mon Sep 17 00:00:00 2001
From: JinHo Kim <81083461+jinhokim98@users.noreply.github.com>
Date: Wed, 5 Feb 2025 16:38:53 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20Bank=20icon=20=EC=84=A4=EC=A0=95?=
 =?UTF-8?q?=EC=9D=B4=20=EB=90=98=EC=96=B4=EC=9E=88=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EC=9D=84=20=EB=95=8C=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
 =?UTF-8?q?=20(#993)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: 은행 이름이 세팅되지 않을 때 문제 해결결

* design: 계좌번호 설정되어있지 않을 때 텍스트 크기 설정

* fix: key prop 설정과, width 100% 추가가
---
 client/src/components/AccountView/index.tsx               | 8 ++++----
 client/src/components/Design/components/Stack/HStack.tsx  | 6 +++---
 .../src/components/Design/components/Stack/Stack.style.ts | 2 ++
 client/src/components/Design/components/Stack/Stack.tsx   | 6 +++---
 client/src/components/Design/components/Stack/VStack.tsx  | 6 +++---
 5 files changed, 15 insertions(+), 13 deletions(-)

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 (
     <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
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<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
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<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
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<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>