diff --git a/app/content/audio/detail/[id]/page.tsx b/app/content/audio/detail/[id]/page.tsx
new file mode 100644
index 0000000..542f952
--- /dev/null
+++ b/app/content/audio/detail/[id]/page.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import AudioDetail from "@/components/main/content/audio-detail";
+
+export default function DetailAudioInfo() {
+  const params = useParams();
+  const id = params?.id as string;
+
+  return <AudioDetail id={id} />;
+}
diff --git a/app/content/image/detail/[id]/page.tsx b/app/content/image/detail/[id]/page.tsx
new file mode 100644
index 0000000..074790a
--- /dev/null
+++ b/app/content/image/detail/[id]/page.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import ImageDetail from "@/components/main/content/image-detail";
+
+export default function DetailImageInfo() {
+  const params = useParams();
+  const id = params?.id as string;
+
+  return <ImageDetail id={id} />;
+}
diff --git a/app/public/content/layout.tsx b/app/content/layout.tsx
similarity index 100%
rename from app/public/content/layout.tsx
rename to app/content/layout.tsx
diff --git a/app/content/text/detail/[id]/page.tsx b/app/content/text/detail/[id]/page.tsx
new file mode 100644
index 0000000..a1ff3af
--- /dev/null
+++ b/app/content/text/detail/[id]/page.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import DocumentDetail from "@/components/main/content/document-detail";
+
+export default function DetailDocumentInfo() {
+  const params = useParams();
+  const id = params?.id as string;
+
+  return <DocumentDetail id={id} />;
+}
diff --git a/app/public/content/video/comment/[id]/page.tsx b/app/content/video/comment/[id]/page.tsx
similarity index 100%
rename from app/public/content/video/comment/[id]/page.tsx
rename to app/content/video/comment/[id]/page.tsx
diff --git a/app/content/video/detail/[id]/page.tsx b/app/content/video/detail/[id]/page.tsx
new file mode 100644
index 0000000..a1ad7fd
--- /dev/null
+++ b/app/content/video/detail/[id]/page.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { useParams } from "next/navigation";
+import DetailVideo from "@/components/main/content/video-detail";
+
+export default function DetailVideoInfo() {
+  const params = useParams();
+  const id = params?.id as string;
+
+  return <DetailVideo id={id} />;
+}
diff --git a/app/public/content/audio/detail/[id]/page.tsx b/app/public/content/audio/detail/[id]/page.tsx
deleted file mode 100644
index 8a6f45f..0000000
--- a/app/public/content/audio/detail/[id]/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import AudioDetail from "@/components/main/content/audio-detail";
-
-export default async function DetailInfo({
-  params,
-}: {
-  params: { id: string };
-}) {
-  return <AudioDetail id={params.id} />;
-}
diff --git a/app/public/content/image/detail/[id]/page.tsx b/app/public/content/image/detail/[id]/page.tsx
deleted file mode 100644
index 39c0299..0000000
--- a/app/public/content/image/detail/[id]/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import ImageDetail from "@/components/main/content/image-detail";
-
-interface DetailInfoProps {
-  params: { id: string };
-}
-
-export default async function DetailImageInfo({ params }: DetailInfoProps) {
-  return <ImageDetail id={params?.id} />;
-}
diff --git a/app/public/content/text/detail/[id]/page.tsx b/app/public/content/text/detail/[id]/page.tsx
deleted file mode 100644
index bc65cef..0000000
--- a/app/public/content/text/detail/[id]/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import DocumentDetail from "@/components/main/content/document-detail";
-
-interface DetailInfoProps {
-  params: { id: string };
-}
-
-export default async function DetailInfo({ params }: DetailInfoProps) {
-  return <DocumentDetail id={params.id} />;
-}
diff --git a/app/public/content/video/detail/[id]/page.tsx b/app/public/content/video/detail/[id]/page.tsx
deleted file mode 100644
index ac98c8f..0000000
--- a/app/public/content/video/detail/[id]/page.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import DetailVideo from "@/components/main/content/video-detail";
-
-interface DetailInfoProps {
-  params: { id: string };
-}
-
-export default async function DetailInfo({ params }: DetailInfoProps) {
-  return <DetailVideo id={params.id} />;
-}