refactor: (#15) 버튼 컴포넌트 프롭스가 버튼 엘리먼트 상속 받도록 수정

frontend/src/components/common/AddButton/index.tsx

@@ -1,16 +1,17 @@
+import { ButtonHTMLAttributes } from 'react';
+
 import * as S from './style';
 
-interface AddButtonProps {
+interface AddButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  size: 'S' | 'M' | 'L';
- clickEvent: () => void;
 }
 
 /* 글쓰기 버튼, 선택지 추가 버튼 등 크기가 다른 용도로 사용할 예정이기 때문에
  * props로 s/m/l 크기를 받음
  */
-export default function AddButton({ size, clickEvent }: AddButtonProps) {
+export default function AddButton({ size, ...rest }: AddButtonProps) {
  return (
- <S.Button size={size} aria-label="더하기" onClick={clickEvent}>
+ <S.Button size={size} aria-label="더하기" {...rest}>
  +
  </S.Button>
  );

frontend/src/components/common/HeaderTextButton/index.tsx

@@ -1,13 +1,14 @@
+import { ButtonHTMLAttributes } from 'react';
+
 import * as S from './style';
 
-interface HeaderTextButtonProps {
+interface HeaderTextButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: string;
- clickEvent: () => void;
 }
 
 /* 헤더에 포함되어 취소, 확인, 신고 등 사용될 버튼
  * props로 s/m/l 크기를 받음
  */
-export default function HeaderTextButton({ children, clickEvent }: HeaderTextButtonProps) {
- return <S.Button onClick={clickEvent}>{children}</S.Button>;
+export default function HeaderTextButton({ children, ...rest }: HeaderTextButtonProps) {
+ return <S.Button {...rest}>{children}</S.Button>;
 }

frontend/src/components/common/IconButton/index.tsx

@@ -1,3 +1,5 @@
+import { ButtonHTMLAttributes } from 'react';
+
 import backIcon from '@assets/back.svg';
 import categoryIcon from '@assets/category.svg';
 import searchIcon from '@assets/search.svg';
@@ -21,19 +23,18 @@ const iconCategory: { [key in IconCategory]: { name: string; url: string } } = {
  },
 };
 
-interface IconButtonProps {
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  category: IconCategory;
- clickEvent: () => void;
 }
 
 /* 뒤로가기, 카테고리 열기 등에 사용될 아이콘 버튼
  */
-export default function IconButton({ category, clickEvent }: IconButtonProps) {
+export default function IconButton({ category, ...rest }: IconButtonProps) {
  const src = iconCategory[category].url;
  const ariaLabelText = iconCategory[category].name;
 
  return (
- <S.Button aria-label={ariaLabelText} onClick={clickEvent}>
+ <S.Button aria-label={ariaLabelText} {...rest}>
  <img src={src} alt={`${ariaLabelText}-icon`} />
  </S.Button>
  );

frontend/src/components/common/SquareButton/index.tsx

@@ -1,18 +1,19 @@
+import { ButtonHTMLAttributes } from 'react';
+
 import * as S from './style';
 
-interface SquareButtonProps {
+interface SquareButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  theme: 'blank' | 'fill';
  children: string;
- clickEvent: () => void;
 }
 
 /* 마감시간, 확인, 취소 등 사용될 버튼
  * 부모에서 크기를 조절, 내용(children) 전달
  * props로 테마를 받음
  */
-export default function SquareButton({ theme, children, clickEvent }: SquareButtonProps) {
+export default function SquareButton({ theme, children, ...rest }: SquareButtonProps) {
  return (
- <S.Button theme={theme} onClick={clickEvent}>
+ <S.Button theme={theme} {...rest}>
  {children}
  </S.Button>
  );