59 lines
2.1 KiB
TypeScript
59 lines
2.1 KiB
TypeScript
/**
|
|
* @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>
|
|
);
|
|
}
|