[#165] 등록/수정 모달 QA, 에러 바운더리 추가

src/api/register/post-register-wine.ts

@@ -1,10 +1,6 @@
 import instance from "@/lib/axios";
 import { WineFormData } from "@/types/wine";
 
-interface ImageData {
-  url: File;
-}
-
 const postRegisterWine = async (wineFormData: WineFormData) => {
   try {
     const response = await instance.post("/wines", wineFormData);

src/app/(auth)/login/layout.tsx

@@ -1,5 +1,6 @@
 import { ReactNode } from "react";
 import { METADATA } from "@/constants/metadata";
+import ErrorBoundary from "@/error/error-boundary";
 
 export function generateMetadata() {
   const TITLE = "로그인";
@@ -22,5 +23,9 @@ export function generateMetadata() {
 }
 
 export default function LoginLayout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
+  return (
+    <>
+      <ErrorBoundary>{children}</ErrorBoundary>
+    </>
+  );
 }

src/app/(auth)/login/page.tsx

@@ -35,7 +35,6 @@ const Page = () => {
   const { loginError } = useToast();
   const [loginType, setLoginType] = useState<string | null>(null);
   const [state, formAction, isPending] = useActionState(login, null);
-
   const { checked, setChecked, initialId, opts } = useRememberId();
 
   const email = watch("email");

src/app/layout.tsx

@@ -6,6 +6,7 @@ import QueryProvider from "@/providers/query-provider";
 import getMe from "@/api/user/get-me";
 import KaKaoInitializer from "@/lib/kakao-initializer";
 import ToastProvider from "@/providers/toast/toast-provider";
+import { ToastContainer } from "react-toastify";
 
 export function generateMetadata() {
   return METADATA;
@@ -31,6 +32,7 @@ export default async function RootLayout({
           <ToastProvider />
         </QueryProvider>
         <KaKaoInitializer />
+        <ToastContainer position="top-right" autoClose={1500} />
       </body>
     </html>
   );

src/components/modal/page-modal.tsx

@@ -24,6 +24,13 @@ const PageModal = ({
     e.preventDefault();
   };
 
+  const handleCancelEsc = (e: KeyboardEvent) => {
+    if (e.key === "Escape") {
+      router.back();
+      e.preventDefault();
+    }
+  };
+
   useLayoutEffect(() => {
     const currentScrollY = window.scrollY;
     lockingScroll(currentScrollY);
@@ -38,19 +45,20 @@ const PageModal = ({
 
     if (modalRef.current) {
       modalRef.current.addEventListener("cancel", handleCancel);
+      modalRef.current.addEventListener("keydown", handleCancelEsc);
     }
 
     return () => {
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       modalRef.current?.removeEventListener("cancel", handleCancel);
+      modalRef.current?.removeEventListener("keydown", handleCancelEsc);
     };
   }, [modalRef]);
 
   return (
     <Modal
       ref={modalRef}
       className={cn(
-        "border-none px-6 mobile:mt-[94px] tablet:relative pc:relative",
+        "h-[738px] border-none px-6 tablet:relative pc:relative",
         "mobile:bottom-0 mobile:left-0 mobile:right-0 mobile:mb-0 mobile:w-full mobile:max-w-full",
         "mobile:rounded-none mobile:rounded-t-2xl",
         "tablet:h-[1010px]",

src/error/error-boundary.tsx

@@ -0,0 +1,47 @@
+"use client";
+
+import { Icon } from "@/components";
+import { Component } from "react";
+import { toast } from "react-toastify";
+
+interface ErrorBoundaryProps {
+  children: React.ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+}
+
+const ALERT_ERROR_ICON = <Icon icon="AlertIcon" color="red300" size="md" />;
+
+class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  /**
+   * 오류가 발생한 후 대체 UI를 렌더링하기 위해 state를 업데이트 합니다.
+   */
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true };
+  }
+
+  /**
+   * 오류 정보를 기록하는 데 사용합니다. side effect를 수행할 수 있습니다.
+   * @param error
+   * @param errorInfo
+   */
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    toast.error(error.message, { icon: ALERT_ERROR_ICON });
+  }
+
+  /**
+   * @returns props로 받은 대체 UI 또는 자식 컴포넌트를 렌더링합니다.
+   */
+  render(): React.ReactNode {
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;