From 2b1e769c991d0cd8a317057f1a99da8b38792c50 Mon Sep 17 00:00:00 2001 From: jerry Date: Wed, 10 Jul 2024 18:56:36 +0900 Subject: [PATCH 1/4] =?UTF-8?q?refactor:=20TextField=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/input/textField/TextField.tsx | 47 +++++++++++++++---- 1 file changed, 38 insertions(+), 9 deletions(-) diff --git a/src/components/commons/input/textField/TextField.tsx b/src/components/commons/input/textField/TextField.tsx index 7209f920..6f7e5285 100644 --- a/src/components/commons/input/textField/TextField.tsx +++ b/src/components/commons/input/textField/TextField.tsx @@ -1,60 +1,89 @@ -import { ChangeEvent, InputHTMLAttributes } from "react"; +import React, { ChangeEvent, InputHTMLAttributes, useRef } from "react"; import * as S from "./TextField.styled"; export interface TextFieldProps extends InputHTMLAttributes { - onChangeValue: (value: string) => void; + onChange: (e: React.ChangeEvent) => void; maxLength?: number; placeholder: string; narrow?: false | true; unit?: "time" | "ticket" | "amount"; // 단위 : "분", "매", "원" filter?: (value: string) => string; - cap?: false | true; } const TextField = ({ + name, value, - onChangeValue, + onChange, maxLength, placeholder, narrow, unit, filter, - cap, ...rest }: TextFieldProps) => { const label = unit === "time" ? "분" : unit === "ticket" ? "매" : "원"; + const inputRef = useRef(null); + // 값 입력될 떄 const handleOnInput = (e: ChangeEvent) => { + const inputName = e.target.name; let inputValue = e.target.value; + if (filter) { inputValue = filter(inputValue); } if (maxLength && inputValue.length > maxLength) { inputValue = inputValue.slice(0, maxLength); } - onChangeValue(inputValue); + + const newEvent = { + ...e, + target: { + ...e.target, + name: inputName, + value: inputValue, + }, + } as ChangeEvent; + + onChange(newEvent); }; // 값 지울 때 const handleClearInput = () => { - onChangeValue(""); + if (inputRef.current) { + const inputName = inputRef.current.name; + + // 값 지우기 + inputRef.current.value = ""; + + const newEvent = { + target: { + name: inputName, + value: "", + }, + } as ChangeEvent; + + onChange(newEvent); + } }; return ( {!narrow && !unit && value && } {unit && {label}} - {maxLength && cap && {`${(value as string).length}/${maxLength}`}} + {maxLength && {`${(value as string).length}/${maxLength}`}} ); }; From 76328aa41513444e33dc2349ab9d54f30b26e81e Mon Sep 17 00:00:00 2001 From: jerry Date: Wed, 10 Jul 2024 18:56:47 +0900 Subject: [PATCH 2/4] =?UTF-8?q?refactor:=20TextArea=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B0=9C=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../commons/input/textArea/TextArea.tsx | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/commons/input/textArea/TextArea.tsx b/src/components/commons/input/textArea/TextArea.tsx index a0dc7d67..2032212b 100644 --- a/src/components/commons/input/textArea/TextArea.tsx +++ b/src/components/commons/input/textArea/TextArea.tsx @@ -1,19 +1,28 @@ -import { ChangeEvent, TextareaHTMLAttributes } from "react"; +import React, { ChangeEvent, TextareaHTMLAttributes } from "react"; import * as S from "./TextArea.styled"; export interface TextAreaProps extends TextareaHTMLAttributes { - onChangeValue: (value: string) => void; + onChange: (e: React.ChangeEvent) => void; maxLength?: number; placeholder: string; } -const TextArea = ({ value, onChangeValue, maxLength, placeholder, ...rest }: TextAreaProps) => { +const TextArea = ({ value, onChange, maxLength, placeholder, ...rest }: TextAreaProps) => { const handleOnInput = (e: ChangeEvent) => { let inputValue = e.target.value; if (maxLength && inputValue.length > maxLength) { inputValue = inputValue.slice(0, maxLength); } - onChangeValue(inputValue); + + const newEvent = { + ...e, + target: { + ...e.target, + value: inputValue, + }, + } as ChangeEvent; + + onChange(newEvent); }; return ( From 4940b5cd713d372d798b4e1b90f70a0c1435c7be Mon Sep 17 00:00:00 2001 From: jerry Date: Wed, 10 Jul 2024 18:56:56 +0900 Subject: [PATCH 3/4] =?UTF-8?q?fix:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90=EC=84=9C=20=EC=82=AC?= =?UTF-8?q?=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/test/TestPage.tsx | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/src/pages/test/TestPage.tsx b/src/pages/test/TestPage.tsx index 901daea9..c02b05e7 100644 --- a/src/pages/test/TestPage.tsx +++ b/src/pages/test/TestPage.tsx @@ -7,8 +7,7 @@ import Spacing from "@components/commons/spacing/Spacing"; import Stepper from "@components/commons/stepper/Stepper"; import Toast from "@components/commons/toast/Toast"; import useToast from "@hooks/useToast"; -import { numericFilter } from "@utils/useInputFilter"; -import { useState } from "react"; +import { ChangeEvent, useState } from "react"; const TestPage = () => { const [inputValue, setInputValue] = useState(""); @@ -16,11 +15,11 @@ const TestPage = () => { const [round, setRound] = useState(1); const { showToast, isToastVisible } = useToast(); - const handleChangeInput = (value: string) => { - setInputValue(value); + const handleChangeInput = (e: ChangeEvent) => { + setInputValue(e.target.value); }; - const handleChangeInputArea = (value: string) => { - setInputAreaValue(value); + const handleChangeInputArea = (e: ChangeEvent) => { + setInputAreaValue(e.target.value); }; const onMinusClick = () => { setRound((prev) => prev - 1); @@ -30,17 +29,16 @@ const TestPage = () => { }; return (
-
+