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<HTMLTextAreaElement> {
-  onChangeValue: (value: string) => void;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => 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<HTMLTextAreaElement>) => {
     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<HTMLTextAreaElement>;
+
+    onChange(newEvent);
   };
   return (
     <S.TextAreaWrapper>
diff --git a/src/components/commons/input/textField/TextField.tsx b/src/components/commons/input/textField/TextField.tsx
index 7209f920..1e51ef41 100644
--- a/src/components/commons/input/textField/TextField.tsx
+++ b/src/components/commons/input/textField/TextField.tsx
@@ -1,8 +1,8 @@
-import { ChangeEvent, InputHTMLAttributes } from "react";
+import React, { ChangeEvent, InputHTMLAttributes, useRef } from "react";
 import * as S from "./TextField.styled";
 
 export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
-  onChangeValue: (value: string) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
   maxLength?: number;
   placeholder: string;
   narrow?: false | true;
@@ -12,8 +12,9 @@ export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 const TextField = ({
+  name,
   value,
-  onChangeValue,
+  onChange,
   maxLength,
   placeholder,
   narrow,
@@ -24,32 +25,62 @@ const TextField = ({
 }: TextFieldProps) => {
   const label = unit === "time" ? "분" : unit === "ticket" ? "매" : "원";
 
+  const inputRef = useRef<HTMLInputElement>(null);
+
   // 값 입력될 떄
   const handleOnInput = (e: ChangeEvent<HTMLInputElement>) => {
+    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<HTMLInputElement>;
+
+    onChange(newEvent);
   };
 
   // 값 지울 때
   const handleClearInput = () => {
-    onChangeValue("");
+    if (inputRef.current) {
+      const inputName = inputRef.current.name;
+
+      // 값 지우기
+      inputRef.current.value = "";
+
+      const newEvent = {
+        target: {
+          name: inputName,
+          value: "",
+        },
+      } as ChangeEvent<HTMLInputElement>;
+
+      onChange(newEvent);
+    }
   };
 
   return (
     <S.TextFieldLayout narrow={narrow}>
       <S.TextFieldWrapper>
         <S.TextFieldInput
-          {...rest}
+          ref={inputRef}
+          name={name}
           value={value}
           onChange={handleOnInput}
           maxLength={maxLength}
           placeholder={placeholder}
+          {...rest}
         />
         {!narrow && !unit && value && <S.TextClear onClick={handleClearInput} />}
         {unit && <S.TextUnit>{label}</S.TextUnit>}
diff --git a/src/pages/test/TestPage.tsx b/src/pages/test/TestPage.tsx
index 25e8cb3a..952142d9 100644
--- a/src/pages/test/TestPage.tsx
+++ b/src/pages/test/TestPage.tsx
@@ -8,8 +8,8 @@ import Stepper from "@components/commons/stepper/Stepper";
 import TimePicker from "@components/commons/timepicker/TimePicker";
 import Toast from "@components/commons/toast/Toast";
 import useToast from "@hooks/useToast";
+import { ChangeEvent, useState } from "react";
 import { numericFilter } from "@utils/useInputFilter";
-import { useState } from "react";
 import { Dayjs } from "dayjs";
 
 const TestPage = () => {
@@ -19,11 +19,11 @@ const TestPage = () => {
   const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
   const { showToast, isToastVisible } = useToast();
 
-  const handleChangeInput = (value: string) => {
-    setInputValue(value);
+  const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
+    setInputValue(e.target.value);
   };
-  const handleChangeInputArea = (value: string) => {
-    setInputAreaValue(value);
+  const handleChangeInputArea = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setInputAreaValue(e.target.value);
   };
   const onMinusClick = () => {
     setRound((prev) => prev - 1);
@@ -37,17 +37,16 @@ const TestPage = () => {
   console.log(selectedDate);
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "3rem", alignItems: "center" }}>
-      <div style={{ display: "flex", flexDirection: "column", gap: "3rem" }}>
+      <div style={{ display: "flex", flexDirection: "column" }}>
         <TextField
           value={inputValue}
-          onChangeValue={handleChangeInput}
-          filter={numericFilter}
-          maxLength={4}
-          placeholder="비밀번호 숫자 4자리"
+          onChange={handleChangeInput}
+          maxLength={30}
+          placeholder="입력해주세요"
         />
         <TextArea
           value={inputAreaValue}
-          onChangeValue={handleChangeInputArea}
+          onChange={handleChangeInputArea}
           maxLength={300}
           placeholder="입력해주세요"
         />