From 83ec37b6f770148ed697a4f35aeb74179d535193 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Wed, 10 Jul 2024 02:12:41 +0900 Subject: [PATCH 01/10] =?UTF-8?q?chore:=20#11=20=EB=9D=BC=EB=94=94?= =?UTF-8?q?=EC=98=A4=EB=B2=84=ED=8A=BC=20=EC=82=AC=EC=9A=A9=20=EC=98=88?= =?UTF-8?q?=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/test/Staging.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/app/test/Staging.tsx b/src/app/test/Staging.tsx index d19a1ea0..eb218748 100644 --- a/src/app/test/Staging.tsx +++ b/src/app/test/Staging.tsx @@ -1,8 +1,13 @@ +import { useState } from "react"; + import Button from "@/component/Button/Button.tsx"; import { ButtonProvider } from "@/component/Button/ButtonProvider.tsx"; +import Radio from "@/component/common/RadioButton/Radio"; +import RadioButtonGroup from "@/component/common/RadioButton/RadioButtonGroup"; import { DefaultLayout } from "@/layout/DefaultLayout.tsx"; export default function Staging() { + const [selectedValue, setSelectedValue] = useState(); return ( @@ -10,6 +15,13 @@ export default function Staging() { + + 주 1회 + 월 1회 + 분기별 + 프로젝트 끝난 후 + + 기본 버튼 하늘색 버튼 From 6124c7acf6e659a878c6d7da6c08642d33d56c3a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Wed, 10 Jul 2024 02:13:41 +0900 Subject: [PATCH 02/10] =?UTF-8?q?style:=20#11=20=EB=9D=BC=EB=94=94?= =?UTF-8?q?=EC=98=A4=20=EB=B2=84=ED=8A=BC=20cursor=20pointer?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/RadioButton/Radio.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/component/common/RadioButton/Radio.tsx b/src/component/common/RadioButton/Radio.tsx index ddaef151..7f5372c0 100644 --- a/src/component/common/RadioButton/Radio.tsx +++ b/src/component/common/RadioButton/Radio.tsx @@ -22,6 +22,7 @@ const Radio = ({ value, children }: RadioProps) => { align-items: center; height: 100%; width: 100%; + cursor: pointer; `} > {children} From 4691b4c998d1bef3e46053917093cbbdf661332b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Wed, 10 Jul 2024 19:15:11 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20#11=20=EB=8B=A4=EC=A4=91=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=20=EB=B2=84=ED=8A=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/test/Staging.tsx | 22 ++++++++- src/component/common/CheckBox/CheckBox.tsx | 45 +++++++++++++++++++ .../common/CheckBox/CheckBoxGroup.tsx | 25 +++++++++++ src/hooks/useCheckBox.ts | 9 ++++ src/layout/GlobalLayout.tsx | 2 +- src/store/context/CheckBoxContext.ts | 8 ++++ 6 files changed, 109 insertions(+), 2 deletions(-) create mode 100644 src/component/common/CheckBox/CheckBox.tsx create mode 100644 src/component/common/CheckBox/CheckBoxGroup.tsx create mode 100644 src/hooks/useCheckBox.ts create mode 100644 src/store/context/CheckBoxContext.ts diff --git a/src/app/test/Staging.tsx b/src/app/test/Staging.tsx index eb218748..0e96836d 100644 --- a/src/app/test/Staging.tsx +++ b/src/app/test/Staging.tsx @@ -1,13 +1,22 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import Button from "@/component/Button/Button.tsx"; import { ButtonProvider } from "@/component/Button/ButtonProvider.tsx"; +import CheckBox from "@/component/common/CheckBox/CheckBox"; +import CheckBoxGroup from "@/component/common/CheckBox/CheckBoxGroup"; import Radio from "@/component/common/RadioButton/Radio"; import RadioButtonGroup from "@/component/common/RadioButton/RadioButtonGroup"; +import { useCheckBox } from "@/hooks/useCheckBox"; import { DefaultLayout } from "@/layout/DefaultLayout.tsx"; export default function Staging() { const [selectedValue, setSelectedValue] = useState(); + const { isChecked, toggle, selectedValues } = useCheckBox(); + + useEffect(() => { + console.log("selectedValues", selectedValues); + }, [selectedValues]); + return ( @@ -15,6 +24,8 @@ export default function Staging() { +
+

라디오버튼

