From eaaaf4c55bf6100e5820cbbad544fe5135661a60 Mon Sep 17 00:00:00 2001
From: soosoo22 <lllllh00@naver.com>
Date: Wed, 31 Jul 2024 14:53:34 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20buttons=20=EB=B0=B0=EC=97=B4?=
 =?UTF-8?q?=EC=9D=84=20=ED=86=B5=ED=95=B4=20=EB=B2=84=ED=8A=BC=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ErrorSection/index.tsx         | 43 ++++++++++++++-----
 1 file changed, 33 insertions(+), 10 deletions(-)

diff --git a/frontend/src/pages/ErrorPage/components/ErrorSection/index.tsx b/frontend/src/pages/ErrorPage/components/ErrorSection/index.tsx
index 70ecb2d4a..44f80dcc0 100644
--- a/frontend/src/pages/ErrorPage/components/ErrorSection/index.tsx
+++ b/frontend/src/pages/ErrorPage/components/ErrorSection/index.tsx
@@ -1,17 +1,35 @@
 import AlertTriangle from '@/assets/alertTriangle.svg';
-import Home from '@/assets/home.svg';
-import ReLoad from '@/assets/reload.svg';
+import HomeIcon from '@/assets/home.svg';
+import ReloadIcon from '@/assets/reload.svg';
 import { Button } from '@/components';
+import { ButtonType } from '@/types/styles';
 
 import * as S from './styles';
 
 interface ErrorSectionProps {
   errorMessage: string;
-  handleReLoad: () => void;
+  handleReload: () => void;
   handleGoHome: () => void;
 }
 
-const ErrorSection = ({ errorMessage, handleReLoad, handleGoHome }: ErrorSectionProps) => {
+const ErrorSection = ({ errorMessage, handleReload, handleGoHome }: ErrorSectionProps) => {
+  const buttons = [
+    {
+      buttonType: 'primary' as ButtonType,
+      text: '새로고침하기',
+      image: ReloadIcon,
+      imageDescription: '새로고침 이미지',
+      onClick: handleReload,
+    },
+    {
+      buttonType: 'secondary' as ButtonType,
+      text: '홈으로 이동하기',
+      image: HomeIcon,
+      imageDescription: '홈 이미지',
+      onClick: handleGoHome,
+    },
+  ];
+
   return (
     <S.Layout>
       <S.ErrorLogoWrapper>
@@ -19,12 +37,17 @@ const ErrorSection = ({ errorMessage, handleReLoad, handleGoHome }: ErrorSection
       </S.ErrorLogoWrapper>
       <S.ErrorMessage>{errorMessage}</S.ErrorMessage>
       <S.Container>
-        <S.ButtonContainer>
-          <Button buttonType="primary" text="새로고침하기" icon={ReLoad} onClick={handleReLoad} />
-        </S.ButtonContainer>
-        <S.ButtonContainer>
-          <Button buttonType="secondary" text="홈으로 이동하기" icon={Home} onClick={handleGoHome} />
-        </S.ButtonContainer>
+        {buttons.map((button, index) => (
+          <S.ButtonContainer key={index}>
+            <Button
+              buttonType={button.buttonType}
+              text={button.text}
+              image={button.image}
+              imageDescription={button.imageDescription}
+              onClick={button.onClick}
+            />
+          </S.ButtonContainer>
+        ))}
       </S.Container>
     </S.Layout>
   );