feat(ui): TextField에 maxLength Error 처리 로직을 추가합니다. (#96)

Author: jungwoo3490

.changeset/brave-zebras-cross.md

@@ -0,0 +1,5 @@
+---
+"@setaday/ui": minor
+---
+
+Add maxlength error handling logic in TextField

packages/ui/src/TextField/TextField.styles.ts

@@ -1,7 +1,7 @@
 import { cva } from "class-variance-authority";
 
 export const textFieldVariants = cva(
-  `rounded-[0.8rem] bg-gray-1 flex justify-between items-center px-[2rem] gap-[1rem]`,
+  "rounded-[0.8rem] mb-[0.4rem] bg-gray-1 flex justify-between items-center px-[2rem] gap-[1rem]",
   {
     variants: {
       isError: {
@@ -10,8 +10,16 @@ export const textFieldVariants = cva(
       inputSize: {
         desktop: "w-[33.5rem] h-[5.7rem]",
         desktop_lg: "w-[51rem] h-[6.1rem]",
-        mobile: "w-[33.5rem] h-[4.8rem]",
+        mobile: "w-[100%] h-[4.8rem]",
       },
     },
-  },
+  }
 );
+
+export const textCountVariants = cva("", {
+  variants: {
+    isError: {
+      true: "text-red-100",
+    },
+  },
+});

packages/ui/src/TextField/TextField.tsx

@@ -1,26 +1,52 @@
 import { cn } from "@setaday/util";
 import type { InputHTMLAttributes } from "react";
-import { textFieldVariants } from "./TextField.styles";
+import { textCountVariants, textFieldVariants } from "./TextField.styles";
 
 interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   isError?: boolean;
+  errorMessage?: string;
   maxLength: number;
   inputSize: "desktop" | "desktop_lg" | "mobile";
   value: string;
 }
 
-const TextField = ({ isError = false, value, maxLength, inputSize, ...inputProps }: TextFieldProps) => {
+const TextField = ({ isError = false, errorMessage, value, maxLength, inputSize, ...inputProps }: TextFieldProps) => {
   return (
-    <div className={cn(textFieldVariants({ isError, inputSize }))}>
-      <input
-        {...inputProps}
-        value={value}
-        className="bg-gray-1 text-gray-6 font-body7_m_16 w-full focus:outline-none"
-      />
-      <span className="text-gray-2 font-body6_m_12">
-        {value.length}/{maxLength}
-      </span>
-    </div>
+    <>
+      <div
+        className={cn(
+          textFieldVariants({
+            isError: isError || value.length > maxLength,
+            inputSize,
+          })
+        )}
+      >
+        <input
+          {...inputProps}
+          value={value}
+          className="bg-gray-1 text-gray-6 font-body7_m_16 w-full focus:outline-none"
+        />
+        <span className="text-gray-2 font-body6_m_12">
+          <span
+            className={cn(
+              textCountVariants({
+                isError: isError || value.length > maxLength,
+              })
+            )}
+          >
+            {value.length}
+          </span>
+          /{maxLength}
+        </span>
+      </div>
+      <div className="h-[1.45rem]">
+        {value.length > maxLength || (isError && errorMessage) ? (
+          <span className="text-red-100 font-caption1_m_12">
+            {value.length > maxLength ? `${maxLength}자가 초과되었어요` : errorMessage}
+          </span>
+        ) : null}
+      </div>
+    </>
   );
 };