From 3da75fe1f8f5b5c1d4a48274f900cfb67d3a5911 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, 17 Jul 2024 00:43:05 +0900 Subject: [PATCH 1/7] =?UTF-8?q?refactor:=20#11=20=ED=9B=85=20object=20retu?= =?UTF-8?q?rn=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/test/Staging.tsx | 6 +++--- src/hooks/useCheckBox.ts | 2 +- src/hooks/useInput.ts | 2 +- src/hooks/useRadioButton.ts | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/test/Staging.tsx b/src/app/test/Staging.tsx index 4fae2a19..c4e8f50b 100644 --- a/src/app/test/Staging.tsx +++ b/src/app/test/Staging.tsx @@ -14,11 +14,11 @@ import { useRadioButton } from "@/hooks/useRadioButton"; import { DefaultLayout } from "@/layout/DefaultLayout.tsx"; export default function Staging() { - const [isRadioChecked, onChange, selectedValue] = useRadioButton(); - const [isCheckBoxChecked, toggle, selectedValues] = useCheckBox(); + const { isChecked: isRadioChecked, onChange, selectedValue } = useRadioButton(); + const { isChecked: isCheckBoxChecked, toggle, selectedValues } = useCheckBox(); const { openBottomSheet, bottomSheetState } = useBottomSheet(); const [number, setNumber] = useState(0); - const [layerName, handleChangeName] = useInput(); + const { value: layerName, handleInputChange: handleChangeName } = useInput(); useEffect(() => { console.log("라디오 버튼 선택 value:", selectedValue); diff --git a/src/hooks/useCheckBox.ts b/src/hooks/useCheckBox.ts index 5c274f3d..a6c815ca 100644 --- a/src/hooks/useCheckBox.ts +++ b/src/hooks/useCheckBox.ts @@ -6,5 +6,5 @@ export const useCheckBox = () => { const toggle = (value: string) => setCheckedStates((prev) => ({ ...prev, [value]: !prev[value] })); const selectedValues = Object.keys(checkedStates).filter((key) => checkedStates[key]); - return [isChecked, toggle, selectedValues] as const; + return { isChecked, toggle, selectedValues }; }; diff --git a/src/hooks/useInput.ts b/src/hooks/useInput.ts index 95794218..2f72b738 100644 --- a/src/hooks/useInput.ts +++ b/src/hooks/useInput.ts @@ -7,5 +7,5 @@ export const useInput = (defaultValue?: string) => { setValue(e.target.value); }, []); - return [value, handleInputChange] as const; + return { value, handleInputChange }; }; diff --git a/src/hooks/useRadioButton.ts b/src/hooks/useRadioButton.ts index d0febd5e..027e3364 100644 --- a/src/hooks/useRadioButton.ts +++ b/src/hooks/useRadioButton.ts @@ -5,5 +5,5 @@ export const useRadioButton = () => { const isChecked = (value: string) => selectedValue === value; const onChange = (value: string) => setSelectedValue(value); - return [isChecked, onChange, selectedValue] as const; + return { isChecked, onChange, selectedValue }; }; From a90491ccb71cb5e8e50eb05fb0b601c097bb556f 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, 17 Jul 2024 01:21:15 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20#11=20max,=20min=20length=20validat?= =?UTF-8?q?ion=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/component/common/input/Input.tsx | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/component/common/input/Input.tsx b/src/component/common/input/Input.tsx index 7fc19dcd..c1397783 100644 --- a/src/component/common/input/Input.tsx +++ b/src/component/common/input/Input.tsx @@ -3,20 +3,27 @@ import { forwardRef, useContext } from "react"; import { InputContext } from "./InputLabelContainer"; +import { Typography } from "@/component/common/typography"; + type InputProps = { + value: string; + onChange: (e: React.ChangeEvent) => void; width?: string; + wordCount?: boolean; } & React.InputHTMLAttributes; -export const Input = forwardRef(function ({ id, width = "100%", ...props }: InputProps) { +export const Input = forwardRef(function ({ id, width = "100%", wordCount, ...props }: InputProps) { + const { maxLength, value } = props; const inputContext = useContext(InputContext); return (
+ {/* FIXME - typography 컬러 넣기 !! */} + {wordCount && maxLength && {`${value.length}/${maxLength}`}}
); From 2bf4eeaec9cfb8e9e440fefbf9ff403732f2a9b5 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, 17 Jul 2024 22:43:22 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20#11=20textarea=20=EC=B6=94=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/input/TextArea.tsx | 53 +++++++++++++++++++++++++ src/component/common/input/index.ts | 1 + src/hooks/useInput.ts | 4 +- src/style/global.css | 8 +++- src/style/variable.ts | 1 + 6 files changed, 71 insertions(+), 4 deletions(-) create mode 100644 src/component/common/input/TextArea.tsx diff --git a/src/app/test/Staging.tsx b/src/app/test/Staging.tsx index c4e8f50b..d7e3ed5e 100644 --- a/src/app/test/Staging.tsx +++ b/src/app/test/Staging.tsx @@ -4,7 +4,7 @@ import { Fragment, useEffect, useState } from "react"; import { BottomSheet } from "@/component/BottomSheet"; import { Button, ButtonProvider } from "@/component/common/button"; import { CheckBox, CheckBoxGroup } from "@/component/common/checkBox"; -import { Input, InputLabelContainer, Label } from "@/component/common/input"; +import { Input, InputLabelContainer, Label, TextArea } from "@/component/common/input"; import { ProgressBar } from "@/component/common/ProgressBar"; import { Radio, RadioButtonGroup } from "@/component/common/radioButton"; import { useBottomSheet } from "@/hooks/useBottomSheet.ts"; @@ -19,6 +19,7 @@ export default function Staging() { const { openBottomSheet, bottomSheetState } = useBottomSheet(); const [number, setNumber] = useState(0); const { value: layerName, handleInputChange: handleChangeName } = useInput(); + const { value: description, handleInputChange: handleChangeDescription } = useInput(); useEffect(() => { console.log("라디오 버튼 선택 value:", selectedValue); @@ -72,6 +73,11 @@ export default function Staging() { + + +