style: fallback UI 변경

src/components/GNB/index.stories.tsx

@@ -30,7 +30,7 @@ export const Error = {
       <Header />
       <Nav />
       <main className="mt-[50px] ml-[250px] p-[20px]">
-        <ErrorFallback />
+        <ErrorFallback message={"Error Message Example"} />
       </main>
     </MemoryRouter>
   ),

src/components/fallback/Blank/index.tsx

@@ -1,3 +1,9 @@
 export default function Blank() {
-  return <div>데이터가 없습니다.</div>;
+  return (
+    <div className="flex justify-center items-center bg-gray-100">
+      <div className="p-6 bg-white rounded-lg text-center text-xl">
+        데이터가 없습니다.
+      </div>
+    </div>
+  );
 }

src/components/fallback/ErrorFallback/index.tsx

@@ -1,5 +1,14 @@
 type ErrorFallbackProps = { message?: string };
 
 export default function ErrorFallback({ message }: ErrorFallbackProps) {
-  return <div>에러발생{message}</div>;
+  return (
+    <div className="flex justify-center items-center bg-gray-100">
+      <div className="flex flex-col items-center">
+        <div className="p-6 bg-white rounded-lg text-center text-xl">
+          에러가 발생했습니다
+        </div>
+        <div>{message}</div>
+      </div>
+    </div>
+  );
 }

src/components/fallback/LoadingFallback/index.tsx

@@ -1,3 +1,9 @@
 export default function LoadingFallback() {
-  return <div>로딩중</div>;
+  return (
+    <div className="flex justify-center items-center bg-gray-100">
+      <div className="p-6 bg-white rounded-lg text-center text-xl">
+        로딩중입니다
+      </div>
+    </div>
+  );
 }