52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect } from "react";
|
|
import { usePathname, useRouter, useSearchParams } from "next/navigation";
|
|
|
|
/**
|
|
* [FormMessage 컴포넌트]
|
|
* - 로그인/회원가입 실패 메시지를 보여줍니다.
|
|
* - [UX 개선] 메시지가 보인 후, URL에서 ?message=... 부분을 지워서
|
|
* 새로고침 시 메시지가 다시 뜨지 않도록 합니다.
|
|
*/
|
|
export default function FormMessage({ message }: { message: string }) {
|
|
const router = useRouter();
|
|
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>
|
|
);
|
|
}
|