회원가입

components/form-message.tsx

@@ -0,0 +1,51 @@
+"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>
+  );
+}