auto-trade/components/form-message.tsx

/**
 * @file components/form-message.tsx
 * @description 폼 제출 결과(성공/에러) 메시지를 표시하는 컴포넌트
 * @remarks
 * - [레이어] Components/UI/Feedback
 * - [기능] URL 쿼리 파라미터(`message`)를 감지하여 표시 후 URL 정리
 * - [UX] 메시지 확인 후 새로고침 시 메시지가 남지 않도록 히스토리 정리 (History API)
 */

"use client";

import { useEffect } from "react";
import { usePathname, useSearchParams } from "next/navigation";

/**
 * 폼 메시지 컴포넌트
 * @param message 표시할 메시지 텍스트
 * @returns 메시지 박스 또는 null
 */
export default function FormMessage({ message }: { message: string }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    // 메시지가 있고, URL에 message 파라미터가 있다면
    if (message && searchParams.has("message")) {
      // 1. 현재 URL 파라미터 복사
      const params = new URLSearchParams(searchParams.toString());
      // 2. message 파라미터 삭제
      params.delete("message");

      // 3. URL 업데이트 (페이지 새로고침 없이 주소만 변경)
      // replaceState를 사용하여 히스토리에 남기지 않고 주소창만 깔끔하게 바꿉니다.
      const newUrl = params.toString()
        ? `${pathname}?${params.toString()}`
        : pathname;
      window.history.replaceState(null, "", newUrl);
    }
  }, [message, pathname, searchParams]);

  if (!message) return null;

  // 에러 메시지인지 성공 메시지인지 대략적으로 판단 (성공 메시지는 보통 '확인', '완료' 등이 포함됨)
  // 여기서는 간단하게 모든 메시지를 동일한 스타일로 보여주되, 필요하면 분기 가능합니다.
  const isError = !message.includes("완료") && !message.includes("확인");

  return (
    <div
      className={`rounded-md p-4 text-sm ${
        isError
          ? "bg-red-50 text-red-700 dark:bg-red-900/50 dark:text-red-200"
          : "bg-blue-50 text-blue-700 dark:bg-blue-900/50 dark:text-blue-200"
      }`}
    >
      {message}
    </div>
  );
}