refactor(FE-114): remove FieldMessage component usage and streamline error message handling in form inputs

src/components/input/TextInput.tsx

@@ -8,7 +8,6 @@ import {
 } from 'react';
 
 import { cn } from '@/lib/helper';
-import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface TextInputProps {
   type?: HTMLInputTypeAttribute;
@@ -56,9 +55,6 @@ const TextInput = ({
   readOnly = false,
   isLoading = false,
 }: TextInputProps) => {
-  const showErrorMessage = Boolean(isError && errorMessage);
-  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
-
   return (
     <div
       className={cn(
@@ -91,7 +87,7 @@ const TextInput = ({
 
       <div
         className={cn(
-          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200 bg-white',
+          'input h-12 px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all duration-200',
           {
             'border-error': isError,
             'border-success!': isValid,
@@ -123,11 +119,12 @@ const TextInput = ({
         )}
       </div>
 
-      <FieldMessage
-        message={feedbackMessage}
-        tone={showErrorMessage ? 'error' : 'info'}
-        isVisible={showErrorMessage || Boolean(bottomLabel)}
-      />
+      {!isError && bottomLabel && (
+        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
+      )}
+      {isError && errorMessage && (
+        <p className='w-full text-sm text-error'>{errorMessage}</p>
+      )}
     </div>
   );
 };