주 1회 월 1회 @@ -22,6 +33,15 @@ export default function Staging() { 프로젝트 끝난 후 +
+

체크박스

+ + 주 1회 + 월 1회 + 분기별 + 프로젝트 끝난 후 + + 기본 버튼 하늘색 버튼 diff --git a/src/component/common/CheckBox/CheckBox.tsx b/src/component/common/CheckBox/CheckBox.tsx new file mode 100644 index 00000000..11072c85 --- /dev/null +++ b/src/component/common/CheckBox/CheckBox.tsx @@ -0,0 +1,45 @@ +import { css } from "@emotion/react"; +import { useContext } from "react"; + +import ListItemCard from "@/component/common/Card/ListItemCard"; +import { CheckBoxContext } from "@/store/context/CheckBoxContext"; + +type CheckBoxProps = { + value: string; + children: React.ReactNode; +}; + +const CheckBox = ({ value, children }: CheckBoxProps) => { + const checkboxContext = useContext(CheckBoxContext); + return ( + + + { + checkboxContext?.onChange && checkboxContext.onChange(e.target.value); + }} + css={css` + display: none; + `} + /> + + ); +}; + +export default CheckBox; diff --git a/src/component/common/CheckBox/CheckBoxGroup.tsx b/src/component/common/CheckBox/CheckBoxGroup.tsx new file mode 100644 index 00000000..5b8078c8 --- /dev/null +++ b/src/component/common/CheckBox/CheckBoxGroup.tsx @@ -0,0 +1,25 @@ +import { css } from "@emotion/react"; + +import { CheckBoxContext } from "@/store/context/CheckBoxContext"; + +type CheckBoxGroupProps = { + children: React.ReactNode; + isChecked: (value: string) => boolean; + onChange: (value: string) => void; +}; + +const CheckBoxGroup = ({ children, ...rest }: CheckBoxGroupProps) => { + return ( +
+ {children} +
+ ); +}; + +export default CheckBoxGroup; diff --git a/src/hooks/useCheckBox.ts b/src/hooks/useCheckBox.ts new file mode 100644 index 00000000..e919baae --- /dev/null +++ b/src/hooks/useCheckBox.ts @@ -0,0 +1,9 @@ +import { useState } from "react"; + +export const useCheckBox = () => { + const [checkedStates, setCheckedStates] = useState>({}); + const isChecked = (value: string) => checkedStates[value]; + const toggle = (value: string) => setCheckedStates((prev) => ({ ...prev, [value]: !prev[value] })); + const selectedValues = Object.keys(checkedStates).filter((key) => checkedStates[key]); + return { isChecked, toggle, selectedValues }; +}; diff --git a/src/layout/GlobalLayout.tsx b/src/layout/GlobalLayout.tsx index 4c5184a6..db422bf4 100644 --- a/src/layout/GlobalLayout.tsx +++ b/src/layout/GlobalLayout.tsx @@ -17,7 +17,7 @@ export default function GlobalLayout() { display: flex; flex-direction: column; - background-color: #f1f3f5; + background-color: #ffffff; `} > diff --git a/src/store/context/CheckBoxContext.ts b/src/store/context/CheckBoxContext.ts new file mode 100644 index 00000000..68291f37 --- /dev/null +++ b/src/store/context/CheckBoxContext.ts @@ -0,0 +1,8 @@ +import { createContext } from "react"; + +type CheckBoxContext = { + isChecked: (value: string) => boolean; + onChange: (value: string) => void; +}; + +export const CheckBoxContext = createContext(undefined); From 71ef0c0057216279d9439148c1c029e02e3ea43c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E1=84=8B=E1=85=B5=E1=84=86=E1=85=B5=E1=86=AB=E1=84=92?= =?UTF-8?q?=E1=85=B4?= Date: Wed, 10 Jul 2024 19:29:40 +0900 Subject: [PATCH 04/10] =?UTF-8?q?refactor:=20#11=20=EB=9D=BC=EB=94=94?= =?UTF-8?q?=EC=98=A4=EB=B2=84=ED=8A=BC=20=ED=9B=85=20=EC=9E=91=EC=84=B1,?= =?UTF-8?q?=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=EC=99=80=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=20=EB=B0=A9=EC=8B=9D=20=ED=86=B5=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/test/Staging.tsx | 15 ++++++++++----- src/component/common/RadioButton/Radio.tsx | 2 +- .../common/RadioButton/RadioButtonGroup.tsx | 4 ++-- src/hooks/useCheckBox.ts | 6 ++++-- src/hooks/useRadioButton.ts | 11 +++++++++++ src/store/context/RadioContext.ts | 4 ++-- 6 files changed, 30 insertions(+), 12 deletions(-) create mode 100644 src/hooks/useRadioButton.ts diff --git a/src/app/test/Staging.tsx b/src/app/test/Staging.tsx index 0e96836d..61723872 100644 --- a/src/app/test/Staging.tsx +++ b/src/app/test/Staging.tsx @@ -7,14 +7,19 @@ import CheckBoxGroup from "@/component/common/CheckBox/CheckBoxGroup"; import Radio from "@/component/common/RadioButton/Radio"; import RadioButtonGroup from "@/component/common/RadioButton/RadioButtonGroup"; import { useCheckBox } from "@/hooks/useCheckBox"; +import { useRadioButton } from "@/hooks/useRadioButton"; import { DefaultLayout } from "@/layout/DefaultLayout.tsx"; export default function Staging() { - const [selectedValue, setSelectedValue] = useState(); - const { isChecked, toggle, selectedValues } = useCheckBox(); + const [isRadioChecked, onChange, selectedValue] = useRadioButton(); + const [isCheckBoxChecked, toggle, selectedValues] = useCheckBox(); useEffect(() => { - console.log("selectedValues", selectedValues); + console.log("라디오 버튼 선택 value:", selectedValue); + }, [selectedValue]); + + useEffect(() => { + console.log("체크박스 선택 values:", selectedValues); }, [selectedValues]); return ( @@ -26,7 +31,7 @@ export default function Staging() {

라디오버튼

- + 주 1회 월 1회 분기별 @@ -35,7 +40,7 @@ export default function Staging() {

체크박스

- + 주 1회 월 1회 분기별 diff --git a/src/component/common/RadioButton/Radio.tsx b/src/component/common/RadioButton/Radio.tsx index 7f5372c0..1dda467c 100644 --- a/src/component/common/RadioButton/Radio.tsx +++ b/src/component/common/RadioButton/Radio.tsx @@ -12,7 +12,7 @@ type RadioProps = { const Radio = ({ value, children }: RadioProps) => { const radioContext = useContext(RadioContext); return ( - +