화면에 띄울 컨텐츠 없을 때 렌더링 할 컴포넌트 별도의 파일로 제작

front-end/components/NoContent.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Image from 'next/image';
+
+type PropsType = {
+	text: string;
+};
+
+const NoContent = ({ text }: PropsType) => {
+	return (
+		<div className="flex flex-col items-center justify-center w-full h-full bg-white">
+			<div className="px-6 py-4 mb-10 text-3xl rounded-lg">{text}</div>
+			<Image
+				className="opacity-25"
+				src={'/images/confucian.jpeg'}
+				width={500}
+				height={500}
+				alt="Maple img"
+			/>
+		</div>
+	);
+};
+
+export default NoContent;