feat: 취소/등록 버튼 컴포넌트 구현

feat: 취소/등록 버튼 컴포넌트 구현

src/components/button/ButtonGroup.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import styles from './buttonGroup.module.scss';
+import { useNavigate } from 'react-router-dom';
+
+interface ButtonGroupProps {
+  onCancel?: () => void;
+  onSubmit?: () => void;
+}
+
+const ButtonGroup: React.FC<ButtonGroupProps> = ({ onCancel, onSubmit }) => {
+  const navigate = useNavigate();
+
+  const handleCancel = () => {
+    if (onCancel) {
+      onCancel();
+      return;
+    }
+    navigate(-1); // 기본 동작 -> 이전 페이지 이동
+    console.log('취소 버튼 클릭');
+  };
+
+  const handleSubmit = () => {
+    if (onSubmit) {
+      onSubmit();
+      return;
+    }
+    // 등록 완료 페이지로 이동
+    // navigate('/success'); // 등록 완료 페이지 경로 설정 필요
+    console.log('등록 완료 페이지로 이동');
+  };
+
+  return (
+    <div className={styles.buttonGroup}>
+      <button
+        className={styles.cancelButton}
+        onClick={handleCancel}>
+        취소
+      </button>
+      <button
+        className={styles.submitButton}
+        onClick={handleSubmit}>
+        등록
+      </button>
+    </div>
+  );
+};
+
+export default ButtonGroup;

src/components/button/buttonGroup.module.scss

@@ -0,0 +1,24 @@
+.buttonGroup {
+  @include flex-center; // flexbox 중앙 정렬
+  gap: 10px; // 버튼 간격
+}
+
+.cancelButton {
+  background-color: #ffffff;
+  color: #616161;
+  border: none;
+  padding: 10px 20px;
+  cursor: pointer;
+  font-size: 28px;
+}
+
+.submitButton {
+  background-color: #424242;
+  color: #ffffff;
+  border: none;
+  width: 125px;
+  height: 50px;
+  border-radius: 25px;
+  cursor: pointer;
+  font-size: 28px;
+}

src/pages/test/Test.tsx

@@ -1,13 +1,17 @@
 import { useState } from 'react';
-
 import classNames from 'classnames';
 import styles from './test.module.scss';
 
+//버튼그룹 test
+import ButtonGroup from '../../components/button/ButtonGroup.tsx';
+
 export const Test = () => {
   const [clicked, setClicked] = useState(false);
+
   const handleClickButton = () => {
     setClicked(!clicked);
   };
+
   return (
     <div className={classNames(styles.container)}>
       테스트 페이지입니다.
@@ -18,6 +22,10 @@ export const Test = () => {
         onClick={handleClickButton}>
         테스트 버튼
       </button>
+      {/* 버튼그룹 test */}
+      <div className={styles.buttonGroupWrapper}>
+        <ButtonGroup />
+      </div>
     </div>
   );
 };

src/pages/test/test.module.scss

@@ -14,3 +14,8 @@
 .clicked {
   background-color: orange;
 }
+
+.buttonGroupWrapper {
+  @include flex-center;
+  gap: 10px;
+}