From 14f09ac2f1e0c09b5d3aeecb44e24e99881fae1a Mon Sep 17 00:00:00 2001 From: hyuke81 Date: Fri, 10 Jan 2025 23:00:11 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=EC=B7=A8=EC=86=8C/=EB=93=B1?= =?UTF-8?q?=EB=A1=9D=20=EA=B3=B5=ED=86=B5=20=EB=B2=84=ED=8A=BC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/button/ButtonGroup.tsx | 21 ++++++++++++++++ src/components/button/buttonGroup.module.scss | 24 +++++++++++++++++++ 2 files changed, 45 insertions(+) create mode 100644 src/components/button/ButtonGroup.tsx create mode 100644 src/components/button/buttonGroup.module.scss diff --git a/src/components/button/ButtonGroup.tsx b/src/components/button/ButtonGroup.tsx new file mode 100644 index 0000000..759e5c2 --- /dev/null +++ b/src/components/button/ButtonGroup.tsx @@ -0,0 +1,21 @@ +import styles from './buttonGroup.module.scss'; + +interface ButtonGroupProps { + onCancel: () => void; + onSubmit: () => void; +} + +const ButtonGroup: React.FC = ({ onCancel, onSubmit }) => { + return ( +
+ + +
+ ); +}; + +export default ButtonGroup; diff --git a/src/components/button/buttonGroup.module.scss b/src/components/button/buttonGroup.module.scss new file mode 100644 index 0000000..1a1190d --- /dev/null +++ b/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; +} From fc650be319bb39f2fe7547c0a13cc4aac1c3679d Mon Sep 17 00:00:00 2001 From: hyuke81 Date: Fri, 10 Jan 2025 23:01:49 +0900 Subject: [PATCH 2/7] =?UTF-8?q?test:=20=EA=B3=B5=ED=86=B5=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/test/Test.tsx | 18 ++++++++++++++++++ src/pages/test/test.module.scss | 5 +++++ 2 files changed, 23 insertions(+) diff --git a/src/pages/test/Test.tsx b/src/pages/test/Test.tsx index 9fee2fc..ef6d32e 100644 --- a/src/pages/test/Test.tsx +++ b/src/pages/test/Test.tsx @@ -3,11 +3,24 @@ 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); }; + + //버튼그룹 test + const handleCancel = () => { + alert('취소 버튼 클릭됨'); + }; + + const handleSubmit = () => { + alert('등록 버튼 클릭됨'); + }; + return (
테스트 페이지입니다. @@ -18,6 +31,11 @@ export const Test = () => { onClick={handleClickButton}> 테스트 버튼 + + {/* 버튼그룹 test */} +
+ +
); }; diff --git a/src/pages/test/test.module.scss b/src/pages/test/test.module.scss index 0043551..ae576ee 100644 --- a/src/pages/test/test.module.scss +++ b/src/pages/test/test.module.scss @@ -14,3 +14,8 @@ .clicked { background-color: orange; } + +.buttonGroupWrapper { + @include flex-center; + gap: 10px; +} \ No newline at end of file From 0710759ff624c72d53048476872b0b5157fa5c24 Mon Sep 17 00:00:00 2001 From: hyuke81 Date: Fri, 10 Jan 2025 23:16:58 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EC=B7=A8=EC=86=8C=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EC=9D=B4=EC=A0=84=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/button/ButtonGroup.tsx | 16 ++++++++++++++-- src/pages/test/Test.tsx | 7 ++----- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/components/button/ButtonGroup.tsx b/src/components/button/ButtonGroup.tsx index 759e5c2..71b417c 100644 --- a/src/components/button/ButtonGroup.tsx +++ b/src/components/button/ButtonGroup.tsx @@ -1,14 +1,26 @@ import styles from './buttonGroup.module.scss'; +import { useNavigate } from 'react-router-dom'; interface ButtonGroupProps { - onCancel: () => void; + onCancel?: () => void; onSubmit: () => void; } const ButtonGroup: React.FC = ({ onCancel, onSubmit }) => { + const navigate = useNavigate(); + + const handleCancel = () => { + if (onCancel) { + onCancel(); + } else { + navigate(-1); + console.log('취소 버튼 클릭'); + } + }; + return (
-
); From cc53a1c27f09b3eb84db928bfca4052eb5e476e8 Mon Sep 17 00:00:00 2001 From: hyuke81 Date: Fri, 10 Jan 2025 23:22:59 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EB=93=B1=EB=A1=9D=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EB=93=B1=EB=A1=9D=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/button/ButtonGroup.tsx | 16 +++++++++++++--- src/pages/test/Test.tsx | 8 +------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/src/components/button/ButtonGroup.tsx b/src/components/button/ButtonGroup.tsx index 71b417c..eaddc5f 100644 --- a/src/components/button/ButtonGroup.tsx +++ b/src/components/button/ButtonGroup.tsx @@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom'; interface ButtonGroupProps { onCancel?: () => void; - onSubmit: () => void; + onSubmit?: () => void; } const ButtonGroup: React.FC = ({ onCancel, onSubmit }) => { @@ -13,17 +13,27 @@ const ButtonGroup: React.FC = ({ onCancel, onSubmit }) => { if (onCancel) { onCancel(); } else { - navigate(-1); + navigate(-1); //기본 동작 -> 이전페이지 이동 console.log('취소 버튼 클릭'); } }; + + const handleSubmit = () => { + if (onSubmit) { + onSubmit(); + } else { + // 등록 완료 페이지로 이동 + // navigate('/success'); // 등록 완료 페이지 경로 설정 필요 + console.log('등록 완료 페이지로 이동'); + } + }; return (
-
diff --git a/src/pages/test/Test.tsx b/src/pages/test/Test.tsx index a85c5b0..5cfc872 100644 --- a/src/pages/test/Test.tsx +++ b/src/pages/test/Test.tsx @@ -12,12 +12,6 @@ export const Test = () => { setClicked(!clicked); }; - //버튼그룹 test - - const handleSubmit = () => { - alert('등록 버튼 클릭됨'); - }; - return (
테스트 페이지입니다. @@ -31,7 +25,7 @@ export const Test = () => { {/* 버튼그룹 test */}
- +
); From 3ebfa574cd98671541d02d90671160932f81eeba Mon Sep 17 00:00:00 2001 From: hyuke81 Date: Fri, 10 Jan 2025 23:57:18 +0900 Subject: [PATCH 5/7] Test setup: Preparing environment for testing From 31df1e32a606198ae1f28d58b4e7ae8ce5f415b7 Mon Sep 17 00:00:00 2001 From: hyuke81 Date: Sat, 11 Jan 2025 11:08:13 +0900 Subject: [PATCH 6/7] =?UTF-8?q?test:=20lint=20=EC=9E=AC=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/button/ButtonGroup.tsx | 67 ++++++++++--------- src/components/button/buttonGroup.module.scss | 32 ++++----- src/pages/test/Test.tsx | 3 +- src/pages/test/test.module.scss | 2 +- 4 files changed, 54 insertions(+), 50 deletions(-) diff --git a/src/components/button/ButtonGroup.tsx b/src/components/button/ButtonGroup.tsx index eaddc5f..10231f5 100644 --- a/src/components/button/ButtonGroup.tsx +++ b/src/components/button/ButtonGroup.tsx @@ -1,43 +1,48 @@ +import React from 'react'; import styles from './buttonGroup.module.scss'; import { useNavigate } from 'react-router-dom'; interface ButtonGroupProps { - onCancel?: () => void; - onSubmit?: () => void; + onCancel?: () => void; + onSubmit?: () => void; } const ButtonGroup: React.FC = ({ onCancel, onSubmit }) => { - const navigate = useNavigate(); + const navigate = useNavigate(); - const handleCancel = () => { - if (onCancel) { - onCancel(); - } else { - navigate(-1); //기본 동작 -> 이전페이지 이동 - console.log('취소 버튼 클릭'); - } - }; + const handleCancel = () => { + if (onCancel) { + onCancel(); + } else { + navigate(-1); //기본 동작 -> 이전페이지 이동 + console.log('취소 버튼 클릭'); + } + }; - const handleSubmit = () => { - if (onSubmit) { - onSubmit(); - } else { - // 등록 완료 페이지로 이동 - // navigate('/success'); // 등록 완료 페이지 경로 설정 필요 - console.log('등록 완료 페이지로 이동'); - } - }; - - return ( -
- - -
- ); + const handleSubmit = () => { + if (onSubmit) { + onSubmit(); + } else { + // 등록 완료 페이지로 이동 + // navigate('/success'); // 등록 완료 페이지 경로 설정 필요 + console.log('등록 완료 페이지로 이동'); + } + }; + + return ( +
+ + +
+ ); }; export default ButtonGroup; diff --git a/src/components/button/buttonGroup.module.scss b/src/components/button/buttonGroup.module.scss index 1a1190d..09ac9fa 100644 --- a/src/components/button/buttonGroup.module.scss +++ b/src/components/button/buttonGroup.module.scss @@ -1,24 +1,24 @@ .buttonGroup { - @include flex-center; // flexbox 중앙 정렬 - gap: 10px; // 버튼 간격 + @include flex-center; // flexbox 중앙 정렬 + gap: 10px; // 버튼 간격 } .cancelButton { - background-color: #ffffff; - color: #616161; - border: none; - padding: 10px 20px; - cursor: pointer; - font-size: 28px; + 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; + background-color: #424242; + color: #ffffff; + border: none; + width: 125px; + height: 50px; + border-radius: 25px; + cursor: pointer; + font-size: 28px; } diff --git a/src/pages/test/Test.tsx b/src/pages/test/Test.tsx index 5cfc872..170ccb4 100644 --- a/src/pages/test/Test.tsx +++ b/src/pages/test/Test.tsx @@ -2,7 +2,7 @@ import { useState } from 'react'; import classNames from 'classnames'; import styles from './test.module.scss'; -//버튼그룹 test +//버튼그룹 test import ButtonGroup from '../../components/button/ButtonGroup.tsx'; export const Test = () => { @@ -22,7 +22,6 @@ export const Test = () => { onClick={handleClickButton}> 테스트 버튼 - {/* 버튼그룹 test */}
diff --git a/src/pages/test/test.module.scss b/src/pages/test/test.module.scss index ae576ee..a72df75 100644 --- a/src/pages/test/test.module.scss +++ b/src/pages/test/test.module.scss @@ -18,4 +18,4 @@ .buttonGroupWrapper { @include flex-center; gap: 10px; -} \ No newline at end of file +} From 628adf0dc398428802d5e03fa382fc41bc6d6d2e Mon Sep 17 00:00:00 2001 From: hyuke81 Date: Sun, 12 Jan 2025 00:31:23 +0900 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20early=20return=EB=AC=B8=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/button/ButtonGroup.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/components/button/ButtonGroup.tsx b/src/components/button/ButtonGroup.tsx index 10231f5..68f2bc5 100644 --- a/src/components/button/ButtonGroup.tsx +++ b/src/components/button/ButtonGroup.tsx @@ -13,20 +13,20 @@ const ButtonGroup: React.FC = ({ onCancel, onSubmit }) => { const handleCancel = () => { if (onCancel) { onCancel(); - } else { - navigate(-1); //기본 동작 -> 이전페이지 이동 - console.log('취소 버튼 클릭'); + return; } + navigate(-1); // 기본 동작 -> 이전 페이지 이동 + console.log('취소 버튼 클릭'); }; const handleSubmit = () => { if (onSubmit) { onSubmit(); - } else { - // 등록 완료 페이지로 이동 - // navigate('/success'); // 등록 완료 페이지 경로 설정 필요 - console.log('등록 완료 페이지로 이동'); + return; } + // 등록 완료 페이지로 이동 + // navigate('/success'); // 등록 완료 페이지 경로 설정 필요 + console.log('등록 완료 페이지로 이동'); }; return (