fix: Textfield에 string 타입으로 입력 시에는 0중복입력이 가능하도록 수정

Author: anyl92

app/(shared)/(ThemeTextField)/Container.tsx

@@ -23,7 +23,7 @@ export default function ThemeTextField({
     inputRef,
     handleInputChange,
     handleInputBlur,
-  } = useTextField({ id, content, checkErrorText });
+  } = useTextField({ id, content, inputType, checkErrorText });
 
   return (
     <div tabIndex={isFocus ? -1 : tabIndex} onFocus={() => setIsFocus(true)}>
@@ -54,7 +54,7 @@ export default function ThemeTextField({
             className={classNames("theme-textfield-input", {
               error: errorText,
             })}
-            type={inputType}
+            type="text"
             value={inputValue}
             placeholder={inputPlaceholder}
             onChange={handleInputChange}

app/(shared)/(ThemeTextField)/TextFieldType.ts

@@ -6,7 +6,7 @@ export type ThemeInfoTextFieldType = {
   title?: string;
   content: string;
   infoText?: string;
-  inputType?: string;
+  inputType?: "text" | "number";
   inputPlaceholder?: string;
   checkErrorText?: ValidationFunction<unknown>;
 };

app/(shared)/(ThemeTextField)/useTextField.tsx

@@ -8,6 +8,7 @@ import { ThemeInfoTextFieldType } from "./TextFieldType";
 const useTextField = ({
   id,
   content,
+  inputType,
   checkErrorText,
 }: ThemeInfoTextFieldType) => {
   const [inputValue, setInputValue] = useState<string>(content || "");
@@ -39,9 +40,11 @@ const useTextField = ({
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const cur = e.target.value;
-    if (cur.length > 1 && cur.length === cur.split("0").length - 1) {
-      setInputValue("0");
-      return;
+    if (inputType === "number") {
+      if (cur.length > 1 && cur.length === cur.split("0").length - 1) {
+        setInputValue("0");
+        return;
+      }
     }
     const error = checkErrorText ? checkErrorText(cur) : "";
     if (error) {

app/admin-new/(components)/CreateTheme/createTheme.ts

@@ -56,7 +56,7 @@ export const timeTextFieldProps: ThemeInfoTextFieldType = {
   title: "탈출 제한 시간(분)",
   content: "",
   infoText: "",
-  inputType: "text",
+  inputType: "number",
   inputPlaceholder: "분 단위 숫자로 입력해 주세요",
   checkErrorText: timeValidations,
 };
@@ -67,7 +67,7 @@ export const hintCountTextFieldProps: ThemeInfoTextFieldType = {
   title: "사용 가능한 힌트 수",
   content: "",
   infoText: "",
-  inputType: "text",
+  inputType: "number",
   inputPlaceholder: "숫자로 입력해 주세요",
   checkErrorText: hintValidations,
 };

app/admin-new/(components)/ThemeDrawer/consts/themeDrawerProps.ts

@@ -22,7 +22,7 @@ export const rateTextFieldProps: ThemeInfoTextFieldType = {
   title: "문제 진행률(%)",
   content: "",
   infoText: "",
-  inputType: "text",
+  inputType: "number",
   inputPlaceholder: "",
   checkErrorText: progressValidations,
 };

app/admin-new/(components)/ThemeDrawer/helpers/textFieldHelpers.ts

@@ -8,6 +8,9 @@ export const codeValidations = (value: unknown) => {
   ) {
     return "숫자로 입력해 주세요.";
   }
+  if (strValue.length > 4) {
+    return "네자리만 사용할 수 있습니다.";
+  }
   if (numValue > 9999) {
     return "네자리만 사용할 수 있습니다.";
   }