feat(FE-Storyless): add FieldMessage component for consistent field feedback across inputs

src/components/input/TextInput.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react';
 
 import { cn } from '@/lib/helper';
+import FieldMessage from '@/components/helper/FieldMessage';
 
 export interface TextInputProps {
   type?: HTMLInputTypeAttribute;
@@ -55,6 +56,9 @@ const TextInput = ({
   readOnly = false,
   isLoading = false,
 }: TextInputProps) => {
+  const showErrorMessage = Boolean(isError && errorMessage);
+  const feedbackMessage = showErrorMessage ? errorMessage : bottomLabel;
+
   return (
     <div
       className={cn(
@@ -119,12 +123,11 @@ const TextInput = ({
         )}
       </div>
 
-      {!isError && bottomLabel && (
-        <p className='w-full text-sm opacity-60'>{bottomLabel}</p>
-      )}
-      {isError && errorMessage && (
-        <p className='w-full text-sm text-error'>{errorMessage}</p>
-      )}
+      <FieldMessage
+        message={feedbackMessage}
+        tone={showErrorMessage ? 'error' : 'info'}
+        isVisible={showErrorMessage || Boolean(bottomLabel)}
+      />
     </div>
   );
 };