Feat : Loading page 제작

Components/Common/PageLoading/PageSpinner.tsx

@@ -0,0 +1,10 @@
+'use client';
+
+import React from 'react';
+import { Spinner } from '@material-tailwind/react';
+
+const PageSpinner = () => {
+	return <Spinner color="pink" className="w-8 h-8" />;
+};
+
+export default PageSpinner;

Components/Common/PageLoading/ProgressBar.tsx

@@ -11,18 +11,18 @@ const ProgressBar = () => {
 			setValue((oldValue) => {
 				const newValue = oldValue + 10;
 
-				if (newValue === 100) {
+				if (newValue >= 100) {
 					clearInterval(interval);
 				}
 
 				return newValue;
 			});
 		}, 600);
-	});
+	}, []);
 
 	return (
 		<>
-			<Progress value={value} color="red" />
+			<Progress value={value} size="sm" color="pink" className="h-1" />
 		</>
 	);
 };

app/loading.tsx

@@ -1,7 +1,28 @@
+import ProgressBar from '@/Components/Common/PageLoading/ProgressBar';
 import React from 'react';
+import icon_cat from '@/public/icon_cat.svg';
+import Image from 'next/image';
+import PageSpinner from '@/Components/Common/PageLoading/PageSpinner';
 
 const Loading = () => {
-	return <div>Loading</div>;
+	return (
+		<div className=" bg-secondary w-full h-full">
+			<ProgressBar />
+			<div className="w-full h-full flex flex-col items-center justify-center bg-secondary">
+				<Image
+					src={icon_cat}
+					alt="cat"
+					width={100}
+					height={100}
+					className="w-32 h-32"
+				/>
+				<div className=" w-56 h-20 flex flex-col items-center justify-center rounded-md bg-white">
+					<PageSpinner />
+					<h1>Loading...</h1>
+				</div>
+			</div>
+		</div>
+	);
 };
 
 export default Loading;