fix: (#837) 마감시간 초기화 시 버튼 타입 미지정으로submit 되는 오류 수정

- 모달에 넣는 buttonInfo가 ButtonHTMLAttributes 상속하게 만들어 type을 지정할 수 있도록 함
- 모달과 폼에서 모두 사용되어 타입을 전역 타입폴더로 분리

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 (

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>

frontend/src/types/modalButton.ts

@@ -0,0 +1,6 @@
+import { ButtonHTMLAttributes } from 'react';
+
+export interface ButtonInfo extends ButtonHTMLAttributes<HTMLButtonElement> {
+  text: string;
+  handleClick: () => void;
+}