From 61830c58e0af897668d1400636026ad1914c466f Mon Sep 17 00:00:00 2001
From: chsua <csj1919@naver.com>
Date: Wed, 8 Nov 2023 13:29:24 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20(#837)=20=EB=A7=88=EA=B0=90=EC=8B=9C?=
 =?UTF-8?q?=EA=B0=84=20=EC=B4=88=EA=B8=B0=ED=99=94=20=EC=8B=9C=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=ED=83=80=EC=9E=85=20=EB=AF=B8=EC=A7=80=EC=A0=95?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9Csubmit=20=EB=90=98=EB=8A=94=20=EC=98=A4?=
 =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모달에 넣는 buttonInfo가 ButtonHTMLAttributes 상속하게 만들어 type을 지정할 수 있도록 함
- 모달과 폼에서 모두 사용되어 타입을 전역 타입폴더로 분리
---
 frontend/src/components/PostForm/index.tsx    |  7 ++++--
 .../src/components/common/Modal/index.tsx     | 24 +++++++++----------
 frontend/src/types/modalButton.ts             |  6 +++++
 3 files changed, 23 insertions(+), 14 deletions(-)
 create mode 100644 frontend/src/types/modalButton.ts

diff --git a/frontend/src/components/PostForm/index.tsx b/frontend/src/components/PostForm/index.tsx
index 64e501f68..774170f03 100644
--- a/frontend/src/components/PostForm/index.tsx
+++ b/frontend/src/components/PostForm/index.tsx
@@ -5,6 +5,7 @@ import { Navigate, useNavigate } from 'react-router-dom';
 
 import { ResponsiveFlex } from 'votogether-design-system';
 
+import { ButtonInfo } from '@type/modalButton';
 import { PostInfo } from '@type/post';
 
 import { useMultiSelect, useContentImage, useText, useToggle, useWritingOption } from '@hooks';
@@ -154,14 +155,16 @@ export default function PostForm({ data, mutate, isSubmitting }: PostFormProps)
     }
   };
 
-  const primaryButton = {
+  const primaryButton: ButtonInfo = {
     text: '저장',
     handleClick: handleModalClose,
+    type: 'button',
   };
 
-  const secondaryButton = {
+  const secondaryButton: ButtonInfo = {
     text: '초기화',
     handleClick: handleResetButton,
+    type: 'button',
   };
 
   return (
diff --git a/frontend/src/components/common/Modal/index.tsx b/frontend/src/components/common/Modal/index.tsx
index 7c5eca7bf..5f8df42c0 100644
--- a/frontend/src/components/common/Modal/index.tsx
+++ b/frontend/src/components/common/Modal/index.tsx
@@ -1,21 +1,17 @@
-import React, { useEffect, useRef, PropsWithChildren } from 'react';
+import { useEffect, useRef, PropsWithChildren } from 'react';
 
+import { ButtonInfo } from '@type/modalButton';
 import { Size } from '@type/style';
 
 import SquareButton from '../SquareButton';
 
 import * as S from './style';
 
-interface ButtonProps {
-  text: string;
-  handleClick: () => void;
-}
-
 interface ModalProps extends PropsWithChildren {
   title?: string;
   size?: Size;
-  primaryButton: ButtonProps;
-  secondaryButton: ButtonProps;
+  primaryButton: ButtonInfo;
+  secondaryButton: ButtonInfo;
   handleModalClose: () => void;
 }
 
@@ -29,8 +25,12 @@ export default function Modal({
 }: ModalProps) {
   const BackDropRef = useRef<HTMLDivElement>(null);
 
-  const { text: primaryText, handleClick: primaryClick } = primaryButton;
-  const { text: secondaryText, handleClick: secondaryClick } = secondaryButton;
+  const { text: primaryText, handleClick: primaryClick, ...primaryButtonRest } = primaryButton;
+  const {
+    text: secondaryText,
+    handleClick: secondaryClick,
+    ...secondaryButtonRest
+  } = secondaryButton;
 
   useEffect(() => {
     const handler = (e: MouseEvent) => {
@@ -59,12 +59,12 @@ export default function Modal({
         {children && <S.Body>{children}</S.Body>}
         <S.ButtonContainer>
           <S.ButtonWrapper>
-            <SquareButton onClick={secondaryClick} theme="gray">
+            <SquareButton onClick={secondaryClick} theme="gray" {...secondaryButtonRest}>
               {secondaryText}
             </SquareButton>
           </S.ButtonWrapper>
           <S.ButtonWrapper>
-            <SquareButton onClick={primaryClick} theme="fill">
+            <SquareButton onClick={primaryClick} theme="fill" {...primaryButtonRest}>
               {primaryText}
             </SquareButton>
           </S.ButtonWrapper>
diff --git a/frontend/src/types/modalButton.ts b/frontend/src/types/modalButton.ts
new file mode 100644
index 000000000..4ed79ed19
--- /dev/null
+++ b/frontend/src/types/modalButton.ts
@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes } from 'react';
+
+export interface ButtonInfo extends ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  handleClick: () => void;
+}