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

src/components/input/TextArea.tsx

@@ -3,7 +3,6 @@
 import { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
 
 import { cn } from '@/lib/helper';
-import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface TextAreaProps {
   label?: string;
@@ -51,9 +50,6 @@ const TextArea = ({
   isLoading = false,
   rows = 3,
 }: TextAreaProps) => {
-  const showErrorMessage = Boolean(isError && errorMessage);
-  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
-
   return (
     <div
       className={cn(
@@ -87,7 +83,7 @@ const TextArea = ({
 
       <textarea
         className={cn(
-          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all bg-white',
+          'input h-auto px-4 py-2 text-base font-normal leading-6 w-full rounded-lg! outline-none! transition-all',
           {
             'border-error': isError,
             'border-success!': isValid,
@@ -113,11 +109,10 @@ const TextArea = ({
         </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 && <p className='w-full text-sm text-error'>{errorMessage}</p>}
     </div>
   );
 };