From f5d41286cd419fec4c2cd32e8fdec354f78c646f 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: Mon, 15 Jul 2024 23:50:44 +0900 Subject: [PATCH 1/3] =?UTF-8?q?chore:=20#28=20=ED=8F=B4=EB=8D=94=EB=AA=85?= =?UTF-8?q?=20=EC=B9=B4=EB=A9=9C,=20named=20export,=20index=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/test/Staging.tsx | 8 +++----- src/component/common/CheckBox/CheckBox.tsx | 6 ++---- src/component/common/CheckBox/CheckBoxGroup.tsx | 8 +++----- src/component/common/CheckBox/index.ts | 2 ++ src/component/common/RadioButton/Radio.tsx | 6 ++---- src/component/common/RadioButton/RadioButtonGroup.tsx | 6 ++---- src/component/common/RadioButton/index.ts | 2 ++ 7 files changed, 16 insertions(+), 22 deletions(-) create mode 100644 src/component/common/CheckBox/index.ts create mode 100644 src/component/common/RadioButton/index.ts diff --git a/src/app/test/Staging.tsx b/src/app/test/Staging.tsx index 7b5f5dec..18bd04ea 100644 --- a/src/app/test/Staging.tsx +++ b/src/app/test/Staging.tsx @@ -2,11 +2,9 @@ import { useEffect } 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 { Input, InputLabelContainer, Label } from "@/component/common/Input"; -import Radio from "@/component/common/RadioButton/Radio"; -import RadioButtonGroup from "@/component/common/RadioButton/RadioButtonGroup"; +import { CheckBox, CheckBoxGroup } from "@/component/common/checkBox"; +import { Input, InputLabelContainer, Label } from "@/component/common/input"; +import { Radio, RadioButtonGroup } from "@/component/common/radioButton"; import { useCheckBox } from "@/hooks/useCheckBox"; import { useInput } from "@/hooks/useInput"; import { useRadioButton } from "@/hooks/useRadioButton"; diff --git a/src/component/common/CheckBox/CheckBox.tsx b/src/component/common/CheckBox/CheckBox.tsx index 8118a9c8..3b982d4c 100644 --- a/src/component/common/CheckBox/CheckBox.tsx +++ b/src/component/common/CheckBox/CheckBox.tsx @@ -10,7 +10,7 @@ type CheckBoxProps = { children: React.ReactNode; }; -const CheckBox = ({ value, children }: CheckBoxProps) => { +export function CheckBox({ value, children }: CheckBoxProps) { const checkboxContext = useContext(CheckBoxContext); return ( @@ -41,6 +41,4 @@ const CheckBox = ({ value, children }: CheckBoxProps) => { /> ); -}; - -export default CheckBox; +} diff --git a/src/component/common/CheckBox/CheckBoxGroup.tsx b/src/component/common/CheckBox/CheckBoxGroup.tsx index 0bb6e58c..98599793 100644 --- a/src/component/common/CheckBox/CheckBoxGroup.tsx +++ b/src/component/common/CheckBox/CheckBoxGroup.tsx @@ -8,11 +8,11 @@ export type CheckBoxContextState = { export const CheckBoxContext = createContext(undefined); -type CheckBoxGroupProps = { +type CheckBoxProps = { children: React.ReactNode; } & CheckBoxContextState; -const CheckBoxGroup = ({ children, ...props }: CheckBoxGroupProps) => { +export function CheckBoxGroup({ children, ...props }: CheckBoxProps) { return (
{ {children}
); -}; - -export default CheckBoxGroup; +} diff --git a/src/component/common/CheckBox/index.ts b/src/component/common/CheckBox/index.ts new file mode 100644 index 00000000..1c96a44e --- /dev/null +++ b/src/component/common/CheckBox/index.ts @@ -0,0 +1,2 @@ +export { CheckBox } from "./CheckBox"; +export { CheckBoxGroup } from "./CheckBoxGroup"; diff --git a/src/component/common/RadioButton/Radio.tsx b/src/component/common/RadioButton/Radio.tsx index 1b129636..6c668d62 100644 --- a/src/component/common/RadioButton/Radio.tsx +++ b/src/component/common/RadioButton/Radio.tsx @@ -10,7 +10,7 @@ type RadioProps = { children: React.ReactNode; }; -const Radio = ({ value, children }: RadioProps) => { +export function Radio({ value, children }: RadioProps) { const radioContext = useContext(RadioContext); return ( @@ -42,6 +42,4 @@ const Radio = ({ value, children }: RadioProps) => { /> ); -}; - -export default Radio; +} diff --git a/src/component/common/RadioButton/RadioButtonGroup.tsx b/src/component/common/RadioButton/RadioButtonGroup.tsx index a009bea0..1093bc5d 100644 --- a/src/component/common/RadioButton/RadioButtonGroup.tsx +++ b/src/component/common/RadioButton/RadioButtonGroup.tsx @@ -13,7 +13,7 @@ type RadioButtonGroupProps = { children: React.ReactNode; } & RadioContextState; -const RadioButtonGroup = ({ children, ...props }: RadioButtonGroupProps) => { +export function RadioButtonGroup({ children, ...props }: RadioButtonGroupProps) { return (
{ {children}
); -}; - -export default RadioButtonGroup; +} diff --git a/src/component/common/RadioButton/index.ts b/src/component/common/RadioButton/index.ts new file mode 100644 index 00000000..054777c4 --- /dev/null +++ b/src/component/common/RadioButton/index.ts @@ -0,0 +1,2 @@ +export { Radio } from "./Radio"; +export { RadioButtonGroup } from "./RadioButtonGroup"; From be36b2715b65db2c62dffe387ede6fa94615e485 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: Tue, 16 Jul 2024 00:10:42 +0900 Subject: [PATCH 2/3] =?UTF-8?q?chore:=20#28=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EC=B9=B4=EB=A9=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/checkBox/CheckBox.tsx | 44 +++++++++++++ .../common/checkBox/CheckBoxGroup.tsx | 27 ++++++++ src/component/common/checkBox/index.ts | 2 + src/component/common/input/Input.tsx | 34 ++++++++++ .../common/input/InputLabelContainer.tsx | 27 ++++++++ src/component/common/input/Label.tsx | 63 +++++++++++++++++++ src/component/common/input/index.ts | 3 + src/component/common/radioButton/Radio.tsx | 45 +++++++++++++ .../common/radioButton/RadioButtonGroup.tsx | 28 +++++++++ src/component/common/radioButton/index.ts | 2 + 10 files changed, 275 insertions(+) create mode 100644 src/component/common/checkBox/CheckBox.tsx create mode 100644 src/component/common/checkBox/CheckBoxGroup.tsx create mode 100644 src/component/common/checkBox/index.ts create mode 100644 src/component/common/input/Input.tsx create mode 100644 src/component/common/input/InputLabelContainer.tsx create mode 100644 src/component/common/input/Label.tsx create mode 100644 src/component/common/input/index.ts create mode 100644 src/component/common/radioButton/Radio.tsx create mode 100644 src/component/common/radioButton/RadioButtonGroup.tsx create mode 100644 src/component/common/radioButton/index.ts diff --git a/src/component/common/checkBox/CheckBox.tsx b/src/component/common/checkBox/CheckBox.tsx new file mode 100644 index 00000000..3b982d4c --- /dev/null +++ b/src/component/common/checkBox/CheckBox.tsx @@ -0,0 +1,44 @@ +import { css } from "@emotion/react"; +import { useContext } from "react"; + +import { CheckBoxContext } from "./CheckBoxGroup"; + +import ListItemCard from "@/component/common/Card/ListItemCard"; + +type CheckBoxProps = { + value: string; + children: React.ReactNode; +}; + +export function CheckBox({ value, children }: CheckBoxProps) { + const checkboxContext = useContext(CheckBoxContext); + return ( + + + { + checkboxContext?.onChange && checkboxContext.onChange(e.target.value); + }} + css={css` + display: none; + `} + /> + + ); +} diff --git a/src/component/common/checkBox/CheckBoxGroup.tsx b/src/component/common/checkBox/CheckBoxGroup.tsx new file mode 100644 index 00000000..98599793 --- /dev/null +++ b/src/component/common/checkBox/CheckBoxGroup.tsx @@ -0,0 +1,27 @@ +import { css } from "@emotion/react"; +import { createContext } from "react"; + +export type CheckBoxContextState = { + isChecked: (value: string) => boolean; + onChange: (value: string) => void; +}; + +export const CheckBoxContext = createContext(undefined); + +type CheckBoxProps = { + children: React.ReactNode; +} & CheckBoxContextState; + +export function CheckBoxGroup({ children, ...props }: CheckBoxProps) { + return ( +
+ {children} +
+ ); +} diff --git a/src/component/common/checkBox/index.ts b/src/component/common/checkBox/index.ts new file mode 100644 index 00000000..1c96a44e --- /dev/null +++ b/src/component/common/checkBox/index.ts @@ -0,0 +1,2 @@ +export { CheckBox } from "./CheckBox"; +export { CheckBoxGroup } from "./CheckBoxGroup"; diff --git a/src/component/common/input/Input.tsx b/src/component/common/input/Input.tsx new file mode 100644 index 00000000..7fc19dcd --- /dev/null +++ b/src/component/common/input/Input.tsx @@ -0,0 +1,34 @@ +import { css } from "@emotion/react"; +import { forwardRef, useContext } from "react"; + +import { InputContext } from "./InputLabelContainer"; + +type InputProps = { + width?: string; +} & React.InputHTMLAttributes; + +export const Input = forwardRef(function ({ id, width = "100%", ...props }: InputProps) { + const inputContext = useContext(InputContext); + return ( +
+
+ +
+
+ ); +}); + +Input.displayName = "Input"; diff --git a/src/component/common/input/InputLabelContainer.tsx b/src/component/common/input/InputLabelContainer.tsx new file mode 100644 index 00000000..c868b195 --- /dev/null +++ b/src/component/common/input/InputLabelContainer.tsx @@ -0,0 +1,27 @@ +import { css } from "@emotion/react"; +import { createContext } from "react"; + +type InputLabelContainerProps = { + id: string; + children: React.ReactNode; +}; + +export const InputContext = createContext<{ id: string } | undefined>(undefined); + +export function InputLabelContainer({ id, children }: InputLabelContainerProps) { + return ( + +
+ {children} +
+ + ); +} diff --git a/src/component/common/input/Label.tsx b/src/component/common/input/Label.tsx new file mode 100644 index 00000000..1c7486a5 --- /dev/null +++ b/src/component/common/input/Label.tsx @@ -0,0 +1,63 @@ +import { css, Interpolation, Theme } from "@emotion/react"; +import { useContext } from "react"; + +import { InputContext } from "./InputLabelContainer"; + +type LabelProps = { + order?: number; + styles?: Interpolation; +} & React.LabelHTMLAttributes; + +export function Label({ id, children, order, styles }: LabelProps) { + const inputContext = useContext(InputContext); + + return ( + + ); +} diff --git a/src/component/common/input/index.ts b/src/component/common/input/index.ts new file mode 100644 index 00000000..836ad51f --- /dev/null +++ b/src/component/common/input/index.ts @@ -0,0 +1,3 @@ +export { Input } from "./Input"; +export { Label } from "./Label"; +export { InputLabelContainer } from "./InputLabelContainer"; diff --git a/src/component/common/radioButton/Radio.tsx b/src/component/common/radioButton/Radio.tsx new file mode 100644 index 00000000..6c668d62 --- /dev/null +++ b/src/component/common/radioButton/Radio.tsx @@ -0,0 +1,45 @@ +import { css } from "@emotion/react"; +import { useContext } from "react"; + +import { RadioContext } from "./RadioButtonGroup"; + +import ListItemCard from "@/component/common/Card/ListItemCard"; + +type RadioProps = { + value: string; + children: React.ReactNode; +}; + +export function Radio({ value, children }: RadioProps) { + const radioContext = useContext(RadioContext); + return ( + + + { + radioContext?.onChange && radioContext.onChange(e.target.value); + }} + css={css` + display: none; + `} + /> + + ); +} diff --git a/src/component/common/radioButton/RadioButtonGroup.tsx b/src/component/common/radioButton/RadioButtonGroup.tsx new file mode 100644 index 00000000..1093bc5d --- /dev/null +++ b/src/component/common/radioButton/RadioButtonGroup.tsx @@ -0,0 +1,28 @@ +import { css } from "@emotion/react"; +import { createContext } from "react"; + +export type RadioContextState = { + radioName: string; + isChecked: (value: string) => boolean; + onChange: (value: string) => void; +}; + +export const RadioContext = createContext(undefined); + +type RadioButtonGroupProps = { + children: React.ReactNode; +} & RadioContextState; + +export function RadioButtonGroup({ children, ...props }: RadioButtonGroupProps) { + return ( +
+ {children} +
+ ); +} diff --git a/src/component/common/radioButton/index.ts b/src/component/common/radioButton/index.ts new file mode 100644 index 00000000..054777c4 --- /dev/null +++ b/src/component/common/radioButton/index.ts @@ -0,0 +1,2 @@ +export { Radio } from "./Radio"; +export { RadioButtonGroup } from "./RadioButtonGroup"; From d20dcfe3c0b00e6052a19551f1de33cacf7a2d9b 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: Tue, 16 Jul 2024 00:22:08 +0900 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20#28=20=ED=8C=8C=EC=9D=BC/=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=EB=AA=85=20=EB=8C=80=EC=86=8C=EB=AC=B8=EC=9E=90=20?= =?UTF-8?q?=EA=B5=AC=EB=B6=84=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tsconfig.json | 1 + 1 file changed, 1 insertion(+) diff --git a/tsconfig.json b/tsconfig.json index b165dbc9..317c408c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -13,6 +13,7 @@ "isolatedModules": true, "noEmit": true, "jsx": "react-jsx", + "forceConsistentCasingInFileNames": true, /* Linting */ "strict": true,