diff --git a/next.config.mjs b/next.config.mjs
index 34a6cbc..bdb63f6 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -2,6 +2,10 @@
 const nextConfig = {
   experimental: { instrumentationHook: true },
   reactStrictMode: true,
+
+  images: {
+    domains: ['www.kobis.or.kr', 'd2qf2amuam62ps.cloudfront.net']
+  },
   swcMinify: true,
   compiler: {
     styledComponents: true
diff --git a/package.json b/package.json
index 9e6f9c0..e7f0dea 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "react-query": "^3.39.3",
     "react-use": "^17.5.1",
     "react-virtuoso": "^4.10.1",
+    "react-youtube": "^10.1.0",
     "scroll-lock": "^2.1.5",
     "swiper": "^11.1.8",
     "uuidv4": "^6.2.13",
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..538c75e
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/favicon.svg b/public/favicon.svg
new file mode 100644
index 0000000..3aeb316
--- /dev/null
+++ b/public/favicon.svg
@@ -0,0 +1,6 @@
+<svg width="134" height="73" viewBox="0 0 134 73" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M124.607 34.4259C124.58 36.9596 124.181 39.4301 123.563 41.8795C123.381 42.5989 123.192 42.793 122.409 42.4364C115.415 39.2487 108.388 36.139 101.394 32.9533C98.7444 31.7466 96.5461 33.0672 95.5081 34.8964C94.8816 36.0039 95.0081 37.1516 95.3689 38.3183C97.2929 44.5461 99.2022 50.7803 101.118 57.0102C101.571 58.4849 102.008 59.9659 102.489 61.4321C102.668 61.9743 102.664 62.1937 101.985 62.3309C93.4427 64.0566 85.5883 62.468 78.6073 57.2507C71.9048 52.2402 68.1559 45.4617 67.2276 37.1242C65.6243 22.7318 75.3584 9.33737 89.5356 6.19181C106.295 2.47241 122.481 14.0357 124.35 31.0884C124.472 32.1981 124.523 33.3141 124.605 34.428L124.607 34.4259Z" fill="#6B30E9"/>
+<path d="M10.2721 23.1183C10.2721 23.4558 10.2721 23.7913 10.2721 24.1288C10.2721 37.0739 10.2721 50.019 10.2721 62.9663C10.2721 65.6076 8.94936 67.6962 6.72574 68.2806C3.09495 69.2342 0.0675318 67.2722 0.0506542 63.4536C-0.0337337 45.6013 0.0147894 27.7512 0.00635059 9.90103C0.00635059 7.42214 1.42618 6.01919 3.54009 5.17742C6.25949 4.09304 8.95147 4.35886 11.5759 5.55295C12.6139 6.02552 13.2468 6.88417 13.7574 7.87994C18.4303 16.9854 23.1181 26.0824 27.8016 35.1837C27.9282 35.4305 28.0632 35.6731 28.2679 36.0571C28.521 35.5845 28.7299 35.2026 28.9303 34.8166C33.4936 26.0402 38.0547 17.2639 42.6159 8.48543C44.3796 5.08881 47.0294 3.79979 50.8163 4.56139C52.7319 4.94535 54.4872 5.68164 55.8395 7.18374C56.5399 7.96222 56.8775 8.85462 56.8754 9.8926C56.8711 12.0339 56.8754 14.1774 56.8754 16.3187C56.8754 31.8714 56.8669 47.4241 56.888 62.9789C56.888 64.4473 56.4724 65.73 55.5695 66.8523C54.3079 68.4177 51.926 68.9367 49.6876 68.1772C47.848 67.5527 46.4471 65.5633 46.4324 63.4093C46.4091 59.7764 46.4218 56.1456 46.4577 52.5127C46.5526 42.8587 46.6708 33.2048 46.7783 23.5508C46.7805 23.344 46.7783 23.1373 46.6349 22.8693C46.4788 23.1436 46.3121 23.4158 46.1644 23.6963C41.6919 32.2744 37.2235 40.8566 32.7425 49.4325C32.0316 50.7933 31.2552 52.1034 29.5189 52.3798C26.8248 52.8081 25.1877 52.0359 23.943 49.5992C19.5738 41.0381 15.2257 32.4643 10.8692 23.8947C10.7321 23.6246 10.5865 23.3609 10.443 23.093C10.3861 23.1035 10.3291 23.1141 10.2721 23.1225V23.1183Z" fill="#6B30E9"/>
+<path d="M130.052 35.1555C130.073 37.704 129.561 41.0331 128.601 44.3011C128.415 44.9298 128.189 45.1049 127.584 44.7715C126.831 44.3559 125.7 44.1914 125.369 43.5753C125.078 43.0374 125.696 42.0289 125.865 41.2188C127.905 31.415 125.997 22.4657 119.622 14.7147C112.567 6.13663 103.266 2.3434 92.2972 3.63453C80.3563 5.03959 71.7192 11.5691 67.2614 22.7167C62.7298 34.0479 64.6053 44.761 72.4027 54.2251C77.3141 60.1871 83.774 63.5499 91.3985 64.7124C95.1833 65.2904 98.9385 65.0964 102.66 64.2651C103.183 64.1491 103.375 64.1934 103.487 64.7293C103.611 65.3305 103.749 65.9592 104.033 66.493C104.508 67.379 104.128 67.5352 103.329 67.6955C100.763 68.2124 98.1811 68.4465 95.563 68.4571C79.9175 68.5246 65.5378 57.2293 62.3268 41.1766C58.6644 22.8686 69.6348 6.40878 85.9597 1.4742C105.89 -4.5511 126.563 8.53114 129.692 29.0944C129.953 30.8159 130.05 32.55 130.052 35.1513V35.1555Z" fill="#67439B"/>
+<path d="M129.514 56.2437C128.668 56.1868 127.628 55.7416 126.645 55.1214C124.708 53.8999 124.504 53.8851 122.808 55.3281C119.841 57.8513 116.911 60.4167 113.962 62.9568C113.582 63.2838 113.624 63.6678 113.759 64.056C114.046 64.8914 114.384 65.71 114.671 66.5454C115.217 68.1403 115.36 69.7289 114.206 71.1298C113.133 72.4357 111.723 72.9293 110.046 72.5791C108.453 72.2458 107.633 71.1066 107.196 69.6825C105.044 62.6551 102.932 55.6172 100.801 48.5834C100.082 46.21 99.3689 43.8324 98.62 41.4674C98.0609 39.7037 98.2845 38.1299 99.7339 36.902C101.19 35.6679 102.787 35.497 104.567 36.305C113.114 40.1763 121.681 44.0054 130.244 47.8429C131.063 48.21 131.9 48.5201 132.592 49.1277C133.943 50.3134 134.354 51.98 133.685 53.6826C133.052 55.2944 131.571 56.288 129.519 56.248L129.514 56.2437ZM107.86 45.9379C107.82 46.0623 107.774 46.1277 107.789 46.1742C108.879 49.4357 109.979 52.6931 111.065 55.9568C111.211 56.3914 111.392 56.307 111.656 56.0771C113.521 54.4399 115.382 52.7986 117.259 51.1762C117.687 50.8071 117.609 50.6214 117.139 50.402C116.071 49.9041 115.021 49.3703 113.96 48.8598C111.932 47.8851 109.903 46.9168 107.863 45.94L107.86 45.9379Z" fill="#6B30E9"/>
+</svg>
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 1d52dc8..cc09f07 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,8 +6,10 @@ import IntegrateMSW from '@/mocks/IntegrateMsw';
 import Script from 'next/script';
 import ModalProvider from '@/providers/ModalProvider';
 import MobileFooter from '@/components/common/MobileFooter';
+import GoogleAnalytics from '@/lib/GoogleAnalytics';
 import GnbWrapper from '@/components/common/GnbWrapper'; 
 
+
 declare global {
   interface Window {
     kakao: any;
@@ -25,7 +27,7 @@ export const metadata: Metadata = {
   title: '모아가이드',
   description: 'STO 큐레이션 플랫폼 모아가이드',
   icons: {
-    icon: '/logo.png'
+    icon: '/favicon.svg'
   },
   openGraph: {
     title: '모아가이드',
@@ -45,6 +47,9 @@ export default function RootLayout({
   return (
     <html lang="kr" className={`${pretendard.variable}`}>
       <body className={pretendard.className}>
+        {process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS ? (
+          <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS} />
+        ) : null}
         <IntegrateMSW>
           <QueryProvider>
             <Script
diff --git a/src/app/newissue/page.tsx b/src/app/newissue/page.tsx
index bc20e15..cc89e13 100644
--- a/src/app/newissue/page.tsx
+++ b/src/app/newissue/page.tsx
@@ -1,4 +1,4 @@
-'use clinet';
+'use client';
 import RecentlyIssueIndex from '@/components/recentlyIssue/Index';
 import Navbar from '@/components/common/Navbar';
 const NewIssuePage = () => {
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b5d2145..d6edf39 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,4 +1,4 @@
-'use clinet';
+'use client';
 import Navbar from '@/components/common/Navbar';
 import HomeIndex from '@/components/home/Index';
 import React from 'react';
diff --git a/src/app/product/detail/art/[id]/page.tsx b/src/app/product/detail/art/[id]/page.tsx
new file mode 100644
index 0000000..e82297c
--- /dev/null
+++ b/src/app/product/detail/art/[id]/page.tsx
@@ -0,0 +1,144 @@
+'use client';
+import Container from '@/components/common/Container';
+import NavBar from '@/components/product/detail/NavBar';
+import News from '@/components/product/detail/News';
+import Report from '@/components/product/detail/Report';
+import Image from 'next/image';
+import { useState } from 'react';
+import { getArtProductDetail } from '@/factory/ProductDetail/ArtProductDetail';
+import { CATEGORY } from '@/static/category';
+import ArtProfit from '@/components/product/detail/art/ArtProfit';
+import ArtProductDetail from '@/components/product/detail/art/ArtProductDetail';
+import Link from 'next/link';
+const ArtDetailpage = (props: { params: { id: string } }) => {
+  const [sort, setSort] = useState('profit');
+  const url = props.params.id;
+  console.log(url);
+  const { data, isLoading, isError } = getArtProductDetail(props.params.id);
+  console.log(data);
+  return (
+    <div>
+      <Container>
+        <div className="flex justify-between md:flex-row desk:flex-col ">
+          <div className="flex desk2:justify-start desk:justify-center desk:mb-[40px] ">
+            <Image
+              src="/images/detail/Profile.png"
+              width={181}
+              height={181}
+              alt="Profile Image"
+            />
+
+            <div className="desk:hidden  desk2:flex flex-col ml-[28px] ">
+              <div className="flex">
+                <div className="bg-gray-200 text-gray-400  rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
+                  {CATEGORY[data?.category as string]}
+                </div>
+                <div className="text-gray-400 ml-[3px]">{data?.platform}</div>
+              </div>
+
+              <div className="w-80 text-black text-2xl font-bold mb-[60px] ">
+                {data?.name}
+              </div>
+
+              <div className="desk2:flex  desk:hidden">
+                <Link href={data?.link || '#'}>
+                  <div className=" w-[180px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
+                    <div>해당 플랫폼으로 이동</div>
+                    <Image
+                      src="/images/detail/CaretRight.svg"
+                      width={16}
+                      height={16}
+                      alt="Right Arrow"
+                    />
+                  </div>
+                </Link>
+
+                <div className=" desk2:flex desk:hidden ml-[6px] w-[118px] h-[49px] justify-center items-center border-2 border-gray-200 rounded-xl ">
+                  <div>관심 종목</div>
+                  <Image
+                    src="/images/detail/BookmarkSimple.svg"
+                    width={16}
+                    height={16}
+                    alt="BookMark"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="desk2:hidden  desk:flex  flex-col">
+            <div className="flex flex-col desk2:ml-[28px] desk:ml-[15px] ">
+              <div className="flex">
+                <div className="bg-gray-200 text-gray-400  rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
+                  {CATEGORY[data?.category as string]}
+                </div>
+                <div className="text-gray-400 ml-[3px]">{data?.platform}</div>
+              </div>
+
+              <div className="w-80 text-black text-2xl font-bold desk2:mb-[60px] desk:mb-[20px] ">
+                {data?.name}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col  desk2:justify-start desk2:items-start  desk:justify-center desk:items-center    ">
+            <div className="flex desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">모집금액</div>
+              <div className="flex flex-row ">
+                <div>{data?.recruitmentPrice.toLocaleString()}원</div>
+                {/* <div className="text-red-500 "> ({data?.priceRate}%)</div> */}
+              </div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">모집률</div>
+              <div>{data?.recruitmentRate.toLocaleString()}%</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">시가총액</div>
+              <div>{data?.totalPrice.toLocaleString()}원</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">모집기간</div>
+              <div className="">~{data?.recruitmentDate}까지</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">최소투자금</div>
+              <div>{data?.minInvestment.toLocaleString()}원</div>
+            </div>
+          </div>
+
+          <div className="desk2:hidden  desk:flex  justify-center mt-[20px] ">
+            <Link href={data?.link || '#'}>
+              <div className=" w-[180px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
+                <div>해당 플랫폼으로 이동</div>
+                <Image
+                  src="/images/detail/CaretRight.svg"
+                  width={16}
+                  height={16}
+                  alt="Right Arrow"
+                />
+              </div>
+            </Link>
+          </div>
+        </div>
+      </Container>
+      <NavBar sort={sort} setSort={setSort} />
+
+      {sort === 'news' ? (
+        <News />
+      ) : sort === 'report' ? (
+        <Report />
+      ) : sort === 'profit' ? (
+        <ArtProfit url={url} />
+      ) : sort === 'detail' ? (
+        <ArtProductDetail url={url} />
+      ) : undefined}
+    </div>
+  );
+};
+
+export default ArtDetailpage;
diff --git a/src/app/product/detail/[id]/page.tsx b/src/app/product/detail/building/[id]/page.tsx
similarity index 71%
rename from src/app/product/detail/[id]/page.tsx
rename to src/app/product/detail/building/[id]/page.tsx
index ec27861..67f44ab 100644
--- a/src/app/product/detail/[id]/page.tsx
+++ b/src/app/product/detail/building/[id]/page.tsx
@@ -3,18 +3,20 @@
 import Container from '@/components/common/Container';
 import NavBar from '@/components/product/detail/NavBar';
 import News from '@/components/product/detail/News';
-import ProductDetail from '@/components/product/detail/ProductDetail';
-import Profit from '@/components/product/detail/Profit';
+import BuildingProductDetail from '@/components/product/detail/building/BuildingProductDetail';
+import BuildingProfit from '@/components/product/detail/building/BuildingProfit';
 import Notice from '@/components/product/detail/Notice';
 import Report from '@/components/product/detail/Report';
 import Image from 'next/image';
 import { useState } from 'react';
-import { getProductDetail } from '@/factory/ProductDetail';
-const Detailpage = (props: any) => {
+import { getBuildingProductDetail } from '@/factory/ProductDetail/BuildingProductDetail';
+import { CATEGORY } from '@/static/category';
+import Link from 'next/link';
+const BuildingDetailpage = (props: any) => {
   const [sort, setSort] = useState('profit');
   const url = props.params.id;
   console.log(url);
-  const { data, isLoading, isError } = getProductDetail(props.params.id);
+  const { data, isLoading, isError } = getBuildingProductDetail(props.params.id);
   console.log(data);
   return (
     <div>
@@ -31,7 +33,7 @@ const Detailpage = (props: any) => {
             <div className="desk:hidden  desk2:flex flex-col ml-[28px] ">
               <div className="flex">
                 <div className="bg-gray-200 text-gray-400  rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
-                  {data?.category === 'building' ? '부동산' : '오류'}
+                  {CATEGORY[data?.category as string]}
                 </div>
                 <div className="text-gray-400 ml-[3px]">{data?.platform}</div>
               </div>
@@ -41,15 +43,17 @@ const Detailpage = (props: any) => {
               </div>
 
               <div className="desk2:flex  desk:hidden">
-                <div className=" w-[180px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
-                  <div>해당 플랫폼으로 이동</div>
-                  <Image
-                    src="/images/detail/CaretRight.svg"
-                    width={16}
-                    height={16}
-                    alt="Right Arrow"
-                  />
-                </div>
+                <Link href={data?.link || '#'}>
+                  <div className=" w-[180px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
+                    <div>해당 플랫폼으로 이동</div>
+                    <Image
+                      src="/images/detail/CaretRight.svg"
+                      width={16}
+                      height={16}
+                      alt="Right Arrow"
+                    />
+                  </div>
+                </Link>
 
                 <div className=" desk2:flex desk:hidden ml-[6px] w-[118px] h-[49px] justify-center items-center border-2 border-gray-200 rounded-xl ">
                   <div>관심 종목</div>
@@ -68,7 +72,7 @@ const Detailpage = (props: any) => {
             <div className="flex flex-col desk2:ml-[28px] desk:ml-[15px] ">
               <div className="flex">
                 <div className="bg-gray-200 text-gray-400  rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
-                  {data?.category === 'building' ? '부동산' : '오류'}
+                  {CATEGORY[data?.category as string]}
                 </div>
                 <div className="text-gray-400 ml-[3px]">{data?.platform}</div>
               </div>
@@ -100,7 +104,7 @@ const Detailpage = (props: any) => {
 
             <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
               <div className="text-gray-400">배당 수익률</div>
-              <div className="text-red-500">{data?.lastDivideRate}%</div>
+              <div className="text-red-500">{data?.lastDivide_rate}%</div>
             </div>
 
             <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
@@ -110,15 +114,17 @@ const Detailpage = (props: any) => {
           </div>
 
           <div className="desk2:hidden  desk:flex  justify-center mt-[20px] ">
-            <div className=" w-[380px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
-              <div>해당 플랫폼으로 이동</div>
-              <Image
-                src="/images/detail/CaretRight.svg"
-                width={16}
-                height={16}
-                alt="Right Arrow"
-              />
-            </div>
+            <Link href={data?.link || '#'}>
+              <div className=" w-[180px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
+                <div>해당 플랫폼으로 이동</div>
+                <Image
+                  src="/images/detail/CaretRight.svg"
+                  width={16}
+                  height={16}
+                  alt="Right Arrow"
+                />
+              </div>
+            </Link>
           </div>
         </div>
       </Container>
@@ -131,12 +137,12 @@ const Detailpage = (props: any) => {
       ) : sort === 'report' ? (
         <Report />
       ) : sort === 'profit' ? (
-        <Profit url={url} />
+        <BuildingProfit url={url} />
       ) : sort === 'detail' ? (
-        <ProductDetail url={url} />
+        <BuildingProductDetail url={url} />
       ) : undefined}
     </div>
   );
 };
 
-export default Detailpage;
+export default BuildingDetailpage;
diff --git a/src/app/product/detail/[id]/public/page.tsx b/src/app/product/detail/building/[id]/public/page.tsx
similarity index 100%
rename from src/app/product/detail/[id]/public/page.tsx
rename to src/app/product/detail/building/[id]/public/page.tsx
diff --git a/src/app/product/detail/contents/[id]/page.tsx b/src/app/product/detail/contents/[id]/page.tsx
new file mode 100644
index 0000000..8d2bb72
--- /dev/null
+++ b/src/app/product/detail/contents/[id]/page.tsx
@@ -0,0 +1,147 @@
+'use client';
+import Container from '@/components/common/Container';
+import NavBar from '@/components/product/detail/NavBar';
+import News from '@/components/product/detail/News';
+import Report from '@/components/product/detail/Report';
+import Image from 'next/image';
+import { useState } from 'react';
+import { CATEGORY } from '@/static/category';
+import ContentProfit from '@/components/product/detail/content/ContentProfit';
+import ContentProductDetail from '@/components/product/detail/content/ContentProductDetail';
+import { getContentProductDetail } from '@/factory/ProductDetail/ContentProductDetail';
+import Link from 'next/link';
+const ContentDetailpage = (props: { params: { id: string } }) => {
+  const [sort, setSort] = useState('profit');
+  const url = props.params.id;
+  console.log(url);
+  const { data, isLoading, isError } = getContentProductDetail(props.params.id);
+  console.log(data);
+  return (
+    <div>
+      <Container>
+        <div className="flex justify-between md:flex-row desk:flex-col ">
+          <div className="flex desk2:justify-start desk:justify-center desk:mb-[40px] ">
+            <Image
+              src="/images/detail/Profile.png"
+              width={181}
+              height={181}
+              alt="Profile Image"
+            />
+
+            <div className="desk:hidden  desk2:flex flex-col ml-[28px] ">
+              <div className="flex">
+                <div className="bg-gray-200 text-gray-400  rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
+                  {CATEGORY[data?.category as string]}
+                </div>
+                <div className="text-gray-400 ml-[3px]">{data?.platform}</div>
+              </div>
+
+              <div className="w-80 text-black text-2xl font-bold mb-[60px] ">
+                {data?.name}
+              </div>
+
+              <div className="desk2:flex  desk:hidden">
+                <Link href={data?.link || '#'}>
+                  <div className=" w-[180px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
+                    <div>해당 플랫폼으로 이동</div>
+                    <Image
+                      src="/images/detail/CaretRight.svg"
+                      width={16}
+                      height={16}
+                      alt="Right Arrow"
+                    />
+                  </div>
+                </Link>
+                <div className=" desk2:flex desk:hidden ml-[6px] w-[118px] h-[49px] justify-center items-center border-2 border-gray-200 rounded-xl ">
+                  <div>관심 종목</div>
+                  <Image
+                    src="/images/detail/BookmarkSimple.svg"
+                    width={16}
+                    height={16}
+                    alt="BookMark"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="desk2:hidden  desk:flex  flex-col">
+            <div className="flex flex-col desk2:ml-[28px] desk:ml-[15px] ">
+              <div className="flex">
+                <div className="bg-gray-200 text-gray-400  rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
+                  {CATEGORY[data?.category as string]}
+                </div>
+                <div className="text-gray-400 ml-[3px]">{data?.platform}</div>
+              </div>
+
+              <div className="w-80 text-black text-2xl font-bold desk2:mb-[60px] desk:mb-[20px] ">
+                {data?.name}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col  desk2:justify-start desk2:items-start  desk:justify-center desk:items-center    ">
+            <div className="flex desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">모집금액</div>
+              <div className="flex flex-row ">
+                <div>{data?.totalPrice.toLocaleString()}원</div>
+                {/* <div className="text-red-500 "> ({data?.priceRate}%)</div> */}
+              </div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">모집률</div>
+              <div>{data?.rate.toLocaleString()}%</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">시가총액</div>
+              <div>{data?.totalPrice.toLocaleString()}원</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">모집기간</div>
+              <div className="">~{data?.date}까지</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">최소투자금</div>
+              <div>{data?.lowPrice.toLocaleString()}원</div>
+            </div>
+          </div>
+
+          <div className="desk2:hidden  desk:flex  justify-center mt-[20px] ">
+            <Link href={data?.link || '#'}>
+              <div className=" w-[180px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
+                <div>해당 플랫폼으로 이동</div>
+                <Image
+                  src="/images/detail/CaretRight.svg"
+                  width={16}
+                  height={16}
+                  alt="Right Arrow"
+                />
+              </div>
+            </Link>
+          </div>
+        </div>
+      </Container>
+      <NavBar sort={sort} setSort={setSort} />
+
+      {sort === 'news' ? (
+        <News />
+      ) : sort === 'report' ? (
+        <Report />
+      ) : sort === 'profit' ? (
+        <ContentProfit
+          url={url}
+          invest={data?.invest as boolean}
+          genre={data?.genre as string}
+        />
+      ) : sort === 'detail' ? (
+        <ContentProductDetail url={url} genre={data?.genre as string} />
+      ) : undefined}
+    </div>
+  );
+};
+
+export default ContentDetailpage;
diff --git a/src/app/product/detail/cow/[id]/page.tsx b/src/app/product/detail/cow/[id]/page.tsx
new file mode 100644
index 0000000..c44206a
--- /dev/null
+++ b/src/app/product/detail/cow/[id]/page.tsx
@@ -0,0 +1,144 @@
+'use client';
+import Container from '@/components/common/Container';
+import NavBar from '@/components/product/detail/NavBar';
+import News from '@/components/product/detail/News';
+import Report from '@/components/product/detail/Report';
+import Image from 'next/image';
+import { useState } from 'react';
+import { getCowProductDetail } from '@/factory/ProductDetail/CowProductDetail';
+import CowProductDetail from '@/components/product/detail/cow/CowProductDetail';
+import CowProfit from '@/components/product/detail/cow/CowProfit';
+import { CATEGORY } from '@/static/category';
+import Link from 'next/link';
+const CowDetailpage = (props: { params: { id: string } }) => {
+  const [sort, setSort] = useState('profit');
+  const url = props.params.id;
+  console.log(url);
+  const { data, isLoading, isError } = getCowProductDetail(props.params.id);
+  console.log(data);
+  return (
+    <div>
+      <Container>
+        <div className="flex justify-between md:flex-row desk:flex-col ">
+          <div className="flex desk2:justify-start desk:justify-center desk:mb-[40px] ">
+            <Image
+              src="/images/detail/Profile.png"
+              width={181}
+              height={181}
+              alt="Profile Image"
+            />
+
+            <div className="desk:hidden  desk2:flex flex-col ml-[28px] ">
+              <div className="flex">
+                <div className="bg-gray-200 text-gray-400  rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
+                  {CATEGORY[data?.category as string]}
+                </div>
+                <div className="text-gray-400 ml-[3px]">{data?.platform}</div>
+              </div>
+
+              <div className="w-80 text-black text-2xl font-bold mb-[60px] ">
+                {data?.name}
+              </div>
+
+              <div className="desk2:flex  desk:hidden">
+                <Link href={data?.link || '#'}>
+                  <div className=" w-[180px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
+                    <div>해당 플랫폼으로 이동</div>
+                    <Image
+                      src="/images/detail/CaretRight.svg"
+                      width={16}
+                      height={16}
+                      alt="Right Arrow"
+                    />
+                  </div>
+                </Link>
+
+                <div className=" desk2:flex desk:hidden ml-[6px] w-[118px] h-[49px] justify-center items-center border-2 border-gray-200 rounded-xl ">
+                  <div>관심 종목</div>
+                  <Image
+                    src="/images/detail/BookmarkSimple.svg"
+                    width={16}
+                    height={16}
+                    alt="BookMark"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="desk2:hidden  desk:flex  flex-col">
+            <div className="flex flex-col desk2:ml-[28px] desk:ml-[15px] ">
+              <div className="flex">
+                <div className="bg-gray-200 text-gray-400  rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
+                  {CATEGORY[data?.category as string]}
+                </div>
+                <div className="text-gray-400 ml-[3px]">{data?.platform}</div>
+              </div>
+
+              <div className="w-80 text-black text-2xl font-bold desk2:mb-[60px] desk:mb-[20px] ">
+                {data?.name}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col  desk2:justify-start desk2:items-start  desk:justify-center desk:items-center    ">
+            <div className="flex desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">모집금액</div>
+              <div className="flex flex-row ">
+                <div>{data?.recruitmentPrice.toLocaleString()}원</div>
+                {/* <div className="text-red-500 "> ({data?.priceRate}%)</div> */}
+              </div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">모집률</div>
+              <div>{data?.recruitmentRate.toLocaleString()}%</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">시가총액</div>
+              <div>{data?.totalPrice.toLocaleString()}원</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">모집기간</div>
+              <div className="">~{data?.recruitmentDate}까지</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">최소투자금</div>
+              <div>{data?.minInvestment.toLocaleString()}원</div>
+            </div>
+          </div>
+
+          <div className="desk2:hidden  desk:flex  justify-center mt-[20px] ">
+            <Link href={data?.link || '#'}>
+              <div className=" w-[380px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
+                <div>해당 플랫폼으로 이동</div>
+                <Image
+                  src="/images/detail/CaretRight.svg"
+                  width={16}
+                  height={16}
+                  alt="Right Arrow"
+                />
+              </div>
+            </Link>
+          </div>
+        </div>
+      </Container>
+      <NavBar sort={sort} setSort={setSort} />
+
+      {sort === 'news' ? (
+        <News />
+      ) : sort === 'report' ? (
+        <Report />
+      ) : sort === 'profit' ? (
+        <CowProfit url={url} />
+      ) : sort === 'detail' ? (
+        <CowProductDetail url={url} />
+      ) : undefined}
+    </div>
+  );
+};
+
+export default CowDetailpage;
diff --git a/src/app/product/detail/music/[id]/page.tsx b/src/app/product/detail/music/[id]/page.tsx
new file mode 100644
index 0000000..bf6fdea
--- /dev/null
+++ b/src/app/product/detail/music/[id]/page.tsx
@@ -0,0 +1,143 @@
+'use client';
+import Container from '@/components/common/Container';
+import NavBar from '@/components/product/detail/NavBar';
+import News from '@/components/product/detail/News';
+import Report from '@/components/product/detail/Report';
+import Image from 'next/image';
+import { useState } from 'react';
+import { CATEGORY } from '@/static/category';
+import { getMusicProductDetail } from '@/factory/ProductDetail/MusicProductDetail';
+import MusicProfit from '@/components/product/detail/music/MusicProfit';
+import MusicProductDetail from '@/components/product/detail/music/MusicProductDetail';
+import Link from 'next/link';
+const MusicDetailpage = (props: any) => {
+  const [sort, setSort] = useState('profit');
+  const url = props.params.id;
+  console.log(url);
+  const { data, isLoading, isError } = getMusicProductDetail(props.params.id);
+  console.log(data);
+  return (
+    <div>
+      <Container>
+        <div className="flex justify-between md:flex-row desk:flex-col ">
+          <div className="flex desk2:justify-start desk:justify-center desk:mb-[40px] ">
+            <Image
+              src={`https://d2qf2amuam62ps.cloudfront.net/img/${url}.jpg`}
+              width={181}
+              height={181}
+              alt="Profile Image"
+            />
+
+            <div className="desk:hidden  desk2:flex flex-col ml-[28px] ">
+              <div className="flex">
+                <div className="bg-gray-200 text-gray-400  rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
+                  {CATEGORY[data?.category as string]}
+                </div>
+                <div className="text-gray-400 ml-[3px]">{data?.platform}</div>
+              </div>
+
+              <div className="w-80 text-black text-2xl font-bold mb-[60px] ">
+                {data?.name}
+              </div>
+
+              <div className="desk2:flex  desk:hidden">
+                <Link href={data?.link || '#'}>
+                  <div className=" w-[180px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
+                    <div>해당 플랫폼으로 이동</div>
+                    <Image
+                      src="/images/detail/CaretRight.svg"
+                      width={16}
+                      height={16}
+                      alt="Right Arrow"
+                    />
+                  </div>
+                </Link>
+                <div className=" desk2:flex desk:hidden ml-[6px] w-[118px] h-[49px] justify-center items-center border-2 border-gray-200 rounded-xl ">
+                  <div>관심 종목</div>
+                  <Image
+                    src="/images/detail/BookmarkSimple.svg"
+                    width={16}
+                    height={16}
+                    alt="BookMark"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="desk2:hidden  desk:flex  flex-col">
+            <div className="flex flex-col desk2:ml-[28px] desk:ml-[15px] ">
+              <div className="flex">
+                <div className="bg-gray-200 text-gray-400  rounded-md w-[54px] h-[26px] flex justify-center items-center mb-[13px] ">
+                  {CATEGORY[data?.category || '']}
+                </div>
+                <div className="text-gray-400 ml-[3px]">{data?.platform}</div>
+              </div>
+
+              <div className="w-80 text-black text-2xl font-bold desk2:mb-[60px] desk:mb-[20px] ">
+                {data?.name}
+              </div>
+            </div>
+          </div>
+
+          <div className="flex flex-col  desk2:justify-start desk2:items-start  desk:justify-center desk:items-center    ">
+            <div className="flex desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">현재가</div>
+              <div className="flex flex-row ">
+                <div>{data?.price.toLocaleString()}원</div>
+                <div className="text-red-500 "> ({data?.priceRate}%)</div>
+              </div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">시가총액</div>
+              <div>{data?.totalPrice.toLocaleString()}원</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">최근 배당금</div>
+              <div>{data?.lastDivide}원</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">배당 수익률</div>
+              <div className="text-red-500">{data?.lastDivide_rate}%</div>
+            </div>
+
+            <div className="flex mt-[10px]  desk:w-[380px]  md:w-[300px] justify-between ">
+              <div className="text-gray-400">배당 주기</div>
+              <div>{data?.divideCycle}개월</div>
+            </div>
+          </div>
+
+          <div className="desk2:hidden  desk:flex  justify-center mt-[20px] cursor-pointer ">
+            <Link href={data?.link || '#'}>
+              <div className=" w-[380px] h-[49px] flex justify-center items-center border-2 border-gray-200 rounded-xl">
+                <div>해당 플랫폼으로 이동</div>
+                <Image
+                  src="/images/detail/CaretRight.svg"
+                  width={16}
+                  height={16}
+                  alt="Right Arrow"
+                />
+              </div>
+            </Link>
+          </div>
+        </div>
+      </Container>
+      <NavBar sort={sort} setSort={setSort} />
+
+      {sort === 'news' ? (
+        <News />
+      ) : sort === 'report' ? (
+        <Report />
+      ) : sort === 'profit' ? (
+        <MusicProfit url={url} />
+      ) : sort === 'detail' ? (
+        <MusicProductDetail />
+      ) : undefined}
+    </div>
+  );
+};
+
+export default MusicDetailpage;
diff --git a/src/app/product/page.tsx b/src/app/product/page.tsx
index 4013959..dc16b0b 100644
--- a/src/app/product/page.tsx
+++ b/src/app/product/page.tsx
@@ -1,6 +1,12 @@
 import Navbar from '@/components/common/Navbar';
 import Product from '@/components/product/Product';
-import { IProductDetailData, IReport, ISummaryData } from '@/types/Diviend';
+import {
+  IProductCommon,
+  IProductDealDetailData,
+  IProductRecruitmentData,
+  IReport,
+  ISummaryData
+} from '@/types/Diviend';
 
 const ProductPage = async ({
   params,
@@ -10,13 +16,13 @@ const ProductPage = async ({
   searchParams: { [key: string]: string | string[] | undefined };
 }) => {
   const pages = searchParams['page'] || 1;
+  const subcategory = searchParams['subcategory'] || 'trade';
+  const sort = searchParams['sort'] || 'lastDivide_rate desc';
+  const category = searchParams['category'] || 'all';
   console.log(pages);
-  const buildingDiviedResponse = await fetch(
-    `https://api.moaguide.com/summary/recent/building`,
-    {
-      cache: 'no-store'
-    }
-  );
+  const buildingDiviedResponse = await fetch(`https://api.moaguide.com/summary`, {
+    cache: 'no-store'
+  });
 
   const buildingReportResponse = await fetch(
     'https://api.moaguide.com/summary/report/building',
@@ -25,7 +31,7 @@ const ProductPage = async ({
     }
   );
   const productDetailResponse = await fetch(
-    `https://api.moaguide.com/summary/list/all?page=${pages}&size=10&sort=views`,
+    `https://api.moaguide.com/summary/list?category=${category}&subcategory=${subcategory}&sort=${sort}&page=${pages}&size=10`,
     {
       next: { revalidate: 300 }
     }
@@ -35,8 +41,8 @@ const ProductPage = async ({
 
   const buildingReportData: IReport[] = await buildingReportResponse.json();
 
-  const productDetailData: IProductDetailData = await productDetailResponse.json();
-
+  const productDetailData: IProductCommon = await productDetailResponse.json();
+  console.log(productDetailData);
   return (
     <div>
       <Navbar />
@@ -44,7 +50,7 @@ const ProductPage = async ({
         divide={buildingDiviedData.divide}
         summary={buildingDiviedData.summary}
         report={buildingReportData}
-        content={productDetailData.content}
+        content={productDetailData.product}
         pageNumber={productDetailData?.pageable?.pageNumber}
         totalPages={productDetailData?.totalPages}
       />
diff --git a/src/app/reportpage/page.tsx b/src/app/reportpage/page.tsx
index 41f833e..932c7ea 100644
--- a/src/app/reportpage/page.tsx
+++ b/src/app/reportpage/page.tsx
@@ -1,4 +1,4 @@
-'use clinet';
+'use client';
 import ReportIndex from '@/components/report/ReportIndex';
 import Navbar from '@/components/common/Navbar';
 const ReportPage = () => {
diff --git a/src/components/product/Dividend.tsx b/src/components/product/Dividend.tsx
index 6858743..cd68622 100644
--- a/src/components/product/Dividend.tsx
+++ b/src/components/product/Dividend.tsx
@@ -37,6 +37,7 @@ const Dividend = memo(({ dividend }: DividendProps) => {
             alt="leftarrow"
             width={20}
             height={20}
+            className=" cursor-pointer"
           />
         </div>
       </div>
@@ -72,9 +73,9 @@ const Dividend = memo(({ dividend }: DividendProps) => {
         {dividend?.map((item) => {
           return (
             <div key={item.product_Id}>
-              <SwiperSlide className=" flex justify-center">
-                <Link href={`/product/detail/${item.product_Id}`}>
-                  <div className=" md:max-w-[456px]  desk2:max-w-[390px]  desk:max-w-[300px] h-[84px] px-5 py-4 bg-white rounded-lg flex-row  desk:justify-start md:justify-center items-center  flex mx-auto  relative">
+              <SwiperSlide className=" flex ">
+                <Link href={`/product/detail/${item.category}/${item.product_Id}`}>
+                  <div className=" md:max-w-[456px]  desk2:max-w-[390px]  desk:max-w-[300px] h-[84px] px-5 py-4 bg-white rounded-lg flex-row  desk:justify-start  items-center  flex mx-auto  relative">
                     <div className=" w-full max-w-[52px] max-h-[52px] rounded-[28.50px] ">
                       <Image
                         src="/images/product/Building1.png"
@@ -85,15 +86,17 @@ const Dividend = memo(({ dividend }: DividendProps) => {
                       />
                     </div>
 
-                    <div className=" flex flex-col items-start justify-start md:ml-[20px] desk:ml-[16px]">
-                      <div className=" text-gray-300">부동산</div>
-                      <div className="w-full font-bold mt-1">{item.name}</div>
+                    <div className=" flex flex-col items-start justify-start md:ml-[20px] desk:ml-[16px] flex-grow ">
+                      <div className="">
+                        <div className=" text-gray-300">부동산</div>
+                        <div className="w-full font-bold mt-1">{item.name}</div>
+                      </div>
                       <div className=" font-bold flex justify-center items-center text-purple-600   desk:block  md:hidden">
                         (1주당 {item.dividend}원)
                       </div>
                     </div>
 
-                    <div className="ml-[46px] font-bold flex justify-center items-center text-purple-600 mt-[20px] desk:hidden md:block">
+                    <div className="ml-[46px] font-bold flex justify-center items-center text-purple-600 mt-[20px] desk:hidden md:block  ">
                       (1주당 {item.dividend}원)
                     </div>
                   </div>
@@ -112,6 +115,7 @@ const Dividend = memo(({ dividend }: DividendProps) => {
             alt="rightarrow"
             width={20}
             height={20}
+            className=" cursor-pointer"
           />
         </div>
       </div>
diff --git a/src/components/product/Filter.tsx b/src/components/product/Filter.tsx
index 889bb1d..643514e 100644
--- a/src/components/product/Filter.tsx
+++ b/src/components/product/Filter.tsx
@@ -4,12 +4,13 @@ const Filter = () => {
   const searchParams = useSearchParams();
   const params = new URLSearchParams(searchParams.toString());
   const router = useRouter();
-  const sort = searchParams.get('kind');
+  const sort = searchParams.get('category');
   console.log(sort);
 
   const handleClick = (key: string) => {
-    params.set('kind', key);
-    router.replace(`?${params.toString()}`);
+    params.set('category', key);
+    params.set('page', '1');
+    router.replace(`?${params.toString()}`, { scroll: false });
   };
   interface FilterElementType {
     [key: string]: { name: string; img: string };
@@ -17,11 +18,12 @@ const Filter = () => {
 
   const FilterElement: FilterElementType = {
     all: { name: '전체', img: 'ALL' },
-    house: { name: '부동산', img: 'OfficeBuilding.svg' },
+    building: { name: '부동산', img: 'OfficeBuilding.svg' },
     music: { name: '음악저작권', img: 'MusicalNote.svg' },
     cow: { name: '한우', img: 'CowFace.svg' },
     art: { name: '미술', img: 'FramedPicture.svg' },
-    contents: { name: '콘텐츠', img: 'ClapperBoard.svg' }
+    contents: { name: '콘텐츠', img: 'ClapperBoard.svg' },
+    bookmark: { name: '북마크', img: 'BookmarkSimple.svg' }
   };
 
   return (
diff --git a/src/components/product/Product.tsx b/src/components/product/Product.tsx
index d742a6b..569b703 100644
--- a/src/components/product/Product.tsx
+++ b/src/components/product/Product.tsx
@@ -6,14 +6,29 @@ import Filter from '@/components/product/Filter';
 import TopProduct from '@/components/product/TopProduct';
 import Report from '@/components/product/Report';
 import React, { useState } from 'react';
-import ProductSort from '@/components/product/ProductSort';
-import ProductContentList from '@/components/product/ProductList';
-import { ISummaryData, IReportData, IProductDetailData } from '@/types/Diviend';
+import ProductIsdealSort from '@/components/product/ProductIsdealSort';
+import ProductDealContentList from '@/components/product/ProductDealContentList';
+import {
+  ISummaryData,
+  IReportData,
+  IProductDealDetailData,
+  IProductEndRecruitmentData,
+  IProductRecruitmentData
+} from '@/types/Diviend';
+import ProductClassification from './ProductClassification';
+import { useRouter, useSearchParams } from 'next/navigation';
+import ProductRecruitmentSort from './ProductRecruitmentSort';
+import ProductEndRecruitmentSort from './ProductEndRecruitmentSort';
+import ProductRecruitmentContentList from './ProductRecruitmentContentList';
+import ProductEndRecruitmentContentList from './ProductEndRecruitmentContentList';
 
 interface IProductBuildingProps extends ISummaryData, IReportData {
-  content: IProductDetailData['content'];
-  totalPages: IProductDetailData['totalPages'];
-  pageNumber: IProductDetailData['pageable']['pageNumber'];
+  content:
+    | IProductDealDetailData['product']
+    | IProductEndRecruitmentData['product']
+    | IProductRecruitmentData['product'];
+  totalPages: IProductDealDetailData['totalPages'];
+  pageNumber: IProductDealDetailData['pageable']['pageNumber'];
 }
 
 const Product = ({
@@ -29,7 +44,11 @@ const Product = ({
   const reportData = report;
   const contentData = content;
   console.log(reportData);
+  const [classification, setClassification] = useState('isdeal');
   const [sort, setSort] = useState('profit');
+  const searchParams = useSearchParams();
+  const sorted = searchParams.get('subcategory');
+
   return (
     <div>
       {/* <Navbar /> */}
@@ -56,7 +75,7 @@ const Product = ({
         <TopProduct summary={summaryData} />
       </Container>
 
-      <div className=" mt-[40px] mb-[40px] w-atuo h-[0px] border border-[#eceef2]"></div>
+      <div className=" mt-[40px] mb-[40px] w-atuo h-[0px] border border-[#eceef2]" />
 
       <Container>
         <div className="text-black text-lg font-bold mb-[26px] ml-[20px]">
@@ -66,16 +85,45 @@ const Product = ({
         <Report report={reportData} />
       </Container>
 
-      <div className=" mt-[40px] mb-[10px] w-atuo h-[0px] border border-[#eceef2]"></div>
+      <div className=" mt-[40px] mb-[10px] w-atuo h-[0px] border border-[#eceef2]" />
+      <Container>
+        <ProductClassification
+          classification={classification}
+          setClassification={setClassification}
+        />
+      </Container>
+      <div className=" mt-[5px] mb-[10px] w-atuo h-[0px] border border-[#eceef2]" />
       <Container>
-        <ProductSort sort={sort} setSort={setSort} />
+        {sorted === 'start' ? (
+          <ProductRecruitmentSort sort={sort} setSort={setSort} />
+        ) : sorted === 'end' ? (
+          <ProductEndRecruitmentSort />
+        ) : (
+          <ProductIsdealSort sort={sort} setSort={setSort} />
+        )}
+        {/* <ProductIsdealSort sort={sort} setSort={setSort} /> */}
       </Container>
-      <div className=" mt-[10px] mb-[10px] w-atuo h-[0px] border border-[#eceef2]"></div>
-      <ProductContentList
-        content={contentData}
-        totalPages={totalPages}
-        pageNumber={pageNumber}
-      />
+      <div className=" mt-[10px] mb-[10px] w-atuo h-[0px] border border-[#eceef2]" />
+
+      {sorted === 'start' ? (
+        <ProductRecruitmentContentList
+          content={contentData as IProductRecruitmentData['product']}
+          totalPages={totalPages}
+          pageNumber={pageNumber}
+        />
+      ) : sorted === 'end' ? (
+        <ProductEndRecruitmentContentList
+          content={contentData as IProductEndRecruitmentData['product']}
+          totalPages={totalPages}
+          pageNumber={pageNumber}
+        />
+      ) : (
+        <ProductDealContentList
+          content={contentData as IProductDealDetailData['product']}
+          totalPages={totalPages}
+          pageNumber={pageNumber}
+        />
+      )}
     </div>
   );
 };
diff --git a/src/components/product/ProductClassification.tsx b/src/components/product/ProductClassification.tsx
new file mode 100644
index 0000000..393b062
--- /dev/null
+++ b/src/components/product/ProductClassification.tsx
@@ -0,0 +1,87 @@
+'use client';
+import { Dispatch, SetStateAction } from 'react';
+import Image from 'next/image';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+interface ProductSortProps {
+  classification: string;
+  setClassification: Dispatch<SetStateAction<string>>;
+}
+
+const ProductClassification = ({
+  classification,
+  setClassification
+}: ProductSortProps) => {
+  const searchParams = useSearchParams();
+  const params = new URLSearchParams(searchParams.toString());
+  const router = useRouter();
+  const sorted = searchParams.get('subcategory');
+  console.log(sorted);
+
+  const handleClick = (key: string, key2: string) => {
+    params.set('subcategory', key);
+    params.set('sort', key2);
+    router.replace(`?${params.toString()}`, { scroll: false });
+  };
+  return (
+    <div>
+      <div className="flex items-center gap-[10px] ml-[20px] ">
+        <div className="text-body1 text-gray500">대분류</div>
+        <div className="text-gray200">|</div>
+        <div className="flex items-center gap-[6px]">
+          <div
+            onClick={() => {
+              setClassification('isdeal');
+              handleClick('trade', 'lastDivide_rate desc');
+            }}
+            className={`flex items-center gap-1 px-[10px] py-2 rounded-[100px] text-body6 cursor-pointer
+            ${sorted === 'trade' || sorted == null ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
+            거래 가능
+            <Image
+              src="/images/home/news_check.svg"
+              alt=""
+              className={`${sorted === 'trade' || sorted == null ? 'block' : 'hidden'}`}
+              width={20}
+              height={20}
+            />
+          </div>
+          <div
+            onClick={() => {
+              setClassification('recruitment');
+              handleClick('start', 'ready');
+            }}
+            className={`flex items-center gap-1 px-[10px] py-2 rounded-[100px] text-body6 cursor-pointer
+            ${sorted === 'start' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
+            모집중
+            <Image
+              src="/images/home/news_check.svg"
+              alt=""
+              className={`${sorted === 'start' ? 'block' : 'hidden'}`}
+              width={20}
+              height={20}
+            />
+          </div>
+
+          <div
+            onClick={() => {
+              setClassification('toberecruitment');
+              handleClick('end', 'end');
+            }}
+            className={`flex items-center gap-1 px-[10px] py-2 rounded-[100px] text-body6 cursor-pointer
+            ${sorted === 'end' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
+            모집 완료
+            <Image
+              src="/images/home/news_check.svg"
+              alt=""
+              className={`${sorted === 'end' ? 'block' : 'hidden'}`}
+              width={20}
+              height={20}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductClassification;
diff --git a/src/components/product/ProductList.tsx b/src/components/product/ProductDealContentList.tsx
similarity index 73%
rename from src/components/product/ProductList.tsx
rename to src/components/product/ProductDealContentList.tsx
index 331ba1c..01e4bfa 100644
--- a/src/components/product/ProductList.tsx
+++ b/src/components/product/ProductDealContentList.tsx
@@ -1,15 +1,16 @@
 import Image from 'next/image';
 import Container from '../common/Container';
-import { IProductDetailData } from '@/types/Diviend';
+import { IProductDealDetailData } from '@/types/Diviend';
 import ProductPagenation from './ProductPagenation';
 import Link from 'next/link';
 import ProductMobilePagenation from './ProductMobilePagenation';
+import { CATEGORY } from '@/static/category';
 interface IProductContentListProps {
-  content: IProductDetailData['content'];
-  totalPages: IProductDetailData['totalPages'];
-  pageNumber: IProductDetailData['pageable']['pageNumber'];
+  content: IProductDealDetailData['product'];
+  totalPages: IProductDealDetailData['totalPages'];
+  pageNumber: IProductDealDetailData['pageable']['pageNumber'];
 }
-const ProductContentList = ({
+const ProductDealContentList = ({
   content,
   totalPages,
   pageNumber
@@ -25,8 +26,8 @@ const ProductContentList = ({
           <div className="w-[100px] mr-[16px] text-gray-500 ">운영 플랫폼</div>
           <div className="w-[260px] mr-[16px] text-gray-500 ">종목 명</div>
           <div className="w-[88px] mr-[34px]  text-gray-500">현재가</div>
-          <div className="w-[97px] mr-[24px] text-gray-500 ">시가총액</div>
-          <div className="w-[92px] mr-[24px]  text-gray-500 ">배당 수익률</div>
+          <div className="w-[103px] mr-[62px] text-gray-500 ">시가총액</div>
+          <div className="w-[92px] mr-[30px]  text-gray-500 ">배당 수익률</div>
           <div className="w-[24px]  text-gray-500">#</div>
         </div>
       </Container>
@@ -36,11 +37,11 @@ const ProductContentList = ({
         <div>
           {content?.map((item) => (
             <div key={item.product_Id} className=" lg:flex  ">
-              <Link href={`product/detail/${item.product_Id}`}>
+              <Link href={`product/detail/${item.category}/${item.product_Id}`}>
                 <div className="flex items-center  h-[110px] ">
                   <div className="flex   desk:ml-[20px] ">
                     <Image
-                      src={'/images/product/ProductImage.png'}
+                      src={`https://d2qf2amuam62ps.cloudfront.net/img/${item.product_Id}.jpg`}
                       width={82}
                       height={82}
                       alt="image"
@@ -48,7 +49,7 @@ const ProductContentList = ({
                     />
                   </div>
                   <div className="w-[54px] h-[26px] mr-[16px] flex justify-center items-center rounded-lg text-gray-500  bg-gray-100   desk:hidden  md:flex ">
-                    {item.category === 'building' ? '부동산' : '부동산'}
+                    {CATEGORY[item.category]}
                   </div>
                   <div className="w-[100px] mr-[16px]  text-gray-400   desk:hidden  md:flex ">
                     {item.platform}
@@ -60,7 +61,7 @@ const ProductContentList = ({
                   <div className="flex flex-col  md:hidden  desk:flex  ">
                     <div className="flex mb-[5px]">
                       <div className="w-[54px] h-[26px] mr-[16px] flex justify-center items-center rounded-lg text-gray-500  bg-gray-100 ">
-                        {item.category === 'building' ? '부동산' : '부동산'}
+                        {CATEGORY[item.category]}
                       </div>
                       <div className="w-[100px] mr-[16px]  text-gray-400 ">
                         {item.platform}
@@ -71,7 +72,7 @@ const ProductContentList = ({
                       {item.name}
                     </div>
 
-                    <div className=" flex ">
+                    <div className=" flex  ">
                       <div className=" ml-[4px] mr-[4px] text-gray-500  ">
                         {item.price.toLocaleString()}원
                       </div>
@@ -82,30 +83,32 @@ const ProductContentList = ({
                   {/* ///// */}
 
                   <div className=" flex flex-col">
-                    <div className="w-[88px] mr-[16px] text-gray-500  desk:hidden  md:flex  ">
+                    <div className="w-[108px] mr-[16px] text-gray-500  desk:hidden  md:flex  ">
                       {item.price.toLocaleString()} 원
                     </div>
                     <div className="w-[88px] mr-[16px] text-red-500  desk:hidden  md:flex ">
                       ({item.priceRate}%)
                     </div>
                   </div>
-                  <div className="w-[125px] mr-[28px] text-gray-500    desk:hidden  md:flex">
+
+                  <div className=" w-[140px] mr-[28px] text-gray-500    desk:hidden  md:flex ">
                     {item.totalPrice.toLocaleString()}원
                   </div>
-                  <div className="w-[61px] mr-[29px] text-red-500 bg-red-100  rounded-lg flex justify-center items-center desk: ml-auto ">
+                  <div className="w-[61px] mr-[29px] text-red-500 bg-red-100  rounded-lg flex justify-center items-center desk:ml-auto  ">
                     {item.lastDivide_rate}%
                   </div>
-
-                  <Image
-                    src={'/images/product/BookmarkWhite.svg'}
-                    width={24}
-                    height={24}
-                    alt="Bookmark"
-                    className="  desk:hidden  md:flex"
-                  />
                 </div>
-                <div className="  mt-[20px] mb-[20px] w-atuo h-[0px] border border-[#eceef2]" />
               </Link>
+
+              <Image
+                src={'/images/product/BookmarkWhite.svg'}
+                width={24}
+                height={24}
+                alt="Bookmark"
+                className="  desk:hidden  md:flex  cursor-pointer ml-auto"
+              />
+
+              <div className="  mt-[20px] mb-[20px] w-atuo h-[0px] border border-[#eceef2]" />
             </div>
           ))}
         </div>
@@ -120,4 +123,4 @@ const ProductContentList = ({
   );
 };
 
-export default ProductContentList;
+export default ProductDealContentList;
diff --git a/src/components/product/ProductEndRecruitmentContentList.tsx b/src/components/product/ProductEndRecruitmentContentList.tsx
new file mode 100644
index 0000000..f2f3d4e
--- /dev/null
+++ b/src/components/product/ProductEndRecruitmentContentList.tsx
@@ -0,0 +1,143 @@
+import Image from 'next/image';
+import Container from '../common/Container';
+import { IProductEndRecruitmentData } from '@/types/Diviend';
+import ProductPagenation from './ProductPagenation';
+import Link from 'next/link';
+import ProductMobilePagenation from './ProductMobilePagenation';
+import { CATEGORY } from '@/static/category';
+import { useSearchParams } from 'next/navigation';
+
+interface IProductContentListProps {
+  content: IProductEndRecruitmentData['product'];
+  totalPages: IProductEndRecruitmentData['totalPages'];
+  pageNumber: IProductEndRecruitmentData['pageable']['pageNumber'];
+}
+const ProductEndRecruitmentContentList = ({
+  content,
+  totalPages,
+  pageNumber
+}: IProductContentListProps) => {
+  const searchParams = useSearchParams();
+  const sorted = searchParams.get('sort');
+
+  console.log(CATEGORY);
+  // product_Id
+  return (
+    <div>
+      <Container>
+        <div className="flex flex-row   desk:hidden  md:flex ml-[20px]  ">
+          <div className="w-[62px] mr-[16px] ml-[10px] text-gray-500 ">이미지</div>
+          <div className="w-[60px] mr-[16px] text-gray-500 ">카테고리</div>
+          <div className="w-[100px] mr-[16px] text-gray-500 ">운영 플랫폼</div>
+          <div className="w-[260px] mr-[16px] text-gray-500 ">종목 명</div>
+          {sorted === 'end' ? (
+            <div className="flex flex-row   desk:hidden  md:flex ml-[20px] ">
+              <div className="w-[98px] mr-[42px]  text-gray-500">현재가</div>
+              <div className="w-[107px] mr-[32px] text-gray-500 ">모집총액</div>
+
+              <div className="w-[24px]  text-gray-500">#</div>
+            </div>
+          ) : (
+            <div className="w-[80px] mr-[24px]  flex justify-center text-gray-500 ">
+              수익률
+            </div>
+          )}
+        </div>
+      </Container>
+      <div className="   desk:hidden  md:flex mt-[10px] mb-[10px] w-atuo h-[0px] border border-[#eceef2]" />
+
+      <Container>
+        <div>
+          {content?.map((item) => (
+            <div key={item.productId} className=" lg:flex  ">
+              <Link href={`product/detail/${item.category}/${item.productId}`}>
+                <div className="flex items-center  h-[110px] ">
+                  <div className="flex   desk:ml-[20px] ">
+                    <Image
+                      src={`https://d2qf2amuam62ps.cloudfront.net/img/${item.productId}.jpg`}
+                      width={82}
+                      height={82}
+                      alt="image"
+                      className="mr-[16px]"
+                    />
+                  </div>
+                  <div className="w-[54px] h-[26px] mr-[16px] flex justify-center items-center rounded-lg text-gray-500  bg-gray-100   desk:hidden  md:flex ">
+                    {CATEGORY[item.category]}
+                  </div>
+                  <div className="w-[100px] mr-[16px]  text-gray-400   desk:hidden  md:flex ">
+                    {item.platform}
+                  </div>
+                  <div className="w-[260px] mr-[16px] text-lg font-bold   desk:hidden  md:flex ">
+                    {item.name}
+                  </div>
+
+                  {/* /////   반응형  //////////// */}
+                  <div className="flex flex-col  md:hidden  desk:flex  ">
+                    <div className="flex mb-[5px]">
+                      <div className="w-[54px] h-[26px] mr-[16px] flex justify-center items-center rounded-lg text-gray-500  bg-gray-100 ">
+                        {CATEGORY[item.category]}
+                      </div>
+                      <div className="w-[100px] mr-[16px]  text-gray-400 ">
+                        {item.platform}
+                      </div>
+                    </div>
+
+                    <div className="w-[220px] mr-[16px] text-lg font-bold mb-[5px] ">
+                      {item.name}
+                    </div>
+
+                    <div className=" flex  ">
+                      <div className=" ml-[4px] mr-[4px] text-gray-500  ">
+                        {/* {item.price.toLocaleString()}원 */}
+                      </div>
+                      {/* <div className="mr-[16px] text-red-500 ">({item.priceRate}%)</div> */}
+                    </div>
+                  </div>
+
+                  {/* ///// */}
+
+                  {sorted === 'end' ? (
+                    <div className=" flex ">
+                      <div className=" flex flex-col">
+                        <div className="w-[108px] mr-[16px] text-gray-500  desk:hidden  md:flex  ">
+                          {/* {item.price.toLocaleString()} 원 */} -
+                        </div>
+                        <div className="w-[88px] mr-[16px] text-red-500  desk:hidden  md:flex ">
+                          {/* ({item.priceRate}%) */}
+                        </div>
+                      </div>
+                      <div className="w-[125px] mr-[28px] text-gray-500    desk:hidden  md:flex">
+                        {item.totalPrice.toLocaleString()}원
+                      </div>
+                    </div>
+                  ) : (
+                    <div className="w-[245px] flex justify-start text-red-500   font-bold  desk:hidden  md:flex ">
+                      {item.sailRate}%
+                    </div>
+                  )}
+                </div>
+              </Link>
+
+              <Image
+                src={'/images/product/BookmarkWhite.svg'}
+                width={24}
+                height={24}
+                alt="Bookmark"
+                className="  desk:hidden  md:flex ml-[10px] cursor-pointer"
+              />
+              <div className="  mt-[20px] mb-[20px] w-atuo h-[0px] border border-[#eceef2]" />
+            </div>
+          ))}
+        </div>
+        <div className="md:block  desk:hidden">
+          <ProductPagenation totalPages={totalPages} />
+        </div>
+        <div className="md:hidden  desk:block">
+          <ProductMobilePagenation totalPages={totalPages} />
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default ProductEndRecruitmentContentList;
diff --git a/src/components/product/ProductEndRecruitmentSort.tsx b/src/components/product/ProductEndRecruitmentSort.tsx
new file mode 100644
index 0000000..879b2c7
--- /dev/null
+++ b/src/components/product/ProductEndRecruitmentSort.tsx
@@ -0,0 +1,68 @@
+'use client';
+import { Dispatch, SetStateAction, useState } from 'react';
+import Image from 'next/image';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+interface ProductSortProps {
+  sort: string;
+  setSort: Dispatch<SetStateAction<string>>;
+}
+
+const ProductEndRecruitmentSort = () => {
+  const searchParams = useSearchParams();
+  const params = new URLSearchParams(searchParams.toString());
+  const router = useRouter();
+  const sorted = searchParams.get('sort');
+
+  const [sort, setSort] = useState('end');
+  console.log(sorted);
+
+  const handleClick = (key: string) => {
+    params.set('sort', key);
+    router.replace(`?${params.toString()}`, { scroll: false });
+  };
+  return (
+    <div>
+      <div className="flex items-center gap-[10px] ml-[20px] ">
+        <div className="text-body1 text-gray500">정렬</div>
+        <div className="text-gray200">|</div>
+        <div className="flex items-center gap-[6px]">
+          <div
+            onClick={() => {
+              setSort('end');
+              handleClick('end');
+            }}
+            className={`flex items-center gap-1 px-[10px] py-2 rounded-[100px] text-body6 cursor-pointer
+            ${sorted === 'end' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
+            정산 대기중
+            <Image
+              src="/images/home/news_check.svg"
+              alt=""
+              className={`${sorted === 'end' ? 'block' : 'hidden'}`}
+              width={20}
+              height={20}
+            />
+          </div>
+          <div
+            onClick={() => {
+              setSort('finish');
+              handleClick('finish');
+            }}
+            className={`flex items-center gap-1 px-[10px] py-2 rounded-[100px] text-body6 cursor-pointer
+            ${sorted === 'finish' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
+            정산 완료
+            <Image
+              src="/images/home/news_check.svg"
+              alt=""
+              className={`${sorted === 'finish' ? 'block' : 'hidden'}`}
+              width={20}
+              height={20}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductEndRecruitmentSort;
diff --git a/src/components/product/ProductSort.tsx b/src/components/product/ProductIsdealSort.tsx
similarity index 69%
rename from src/components/product/ProductSort.tsx
rename to src/components/product/ProductIsdealSort.tsx
index 150c85e..591331b 100644
--- a/src/components/product/ProductSort.tsx
+++ b/src/components/product/ProductIsdealSort.tsx
@@ -8,7 +8,7 @@ interface ProductSortProps {
   setSort: Dispatch<SetStateAction<string>>;
 }
 
-const ProductSort = ({ sort, setSort }: ProductSortProps) => {
+const ProductIsdealSort = ({ sort, setSort }: ProductSortProps) => {
   // const [sort, setSort] = useState(filter);
   const searchParams = useSearchParams();
   const params = new URLSearchParams(searchParams.toString());
@@ -18,7 +18,7 @@ const ProductSort = ({ sort, setSort }: ProductSortProps) => {
 
   const handleClick = (key: string) => {
     params.set('sort', key);
-    router.replace(`?${params.toString()}`);
+    router.replace(`?${params.toString()}`, { scroll: false });
   };
   return (
     <div>
@@ -29,15 +29,15 @@ const ProductSort = ({ sort, setSort }: ProductSortProps) => {
           <div
             onClick={() => {
               setSort('profit');
-              handleClick('profit');
+              handleClick('lastDivide_rate desc');
             }}
             className={`flex items-center gap-1 px-[10px] py-2 rounded-[100px] text-body6 cursor-pointer
-            ${sort === 'profit' || sorted == null ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
+            ${sorted === 'lastDivide_rate desc' || sorted == null ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
             수익률순
             <Image
               src="/images/home/news_check.svg"
               alt=""
-              className={`${sort === 'profit' ? 'block' : 'hidden'}`}
+              className={`${sorted === 'lastDivide_rate desc' || sorted == null ? 'block' : 'hidden'}`}
               width={20}
               height={20}
             />
@@ -45,15 +45,15 @@ const ProductSort = ({ sort, setSort }: ProductSortProps) => {
           <div
             onClick={() => {
               setSort('inquiry');
-              handleClick('inquiry');
+              handleClick('views desc');
             }}
             className={`flex items-center gap-1 px-[10px] py-2 rounded-[100px] text-body6 cursor-pointer
-            ${sort === 'inquiry' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
+            ${sorted === 'views desc' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
             조회순
             <Image
               src="/images/home/news_check.svg"
               alt=""
-              className={`${sort === 'inquiry' ? 'block' : 'hidden'}`}
+              className={`${sorted === 'views desc' ? 'block' : 'hidden'}`}
               width={20}
               height={20}
             />
@@ -62,15 +62,15 @@ const ProductSort = ({ sort, setSort }: ProductSortProps) => {
           <div
             onClick={() => {
               setSort('currentprice');
-              handleClick('currentprice');
+              handleClick('priceRate desc');
             }}
             className={`flex items-center gap-1 px-[10px] py-2 rounded-[100px] text-body6 cursor-pointer
-            ${sort === 'currentprice' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
+            ${sorted === 'priceRate desc' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
             현재가순
             <Image
               src="/images/home/news_check.svg"
               alt=""
-              className={`${sort === 'currentprice' ? 'block' : 'hidden'}`}
+              className={`${sorted === 'priceRate desc' ? 'block' : 'hidden'}`}
               width={20}
               height={20}
             />
@@ -79,15 +79,15 @@ const ProductSort = ({ sort, setSort }: ProductSortProps) => {
           <div
             onClick={() => {
               setSort('alphabetical ');
-              handleClick('alphabetical');
+              handleClick('name');
             }}
             className={`flex items-center gap-1 px-[10px] py-2 rounded-[100px] text-body6 cursor-pointer
-            ${sort === 'alphabetical ' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
+            ${sorted === 'name' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
             가나다순
             <Image
               src="/images/home/news_check.svg"
               alt=""
-              className={`${sort === 'alphabetical ' ? 'block' : 'hidden'}`}
+              className={`${sorted === 'name' ? 'block' : 'hidden'}`}
               width={20}
               height={20}
             />
@@ -98,4 +98,4 @@ const ProductSort = ({ sort, setSort }: ProductSortProps) => {
   );
 };
 
-export default ProductSort;
+export default ProductIsdealSort;
diff --git a/src/components/product/ProductMobilePagenation.tsx b/src/components/product/ProductMobilePagenation.tsx
index 91d0153..555039c 100644
--- a/src/components/product/ProductMobilePagenation.tsx
+++ b/src/components/product/ProductMobilePagenation.tsx
@@ -35,7 +35,7 @@ const ProductMobilePagenation = ({ totalPages }: PaginationProps) => {
     setCurrentPage(page);
     const params = new URLSearchParams(searchParams.toString());
     params.set('page', page.toString());
-    router.replace(`?${params.toString()}`);
+    router.replace(`?${params.toString()}`, { scroll: false });
   };
 
   const handleNextRange = () => {
diff --git a/src/components/product/ProductPagenation.tsx b/src/components/product/ProductPagenation.tsx
index fb01514..e7880fe 100644
--- a/src/components/product/ProductPagenation.tsx
+++ b/src/components/product/ProductPagenation.tsx
@@ -35,7 +35,7 @@ const ProductPagenation = ({ totalPages }: PaginationProps) => {
     setCurrentPage(page);
     const params = new URLSearchParams(searchParams.toString());
     params.set('page', page.toString());
-    router.replace(`?${params.toString()}`);
+    router.replace(`?${params.toString()}`, { scroll: false });
   };
 
   const handleNextRange = () => {
diff --git a/src/components/product/ProductRecruitmentContentList.tsx b/src/components/product/ProductRecruitmentContentList.tsx
new file mode 100644
index 0000000..a4917dd
--- /dev/null
+++ b/src/components/product/ProductRecruitmentContentList.tsx
@@ -0,0 +1,157 @@
+import Image from 'next/image';
+import Container from '../common/Container';
+import { IProductRecruitmentData } from '@/types/Diviend';
+import ProductPagenation from './ProductPagenation';
+import Link from 'next/link';
+import ProductMobilePagenation from './ProductMobilePagenation';
+import { CATEGORY } from '@/static/category';
+import { useSearchParams } from 'next/navigation';
+
+interface IProductContentListProps {
+  content: IProductRecruitmentData['product'];
+  totalPages: IProductRecruitmentData['totalPages'];
+  pageNumber: IProductRecruitmentData['pageable']['pageNumber'];
+}
+const ProductRecruitmentContentList = ({
+  content,
+  totalPages,
+  pageNumber
+}: IProductContentListProps) => {
+  const searchParams = useSearchParams();
+  const sorted = searchParams.get('sort');
+
+  // 날짜 계산 함수 (D-Day)
+  const calculateDateDifference = (date: string) => {
+    const currentDate = new Date();
+    const target = new Date(date);
+    const timeDifference = target.getTime() - currentDate.getTime();
+    const dayDifference = Math.ceil(timeDifference / (1000 * 3600 * 24));
+
+    if (dayDifference > 0) {
+      return `D-${dayDifference}`;
+    } else if (dayDifference === 0) {
+      return 'D-Day';
+    } else {
+      return `D+${Math.abs(dayDifference)}`;
+    }
+  };
+
+  console.log(calculateDateDifference('2024-9-31'));
+
+  console.log(CATEGORY);
+  // product_Id
+  return (
+    <div>
+      <Container>
+        <div className="flex flex-row   desk:hidden  md:flex ml-[20px]  ">
+          <div className="w-[62px] mr-[16px] ml-[10px] text-gray-500 ">이미지</div>
+          <div className="w-[60px] mr-[16px] text-gray-500 ">카테고리</div>
+          <div className="w-[100px] mr-[16px] text-gray-500 ">운영 플랫폼</div>
+          <div className="w-[260px] mr-[16px] text-gray-500 ">종목 명</div>
+          <div className="w-[98px] mr-[42px]  text-gray-500">현재가</div>
+          <div className="w-[107px] mr-[32px] text-gray-500 ">모집총액</div>
+          {sorted === 'ready' ? (
+            <div className="w-[92px] mr-[24px]  text-gray-500 ">예정일</div>
+          ) : (
+            <div className="w-[92px] mr-[24px]  text-gray-500 ">모집률</div>
+          )}
+
+          <div className="w-[24px]  text-gray-500">#</div>
+        </div>
+      </Container>
+      <div className="   desk:hidden  md:flex mt-[10px] mb-[10px] w-atuo h-[0px] border border-[#eceef2]" />
+
+      <Container>
+        <div>
+          {content?.map((item) => (
+            <div key={item.productId} className=" lg:flex  ">
+              <Link href={`product/detail/${item.category}/${item.productId}`}>
+                <div className="flex items-center  h-[110px] ">
+                  <div className="flex   desk:ml-[20px] ">
+                    <Image
+                      src={`https://d2qf2amuam62ps.cloudfront.net/img/${item.productId}.jpg`}
+                      width={82}
+                      height={82}
+                      alt="image"
+                      className="mr-[16px]"
+                    />
+                  </div>
+                  <div className="w-[54px] h-[26px] mr-[16px] flex justify-center items-center rounded-lg text-gray-500  bg-gray-100   desk:hidden  md:flex ">
+                    {CATEGORY[item.category]}
+                  </div>
+                  <div className="w-[100px] mr-[16px]  text-gray-400   desk:hidden  md:flex ">
+                    {item.platform}
+                  </div>
+                  <div className="w-[260px] mr-[16px] text-lg font-bold   desk:hidden  md:flex ">
+                    {item.name}
+                  </div>
+
+                  {/* /////   반응형  //////////// */}
+                  <div className="flex flex-col  md:hidden  desk:flex  ">
+                    <div className="flex mb-[5px]">
+                      <div className="w-[54px] h-[26px] mr-[16px] flex justify-center items-center rounded-lg text-gray-500  bg-gray-100 ">
+                        {CATEGORY[item.category]}
+                      </div>
+                      <div className="w-[100px] mr-[16px]  text-gray-400 ">
+                        {item.platform}
+                      </div>
+                    </div>
+
+                    <div className="w-[220px] mr-[16px] text-lg font-bold mb-[5px] ">
+                      {item.name}
+                    </div>
+
+                    <div className=" flex  ">
+                      <div className=" ml-[4px] mr-[4px] text-gray-500  ">
+                        {/* {item.price.toLocaleString()}원 */}
+                      </div>
+                      {/* <div className="mr-[16px] text-red-500 ">({item.priceRate}%)</div> */}
+                    </div>
+                  </div>
+
+                  {/* ///// */}
+
+                  <div className=" flex flex-col">
+                    <div className="w-[108px] mr-[16px] text-gray-500  desk:hidden  md:flex  ">
+                      {/* {item.price.toLocaleString()} 원 */} -
+                    </div>
+                    <div className="w-[88px] mr-[16px] text-red-500  desk:hidden  md:flex ">
+                      {/* ({item.priceRate}%) */}
+                    </div>
+                  </div>
+
+                  <div className="w-[125px] mr-[28px] text-gray-500    desk:hidden  md:flex ">
+                    {item.totalprice.toLocaleString()}원
+                  </div>
+
+                  <div className="w-[61px] mr-[29px] text-red-500 bg-red-100  rounded-lg flex justify-center items-center desk: ml-auto ">
+                    {sorted === 'ready'
+                      ? calculateDateDifference(item.day)
+                      : item.recruitmentRate + '%'}
+                  </div>
+                </div>
+              </Link>
+
+              <Image
+                src={'/images/product/BookmarkWhite.svg'}
+                width={24}
+                height={24}
+                alt="Bookmark"
+                className="  desk:hidden  md:flex ml-[10px] cursor-pointer"
+              />
+              <div className="  mt-[20px] mb-[20px] w-atuo h-[0px] border border-[#eceef2]" />
+            </div>
+          ))}
+        </div>
+        <div className="md:block  desk:hidden">
+          <ProductPagenation totalPages={totalPages} />
+        </div>
+        <div className="md:hidden  desk:block">
+          <ProductMobilePagenation totalPages={totalPages} />
+        </div>
+      </Container>
+    </div>
+  );
+};
+
+export default ProductRecruitmentContentList;
diff --git a/src/components/product/ProductRecruitmentSort.tsx b/src/components/product/ProductRecruitmentSort.tsx
new file mode 100644
index 0000000..1257ca8
--- /dev/null
+++ b/src/components/product/ProductRecruitmentSort.tsx
@@ -0,0 +1,65 @@
+'use client';
+import { Dispatch, SetStateAction } from 'react';
+import Image from 'next/image';
+import { useRouter, useSearchParams } from 'next/navigation';
+
+interface ProductSortProps {
+  sort: string;
+  setSort: Dispatch<SetStateAction<string>>;
+}
+
+const ProductRecruitmentSort = ({ sort, setSort }: ProductSortProps) => {
+  const searchParams = useSearchParams();
+  const params = new URLSearchParams(searchParams.toString());
+  const router = useRouter();
+  const sorted = searchParams.get('sort');
+
+  const handleClick = (key: string) => {
+    params.set('sort', key);
+    router.replace(`?${params.toString()}`, { scroll: false });
+  };
+  return (
+    <div>
+      <div className="flex items-center gap-[10px] ml-[20px] ">
+        <div className="text-body1 text-gray500">정렬</div>
+        <div className="text-gray200">|</div>
+        <div className="flex items-center gap-[6px]">
+          <div
+            onClick={() => {
+              setSort('profit');
+              handleClick('ready');
+            }}
+            className={`flex items-center gap-1 px-[10px] py-2 rounded-[100px] text-body6 cursor-pointer
+            ${sorted === 'ready' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
+            공모 예정
+            <Image
+              src="/images/home/news_check.svg"
+              alt=""
+              className={`${sorted === 'ready' ? 'block' : 'hidden'}`}
+              width={20}
+              height={20}
+            />
+          </div>
+          <div
+            onClick={() => {
+              setSort('inquiry');
+              handleClick('start');
+            }}
+            className={`flex items-center gap-1 px-[10px] py-2 rounded-[100px] text-body6 cursor-pointer
+            ${sorted === 'start' ? 'border border-normal text-normal' : 'border border-gray100 text-gray300'}`}>
+            공모 진행중
+            <Image
+              src="/images/home/news_check.svg"
+              alt=""
+              className={`${sorted === 'start' ? 'block' : 'hidden'}`}
+              width={20}
+              height={20}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductRecruitmentSort;
diff --git a/src/components/product/Report.tsx b/src/components/product/Report.tsx
index a8adbbf..1d5e1a7 100644
--- a/src/components/product/Report.tsx
+++ b/src/components/product/Report.tsx
@@ -37,6 +37,7 @@ const Report = ({ report }: IReportProps) => {
             alt="leftarrow"
             width={20}
             height={20}
+            className=" cursor-pointer"
           />
         </div>
       </div>
@@ -83,7 +84,7 @@ const Report = ({ report }: IReportProps) => {
 
                       <div className="my-[12px]">{item.title}</div>
                       <div className="text-gray-300">
-                        {format(new Date(item.date), 'yyyy.MM.dd')}
+                        {/* {format(new Date(item.date), 'yyyy.MM.dd')} */}
                       </div>
                     </div>
                     <div className="w-[132px] h-[93px] rounded-md">
@@ -112,6 +113,7 @@ const Report = ({ report }: IReportProps) => {
             alt="rightarrow"
             width={20}
             height={20}
+            className=" cursor-pointer"
           />
         </div>
       </div>
diff --git a/src/components/product/TopProduct.tsx b/src/components/product/TopProduct.tsx
index fd1b941..a6da7d5 100644
--- a/src/components/product/TopProduct.tsx
+++ b/src/components/product/TopProduct.tsx
@@ -39,6 +39,7 @@ const TopProduct = memo(({ summary }: TopProductProps) => {
               alt="leftarrow"
               width={20}
               height={20}
+              className=" cursor-pointer"
             />
           </div>
         </div>
@@ -151,6 +152,7 @@ const TopProduct = memo(({ summary }: TopProductProps) => {
               alt="rightarrow"
               width={20}
               height={20}
+              className=" cursor-pointer"
             />
           </div>
         </div>
diff --git a/src/components/product/detail/CopyrightFeeChart.tsx b/src/components/product/detail/CopyrightFeeChart.tsx
deleted file mode 100644
index 5b56d04..0000000
--- a/src/components/product/detail/CopyrightFeeChart.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React from 'react';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend
-} from 'chart.js';
-import ChartDataLabels from 'chartjs-plugin-datalabels';
-import { Chart } from 'react-chartjs-2';
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend,
-  ChartDataLabels
-);
-
-const CopyRightFeeChart = () => {
-  const data = {
-    labels: [
-      '9월 말',
-      '12월 말',
-      '3월 말',
-      '6월 말',
-      '9월 말',
-      '12월 말',
-      '3월 말',
-      '6월 말',
-      '9월 말',
-      '12월 말',
-      '3월 말'
-    ],
-    datasets: [
-      {
-        type: 'bar' as const,
-        label: '저작권료',
-        data: [66, 66, 66, 66, 66, 66, 91, 91, 91, 91, 66],
-        backgroundColor: (context: any) => {
-          const chart = context.chart;
-          const { ctx, chartArea } = chart;
-
-          if (!chartArea) {
-            return null;
-          }
-
-          const gradient = ctx.createLinearGradient(
-            0,
-            chartArea.bottom,
-            0,
-            chartArea.top
-          );
-          gradient.addColorStop(0, 'rgba(140, 192, 250, 0.8)'); // 하늘색
-          gradient.addColorStop(1, '#2575d1'); // 파란색
-
-          return gradient;
-        },
-        yAxisID: 'y1',
-        borderRadius: 5,
-        barThickness: 40,
-        datalabels: {
-          align: 'end' as const,
-          anchor: 'end' as const,
-          color: '#000',
-          formatter: (value: number) => `${value}원`
-        }
-      },
-      {
-        type: 'line' as const,
-        label: '시가저작권료',
-        data: [1.52, 1.62, 1.45, 1.7, 1.52, 1.62, 1.45, 1.7, 1.62, 1.5, 1.72],
-        borderColor: '#0000FF', // 남색
-        backgroundColor: '#0000FF', // 남색
-        pointBackgroundColor: '#0000FF', // 남색
-        pointBorderColor: '#0000FF', // 남색
-        fill: false,
-        tension: 0,
-        yAxisID: 'y2',
-        pointStyle: 'circle',
-        pointRadius: 6,
-        datalabels: {
-          display: false
-        }
-      }
-    ]
-  };
-
-  const options = {
-    responsive: true,
-    maintainAspectRatio: false,
-    aspectRatio: 2,
-    scales: {
-      x: {
-        display: true,
-        grid: {
-          display: false
-        }
-      },
-      y1: {
-        type: 'linear' as const,
-        position: 'left' as const,
-        grid: {
-          display: false
-        },
-        beginAtZero: true,
-        max: 300, // y축 최대값을 100으로 설정,
-        ticks: {
-          stepSize: 10 // y축 눈금 간격을 10으로 설정
-        }
-      },
-      y2: {
-        type: 'linear' as const,
-        position: 'right' as const,
-        grid: {
-          display: false
-        },
-        max: 2.5,
-        beginAtZero: true
-      }
-    },
-    plugins: {
-      legend: {
-        display: true,
-        position: 'top' as const
-      },
-      tooltip: {
-        enabled: true
-      },
-      datalabels: {
-        display: true
-      }
-    }
-  };
-
-  return (
-    <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
-      <div className="w-full max-w-5xl h-[500px]">
-        <Chart type="bar" data={data} options={options} />
-      </div>
-    </div>
-  );
-};
-
-export default CopyRightFeeChart;
diff --git a/src/components/product/detail/NavBar.tsx b/src/components/product/detail/NavBar.tsx
index 3bae8b1..77f417f 100644
--- a/src/components/product/detail/NavBar.tsx
+++ b/src/components/product/detail/NavBar.tsx
@@ -44,15 +44,6 @@ const NavBar = ({ sort, setSort }: NavBarProps) => {
         `}>
             뉴스
           </div>
-          <div
-            onClick={() => {
-              setSort('public');
-            }}
-            className={`px-4 py-3 flex-1 flex justify-center items-center cursor-pointer text-body5 desk2:text-heading4
-        ${sort === 'public' ? ' text-black border-b-[2px] border-purple-700' : 'text-gray300'}
-        `}>
-            공시
-          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/product/detail/News.tsx b/src/components/product/detail/News.tsx
index 99db11b..61ed78a 100644
--- a/src/components/product/detail/News.tsx
+++ b/src/components/product/detail/News.tsx
@@ -4,10 +4,14 @@ import UseNewsList from '@/factory/useNewsList';
 import { useCallback } from 'react';
 import NoticeItemSkeleton from '@/components/skeleton/NoticeItemSkeleton';
 import { Virtuoso } from 'react-virtuoso';
-import { INewsItem } from '@/types/ProductType';
+import { INewsItem } from '@/types/BuildingProductType';
 import Link from 'next/link';
+import { usePathname } from 'next/navigation';
 const News = () => {
-  const category = '압구정커머스빌딩';
+  const pathname = usePathname();
+  // URL의 마지막 부분 추출
+  const category = pathname.split('/').pop() as string;
+
   console.log(encodeURIComponent(category));
 
   const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, isLoading } =
diff --git a/src/components/product/detail/Notice.tsx b/src/components/product/detail/Notice.tsx
index b5692aa..c7f8e1a 100644
--- a/src/components/product/detail/Notice.tsx
+++ b/src/components/product/detail/Notice.tsx
@@ -1,6 +1,6 @@
 import NoticeItemSkeleton from '@/components/skeleton/NoticeItemSkeleton';
 import UseNoticeLists from '@/factory/useNoticeLists';
-import { INoticeItem } from '@/types/ProductType';
+import { INoticeItem } from '@/types/BuildingProductType';
 import { useCallback } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
diff --git a/src/components/product/detail/PopulationInformationChart.tsx b/src/components/product/detail/PopulationInformationChart.tsx
deleted file mode 100644
index b0ae8c1..0000000
--- a/src/components/product/detail/PopulationInformationChart.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import React from 'react';
-import { Bar } from 'react-chartjs-2';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  BarElement,
-  Title,
-  Tooltip,
-  Legend
-} from 'chart.js';
-
-ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
-
-const PopulationInformationChart = () => {
-  const data = {
-    labels: [
-      '1월',
-      '2월',
-      '3월',
-      '4월',
-      '5월',
-      '6월',
-      '7월',
-      '8월',
-      '9월',
-      '10월',
-      '11월',
-      '12월'
-    ],
-    datasets: [
-      {
-        label: '인구수',
-        data: [241, 123, 232, 453, 111, 111, 111, 111, 111, 111, 111, 111],
-        backgroundColor: '#4A90E2',
-        borderRadius: 5, // 막대의 끝을 둥글게 만듦
-        barThickness: 15 // 막대의 두께 설정,
-      }
-    ]
-  };
-
-  const options = {
-    responsive: true,
-    maintainAspectRatio: false,
-    plugins: {
-      legend: {
-        display: false // 범례를 숨김
-      },
-      tooltip: {
-        enabled: true,
-        intersect: false
-      }
-    },
-    scales: {
-      x: {
-        display: true,
-        grid: {
-          display: false // x축의 그리드를 숨김
-        }
-      },
-      y: {
-        display: true,
-        beginAtZero: true,
-        grid: {
-          display: false // y축의 그리드를 숨김
-        },
-        ticks: {
-          stepSize: 100 // y축의 눈금 간격 설정
-        }
-      }
-    },
-    elements: {
-      bar: {
-        borderWidth: 2
-      }
-    }
-  };
-
-  return (
-    <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
-      <div className="w-full max-w-4xl h-[400px]">
-        <Bar data={data} options={options} />
-      </div>
-    </div>
-  );
-};
-
-export default PopulationInformationChart;
diff --git a/src/components/product/detail/Report.tsx b/src/components/product/detail/Report.tsx
index dcd55d1..825b244 100644
--- a/src/components/product/detail/Report.tsx
+++ b/src/components/product/detail/Report.tsx
@@ -2,7 +2,7 @@ import Image from 'next/image';
 import { formatDate } from '@/utils/FormatDate';
 import UseReportList from '@/factory/useReportList';
 import { useCallback } from 'react';
-import { IreportItem } from '@/types/ProductType';
+import { IreportItem } from '@/types/BuildingProductType';
 import NoticeItemSkeleton from '@/components/skeleton/NoticeItemSkeleton';
 import { Virtuoso } from 'react-virtuoso';
 const Report = () => {
diff --git a/src/components/product/detail/StockPriceChart.tsx b/src/components/product/detail/StockPriceChart.tsx
deleted file mode 100644
index d055f93..0000000
--- a/src/components/product/detail/StockPriceChart.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React, { useRef, useState } from 'react';
-import { Line } from 'react-chartjs-2';
-import {
-  Chart as ChartJS,
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend
-} from 'chart.js';
-
-ChartJS.register(
-  CategoryScale,
-  LinearScale,
-  PointElement,
-  LineElement,
-  Title,
-  Tooltip,
-  Legend
-);
-
-// 각 기간에 해당하는 데이터의 타입 정의
-type TimePeriod = '3개월' | '6개월' | '1년';
-
-const StockPriceChart = () => {
-  const chartRef = useRef(null);
-
-  const [chartData, setChartData] = useState<TimePeriod>('1년');
-
-  const dataSets: Record<TimePeriod, { labels: string[]; data: number[] }> = {
-    '3개월': {
-      labels: ['2023-10', '2023-11', '2023-12'],
-      data: [4500, 3000, 3500]
-    },
-    '6개월': {
-      labels: ['2023-07', '2023-08', '2023-09', '2023-10', '2023-11', '2023-12'],
-      data: [4200, 3900, 3500, 4500, 3000, 3500]
-    },
-    '1년': {
-      labels: [
-        '2023-01',
-        '2023-02',
-        '2023-03',
-        '2023-04',
-        '2023-05',
-        '2023-06',
-        '2023-07',
-        '2023-08',
-        '2023-09',
-        '2023-10',
-        '2023-11',
-        '2023-12'
-      ],
-      data: [4000, 4300, 3700, 3500, 4200, 4000, 3900, 3500, 4200, 4500, 3000, 3500]
-    }
-  };
-
-  const data = {
-    labels: dataSets[chartData].labels,
-    datasets: [
-      {
-        label: '주가',
-        data: dataSets[chartData].data,
-        borderColor: '#8a4af3',
-        backgroundColor: '#8a4af3',
-        pointBackgroundColor: '#8a4af3',
-        pointBorderColor: '#8a4af3',
-        pointRadius: 5,
-        pointHoverRadius: 7,
-        fill: false,
-        datalabels: {
-          display: false // 선 차트에는 숫자 표시 비활성화
-        }
-      }
-    ]
-  };
-
-  const options = {
-    responsive: true,
-    maintainAspectRatio: false,
-    aspectRatio: 2,
-    plugins: {
-      legend: {
-        display: false
-      },
-      tooltip: {
-        enabled: true,
-        intersect: false
-      }
-    },
-    scales: {
-      x: {
-        display: true,
-        grid: {
-          display: false
-        },
-        ticks: {
-          maxRotation: 45,
-          minRotation: 45
-        },
-        offset: true // x축의 첫 번째 데이터 포인트를 약간 오른쪽으로 이동
-      },
-      y: {
-        display: true,
-        beginAtZero: true,
-        max: 6000,
-        grid: {
-          display: false
-        }
-      }
-    },
-    elements: {
-      line: {
-        tension: 0
-      },
-      point: {
-        pointStyle: 'circle'
-      }
-    }
-  };
-
-  return (
-    <>
-      <div className="mb-4  flex justify-end">
-        <button
-          className={`w-[55px] mr-2 p-2  rounded-lg ${chartData === '3개월' ? 'bg-purple-500 text-white' : 'bg-gray-300  '}`}
-          onClick={() => setChartData('3개월')}>
-          3개월
-        </button>
-        <button
-          className={`w-[55px] mr-2 p-2 rounded-lg ${chartData === '6개월' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
-          onClick={() => setChartData('6개월')}>
-          6개월
-        </button>
-        <button
-          className={`w-[55px] p-2 rounded-lg ${chartData === '1년' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
-          onClick={() => setChartData('1년')}>
-          1년
-        </button>
-      </div>
-      <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
-        <div className="w-full max-w-4xl h-[400px]">
-          <Line ref={chartRef} data={data} options={options} />
-        </div>
-      </div>
-    </>
-  );
-};
-
-export default StockPriceChart;
diff --git a/src/components/product/detail/art/ArtProductDetail.tsx b/src/components/product/detail/art/ArtProductDetail.tsx
new file mode 100644
index 0000000..2f0e8ef
--- /dev/null
+++ b/src/components/product/detail/art/ArtProductDetail.tsx
@@ -0,0 +1,12 @@
+const ArtProductDetail = ({ url }: { url: string }) => {
+  console.log(url);
+  return (
+    <div className="max-w-[1000px] mx-auto mt-[32px]">
+      <div className="w-full h-[400px] flex justify-center items-center bg-gray-200">
+        <div className=" text-gray-400">서비스 준비중</div>
+      </div>
+    </div>
+  );
+};
+
+export default ArtProductDetail;
diff --git a/src/components/product/detail/art/ArtProfit.tsx b/src/components/product/detail/art/ArtProfit.tsx
new file mode 100644
index 0000000..3b251fd
--- /dev/null
+++ b/src/components/product/detail/art/ArtProfit.tsx
@@ -0,0 +1,142 @@
+'use client';
+import { getArtProductProfitDetail } from '@/factory/ProductProfitDetail/ArtProductProfitDetail';
+
+const ArtProfit = ({ url }: { url: string }) => {
+  const { data, isLoading } = getArtProductProfitDetail(url);
+  console.log(data);
+  return (
+    <div className="max-w-[1000px] mx-auto mt-[32px]">
+      <div>
+        <div className="text-base font-bold  mb-[15px] ">발행 정보</div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px] ">작품명</div>
+            <div className="">{data?.artPublish?.name}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">증권유형</div>
+            <div className="">{data?.artPublish.type}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">작가</div>
+            <div className="">{data?.artPublish.authorName}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">발행수량</div>
+            <div className="">{data?.artPublish.basePrice.toLocaleString()}주</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">발행가액</div>
+            <div className="">
+              {Number(data?.artPublish.totalPrice).toLocaleString()}원
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">총 모집액</div>
+            <div className="">{data?.artPublish.totalPrice.toLocaleString()}원</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">상장일</div>
+            <div className="">{data?.artPublish.issuanceDate}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className=" w-full h-[1px] my-[40px] bg-gray-200" />
+
+      <div>
+        <div className="text-base font-bold  mb-[15px] ">작가정보</div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px] ">이름</div>
+            <div className="">{data?.artAuthor.name}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">국적</div>
+            <div className="">{data?.artAuthor.nationality}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">태생년도</div>
+            <div className="">{data?.artAuthor.birth}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">학력</div>
+            <div className="">{data?.artAuthor.academicAbility}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">수상경력</div>
+            <div className="">{data?.artAuthor.awardCareer}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">대표작</div>
+            <div className="">{data?.artAuthor.major}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">작가활동, 소개</div>
+            <div className="">{data?.artAuthor.introduction}</div>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div className="text-base font-bold  mb-[15px] ">작품정보</div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px] ">작품명</div>
+            <div className="">{data?.artWork.name}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">작품크기(가로x세로)</div>
+            <div className="">{data?.artWork.size}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">제작년도</div>
+            <div className="">{data?.artWork.productionDate}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">재료</div>
+            <div className="">{data?.artWork.material}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">작품정보</div>
+            <div className="">{data?.artWork.detail}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ArtProfit;
diff --git a/src/components/product/detail/ProductDetail.tsx b/src/components/product/detail/building/BuildingProductDetail.tsx
similarity index 64%
rename from src/components/product/detail/ProductDetail.tsx
rename to src/components/product/detail/building/BuildingProductDetail.tsx
index a67158c..3e195d7 100644
--- a/src/components/product/detail/ProductDetail.tsx
+++ b/src/components/product/detail/building/BuildingProductDetail.tsx
@@ -1,10 +1,10 @@
-import CommercialRentChart from './CommercialRentChart';
-import CommercialVacancyRateChart from './CommercialVacancyRateChart';
-import FloatingPopulationChart from './FloatingPopulationChart';
-import PopulationInformationChart from './PopulationInformationChart';
+import CommercialRentChart from './chart/CommercialRentChart';
+import CommercialVacancyRateChart from './chart/CommercialVacancyRateChart';
+import FloatingPopulationChart from './chart/FloatingPopulationChart';
+import PopulationInformationChart from './chart/PopulationInformationChart';
 import PublicTransport from './PublicTransport';
-import OfficialPriceChart from './OfficialPriceChart';
-const ProductDetail = ({ url }: { url: string }) => {
+import OfficialPriceChart from './chart/OfficialPriceChart';
+const BuildingProductDetail = ({ url }: { url: string }) => {
   console.log(url);
   return (
     <div className="max-w-[1000px] mx-auto mt-[32px]">
@@ -28,4 +28,4 @@ const ProductDetail = ({ url }: { url: string }) => {
   );
 };
 
-export default ProductDetail;
+export default BuildingProductDetail;
diff --git a/src/components/product/detail/Profit.tsx b/src/components/product/detail/building/BuildingProfit.tsx
similarity index 94%
rename from src/components/product/detail/Profit.tsx
rename to src/components/product/detail/building/BuildingProfit.tsx
index 9489121..02ee2c7 100644
--- a/src/components/product/detail/Profit.tsx
+++ b/src/components/product/detail/building/BuildingProfit.tsx
@@ -1,9 +1,9 @@
-import { getProductProfitDetail } from '@/factory/ProductProfitDetail';
-import CopyRightFeeChart from './CopyrightFeeChart';
+import { getBuildingProductProfitDetail } from '@/factory/ProductProfitDetail/BuildingProductProfitDetail';
+import CopyRightFeeChart from './chart/CopyrightFeeChart';
 import KakaoMap from './Map';
-import StockPriceChart from './StockPriceChart';
-const Profit = ({ url }: { url: string }) => {
-  const { data, isLoading } = getProductProfitDetail(url);
+import StockPriceChart from './chart/StockPriceChart';
+const BuildingProfit = ({ url }: { url: string }) => {
+  const { data, isLoading } = getBuildingProductProfitDetail(url);
   console.log(data);
   return (
     <div className="max-w-[1000px] mx-auto mt-[32px]">
@@ -129,7 +129,7 @@ const Profit = ({ url }: { url: string }) => {
         <div className="flex flex-col  mb-[7px]">
           <div className=" flex  w-[400px]">
             <div className="text-gray-400  w-[150px] ">상품명</div>
-            <div className="">{data?.buildingDetail.productId.name}</div>
+            {/* <div className="">{data?.buildingDetail.productId.name}</div> */}
           </div>
         </div>
         <div className="flex flex-col  mb-[7px]">
@@ -230,18 +230,18 @@ const Profit = ({ url }: { url: string }) => {
         </div>
         <div className="flex flex-col  mb-[7px]">
           <div className=" flex  w-full max-w-[900px] desk:h-[100px] desk2:h-[100px]">
-            <div className="text-gray-400  desk2:w-[150px]  desk:w-[300px] ">
+            <div className="text-gray-400  w-[150px] ">
               지역지구 등 지정여부 (국토의 계획 및 이용에 관한 법률)
             </div>
-            <div className=" ">{data?.landRegistry.zoningNational}</div>
+            <div className="flex-1 ">{data?.landRegistry.zoningNational}</div>
           </div>
         </div>
         <div className="flex flex-col  mb-[7px]">
           <div className=" flex  w-full max-w-[900px] desk:h-[150px] desk2:h-[100px]">
-            <div className="text-gray-400  desk2:w-[200px]  desk:w-[500px]">
+            <div className="text-gray-400  w-[150px]  ">
               지역지구 등 지정여부 (기타법률)
             </div>
-            <div className="">{data?.landRegistry.zoningOther}</div>
+            <div className="flex-1">{data?.landRegistry.zoningOther}</div>
           </div>
         </div>
       </div>
@@ -288,4 +288,4 @@ const Profit = ({ url }: { url: string }) => {
   );
 };
 
-export default Profit;
+export default BuildingProfit;
diff --git a/src/components/product/detail/Map.tsx b/src/components/product/detail/building/Map.tsx
similarity index 86%
rename from src/components/product/detail/Map.tsx
rename to src/components/product/detail/building/Map.tsx
index 3d8e62a..b425f8e 100644
--- a/src/components/product/detail/Map.tsx
+++ b/src/components/product/detail/building/Map.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
+import { usePathname } from 'next/navigation';
 
 declare global {
   interface Window {
@@ -8,14 +9,16 @@ declare global {
   }
 }
 
-const fetchBuildingData = async () => {
-  const response = await axios.get(
-    'https://api.moaguide.com/detail/building/area/sou.10'
-  );
-  return response.data;
-};
-
 const KakaoMap = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop(); // 경로의 마지막 부분 추출
+  console.log(lastSegment);
+  const fetchBuildingData = async () => {
+    const response = await axios.get(
+      `https://api.moaguide.com/detail/building/area/${lastSegment}`
+    );
+    return response.data;
+  };
   const mapRef = useRef<HTMLDivElement>(null);
 
   const { data, isLoading, error } = useQuery({
diff --git a/src/components/product/detail/PublicTransport.tsx b/src/components/product/detail/building/PublicTransport.tsx
similarity index 95%
rename from src/components/product/detail/PublicTransport.tsx
rename to src/components/product/detail/building/PublicTransport.tsx
index 369162a..7787e1c 100644
--- a/src/components/product/detail/PublicTransport.tsx
+++ b/src/components/product/detail/building/PublicTransport.tsx
@@ -98,16 +98,16 @@ const PublicTransport = () => {
 
       <div className="text-gray-400 mb-[10px]">0.5km 이내 대중교통</div>
 
-      <div className="flex max-w-[1000px] w-full mx-auto h-[120px]">
-        <div className="bg-gray-50 rounded-xl mr-[20px] flex flex-col w-[calc(50%-10px)] p-[20px]">
+      <div className="flex max-w-[1000px] w-full mx-auto h-auto">
+        <div className="bg-gray-50 rounded-xl mr-[20px] flex flex-col w-[calc(50%-10px)] p-[20px] ">
           <div className="text-base font-bold">주변 지하철</div>
           {data?.nearSubway.map((subway, index) => (
             <div key={index} className="flex justify-between mt-2">
               <div className="flex items-center">
                 <div className="mr-1">
                   <Image
-                    src={stationImageMap[subway.station]}
-                    alt={`${subway.station} 이미지`}
+                    src={stationImageMap[subway.route]}
+                    alt={`이미지`}
                     width={20}
                     height={20}
                   />
diff --git a/src/components/product/detail/CommercialRentChart.tsx b/src/components/product/detail/building/chart/CommercialRentChart.tsx
similarity index 99%
rename from src/components/product/detail/CommercialRentChart.tsx
rename to src/components/product/detail/building/chart/CommercialRentChart.tsx
index 7f3fbf3..597c841 100644
--- a/src/components/product/detail/CommercialRentChart.tsx
+++ b/src/components/product/detail/building/chart/CommercialRentChart.tsx
@@ -78,6 +78,7 @@ const CommercialRentChart: React.FC = () => {
   const lastSegment = pathname.split('/').pop(); // 경로의 마지막 부분 추출
   console.log(lastSegment);
   // API에서 데이터를 가져오는 함수
+
   const fetchData = async (): Promise<ApiData> => {
     const response = await axios.get(
       `https://api.moaguide.com/detail/building/rate/${lastSegment}?type=오피스`
@@ -103,7 +104,7 @@ const CommercialRentChart: React.FC = () => {
 
   // useQuery로 데이터 패칭
   const { data, error, isLoading } = useQuery({
-    queryKey: ['rentData'],
+    queryKey: ['rentData', lastSegment],
     queryFn: fetchData
   });
 
diff --git a/src/components/product/detail/CommercialVacancyRateChart.tsx b/src/components/product/detail/building/chart/CommercialVacancyRateChart.tsx
similarity index 100%
rename from src/components/product/detail/CommercialVacancyRateChart.tsx
rename to src/components/product/detail/building/chart/CommercialVacancyRateChart.tsx
diff --git a/src/components/product/detail/building/chart/CopyrightFeeChart.tsx b/src/components/product/detail/building/chart/CopyrightFeeChart.tsx
new file mode 100644
index 0000000..185aea6
--- /dev/null
+++ b/src/components/product/detail/building/chart/CopyrightFeeChart.tsx
@@ -0,0 +1,235 @@
+import React, { useState } from 'react';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { Chart } from 'react-chartjs-2';
+import { usePathname } from 'next/navigation';
+import axios from 'axios';
+import { IMusicCopyRightFeeChart } from '@/types/MusicProductType';
+import { useQuery } from '@tanstack/react-query';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels
+);
+
+const BuildingCopyRightFeeChart = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop();
+  console.log(lastSegment);
+  const [filteringData, setFilteringData] = useState('100');
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get<IMusicCopyRightFeeChart>(
+        `https://api.moaguide.com/detail/divide/${lastSegment}?month=${filteringData}`
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error; // 에러를 다시 던져서 useQuery의 onError로 전달
+    }
+  };
+
+  const {
+    data: CopyRightFeeData,
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: ['BuildingRightFeeChart', filteringData],
+    queryFn: fetchData
+  });
+
+  const paymentDate =
+    (CopyRightFeeData?.divide &&
+      CopyRightFeeData?.divide.map((item) => item.paymentDate)) ||
+    [];
+
+  const CopyRightFeeDivideCount =
+    (CopyRightFeeData?.divide &&
+      CopyRightFeeData?.divide.map((item) => Number(item.divide))) ||
+    [];
+  const sortedCopyRightFeeDivideCount = [...CopyRightFeeDivideCount].sort(
+    (a, b) => b - a
+  );
+  const maxCopyRightFeeDivideCount = sortedCopyRightFeeDivideCount[0] || 0;
+  const averageCopyRightFeeDivideCount =
+    CopyRightFeeDivideCount.reduce((acc, val) => acc + val, 0) /
+      CopyRightFeeDivideCount.length || 0;
+
+  const BarnewVariable =
+    Math.floor(maxCopyRightFeeDivideCount + averageCopyRightFeeDivideCount) * 1.5;
+
+  const CopyRightFeeDivideRateCount =
+    (CopyRightFeeData?.divide &&
+      CopyRightFeeData?.divide.map((item) => Number(item.divide))) ||
+    [];
+  const sortedCopyRightFeeDivideRateCount = [...CopyRightFeeDivideRateCount].sort(
+    (a, b) => b - a
+  );
+  const maxCopyRightFeeDivideRateCount = sortedCopyRightFeeDivideRateCount[0] || 0;
+  const averageCopyRightFeeDivideRateCount =
+    CopyRightFeeDivideRateCount.reduce((acc, val) => acc + val, 0) /
+      CopyRightFeeDivideRateCount.length || 0;
+
+  const LinenewVariable = Math.floor(
+    maxCopyRightFeeDivideRateCount + averageCopyRightFeeDivideRateCount
+  );
+
+  const data = {
+    labels: paymentDate,
+    datasets: [
+      {
+        type: 'bar' as const,
+        label: '저작권료',
+        data: CopyRightFeeDivideCount,
+        backgroundColor: (context: any) => {
+          const chart = context.chart;
+          const { ctx, chartArea } = chart;
+
+          if (!chartArea) {
+            return null;
+          }
+
+          const gradient = ctx.createLinearGradient(
+            0,
+            chartArea.bottom,
+            0,
+            chartArea.top
+          );
+          gradient.addColorStop(0, 'rgba(140, 192, 250, 0.8)');
+          gradient.addColorStop(1, '#2575d1');
+
+          return gradient;
+        },
+        yAxisID: 'y1',
+        borderRadius: 5,
+        barThickness: 20,
+        barPercentage: 0.5,
+        categoryPercentage: 0.5,
+
+        datalabels: {
+          align: 'end' as const,
+          anchor: 'end' as const,
+          color: '#000',
+          formatter: (value: number) => `${value}원`
+        }
+      },
+      {
+        type: 'line' as const,
+        label: '시가저작권료',
+        data: CopyRightFeeDivideRateCount,
+        borderColor: '#0000FF',
+        backgroundColor: '#0000FF',
+        pointBackgroundColor: '#0000FF',
+        pointBorderColor: '#0000FF',
+        fill: false,
+        tension: 0.4,
+        yAxisID: 'y2',
+        pointStyle: 'circle',
+        pointRadius: 6,
+        datalabels: {
+          display: false
+        }
+      }
+    ]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 2,
+    scales: {
+      x: {
+        display: true,
+        grid: {
+          display: false
+        }
+      },
+      y1: {
+        type: 'linear' as const,
+        position: 'left' as const,
+        grid: {
+          display: false
+        },
+        beginAtZero: true,
+        max: BarnewVariable,
+        ticks: {
+          stepSize: 10
+        }
+      },
+      y2: {
+        type: 'linear' as const,
+        position: 'right' as const,
+        grid: {
+          display: false
+        },
+        max: LinenewVariable,
+        beginAtZero: true
+      }
+    },
+    plugins: {
+      legend: {
+        display: false,
+        position: 'top' as const
+      },
+      tooltip: {
+        enabled: true
+      },
+      datalabels: {
+        display: true
+      }
+    }
+  };
+
+  return (
+    <div>
+      <div className=" flex justify-end">
+        <button
+          className={`w-[55px] mr-2 p-2  rounded-lg ${filteringData === '3' ? 'bg-purple-500 text-white' : 'bg-gray-300  '}`}
+          onClick={() => setFilteringData('3')}>
+          3개월
+        </button>
+        <button
+          className={`w-[55px] mr-2 p-2 rounded-lg ${filteringData === '6' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('6')}>
+          6개월
+        </button>
+        <button
+          className={`w-[55px] mr-2  p-2 rounded-lg ${filteringData === '12' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('12')}>
+          1년
+        </button>
+        <button
+          className={`w-[55px] p-2 rounded-lg ${filteringData === '100' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('100')}>
+          전체
+        </button>
+      </div>
+
+      <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
+        <div className="w-full max-w-5xl h-[500px]">
+          <Chart type="bar" data={data} options={options} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BuildingCopyRightFeeChart;
diff --git a/src/components/product/detail/FloatingPopulationChart.tsx b/src/components/product/detail/building/chart/FloatingPopulationChart.tsx
similarity index 61%
rename from src/components/product/detail/FloatingPopulationChart.tsx
rename to src/components/product/detail/building/chart/FloatingPopulationChart.tsx
index 53a535d..ce45843 100644
--- a/src/components/product/detail/FloatingPopulationChart.tsx
+++ b/src/components/product/detail/building/chart/FloatingPopulationChart.tsx
@@ -9,55 +9,81 @@ import {
   Tooltip,
   Legend
 } from 'chart.js';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { usePathname } from 'next/navigation';
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);
 
 const FloatingPopulationChart = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop(); // 경로의 마지막 부분 추출
+  console.log(lastSegment);
+
+  const fetchData = async () => {
+    const response = await axios.get(
+      `https://api.moaguide.com/detail/building/subway/${lastSegment}?year=2023&month=12`
+    );
+    return response.data;
+  };
+  // useQuery로 데이터 패칭
+  const { data, error, isLoading } = useQuery({
+    queryKey: ['floatingpopulation'],
+    queryFn: fetchData
+  });
+
   const stackedData = {
     labels: [
-      '2022-10',
-      '2022-11',
-      '2022-12',
-      '2023-01',
-      '2023-02',
-      '2023-03',
-      '2023-04',
-      '2023-05',
-      '2023-06',
-      '2023-07',
-      '2023-08',
-      '2023-09'
+      '05-06',
+      '06-07',
+      '07-08',
+      '08-09',
+      '09-10',
+      '10-11',
+      '11-12',
+      '12-13',
+      '13-14',
+      '14-15',
+      '15-16',
+      '16-17',
+      '17-18',
+      '18-19',
+      '19-20',
+      '20-21',
+      '21-22',
+      '22-23'
     ],
     datasets: [
       {
         label: '승차승객',
-        data: [2.1, 2.0, 2.3, 2.5, 2.8, 3.0, 3.2, 3.5, 3.8, 4.0, 4.1, 4.2],
+        data: [
+          2.1, 2.0, 2.3, 2.5, 2.8, 3.0, 3.2, 3.5, 3.8, 4.0, 4.1, 4.2, 6.7, 6.8, 6.9, 7.0,
+          7.1, 7.2
+        ],
         backgroundColor: '#FF6B6B'
       },
       {
         label: '하차승객',
-        data: [2.2, 2.1, 2.2, 2.6, 2.7, 2.9, 3.0, 3.1, 3.3, 3.4, 3.5, 3.7],
+        data: [
+          2.2, 2.1, 2.2, 2.6, 2.7, 2.9, 3.0, 3.1, 3.3, 3.4, 3.5, 3.7, 4.0, 4.1, 4.2, 4.3,
+          4.4, 4.5
+        ],
         backgroundColor: '#A28DFF'
-      },
-      {
-        label: '전체승객',
-        data: [4.3, 4.1, 4.5, 5.1, 5.5, 5.9, 6.2, 6.6, 7.1, 7.4, 7.6, 7.9],
-        backgroundColor: '#7D4E57'
       }
     ]
   };
 
   const groupedData = {
-    labels: ['강남', '홍대', '신촌', '서울대', '연세대'],
+    labels: ['월', '화', '수', '목', '금', '토', '일'],
     datasets: [
       {
         label: '승차승객',
-        data: [3.2, 3.0, 2.9, 3.1, 3.3],
+        data: [3.2, 3.0, 2.9, 3.1, 3.3, 3.5, 3.6],
         backgroundColor: '#FF6B6B'
       },
       {
         label: '하차승객',
-        data: [3.5, 3.4, 3.2, 3.3, 3.5],
+        data: [3.5, 3.4, 3.2, 3.3, 3.5, 3.6, 4.0],
         backgroundColor: '#A28DFF'
       }
     ]
diff --git a/src/components/product/detail/OfficialPriceChart.tsx b/src/components/product/detail/building/chart/OfficialPriceChart.tsx
similarity index 100%
rename from src/components/product/detail/OfficialPriceChart.tsx
rename to src/components/product/detail/building/chart/OfficialPriceChart.tsx
diff --git a/src/components/product/detail/building/chart/PopulationInformationChart.tsx b/src/components/product/detail/building/chart/PopulationInformationChart.tsx
new file mode 100644
index 0000000..e1ef11c
--- /dev/null
+++ b/src/components/product/detail/building/chart/PopulationInformationChart.tsx
@@ -0,0 +1,115 @@
+import React from 'react';
+import { Bar } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js';
+import { usePathname } from 'next/navigation';
+import axios from 'axios';
+import { useQuery } from '@tanstack/react-query';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels
+);
+
+const PopulationInformationChart = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop(); // 경로의 마지막 부분 추출
+  console.log(lastSegment);
+
+  const fetchData = async () => {
+    const response = await axios.get(
+      `https://api.moaguide.com/detail/building/population/${lastSegment}?year=2023&month=12`
+    );
+    return response.data;
+  };
+  // useQuery로 데이터 패칭
+  const { data, error, isLoading } = useQuery({
+    queryKey: ['floatingpopulation'],
+    queryFn: fetchData
+  });
+  console.log(data?.populations);
+  const populationData =
+    data?.populations?.map((population: { total: number }) => population.total) || [];
+  const Chartdata = {
+    labels: ['월', '화', '수', '목', '금', '토', '일'],
+    datasets: [
+      {
+        label: '인구수',
+        data: populationData,
+        backgroundColor: '#4A90E2',
+        borderRadius: 5, // 막대의 끝을 둥글게 만듦
+        barThickness: 20 // 막대의 두께 설정,
+      }
+    ]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    plugins: {
+      legend: {
+        display: false // 범례를 숨김
+      },
+      tooltip: {
+        enabled: true,
+        intersect: false
+      },
+      datalabels: {
+        anchor: 'end' as const,
+        align: 'end' as const,
+        color: 'black',
+        font: {
+          weight: 'bold' as const
+        }
+      }
+    },
+    scales: {
+      x: {
+        display: true,
+        grid: {
+          display: false // x축의 그리드를 숨김
+        }
+      },
+      y: {
+        display: true,
+        beginAtZero: true,
+        max: Math.max(...populationData) * 1.5, // y축의 최대값 설정
+        grid: {
+          display: false // y축의 그리드를 숨김
+        },
+        ticks: {
+          display: false, //y축 삭제
+          stepSize: 1000 // y축의 눈금 간격 설정
+        }
+      }
+    },
+    elements: {
+      bar: {
+        borderWidth: 2
+      }
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
+      <div className="w-full max-w-4xl h-[400px]">
+        <Bar data={Chartdata} options={options} />
+      </div>
+    </div>
+  );
+};
+
+export default PopulationInformationChart;
diff --git a/src/components/product/detail/building/chart/StockPriceChart.tsx b/src/components/product/detail/building/chart/StockPriceChart.tsx
new file mode 100644
index 0000000..edf5fb2
--- /dev/null
+++ b/src/components/product/detail/building/chart/StockPriceChart.tsx
@@ -0,0 +1,169 @@
+import React, { useRef, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js';
+import axios from 'axios';
+import { useQuery } from '@tanstack/react-query';
+import { usePathname } from 'next/navigation';
+import { IMusicStockPriceChart } from '@/types/MusicProductType';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+const BuildingStockPriceChart = () => {
+  const chartRef = useRef(null);
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop();
+  console.log(lastSegment);
+  const [filteringData, setFilteringData] = useState('100');
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get<IMusicStockPriceChart>(
+        `https://api.moaguide.com/detail/transaction/${lastSegment}?month=${filteringData}`
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error; // 에러를 다시 던져서 useQuery의 onError로 전달
+    }
+  };
+
+  const {
+    data: StockPriceData,
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: ['BuildingStockPriceChart', filteringData],
+    queryFn: fetchData
+  });
+
+  const StockPriceDate =
+    (StockPriceData?.transaction &&
+      StockPriceData?.transaction.map((item) => item.date)) ||
+    [];
+
+  const StockPriceCount =
+    (StockPriceData?.transaction &&
+      StockPriceData?.transaction.map((item) => Number(item.price))) ||
+    [];
+  const sortedStockPriceCount = [...StockPriceCount].sort((a, b) => b - a);
+  const maxStockPriceCount = sortedStockPriceCount[0] || 0;
+  const averageStockPriceCount =
+    StockPriceCount.reduce((acc, val) => acc + val, 0) / StockPriceCount.length || 0;
+
+  const newVariable = Math.floor(maxStockPriceCount + averageStockPriceCount);
+
+  const data = {
+    labels: StockPriceDate,
+    datasets: [
+      {
+        label: '주가',
+        data: StockPriceCount,
+        borderColor: '#8a4af3',
+        backgroundColor: '#8a4af3',
+        pointBackgroundColor: '#8a4af3',
+        pointBorderColor: '#8a4af3',
+        pointRadius: 0,
+        pointHoverRadius: 7,
+        fill: false,
+        datalabels: {
+          display: false // 선 차트에는 숫자 표시 비활성화
+        }
+      }
+    ]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 2,
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true,
+        intersect: false
+      }
+    },
+    scales: {
+      x: {
+        display: true,
+        grid: {
+          display: false
+        },
+        ticks: {
+          maxRotation: 45,
+          minRotation: 45
+        },
+        offset: true // x축의 첫 번째 데이터 포인트를 약간 오른쪽으로 이동
+      },
+      y: {
+        display: true,
+        beginAtZero: true,
+        max: newVariable,
+        grid: {
+          display: false
+        }
+      }
+    },
+    elements: {
+      line: {
+        tension: 0
+      },
+      point: {
+        pointStyle: 'circle'
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className="mb-4  flex justify-end">
+        <button
+          className={`w-[55px] mr-2 p-2  rounded-lg ${filteringData === '3' ? 'bg-purple-500 text-white' : 'bg-gray-300  '}`}
+          onClick={() => setFilteringData('3')}>
+          3개월
+        </button>
+        <button
+          className={`w-[55px] mr-2 p-2 rounded-lg ${filteringData === '6' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('6')}>
+          6개월
+        </button>
+        <button
+          className={`w-[55px] mr-2 p-2 rounded-lg ${filteringData === '12' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('12')}>
+          1년
+        </button>
+        <button
+          className={`w-[55px] p-2 rounded-lg ${filteringData === '100' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('100')}>
+          전체
+        </button>
+      </div>
+      <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
+        <div className="w-full max-w-4xl h-[400px]">
+          <Line ref={chartRef} data={data} options={options} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default BuildingStockPriceChart;
diff --git a/src/components/product/detail/content/ContentProductDetail.tsx b/src/components/product/detail/content/ContentProductDetail.tsx
new file mode 100644
index 0000000..6bb4aba
--- /dev/null
+++ b/src/components/product/detail/content/ContentProductDetail.tsx
@@ -0,0 +1,38 @@
+import MovieChart from './MovieChart';
+import MovieContent from './MovieContent';
+import MovieStats from './MovieStats';
+import MovieTenChart from './MovieTenChart';
+import Schedule from './Schedule';
+
+const ContentProductDetail = ({ url, genre }: { url: string; genre: string }) => {
+  console.log(url);
+
+  return (
+    <div>
+      {genre === 'MOVIE' ? (
+        <div className="max-w-[1000px] mx-auto mt-[32px]">
+          <div>개봉 스케쥴</div>
+          <div>
+            <Schedule />
+          </div>
+          <MovieContent />
+          <div>통계정보</div>
+          <MovieStats />
+          <MovieChart />
+          <MovieTenChart />
+        </div>
+      ) : (
+        <div className="max-w-[1000px] mx-auto mt-[32px]">
+          <div className="w-full h-[400px] flex  justify-center items-center bg-gray-200">
+            <div className=" text-gray-400">서비스 준비중</div>
+          </div>
+          <div>통계정보</div>
+          <MovieStats />
+          <MovieChart />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ContentProductDetail;
diff --git a/src/components/product/detail/content/ContentProfit.tsx b/src/components/product/detail/content/ContentProfit.tsx
new file mode 100644
index 0000000..509b4ea
--- /dev/null
+++ b/src/components/product/detail/content/ContentProfit.tsx
@@ -0,0 +1,281 @@
+'use client';
+import { getArtProductProfitDetail } from '@/factory/ProductProfitDetail/ArtProductProfitDetail';
+
+const ContentProfit = ({
+  url,
+  invest,
+  genre
+}: {
+  url: string;
+  invest: boolean;
+  genre: string;
+}) => {
+  const { data, isLoading } = getArtProductProfitDetail(url);
+  console.log(data);
+  return (
+    <div className="max-w-[1000px] mx-auto mt-[32px]">
+      <div>
+        <div className="text-base font-bold  mb-[15px] ">발행 정보</div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px] ">작품명</div>
+            <div className="">{data?.artPublish?.name}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">장르</div>
+            <div className="">{data?.artPublish.type}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">증권종류</div>
+            <div className="">{data?.artPublish.authorName}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">최소모집목표금액</div>
+            <div className="">{data?.artPublish.basePrice.toLocaleString()}주</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">최대모집목표금액</div>
+            <div className="">
+              {Number(data?.artPublish.totalPrice).toLocaleString()}원
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">최소 모집수량</div>
+            <div className="">{data?.artPublish.totalPrice.toLocaleString()}원</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">1주당 가격</div>
+            <div className="">{data?.artPublish.issuanceDate}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">최소투자금액</div>
+            <div className="">{data?.artPublish.issuanceDate}</div>
+          </div>
+        </div>
+
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">증권발행일</div>
+            <div className="">{data?.artPublish.issuanceDate}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">증권만기일</div>
+            <div className="">{data?.artPublish.issuanceDate}</div>
+          </div>
+        </div>
+      </div>
+
+      <div className=" w-full h-[1px] my-[40px] bg-gray-200" />
+
+      {invest ? (
+        <div>
+          <div className="text-base font-bold  mb-[15px] ">투자정보</div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px] ">총예산규모</div>
+              <div className="">{data?.artAuthor.name}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">객단가</div>
+              <div className="">{data?.artAuthor.nationality}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">손익배당비율</div>
+              <div className="">{data?.artAuthor.birth}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">추정 손익분기점</div>
+              <div className="">{data?.artAuthor.academicAbility}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">제작비</div>
+              <div className="">{data?.artAuthor.awardCareer}</div>
+            </div>
+          </div>
+        </div>
+      ) : null}
+
+      {genre === 'MOVIE' ? (
+        <div>
+          <div className="text-base font-bold  mb-[15px] ">영화정보</div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px] ">영화 소개</div>
+              <div className="">{data?.artWork.name}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">장르</div>
+              <div className="">{data?.artWork.size}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">개봉일</div>
+              <div className="">{data?.artWork.productionDate}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">등급분류</div>
+              <div className="">{data?.artWork.material}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">상영시간</div>
+              <div className="">{data?.artWork.detail}</div>
+            </div>
+          </div>
+
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">제작상태</div>
+              <div className="">{data?.artWork.detail}</div>
+            </div>
+          </div>
+
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">감독</div>
+              <div className="">{data?.artWork.detail}</div>
+            </div>
+          </div>
+
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">출연</div>
+              <div className="">{data?.artWork.detail}</div>
+            </div>
+          </div>
+
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">배급사</div>
+              <div className="">{data?.artWork.detail}</div>
+            </div>
+          </div>
+
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">원작정보</div>
+              <div className="">{data?.artWork.detail}</div>
+            </div>
+          </div>
+        </div>
+      ) : genre === 'CULTURE' ? (
+        <div>
+          <div className="text-base font-bold  mb-[15px] ">공연정보</div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px] ">공연 장소</div>
+              <div className="">{data?.artWork.name}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">공연 기간</div>
+              <div className="">{data?.artWork.size}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">감독</div>
+              <div className="">{data?.artWork.productionDate}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">공연 횟수</div>
+              <div className="">{data?.artWork.material}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">프로듀서</div>
+              <div className="">{data?.artWork.detail}</div>
+            </div>
+          </div>
+
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">출연</div>
+              <div className="">{data?.artWork.detail}</div>
+            </div>
+          </div>
+        </div>
+      ) : genre === 'EXHIBITION' ? (
+        <div>
+          <div className="text-base font-bold  mb-[15px] ">전시 정보</div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px] ">전시 장소</div>
+              <div className="">{data?.artWork.name}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">공연 기간</div>
+              <div className="">{data?.artWork.size}</div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        <div>
+          <div className="text-base font-bold  mb-[15px] ">드라마 정보</div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px] ">감독</div>
+              <div className="">{data?.artWork.name}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">제작사</div>
+              <div className="">{data?.artWork.size}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">상영채널</div>
+              <div className="">{data?.artWork.size}</div>
+            </div>
+          </div>
+          <div className="flex flex-col  mb-[7px]">
+            <div className=" flex  w-[400px]">
+              <div className="text-gray-400  w-[150px]">출연</div>
+              <div className="">{data?.artWork.size}</div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ContentProfit;
diff --git a/src/components/product/detail/content/MovieChart.tsx b/src/components/product/detail/content/MovieChart.tsx
new file mode 100644
index 0000000..3cd112c
--- /dev/null
+++ b/src/components/product/detail/content/MovieChart.tsx
@@ -0,0 +1,201 @@
+import { IContentMovieCharts } from '@/types/ContentProductType';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { usePathname } from 'next/navigation';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartOptions
+} from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { useRef, useState } from 'react';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels
+);
+
+const MovieChart = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop();
+  console.log(lastSegment);
+  const [filteringData, setFilteringData] = useState('screen');
+
+  const handleFiltering = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilteringData(e.target.id);
+  };
+
+  const fetchData = async () => {
+    const response = await axios.get<IContentMovieCharts>(
+      `https://api.moaguide.com/detail/contents/${filteringData}/${lastSegment}`
+    );
+    return response.data;
+  };
+
+  const {
+    data: MovieData,
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: ['MovieChart', filteringData],
+    queryFn: fetchData
+  });
+
+  const chartRef = useRef(null);
+
+  const Movieday = MovieData?.map((item) => item.day) || [];
+
+  const Moviecount = MovieData?.map((item) => item.count) || [];
+  const sortedMoviecount = [...Moviecount].sort((a, b) => b - a);
+  const maxMoviecount = sortedMoviecount[0] || 0;
+  const averageMoviecount =
+    Moviecount.reduce((acc, val) => acc + val, 0) / Moviecount.length || 0;
+  const newVariable = Math.floor(maxMoviecount + averageMoviecount);
+
+  const dataSets = {
+    labels: Movieday,
+    data: Moviecount
+  };
+
+  const data = {
+    labels: dataSets.labels,
+    datasets: [
+      {
+        label: '주가',
+        data: dataSets.data,
+        borderColor: '#8a4af3',
+        backgroundColor: '#8a4af3',
+        pointBackgroundColor: '#8a4af3',
+        pointBorderColor: '#8a4af3',
+        pointRadius: 5,
+        pointHoverRadius: 7,
+        fill: false,
+        datalabels: {
+          display: false // 선 차트에는 숫자 표시 비활성화
+        }
+      }
+    ]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 2,
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true,
+        intersect: false
+      }
+    },
+    scales: {
+      x: {
+        display: true,
+        grid: {
+          display: false
+        },
+        ticks: {
+          maxRotation: 45,
+          minRotation: 45
+        },
+        offset: true // x축의 첫 번째 데이터 포인트를 약간 오른쪽으로 이동
+      },
+      y: {
+        display: true,
+        beginAtZero: true,
+        max: newVariable,
+        grid: {
+          display: false
+        }
+      }
+    },
+    elements: {
+      line: {
+        tension: 0
+      },
+      point: {
+        pointStyle: 'circle'
+      }
+    }
+  };
+
+  return (
+    <div>
+      <section>
+        <input
+          type="radio"
+          id="screen"
+          className=" mr-[5px]"
+          checked={filteringData == 'screen'}
+          onChange={handleFiltering}
+        />
+        <label htmlFor="screen" className="mr-[10px]">
+          날짜별 스크린 수
+        </label>
+        <input
+          type="radio"
+          id="showtime"
+          className=" mr-[5px]"
+          checked={filteringData == 'showtime'}
+          onChange={handleFiltering}
+        />
+        <label htmlFor="showtime" className="mr-[10px]">
+          날짜별 상영횟수
+        </label>
+        <input
+          type="radio"
+          id="audience"
+          className=" mr-[5px]"
+          checked={filteringData == 'audience'}
+          onChange={handleFiltering}
+        />
+        <label htmlFor="audience" className="mr-[10px]">
+          날짜별 관객수
+        </label>
+        <input
+          type="radio"
+          id="revenue"
+          className=" mr-[5px]"
+          checked={filteringData == 'revenue'}
+          onChange={handleFiltering}
+        />
+        <label htmlFor="revenue" className="mr-[10px]">
+          날짜별 매출액
+        </label>
+        <input
+          type="radio"
+          id="rank"
+          className=" mr-[5px]"
+          checked={filteringData == 'rank'}
+          onChange={handleFiltering}
+        />
+        <label htmlFor="rank" className="mr-[10px]">
+          날짜별 순위
+        </label>
+      </section>
+
+      <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
+        <div className="w-full max-w-4xl h-[400px]">
+          <Line ref={chartRef} data={data} options={options} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MovieChart;
diff --git a/src/components/product/detail/content/MovieContent.tsx b/src/components/product/detail/content/MovieContent.tsx
new file mode 100644
index 0000000..4c1ed3c
--- /dev/null
+++ b/src/components/product/detail/content/MovieContent.tsx
@@ -0,0 +1,38 @@
+import { IMovieSchedules } from '@/types/ContentProductType';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import Image from 'next/image';
+import { usePathname } from 'next/navigation';
+const MovieContent = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop(); // 경로의 마지막 부분 추출
+  console.log(lastSegment);
+
+  const fetchData = async () => {
+    const response = await axios.get<IMovieSchedules>(
+      `https://api.moaguide.com/detail/contents/sub/${lastSegment}`
+    );
+    return response.data;
+  };
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['MovieStats'],
+    queryFn: fetchData
+  });
+
+  console.log(data);
+  return (
+    <div>
+      <Image
+        src={
+          'https://www.kobis.or.kr/common/mast/movie/2021/07/thumb_x192/thn_f152cfaea6bb460f80e227fb8e82bfb2.jpg'
+        }
+        width={192}
+        height={192}
+        alt="movie"
+      />
+    </div>
+  );
+};
+
+export default MovieContent;
diff --git a/src/components/product/detail/content/MovieStats.tsx b/src/components/product/detail/content/MovieStats.tsx
new file mode 100644
index 0000000..0384da9
--- /dev/null
+++ b/src/components/product/detail/content/MovieStats.tsx
@@ -0,0 +1,64 @@
+import { IContentMovieStats } from '@/types/ContentProductType';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { usePathname } from 'next/navigation';
+
+const MovieStats = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop(); // 경로의 마지막 부분 추출
+  console.log(lastSegment);
+
+  const fetchData = async () => {
+    const response = await axios.get<IContentMovieStats>(
+      `https://api.moaguide.com/detail/contents/sub/${lastSegment}`
+    );
+    return response.data;
+  };
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['MovieStats'],
+    queryFn: fetchData
+  });
+
+  return (
+    <div>
+      {data?.stats[0].region}
+      <div className="text-gray-400 mb-[10px]"> 주요 업무 지구</div>
+
+      <div className="bg-gray-50 rounded-xl flex flex-col  desk:pl-[10px] md:pl-[0px] ">
+        <div className="grid grid-cols-4 gap-x-4 mb-[40px] mt-[20px] text-center">
+          <div className="text-gray-500 text-left"></div>
+          <div className="text-gray-500">스크린수</div>
+          <div className="text-gray-500">누적 매출액(점유율)</div>
+          <div className="text-gray-500">누적관괙수(점유율)</div>
+        </div>
+
+        <div className="grid grid-cols-4 gap-x-4 mb-[40px]">
+          <div className="text-base flex justify-center">서울시</div>
+          <div className="text-blue-500 text-center"> {data?.stats[0].screenCount}</div>
+          <div className="text-blue-500 text-center">
+            {data?.stats[0].totalRevenue.toLocaleString()}({data?.stats[0].revenueShare}%)
+          </div>
+          <div className="text-blue-500 text-center">
+            {data?.stats[0].totalAudience.toLocaleString()}({data?.stats[0].audienceShare}
+            %)
+          </div>
+        </div>
+
+        <div className="grid grid-cols-4 gap-x-4 mb-[40px]">
+          <div className="text-base flex justify-center">전국</div>
+          <div className="text-blue-500 text-center"> {data?.stats[1].screenCount}</div>
+          <div className="text-blue-500 text-center">
+            {data?.stats[1].totalRevenue.toLocaleString()}({data?.stats[0].revenueShare}%)
+          </div>
+          <div className="text-blue-500 text-center">
+            {data?.stats[1].totalAudience.toLocaleString()}({data?.stats[0].audienceShare}
+            %)
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MovieStats;
diff --git a/src/components/product/detail/content/MovieTenChart.tsx b/src/components/product/detail/content/MovieTenChart.tsx
new file mode 100644
index 0000000..e37b1e6
--- /dev/null
+++ b/src/components/product/detail/content/MovieTenChart.tsx
@@ -0,0 +1,201 @@
+import { IContentMovieCharts } from '@/types/ContentProductType';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { usePathname } from 'next/navigation';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartOptions
+} from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { useRef, useState } from 'react';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels
+);
+
+const MovieTenChart = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop();
+  console.log(lastSegment);
+  const [filteringData, setFilteringData] = useState('tenscreen');
+
+  const handleFiltering = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setFilteringData(e.target.id);
+  };
+
+  const fetchData = async () => {
+    const response = await axios.get<IContentMovieCharts>(
+      `https://api.moaguide.com/detail/contents/${filteringData}/ten/${lastSegment}`
+    );
+    return response.data;
+  };
+
+  const {
+    data: MovieData,
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: ['MovieTenChart', filteringData],
+    queryFn: fetchData
+  });
+
+  const chartRef = useRef(null);
+
+  const Movieday = MovieData?.map((item) => item.day) || [];
+
+  const Moviecount = MovieData?.map((item) => item.count) || [];
+  const sortedMoviecount = [...Moviecount].sort((a, b) => b - a);
+  const maxMoviecount = sortedMoviecount[0] || 0;
+  const averageMoviecount =
+    Moviecount.reduce((acc, val) => acc + val, 0) / Moviecount.length || 0;
+  const newVariable = Math.floor(maxMoviecount + averageMoviecount);
+
+  const dataSets = {
+    labels: Movieday,
+    data: Moviecount
+  };
+
+  const data = {
+    labels: dataSets.labels,
+    datasets: [
+      {
+        label: '주가',
+        data: dataSets.data,
+        borderColor: '#8a4af3',
+        backgroundColor: '#8a4af3',
+        pointBackgroundColor: '#8a4af3',
+        pointBorderColor: '#8a4af3',
+        pointRadius: 5,
+        pointHoverRadius: 7,
+        fill: false,
+        datalabels: {
+          display: false // 선 차트에는 숫자 표시 비활성화
+        }
+      }
+    ]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 2,
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true,
+        intersect: false
+      }
+    },
+    scales: {
+      x: {
+        display: true,
+        grid: {
+          display: false
+        },
+        ticks: {
+          maxRotation: 45,
+          minRotation: 45
+        },
+        offset: true // x축의 첫 번째 데이터 포인트를 약간 오른쪽으로 이동
+      },
+      y: {
+        display: true,
+        beginAtZero: true,
+        max: newVariable,
+        grid: {
+          display: false
+        }
+      }
+    },
+    elements: {
+      line: {
+        tension: 0
+      },
+      point: {
+        pointStyle: 'circle'
+      }
+    }
+  };
+
+  return (
+    <div>
+      <section>
+        <input
+          type="radio"
+          id="tenscreen"
+          className=" mr-[5px]"
+          checked={filteringData == 'tenscreen'}
+          onChange={handleFiltering}
+        />
+        <label htmlFor="tenscreen" className="mr-[10px]">
+          개봉10일 스크린 수
+        </label>
+        <input
+          type="radio"
+          id="tenshowtime"
+          className=" mr-[5px]"
+          checked={filteringData == 'tenshowtime'}
+          onChange={handleFiltering}
+        />
+        <label htmlFor="tenshowtime" className="mr-[10px]">
+          개봉10일 상영횟수
+        </label>
+        <input
+          type="radio"
+          id="tenaudience"
+          className=" mr-[5px]"
+          checked={filteringData == 'tenaudience'}
+          onChange={handleFiltering}
+        />
+        <label htmlFor="tenaudience" className="mr-[10px]">
+          개봉10일 관객수
+        </label>
+        <input
+          type="radio"
+          id="tenrevenue"
+          className=" mr-[5px]"
+          checked={filteringData == 'tenrevenue'}
+          onChange={handleFiltering}
+        />
+        <label htmlFor="tenrevenue" className="mr-[10px]">
+          개봉10일 매출액
+        </label>
+        <input
+          type="radio"
+          id="tenrank"
+          className=" mr-[5px]"
+          checked={filteringData == 'tenrank'}
+          onChange={handleFiltering}
+        />
+        <label htmlFor="tenrank" className="mr-[10px]">
+          개봉10일 순위
+        </label>
+      </section>
+
+      <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
+        <div className="w-full max-w-4xl h-[400px]">
+          <Line ref={chartRef} data={data} options={options} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MovieTenChart;
diff --git a/src/components/product/detail/content/Schedule.tsx b/src/components/product/detail/content/Schedule.tsx
new file mode 100644
index 0000000..f2beca0
--- /dev/null
+++ b/src/components/product/detail/content/Schedule.tsx
@@ -0,0 +1,39 @@
+const Schedule = () => {
+  const releaseDate = new Date('2024-09-24'); // 예제 날짜 변경
+  const dates = [];
+  const daysOfWeek = ['일', '월', '화', '수', '목', '금', '토']; // 요일 배열
+
+  for (let i = -6; i <= 6; i++) {
+    const newDate = new Date(releaseDate);
+    newDate.setDate(newDate.getDate() + i);
+    dates.push({
+      date: newDate,
+      dayOfWeek: daysOfWeek[newDate.getDay()] // 요일 계산
+    });
+  }
+
+  return (
+    <div className="flex flex-col items-center mt-10">
+      <div className="text-lg font-bold mb-4">
+        {releaseDate.getFullYear()}년 {releaseDate.getMonth() + 1}월
+      </div>
+      <div className="flex flex-row gap-2">
+        {dates.map((item, index) => (
+          <div
+            key={index}
+            className={`w-14 h-14 flex flex-col items-center justify-center border p-2 ${
+              item.date.toISOString().split('T')[0] ===
+              releaseDate.toISOString().split('T')[0]
+                ? 'bg-red-500 text-white'
+                : 'bg-gray-200'
+            }`}>
+            <div>{item.dayOfWeek}</div>
+            <div>{item.date.getDate()}</div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Schedule;
diff --git a/src/components/product/detail/music/MusicProductDetail.tsx b/src/components/product/detail/music/MusicProductDetail.tsx
new file mode 100644
index 0000000..e272aff
--- /dev/null
+++ b/src/components/product/detail/music/MusicProductDetail.tsx
@@ -0,0 +1,28 @@
+import YoutubeSearchChart from './chart/YoutubeSearchChart';
+import YoutubeViewChart from './chart/YoutubeViewChart';
+import MusicSchedule from './MusicSchedule';
+import MusicYoutube from './MusicYoutube';
+
+const MusicProductDetail = () => {
+  return (
+    <div className="max-w-[1000px]   mx-auto mt-[32px]">
+      <div className="mb-[100px]">
+        <MusicYoutube />
+      </div>
+      <div className="h-[50px]"></div>
+      <div className="mt-[10px] text-2xl font-bold mb-[10px]">유튜브 조회수</div>
+      <YoutubeViewChart />
+
+      <div className="mt-[10px] text-2xl font-bold mb-[10px]">검색량</div>
+      <YoutubeSearchChart />
+
+      <div>일간/월간 스트리밍 수</div>
+
+      <div className="mt-[10px] text-2xl font-bold mb-[10px]">공연일정</div>
+
+      <MusicSchedule />
+    </div>
+  );
+};
+
+export default MusicProductDetail;
diff --git a/src/components/product/detail/music/MusicProfit.tsx b/src/components/product/detail/music/MusicProfit.tsx
new file mode 100644
index 0000000..b69fe6c
--- /dev/null
+++ b/src/components/product/detail/music/MusicProfit.tsx
@@ -0,0 +1,224 @@
+import CopyRightFeeChart from '../building/chart/CopyrightFeeChart';
+import StockPriceChart from '../building/chart/StockPriceChart';
+import { getMusicProductProfitDetail } from '@/factory/ProductProfitDetail/MusiProductProfitDetail';
+import MusicCopyRightFeeChart from './chart/MusicCopyrightFee';
+import MusicStockPriceChart from './chart/MusicStockPriceChart';
+
+const MusicProfit = ({ url }: { url: string }) => {
+  const CategoryGauge = ({
+    categories
+  }: {
+    categories: Array<{ label: string; value: number; color: string }>;
+  }) => {
+    const totalValue = categories.reduce((acc, item) => acc + item.value, 0);
+    const segments = categories.map((item) => ({
+      ...item,
+      width: (item.value / totalValue) * 100
+    }));
+
+    const getColorClass = (color: string) => {
+      switch (color) {
+        case 'red':
+          return 'bg-red-500';
+        case 'blue':
+          return 'bg-blue-500';
+        case 'green':
+          return 'bg-green-500';
+        case 'orange':
+          return 'bg-orange-500';
+        case 'purple':
+          return 'bg-purple-500';
+        default:
+          return '';
+      }
+    };
+
+    return (
+      <div className="w-full flex flex-col mb-4">
+        <div className="w-full h-6 flex  bg-gray-300">
+          {segments.map((segment, index) => (
+            <div
+              key={index}
+              className={`h-full ${getColorClass(segment.color)}`}
+              style={{
+                width: `${segment.width}%`
+              }}
+            />
+          ))}
+        </div>
+        <div className="flex justify-between text-xs mt-1">
+          {segments.map((segment, index) => (
+            <span
+              key={index}
+              className="text-sm mr-[3px]"
+              style={{ color: segment.color }}>
+              {segment.label}: {segment.value}
+            </span>
+          ))}
+        </div>
+      </div>
+    );
+  };
+
+  const { data, isLoading } = getMusicProductProfitDetail(url);
+  console.log(data);
+
+  const categories = [
+    { label: '방송', value: data?.musicDivide.divideDto.broadcasting ?? 0, color: 'red' },
+    { label: '전송', value: data?.musicDivide.divideDto.transfer ?? 0, color: 'blue' },
+    {
+      label: '복제',
+      value: data?.musicDivide.divideDto.replication ?? 0,
+      color: 'green'
+    },
+    {
+      label: '공연',
+      value: data?.musicDivide.divideDto.performance ?? 0,
+      color: 'orange'
+    },
+    { label: '기타', value: data?.musicDivide.divideDto.etc ?? 0, color: 'purple' }
+  ];
+  return (
+    <div className="max-w-[1000px] mx-auto mt-[32px]">
+      <div className="text-2xl font-bold mb-[20px]">주가</div>
+      <MusicStockPriceChart />
+      <div className=" w-full h-[1px] my-[40px] bg-gray-200" />
+      <div>
+        <div className="text-2xl font-bold  mb-[15px] ">발행 정보</div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px] ">상품명</div>
+            <div className="">{data?.musicPublish.name}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">상품유형</div>
+            <div className="flex-1">{data?.musicPublish.type}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">가수</div>
+            <div className="flex-1">{data?.musicPublish.singer}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">발행수량</div>
+            <div className="flex-1">{data?.musicPublish.piece}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">발행가액</div>
+            <div className="flex-1">{data?.musicPublish.basePrice}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">총 모집액</div>
+            <div className="flex-1">{data?.musicPublish.totalPrice}</div>
+          </div>
+        </div>
+
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  w-[400px]">
+            <div className="text-gray-400  w-[150px]">상장일</div>
+            <div className="">{data?.musicPublish.issuDay}</div>
+          </div>
+        </div>
+      </div>
+      <div className=" w-full h-[1px] my-[40px] bg-gray-200" />
+      <div>
+        <div className="text-2xl font-bold  mb-[15px] ">곡 정보</div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  ">
+            <div className="text-gray-400 flex w-[150px] h-[40px] ">곡소개</div>
+            <div className=" flex-1 ">{data?.musicSong.introduceSong}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  ">
+            <div className="text-gray-400  w-[150px]">장르</div>
+            <div className="flex-1 ">{data?.musicSong.genre}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  ">
+            <div className="text-gray-400  w-[150px]">가수</div>
+            <div className="flex-1 ">{data?.musicSong.singer}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  ">
+            <div className="text-gray-400  w-[150px]">작사</div>
+            <div className="flex-1 ">{data?.musicSong.writer}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  ">
+            <div className="text-gray-400  w-[150px]">작곡</div>
+            <div className="flex-1 ">{data?.musicSong.composing}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  ">
+            <div className="text-gray-400  w-[150px]">공표일자</div>
+            <div className="flex-1 ">{data?.musicSong.announcementDate}</div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div className="text-2xl font-bold  mt-[35px] mb-[15px] ">저작권료 정보</div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex">
+            <div className="text-gray-400  w-[150px] ">최근 1주당 저작권료</div>
+            <div className="flex-1 ">{data?.musicDivide.lastDividend}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex">
+            <div className="text-gray-400  w-[150px]">최근 저작권료 수익률</div>
+            <div className="flex-1 ">{data?.musicDivide.lastDividendRate}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex">
+            <div>
+              <div className="text-gray-400  w-[160px]">1년간 저작권료 수익률</div>
+              <div className="text-gray-400  w-[150px]">저작권료 상세정보</div>
+            </div>
+            <div className="flex-1">
+              <div className="max-w-[250px] ">
+                <CategoryGauge categories={categories} />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  "></div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  ">
+            <div className="text-gray-400  w-[150px]">저작권료 지급일</div>
+            <div className="">{data?.musicDivide.paymentDay}</div>
+          </div>
+        </div>
+        <div className="flex flex-col  mb-[7px]">
+          <div className=" flex  ">
+            <div className="text-gray-400  w-[150px]">저작권료 주기</div>
+            <div className="flex-1">{data?.musicDivide.divideCycle}</div>
+          </div>
+        </div>
+      </div>
+      <div className=" w-full h-[1px] my-[40px] bg-gray-200" />
+      <div className="text-2xl font-bold  mb-[15px]  mt-[30px]  ">
+        지급주기별 저작권료 & 시가저작권료
+      </div>
+      <MusicCopyRightFeeChart />
+    </div>
+  );
+};
+
+export default MusicProfit;
diff --git a/src/components/product/detail/music/MusicSchedule.tsx b/src/components/product/detail/music/MusicSchedule.tsx
new file mode 100644
index 0000000..362552b
--- /dev/null
+++ b/src/components/product/detail/music/MusicSchedule.tsx
@@ -0,0 +1,55 @@
+import { IMusicSchedule } from '@/types/MusicProductType';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { usePathname } from 'next/navigation';
+
+const MusicSchedule = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop();
+  console.log(lastSegment);
+
+  const fetchData = async () => {
+    const response = await axios.get<IMusicSchedule>(
+      `https://api.moaguide.com/detail/music/consert/${lastSegment}`
+    );
+    return response.data;
+  };
+
+  const { data } = useQuery({
+    queryKey: ['MusicSchedule'],
+    queryFn: fetchData
+  });
+
+  return (
+    <div>
+      <div className="w-full">
+        <div className="grid  desk2:grid-cols-2  md:grid-cols-4  gap-x-2 gap-y-2 ">
+          {data &&
+            data?.map((item, index) => (
+              <div
+                key={index}
+                className="flex  border-gray-200 border-2  p-2  rounded-2xl">
+                <div className="flex flex-col flex-1">
+                  <div className="text-base font-bold mt-[20px]">{item.title}</div>
+                  <div className="text-sm mt-[10px]">{item.place}</div>
+                  <div className="text-sm mt-[10px]">{item.period}</div>
+                </div>
+
+                <div className="w-[80px] h-[110px] bg-gray-200 rounded-md">
+                  <img
+                    src={item.imageUrl}
+                    alt="Consert Image"
+                    className="w-full h-full object-fill"
+                  />
+                </div>
+              </div>
+            ))}
+
+          {data?.length === 0 && <div>예정된 공연일정이 없습니다.</div>}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MusicSchedule;
diff --git a/src/components/product/detail/music/MusicYoutube.tsx b/src/components/product/detail/music/MusicYoutube.tsx
new file mode 100644
index 0000000..8ad966c
--- /dev/null
+++ b/src/components/product/detail/music/MusicYoutube.tsx
@@ -0,0 +1,56 @@
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { usePathname } from 'next/navigation';
+import React from 'react';
+import { IMusicYoutube } from '@/types/MusicProductType';
+
+const MusicYoutube = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop();
+  console.log(lastSegment);
+
+  const fetchData = async () => {
+    const response = await axios.get<IMusicYoutube>(
+      `https://api.moaguide.com/detail/music/sub/${lastSegment}`
+    );
+    return response.data;
+  };
+
+  const { data } = useQuery({
+    queryKey: ['YoutubeMusic'],
+    queryFn: fetchData
+  });
+  const videoId = data?.youtubeUrl.split('v=')[1]; // YouTube URL에서 비디오 ID 추출
+
+  const opts = {
+    height: '0',
+    width: '100%',
+    playerVars: {
+      autoplay: 0 // 자동 재생 방지
+    }
+  };
+
+  return (
+    <div className=" flex desk:flex-col   md:flex-row ">
+      <div className="max-w-[400px]  max-h-[200px]  mr-[30px] ">
+        <div className=" flex  ">
+          {/* 클릭 가능한 YouTube 썸네일 */}
+          <a href={data?.youtubeUrl} target="_blank" rel="noopener noreferrer">
+            <img
+              src={`https://img.youtube.com/vi/${videoId}/hqdefault.jpg`}
+              alt="YouTube Thumbnail"
+              className="cursor-pointer rounded-md w-full h-full object-fill"
+            />
+          </a>
+        </div>
+      </div>
+      <div className="mt-[40px]">
+        <div className="text-2xl font-bold  mb-[20px]">대표곡 정보</div>
+
+        <div className="text-2xl ">{data?.youtubeTitle}</div>
+      </div>
+    </div>
+  );
+};
+
+export default MusicYoutube;
diff --git a/src/components/product/detail/music/chart/MusicCopyrightFee.tsx b/src/components/product/detail/music/chart/MusicCopyrightFee.tsx
new file mode 100644
index 0000000..91d461b
--- /dev/null
+++ b/src/components/product/detail/music/chart/MusicCopyrightFee.tsx
@@ -0,0 +1,238 @@
+import React, { useState } from 'react';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { Chart } from 'react-chartjs-2';
+import { usePathname } from 'next/navigation';
+import axios from 'axios';
+import { IMusicCopyRightFeeChart } from '@/types/MusicProductType';
+import { useQuery } from '@tanstack/react-query';
+import Image from 'next/image';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels
+);
+
+const MusicCopyRightFeeChart = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop();
+  console.log(lastSegment);
+  const [filteringData, setFilteringData] = useState('100');
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get<IMusicCopyRightFeeChart>(
+        `https://api.moaguide.com/detail/divide/${lastSegment}?month=${filteringData}`
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error; // 에러를 다시 던져서 useQuery의 onError로 전달
+    }
+  };
+
+  const {
+    data: CopyRightFeeData,
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: ['MusicCopyRightFeeChart', filteringData],
+    queryFn: fetchData
+  });
+
+  const paymentDate =
+    (CopyRightFeeData?.divide &&
+      CopyRightFeeData?.divide.map((item) => item.paymentDate)) ||
+    [];
+
+  const CopyRightFeeDivideCount =
+    (CopyRightFeeData?.divide &&
+      CopyRightFeeData?.divide.map((item) => Number(item.divide))) ||
+    [];
+  const sortedCopyRightFeeDivideCount = [...CopyRightFeeDivideCount].sort(
+    (a, b) => b - a
+  );
+  const maxCopyRightFeeDivideCount = sortedCopyRightFeeDivideCount[0] || 0;
+  const averageCopyRightFeeDivideCount =
+    CopyRightFeeDivideCount.reduce((acc, val) => acc + val, 0) /
+      CopyRightFeeDivideCount.length || 0;
+
+  const BarnewVariable =
+    Math.floor(maxCopyRightFeeDivideCount + averageCopyRightFeeDivideCount) * 1.5;
+
+  //////
+
+  const CopyRightFeeDivideRateCount =
+    (CopyRightFeeData?.divide &&
+      CopyRightFeeData?.divide.map((item) => Number(item.divide))) ||
+    [];
+  const sortedCopyRightFeeDivideRateCount = [...CopyRightFeeDivideRateCount].sort(
+    (a, b) => b - a
+  );
+  const maxCopyRightFeeDivideRateCount = sortedCopyRightFeeDivideRateCount[0] || 0;
+  const averageCopyRightFeeDivideRateCount =
+    CopyRightFeeDivideRateCount.reduce((acc, val) => acc + val, 0) /
+      CopyRightFeeDivideRateCount.length || 0;
+
+  const LinenewVariable = Math.floor(
+    maxCopyRightFeeDivideRateCount + averageCopyRightFeeDivideRateCount
+  );
+
+  const data = {
+    labels: paymentDate,
+    datasets: [
+      {
+        type: 'bar' as const,
+        label: '저작권료',
+        data: CopyRightFeeDivideCount,
+        backgroundColor: (context: any) => {
+          const chart = context.chart;
+          const { ctx, chartArea } = chart;
+
+          if (!chartArea) {
+            return null;
+          }
+
+          const gradient = ctx.createLinearGradient(
+            0,
+            chartArea.bottom,
+            0,
+            chartArea.top
+          );
+          gradient.addColorStop(0, 'rgba(140, 192, 250, 0.8)');
+          gradient.addColorStop(1, '#2575d1');
+
+          return gradient;
+        },
+        yAxisID: 'y1',
+        borderRadius: 5,
+        barThickness: 20,
+        barPercentage: 0.5,
+        categoryPercentage: 0.5,
+
+        datalabels: {
+          align: 'end' as const,
+          anchor: 'end' as const,
+          color: '#000',
+          formatter: (value: number) => `${value}원`
+        }
+      },
+      {
+        type: 'line' as const,
+        label: '시가저작권료',
+        data: CopyRightFeeDivideRateCount,
+        borderColor: '#0000FF',
+        backgroundColor: '#0000FF',
+        pointBackgroundColor: '#0000FF',
+        pointBorderColor: '#0000FF',
+        fill: false,
+        tension: 0.4,
+        yAxisID: 'y2',
+        pointStyle: 'circle',
+        pointRadius: 6,
+        datalabels: {
+          display: false
+        }
+      }
+    ]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 2,
+    scales: {
+      x: {
+        display: true,
+        grid: {
+          display: false
+        }
+      },
+      y1: {
+        type: 'linear' as const,
+        position: 'left' as const,
+        grid: {
+          display: false
+        },
+        beginAtZero: true,
+        max: BarnewVariable,
+        ticks: {
+          stepSize: 10
+        }
+      },
+      y2: {
+        type: 'linear' as const,
+        position: 'right' as const,
+        grid: {
+          display: false
+        },
+        max: LinenewVariable,
+        beginAtZero: true
+      }
+    },
+    plugins: {
+      legend: {
+        display: false,
+        position: 'top' as const
+      },
+      tooltip: {
+        enabled: true
+      },
+      datalabels: {
+        display: true
+      }
+    }
+  };
+
+  return (
+    <div>
+      <div className=" flex justify-end">
+        <button
+          className={`w-[55px] mr-2 p-2  rounded-lg ${filteringData === '3' ? 'bg-purple-500 text-white' : 'bg-gray-300  '}`}
+          onClick={() => setFilteringData('3')}>
+          3개월
+        </button>
+        <button
+          className={`w-[55px] mr-2 p-2 rounded-lg ${filteringData === '6' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('6')}>
+          6개월
+        </button>
+        <button
+          className={`w-[55px] mr-2  p-2 rounded-lg ${filteringData === '12' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('12')}>
+          1년
+        </button>
+        <button
+          className={`w-[55px] p-2 rounded-lg ${filteringData === '100' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('100')}>
+          전체
+        </button>
+      </div>
+
+      <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
+        <div className="w-full max-w-5xl h-[500px]">
+          <Chart type="bar" data={data} options={options} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MusicCopyRightFeeChart;
diff --git a/src/components/product/detail/music/chart/MusicStockPriceChart.tsx b/src/components/product/detail/music/chart/MusicStockPriceChart.tsx
new file mode 100644
index 0000000..fa10e03
--- /dev/null
+++ b/src/components/product/detail/music/chart/MusicStockPriceChart.tsx
@@ -0,0 +1,169 @@
+import React, { useRef, useState } from 'react';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+} from 'chart.js';
+import axios from 'axios';
+import { useQuery } from '@tanstack/react-query';
+import { usePathname } from 'next/navigation';
+import { IMusicStockPriceChart } from '@/types/MusicProductType';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend
+);
+
+const MusicStockPriceChart = () => {
+  const chartRef = useRef(null);
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop();
+  console.log(lastSegment);
+  const [filteringData, setFilteringData] = useState('100');
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get<IMusicStockPriceChart>(
+        `https://api.moaguide.com/detail/transaction/${lastSegment}?month=${filteringData}`
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error; // 에러를 다시 던져서 useQuery의 onError로 전달
+    }
+  };
+
+  const {
+    data: StockPriceData,
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: ['MusicStockPriceChart', filteringData],
+    queryFn: fetchData
+  });
+
+  const StockPriceDate =
+    (StockPriceData?.transaction &&
+      StockPriceData?.transaction.map((item) => item.date)) ||
+    [];
+
+  const StockPriceCount =
+    (StockPriceData?.transaction &&
+      StockPriceData?.transaction.map((item) => Number(item.price))) ||
+    [];
+  const sortedStockPriceCount = [...StockPriceCount].sort((a, b) => b - a);
+  const maxStockPriceCount = sortedStockPriceCount[0] || 0;
+  const averageStockPriceCount =
+    StockPriceCount.reduce((acc, val) => acc + val, 0) / StockPriceCount.length || 0;
+
+  const newVariable = Math.floor(maxStockPriceCount + averageStockPriceCount);
+
+  const data = {
+    labels: StockPriceDate,
+    datasets: [
+      {
+        label: '주가',
+        data: StockPriceCount,
+        borderColor: '#8a4af3',
+        backgroundColor: '#8a4af3',
+        pointBackgroundColor: '#8a4af3',
+        pointBorderColor: '#8a4af3',
+        pointRadius: 0,
+        pointHoverRadius: 7,
+        fill: false,
+        datalabels: {
+          display: false // 선 차트에는 숫자 표시 비활성화
+        }
+      }
+    ]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 2,
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true,
+        intersect: false
+      }
+    },
+    scales: {
+      x: {
+        display: true,
+        grid: {
+          display: false
+        },
+        ticks: {
+          maxRotation: 45,
+          minRotation: 45
+        },
+        offset: true // x축의 첫 번째 데이터 포인트를 약간 오른쪽으로 이동
+      },
+      y: {
+        display: true,
+        beginAtZero: true,
+        max: newVariable,
+        grid: {
+          display: false
+        }
+      }
+    },
+    elements: {
+      line: {
+        tension: 0
+      },
+      point: {
+        pointStyle: 'circle'
+      }
+    }
+  };
+
+  return (
+    <>
+      <div className="mb-4  flex justify-end">
+        <button
+          className={`w-[55px] mr-2 p-2  rounded-lg ${filteringData === '3' ? 'bg-purple-500 text-white' : 'bg-gray-300  '}`}
+          onClick={() => setFilteringData('3')}>
+          3개월
+        </button>
+        <button
+          className={`w-[55px] mr-2 p-2 rounded-lg ${filteringData === '6' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('6')}>
+          6개월
+        </button>
+        <button
+          className={`w-[55px] mr-2 p-2 rounded-lg ${filteringData === '12' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('12')}>
+          1년
+        </button>
+        <button
+          className={`w-[55px] p-2 rounded-lg ${filteringData === '100' ? 'bg-purple-500 text-white' : 'bg-gray-300 '}`}
+          onClick={() => setFilteringData('100')}>
+          전체
+        </button>
+      </div>
+      <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
+        <div className="w-full max-w-4xl h-[400px]">
+          <Line ref={chartRef} data={data} options={options} />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default MusicStockPriceChart;
diff --git a/src/components/product/detail/music/chart/YoutubeSearchChart.tsx b/src/components/product/detail/music/chart/YoutubeSearchChart.tsx
new file mode 100644
index 0000000..7c322b4
--- /dev/null
+++ b/src/components/product/detail/music/chart/YoutubeSearchChart.tsx
@@ -0,0 +1,238 @@
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { usePathname } from 'next/navigation';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartOptions
+} from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { useRef, useState } from 'react';
+import {
+  IContentYoutubeSearchCharts,
+  IContentYoutubeViewCharts
+} from '@/types/MusicProductType';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels
+);
+
+const YoutubeSearchChart = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop();
+  console.log(lastSegment);
+  const [filteringData, setFilteringData] = useState('all');
+
+  const handleFiltering = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const idWithoutSuffix = e.target.id.replace('-youtubeserach', '');
+    setFilteringData(idWithoutSuffix);
+  };
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get<IContentYoutubeSearchCharts>(
+        `https://api.moaguide.com/detail/music/search/${lastSegment}?date=${filteringData}`
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error; // 에러를 다시 던져서 useQuery의 onError로 전달
+    }
+  };
+
+  const {
+    data: YoutubeData,
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: ['YoutubeViewChart', filteringData],
+    queryFn: fetchData
+  });
+  const chartRef = useRef(null);
+
+  const YoutubeSearchDay = (YoutubeData && YoutubeData?.map((item) => item.date)) || [];
+
+  const YoutubeSearchCount =
+    (YoutubeData && YoutubeData?.map((item) => Number(item.value))) || [];
+  const sortedYoutubeSearchCount = [...YoutubeSearchCount].sort((a, b) => b - a);
+  const maxYoutubeSearchCount = sortedYoutubeSearchCount[0] || 0;
+  const averageYoutubeSearchCount =
+    YoutubeSearchCount.reduce((acc, val) => acc + val, 0) / YoutubeSearchCount.length ||
+    0;
+  const newVariable = Math.floor(maxYoutubeSearchCount + averageYoutubeSearchCount);
+
+  const dataSets = {
+    labels: YoutubeSearchDay,
+    data: YoutubeSearchCount
+  };
+
+  const data = {
+    labels: dataSets.labels,
+    datasets: [
+      {
+        label: '검색량',
+        data: dataSets.data,
+        borderColor: '#4fff6f',
+        backgroundColor: '#4fff6f',
+        pointBackgroundColor: '#4fff6f',
+        pointBorderColor: '#4fff6f',
+        pointRadius: 0,
+        pointHoverRadius: 0,
+        fill: false,
+        datalabels: {
+          display: false // 선 차트에는 숫자 표시 비활성화
+        }
+      }
+    ]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 2,
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true,
+        intersect: false
+      }
+    },
+    scales: {
+      x: {
+        display: true,
+        grid: {
+          display: false
+        },
+        ticks: {
+          maxRotation: 45,
+          minRotation: 45
+        },
+        offset: true
+      },
+      y: {
+        display: true,
+        beginAtZero: true,
+        max: newVariable,
+        grid: {
+          display: false
+        }
+      }
+    },
+    elements: {
+      line: {
+        tension: 0
+      },
+      point: {
+        pointStyle: undefined,
+        radius: 0
+      }
+    }
+  };
+
+  return (
+    <div>
+      <section className=" mb-[30px]">
+        <input
+          type="radio"
+          id="1w-youtubeserach"
+          className=" mr-[5px] hidden "
+          checked={filteringData + '-youtubeserach' == '1w-youtubeserach'}
+          onChange={handleFiltering}
+        />
+        <label
+          htmlFor="1w-youtubeserach"
+          className={`cursor-pointer  mr-[10px] px-4 py-2 border rounded-lg ${
+            filteringData === '1w' ? 'bg-purple-500 text-white' : 'bg-white text-gray-700'
+          }`}>
+          1주일
+        </label>
+        <input
+          type="radio"
+          id="6m-youtubeserach"
+          className=" mr-[5px] hidden"
+          checked={filteringData + '-youtubeserach' == '6m-youtubeserach'}
+          onChange={handleFiltering}
+        />
+        <label
+          htmlFor="6m-youtubeserach"
+          className={`cursor-pointer  mr-[10px] px-4 py-2 border rounded-lg ${
+            filteringData === '6m' ? 'bg-purple-500 text-white' : 'bg-white text-gray-700'
+          }`}>
+          6개월
+        </label>
+        <input
+          type="radio"
+          id="12m-youtubeserach"
+          className=" mr-[5px] hidden"
+          checked={filteringData + '-youtubeserach' == '12m-youtubeserach'}
+          onChange={handleFiltering}
+        />
+        <label
+          htmlFor="12m-youtubeserach"
+          className={`cursor-pointer  mr-[10px] px-4 py-2 border rounded-lg ${
+            filteringData === '12m'
+              ? 'bg-purple-500 text-white'
+              : 'bg-white text-gray-700'
+          }`}>
+          1년
+        </label>
+        <input
+          type="radio"
+          id="36m-youtubeserach"
+          className=" mr-[5px] hidden"
+          checked={filteringData + '-youtubeserach' == '36m-youtubeserach'}
+          onChange={handleFiltering}
+        />
+        <label
+          htmlFor="36m-youtubeserach"
+          className={`cursor-pointer  mr-[10px] px-4 py-2 border rounded-lg ${
+            filteringData === '36m'
+              ? 'bg-purple-500 text-white'
+              : 'bg-white text-gray-700'
+          }`}>
+          3년
+        </label>
+        <input
+          type="radio"
+          id="all-youtubeserach"
+          className=" mr-[5px] hidden"
+          checked={filteringData + '-youtubeserach' == 'all-youtubeserach'}
+          onChange={handleFiltering}
+        />
+        <label
+          htmlFor="all-youtubeserach"
+          className={`cursor-pointer  mr-[10px] px-4 py-2 border rounded-lg ${
+            filteringData === 'all'
+              ? 'bg-purple-500 text-white'
+              : 'bg-white text-gray-700'
+          }`}>
+          전체
+        </label>
+      </section>
+
+      <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
+        <div className="w-full max-w-4xl h-[400px]">
+          <Line ref={chartRef} data={data} options={options} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default YoutubeSearchChart;
diff --git a/src/components/product/detail/music/chart/YoutubeViewChart.tsx b/src/components/product/detail/music/chart/YoutubeViewChart.tsx
new file mode 100644
index 0000000..d5d2ae3
--- /dev/null
+++ b/src/components/product/detail/music/chart/YoutubeViewChart.tsx
@@ -0,0 +1,235 @@
+import { IContentMovieCharts } from '@/types/ContentProductType';
+import { useQuery } from '@tanstack/react-query';
+import axios from 'axios';
+import { usePathname } from 'next/navigation';
+import { Line } from 'react-chartjs-2';
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartOptions
+} from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+import { useRef, useState } from 'react';
+import { IContentYoutubeViewCharts } from '@/types/MusicProductType';
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+  ChartDataLabels
+);
+
+const YoutubeViewChart = () => {
+  const pathname = usePathname();
+  const lastSegment = pathname.split('/').pop();
+  console.log(lastSegment);
+  const [filteringData, setFilteringData] = useState('all');
+
+  const handleFiltering = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const idWithoutSuffix = e.target.id.replace('-youtube', '');
+    setFilteringData(idWithoutSuffix);
+  };
+
+  const fetchData = async () => {
+    try {
+      const response = await axios.get<IContentYoutubeViewCharts>(
+        `https://api.moaguide.com/detail/music/view/${lastSegment}?date=${filteringData}`
+      );
+      return response.data;
+    } catch (error) {
+      console.error('Error fetching data:', error);
+      throw error; // 에러를 다시 던져서 useQuery의 onError로 전달
+    }
+  };
+
+  const {
+    data: YoutubeData,
+    isLoading,
+    error
+  } = useQuery({
+    queryKey: ['YoutubeViewChart', filteringData],
+    queryFn: fetchData
+  });
+  const chartRef = useRef(null);
+
+  const YoutubeDay = (YoutubeData && YoutubeData?.map((item) => item.viewCount)) || [];
+
+  const YoutubeCount =
+    (YoutubeData && YoutubeData?.map((item) => Number(item.viewDate))) || [];
+  const sortedYoutubeCount = [...YoutubeCount].sort((a, b) => b - a);
+  const maxYoutubeCount = sortedYoutubeCount[0] || 0;
+  const averageYoutubeCount =
+    YoutubeCount.reduce((acc, val) => acc + val, 0) / YoutubeCount.length || 0;
+  const newVariable = Math.floor(maxYoutubeCount + averageYoutubeCount);
+
+  const dataSets = {
+    labels: YoutubeDay,
+    data: YoutubeCount
+  };
+
+  const data = {
+    labels: dataSets.labels,
+    datasets: [
+      {
+        label: '조회수',
+        data: dataSets.data,
+        borderColor: '#8a4af3',
+        backgroundColor: '#8a4af3',
+        pointBackgroundColor: '#8a4af3',
+        pointBorderColor: '#8a4af3',
+        pointRadius: 5,
+        pointHoverRadius: 7,
+        fill: false,
+        datalabels: {
+          display: false // 선 차트에는 숫자 표시 비활성화
+        }
+      }
+    ]
+  };
+
+  const options = {
+    responsive: true,
+    maintainAspectRatio: false,
+    aspectRatio: 2,
+    plugins: {
+      legend: {
+        display: false
+      },
+      tooltip: {
+        enabled: true,
+        intersect: false
+      }
+    },
+    scales: {
+      x: {
+        display: true,
+        grid: {
+          display: false
+        },
+        ticks: {
+          maxRotation: 45,
+          minRotation: 45
+        },
+        offset: true
+      },
+      y: {
+        display: true,
+        beginAtZero: true,
+        max: newVariable,
+        grid: {
+          display: false
+        }
+      }
+    },
+    elements: {
+      line: {
+        tension: 0
+      },
+      point: {
+        pointStyle: 'circle'
+      }
+    }
+  };
+
+  return (
+    <div>
+      <div className="text-base text-gray-500 mb-[10px]">매월 1일 누적 조회수 차트</div>
+      <section className=" mb-[30px]">
+        <input
+          type="radio"
+          id="1w-youtube"
+          className=" mr-[5px] hidden "
+          checked={filteringData + '-youtube' == '1w-youtube'}
+          onChange={handleFiltering}
+        />
+        <label
+          htmlFor="1w-youtube"
+          className={`cursor-pointer  mr-[10px] px-4 py-2 border rounded-lg ${
+            filteringData === '1w' ? 'bg-purple-500 text-white' : 'bg-white text-gray-700'
+          }`}>
+          1주일
+        </label>
+        <input
+          type="radio"
+          id="6m-youtube"
+          className=" mr-[5px] hidden"
+          checked={filteringData + '-youtube' == '6m-youtube'}
+          onChange={handleFiltering}
+        />
+        <label
+          htmlFor="6m-youtube"
+          className={`cursor-pointer  mr-[10px] px-4 py-2 border rounded-lg ${
+            filteringData === '6m' ? 'bg-purple-500 text-white' : 'bg-white text-gray-700'
+          }`}>
+          6개월
+        </label>
+        <input
+          type="radio"
+          id="12m-youtube"
+          className=" mr-[5px] hidden"
+          checked={filteringData + '-youtube' == '12m-youtube'}
+          onChange={handleFiltering}
+        />
+        <label
+          htmlFor="12m-youtube"
+          className={`cursor-pointer  mr-[10px] px-4 py-2 border rounded-lg ${
+            filteringData === '12m'
+              ? 'bg-purple-500 text-white'
+              : 'bg-white text-gray-700'
+          }`}>
+          1년
+        </label>
+        <input
+          type="radio"
+          id="36m-youtube"
+          className=" mr-[5px] hidden"
+          checked={filteringData + '-youtube' == '36m-youtube'}
+          onChange={handleFiltering}
+        />
+        <label
+          htmlFor="36m-youtube"
+          className={`cursor-pointer  mr-[10px] px-4 py-2 border rounded-lg ${
+            filteringData === '36m'
+              ? 'bg-purple-500 text-white'
+              : 'bg-white text-gray-700'
+          }`}>
+          3년
+        </label>
+        <input
+          type="radio"
+          id="all-youtube"
+          className=" mr-[5px] hidden"
+          checked={filteringData + '-youtube' == 'all-youtube'}
+          onChange={handleFiltering}
+        />
+        <label
+          htmlFor="all-youtube"
+          className={`cursor-pointer  mr-[10px] px-4 py-2 border rounded-lg ${
+            filteringData === 'all'
+              ? 'bg-purple-500 text-white'
+              : 'bg-white text-gray-700'
+          }`}>
+          전체
+        </label>
+      </section>
+
+      <div className="flex flex-col items-center justify-center h-full bg-gray-50 mb-[100px]">
+        <div className="w-full max-w-4xl h-[400px]">
+          <Line ref={chartRef} data={data} options={options} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default YoutubeViewChart;
diff --git a/src/factory/ProductDetail.ts b/src/factory/ProductDetail.ts
deleted file mode 100644
index 7b765d4..0000000
--- a/src/factory/ProductDetail.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { IProductDetail } from '@/types/ProductType';
-import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
-import axios from 'axios';
-
-const fetchProductDetail = async (context: QueryFunctionContext) => {
-  const product_id = context.queryKey[1] as string;
-  const { data } = await axios.get(`https://api.moaguide.com/detail/${product_id}`);
-  return data;
-};
-
-export const getProductDetail = (product_id: string) => {
-  const queryKey = ['ProductDetail', product_id];
-
-  const { data, ...queryProps } = useQuery<IProductDetail>({
-    queryKey,
-    queryFn: fetchProductDetail
-  });
-
-  return {
-    data,
-    ...queryProps
-  };
-};
diff --git a/src/factory/ProductDetail/ArtProductDetail.ts b/src/factory/ProductDetail/ArtProductDetail.ts
new file mode 100644
index 0000000..6b02323
--- /dev/null
+++ b/src/factory/ProductDetail/ArtProductDetail.ts
@@ -0,0 +1,23 @@
+import { IArtProductDetail } from '@/types/ArtProductType';
+import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchArtProductDetail = async (context: QueryFunctionContext) => {
+  const product_id = context.queryKey[1] as string;
+  const { data } = await axios.get(`https://api.moaguide.com/detail/art/${product_id}`);
+  return data;
+};
+
+export const getArtProductDetail = (product_id: string) => {
+  const queryKey = ['ArtProductDetail', product_id];
+
+  const { data, ...queryProps } = useQuery<IArtProductDetail>({
+    queryKey,
+    queryFn: fetchArtProductDetail
+  });
+
+  return {
+    data,
+    ...queryProps
+  };
+};
diff --git a/src/factory/ProductDetail/BuildingProductDetail.ts b/src/factory/ProductDetail/BuildingProductDetail.ts
new file mode 100644
index 0000000..41e92d4
--- /dev/null
+++ b/src/factory/ProductDetail/BuildingProductDetail.ts
@@ -0,0 +1,25 @@
+import { IBuildingProductDetail } from '@/types/BuildingProductType';
+import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchBuildingProductDetail = async (context: QueryFunctionContext) => {
+  const product_id = context.queryKey[1] as string;
+  const { data } = await axios.get(
+    `https://api.moaguide.com/detail/building/${product_id}`
+  );
+  return data;
+};
+
+export const getBuildingProductDetail = (product_id: string) => {
+  const queryKey = ['BuildingProductDetail', product_id];
+
+  const { data, ...queryProps } = useQuery<IBuildingProductDetail>({
+    queryKey,
+    queryFn: fetchBuildingProductDetail
+  });
+
+  return {
+    data,
+    ...queryProps
+  };
+};
diff --git a/src/factory/ProductDetail/ContentProductDetail.ts b/src/factory/ProductDetail/ContentProductDetail.ts
new file mode 100644
index 0000000..13a6bc2
--- /dev/null
+++ b/src/factory/ProductDetail/ContentProductDetail.ts
@@ -0,0 +1,25 @@
+import { IContentProductDetail } from '@/types/ContentProductType';
+import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchContentProductDetail = async (context: QueryFunctionContext) => {
+  const product_id = context.queryKey[1] as string;
+  const { data } = await axios.get(
+    `https://api.moaguide.com/detail/contents/${product_id}`
+  );
+  return data;
+};
+
+export const getContentProductDetail = (product_id: string) => {
+  const queryKey = ['ContentProductDetail', product_id];
+
+  const { data, ...queryProps } = useQuery<IContentProductDetail>({
+    queryKey,
+    queryFn: fetchContentProductDetail
+  });
+
+  return {
+    data,
+    ...queryProps
+  };
+};
diff --git a/src/factory/ProductDetail/CowProductDetail.ts b/src/factory/ProductDetail/CowProductDetail.ts
new file mode 100644
index 0000000..989d8f4
--- /dev/null
+++ b/src/factory/ProductDetail/CowProductDetail.ts
@@ -0,0 +1,25 @@
+import { ICowProductDetail } from '@/types/CowProductType';
+import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchCowProductDetail = async (context: QueryFunctionContext) => {
+  const product_id = context.queryKey[1] as string;
+  const { data } = await axios.get(
+    `https://api.moaguide.com/detail/hanwoo/${product_id}`
+  );
+  return data;
+};
+
+export const getCowProductDetail = (product_id: string) => {
+  const queryKey = ['CowProductDetail', product_id];
+
+  const { data, ...queryProps } = useQuery<ICowProductDetail>({
+    queryKey,
+    queryFn: fetchCowProductDetail
+  });
+
+  return {
+    data,
+    ...queryProps
+  };
+};
diff --git a/src/factory/ProductDetail/MusicProductDetail.ts b/src/factory/ProductDetail/MusicProductDetail.ts
new file mode 100644
index 0000000..3157d8f
--- /dev/null
+++ b/src/factory/ProductDetail/MusicProductDetail.ts
@@ -0,0 +1,26 @@
+import { IBuildingProductDetail } from '@/types/BuildingProductType';
+import { IMusicProductDetail } from '@/types/MusicProductType';
+import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchMusicProductDetail = async (context: QueryFunctionContext) => {
+  const product_id = context.queryKey[1] as string;
+  const { data } = await axios.get(
+    `https://api.moaguide.com/detail/building/${product_id}`
+  );
+  return data;
+};
+
+export const getMusicProductDetail = (product_id: string) => {
+  const queryKey = ['MusicProductDetail', product_id];
+
+  const { data, ...queryProps } = useQuery<IMusicProductDetail>({
+    queryKey,
+    queryFn: fetchMusicProductDetail
+  });
+
+  return {
+    data,
+    ...queryProps
+  };
+};
diff --git a/src/factory/ProductProfitDetail.ts b/src/factory/ProductProfitDetail.ts
deleted file mode 100644
index 49665e0..0000000
--- a/src/factory/ProductProfitDetail.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { IProductProfitDetail } from '@/types/ProductType';
-import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
-import axios from 'axios';
-
-const fetchProductProfitDetail = async (context: QueryFunctionContext) => {
-  const product_id = context.queryKey[1] as string;
-  const { data } = await axios.get(
-    `https://api.moaguide.com/detail/building/base/${product_id}`
-  );
-  return data;
-};
-
-export const getProductProfitDetail = (product_id: string) => {
-  const queryKey = ['ProductProfitDetail', product_id];
-
-  const { data, ...queryProps } = useQuery<IProductProfitDetail>({
-    queryKey,
-    queryFn: fetchProductProfitDetail
-  });
-
-  return {
-    data,
-    ...queryProps
-  };
-};
diff --git a/src/factory/ProductProfitDetail/ArtProductProfitDetail.ts b/src/factory/ProductProfitDetail/ArtProductProfitDetail.ts
new file mode 100644
index 0000000..e9e2c7a
--- /dev/null
+++ b/src/factory/ProductProfitDetail/ArtProductProfitDetail.ts
@@ -0,0 +1,25 @@
+import { IArtProductProfitDetail } from '@/types/ArtProductType';
+import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchArtProductProfitDetail = async (context: QueryFunctionContext) => {
+  const product_id = context.queryKey[1] as string;
+  const { data } = await axios.get(
+    `https://api.moaguide.com/detail/art/base/${product_id}`
+  );
+  return data;
+};
+
+export const getArtProductProfitDetail = (product_id: string) => {
+  const queryKey = ['ArtProductProfitDetail', product_id];
+
+  const { data, ...queryProps } = useQuery<IArtProductProfitDetail>({
+    queryKey,
+    queryFn: fetchArtProductProfitDetail
+  });
+
+  return {
+    data,
+    ...queryProps
+  };
+};
diff --git a/src/factory/ProductProfitDetail/BuildingProductProfitDetail.ts b/src/factory/ProductProfitDetail/BuildingProductProfitDetail.ts
new file mode 100644
index 0000000..bc78952
--- /dev/null
+++ b/src/factory/ProductProfitDetail/BuildingProductProfitDetail.ts
@@ -0,0 +1,25 @@
+import { IBuildingProductProfitDetail } from '@/types/BuildingProductType';
+import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchBuildingProductProfitDetail = async (context: QueryFunctionContext) => {
+  const product_id = context.queryKey[1] as string;
+  const { data } = await axios.get(
+    `https://api.moaguide.com/detail/building/base/${product_id}`
+  );
+  return data;
+};
+
+export const getBuildingProductProfitDetail = (product_id: string) => {
+  const queryKey = ['BuildingProductProfitDetail', product_id];
+
+  const { data, ...queryProps } = useQuery<IBuildingProductProfitDetail>({
+    queryKey,
+    queryFn: fetchBuildingProductProfitDetail
+  });
+
+  return {
+    data,
+    ...queryProps
+  };
+};
diff --git a/src/factory/ProductProfitDetail/ContentProductProfitDetail.ts b/src/factory/ProductProfitDetail/ContentProductProfitDetail.ts
new file mode 100644
index 0000000..b25a653
--- /dev/null
+++ b/src/factory/ProductProfitDetail/ContentProductProfitDetail.ts
@@ -0,0 +1,25 @@
+import { IContentProductProfitDetail } from '@/types/ContentProductType';
+import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchContentProductProfitDetail = async (context: QueryFunctionContext) => {
+  const product_id = context.queryKey[1] as string;
+  const { data } = await axios.get(
+    `https://api.moaguide.com/detail/contents/base/${product_id}`
+  );
+  return data;
+};
+
+export const getContentProductProfitDetail = (product_id: string) => {
+  const queryKey = ['ContentProductProfitDetail', product_id];
+
+  const { data, ...queryProps } = useQuery<IContentProductProfitDetail>({
+    queryKey,
+    queryFn: fetchContentProductProfitDetail
+  });
+
+  return {
+    data,
+    ...queryProps
+  };
+};
diff --git a/src/factory/ProductProfitDetail/CowProductProfitDetail.ts b/src/factory/ProductProfitDetail/CowProductProfitDetail.ts
new file mode 100644
index 0000000..8ef0db0
--- /dev/null
+++ b/src/factory/ProductProfitDetail/CowProductProfitDetail.ts
@@ -0,0 +1,25 @@
+import { ICowProductProfitDetail } from '@/types/CowProductType';
+import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchCowProductProfitDetail = async (context: QueryFunctionContext) => {
+  const product_id = context.queryKey[1] as string;
+  const { data } = await axios.get(
+    `https://api.moaguide.com/detail/hanwoo/base/${product_id}`
+  );
+  return data;
+};
+
+export const getCowProductProfitDetail = (product_id: string) => {
+  const queryKey = ['CowProductProfitDetail', product_id];
+
+  const { data, ...queryProps } = useQuery<ICowProductProfitDetail>({
+    queryKey,
+    queryFn: fetchCowProductProfitDetail
+  });
+
+  return {
+    data,
+    ...queryProps
+  };
+};
diff --git a/src/factory/ProductProfitDetail/MusiProductProfitDetail.ts b/src/factory/ProductProfitDetail/MusiProductProfitDetail.ts
new file mode 100644
index 0000000..edee16e
--- /dev/null
+++ b/src/factory/ProductProfitDetail/MusiProductProfitDetail.ts
@@ -0,0 +1,26 @@
+
+import { IMusicProductProfitDetail } from '@/types/MusicProductType';
+import { useQuery, QueryFunctionContext } from '@tanstack/react-query';
+import axios from 'axios';
+
+const fetchMusicProductProfitDetail = async (context: QueryFunctionContext) => {
+  const product_id = context.queryKey[1] as string;
+  const { data } = await axios.get(
+    `https://api.moaguide.com/detail/music/base/${product_id}`
+  );
+  return data;
+};
+
+export const getMusicProductProfitDetail = (product_id: string) => {
+  const queryKey = ['MusicProductProfitDetail', product_id];
+
+  const { data, ...queryProps } = useQuery<IMusicProductProfitDetail>({
+    queryKey,
+    queryFn: fetchMusicProductProfitDetail
+  });
+
+  return {
+    data,
+    ...queryProps
+  };
+};
diff --git a/src/lib/GoogleAnalytics.tsx b/src/lib/GoogleAnalytics.tsx
new file mode 100644
index 0000000..2075651
--- /dev/null
+++ b/src/lib/GoogleAnalytics.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import Script from 'next/script';
+
+export default function GoogleAnalytics({ gaId }: { gaId: string }) {
+  return (
+    <>
+      <Script
+        async
+        src={`https://www.googletagmanager.com/gtag/js
+				?id=${gaId}`}
+      />
+      <Script
+        id="google-analytics"
+        dangerouslySetInnerHTML={{
+          __html: `
+		window.dataLayer = window.dataLayer || [];
+		function gtag(){dataLayer.push(arguments);}
+		gtag('js', new Date());
+
+		gtag('config', '${gaId}');
+		`
+        }}
+      />
+    </>
+  );
+}
diff --git a/src/static/category.ts b/src/static/category.ts
new file mode 100644
index 0000000..41e7bb2
--- /dev/null
+++ b/src/static/category.ts
@@ -0,0 +1,7 @@
+export const CATEGORY: { [key: string]: string } = {
+  building: '부동산',
+  art: '주식',
+  cow: '펀드',
+  music: 'ETF',
+  content: '기타'
+};
diff --git a/src/types/ArtProductType.ts b/src/types/ArtProductType.ts
new file mode 100644
index 0000000..8bf98f8
--- /dev/null
+++ b/src/types/ArtProductType.ts
@@ -0,0 +1,40 @@
+export interface IArtProductDetail {
+  category: string;
+  platform: string;
+  name: string;
+  authorName: string;
+  recruitmentPrice: number;
+  recruitmentRate: number;
+  totalPrice: number;
+  recruitmentDate: string;
+  minInvestment: number;
+  link: string;
+}
+
+export interface IArtProductProfitDetail {
+  artPublish: {
+    name: string;
+    type: string;
+    authorName: string;
+    piece: number;
+    basePrice: number;
+    totalPrice: string;
+    issuanceDate: string;
+  };
+  artAuthor: {
+    name: string;
+    nationality: string;
+    birth: string;
+    academicAbility: string;
+    awardCareer: string;
+    major: string;
+    introduction: string;
+  };
+  artWork: {
+    name: string;
+    size: string;
+    material: string;
+    productionDate: string;
+    detail: string;
+  };
+}
diff --git a/src/types/ProductType.ts b/src/types/BuildingProductType.ts
similarity index 92%
rename from src/types/ProductType.ts
rename to src/types/BuildingProductType.ts
index f6b0b03..8e8b16f 100644
--- a/src/types/ProductType.ts
+++ b/src/types/BuildingProductType.ts
@@ -22,7 +22,7 @@ export interface IreportItem {
   date: string;
 }
 
-export interface IProductDetail {
+export interface IBuildingProductDetail {
   productId: string;
   name: string;
   category: string;
@@ -31,12 +31,12 @@ export interface IProductDetail {
   priceRate: number;
   totalPrice: string;
   lastDivide: number;
-  lastDivideRate: number;
+  lastDivide_rate: number;
   divideCycle: number;
   link: string;
 }
 
-export interface IProductProfitDetail {
+export interface IBuildingProductProfitDetail {
   product_Id: string;
   publish: {
     name: string;
@@ -115,7 +115,7 @@ export interface IProductProfitDetail {
   }[];
 }
 
-export interface IProductType extends IProductDetail {
+export interface IProductType extends IBuildingProductDetail {
   notices: INoticeItem[];
   news: INewsItem[];
   reports: IreportItem[];
diff --git a/src/types/ContentProductType.ts b/src/types/ContentProductType.ts
new file mode 100644
index 0000000..60ddc39
--- /dev/null
+++ b/src/types/ContentProductType.ts
@@ -0,0 +1,75 @@
+export interface IContentProductDetail {
+  productId: string;
+  name: string;
+  genre: string;
+  category: string;
+  platform: string;
+  totalPrice: number;
+  rate: number;
+  date: string;
+  lowPrice: number;
+  invest: boolean;
+  link: string;
+}
+
+export interface IContentProductProfitDetail {
+  publish: {
+    name: string;
+    genre: string;
+    type: string;
+    minAmount: number;
+    maxAmount: number;
+    piece: number;
+    basePrice: number;
+    minInvestment: number;
+    issuanceDate: string;
+    expirationDate: string;
+  };
+  investment: {
+    totalBudget: number;
+    unitPrice: number | null;
+    profitRatio: number | null;
+    breakEvenPoint: string;
+  };
+}
+
+export interface IContentMovieStats {
+  schedules: {
+    id: number;
+    title: string;
+    genre: string;
+    country: string;
+    director: string;
+    releaseDate: string;
+    imgLink: string;
+  }[];
+  stats: {
+    day: string;
+    region: string;
+    screenCount: number;
+    totalRevenue: number;
+    revenueShare: number;
+    totalAudience: number;
+    audienceShare: number;
+    releaseDate: string;
+  }[];
+}
+
+export interface IContentMovieChartData {
+  count: number;
+  day: string;
+}
+
+export type IContentMovieCharts = IContentMovieChartData[];
+
+export interface IMovieSchedule {
+  id: number;
+  title: string;
+  genre: string;
+  country: string;
+  director: string;
+  releaseDate: string;
+  imgLink: string;
+}
+
+export type IMovieSchedules = IMovieSchedule[];
diff --git a/src/types/CowProductType.ts b/src/types/CowProductType.ts
new file mode 100644
index 0000000..f1a28eb
--- /dev/null
+++ b/src/types/CowProductType.ts
@@ -0,0 +1,37 @@
+export interface ICowProductDetail {
+  productId: string;
+  category: string;
+  platform: string;
+  title: string;
+  name: string;
+  recruitmentPrice: number;
+  recruitmentRate: number;
+  totalPrice: number;
+  recruitmentDate: string;
+  minInvestment: number;
+}
+
+export interface ICowProductProfitDetail {
+  publish: {
+    name: string;
+    type: string;
+    piece: number;
+    basePrice: number;
+    totalPrice: string;
+    recruitingType: string;
+    rightsStructure: string;
+    revenueStructure: string;
+    subscriptionDate: string;
+    paymentDate: string;
+    allocationDate: string;
+    criteriaDate: string;
+  };
+  farm: {
+    certificationNumber: string;
+    certificationAgency: string;
+    manager: string;
+    certifiedHeads: string;
+    cattleBreed: string;
+    initialDate: string;
+  };
+}
diff --git a/src/types/Diviend.ts b/src/types/Diviend.ts
index 535c97d..5d0d9fa 100644
--- a/src/types/Diviend.ts
+++ b/src/types/Diviend.ts
@@ -21,9 +21,9 @@ export interface ISummary {
 export interface IReport {
   id: number;
   title: string;
-  content: string;
+  description: string;
   category: string;
-  date: string;
+  imageLink: string;
 }
 
 export interface IProductDetail {
@@ -38,6 +38,25 @@ export interface IProductDetail {
   lastDivide_rate: number;
 }
 
+export interface IProductEndRecruit {
+  productId: string;
+  name: string;
+  category: string;
+  platform: string;
+  totalPrice: number;
+  sailRate: number;
+}
+
+export interface IProductRecruit {
+  productId: string;
+  name: string;
+  totalprice: number;
+  day: string;
+  category: string;
+  platform: string;
+  recruitmentRate: number;
+}
+
 interface IProductDetailSort {
   empty: boolean;
   sorted: boolean;
@@ -53,8 +72,36 @@ interface IProductDetailPageable {
   unpaged: boolean;
 }
 
-export interface IProductDetailData {
-  content: IProductDetail[];
+export interface IProductDealDetailData {
+  product: IProductDetail[];
+  pageable: IProductDetailPageable;
+  totalPages: number;
+  totalElements: number;
+  last: boolean;
+  size: number;
+  number: number;
+  sort: IProductDetailSort;
+  numberOfElements: number;
+  first: boolean;
+  empty: boolean;
+}
+
+export interface IProductEndRecruitmentData {
+  product: IProductEndRecruit[];
+  pageable: IProductDetailPageable;
+  totalPages: number;
+  totalElements: number;
+  last: boolean;
+  size: number;
+  number: number;
+  sort: IProductDetailSort;
+  numberOfElements: number;
+  first: boolean;
+  empty: boolean;
+}
+
+export interface IProductRecruitmentData {
+  product: IProductRecruit[];
   pageable: IProductDetailPageable;
   totalPages: number;
   totalElements: number;
@@ -75,3 +122,8 @@ export interface ISummaryData {
   divide: IDivide[];
   summary: ISummary[];
 }
+
+export type IProductCommon =
+  | IProductDealDetailData
+  | IProductEndRecruitmentData
+  | IProductRecruitmentData;
diff --git a/src/types/MusicProductType.ts b/src/types/MusicProductType.ts
new file mode 100644
index 0000000..0c0d95e
--- /dev/null
+++ b/src/types/MusicProductType.ts
@@ -0,0 +1,96 @@
+export interface IMusicProductDetail {
+  product_Id: string;
+  category: string;
+  platform: string;
+  name: string;
+  singer: string;
+  price: number;
+  priceRate: number;
+  totalPrice: number;
+  lastDivide: number;
+  lastDivide_rate: number;
+  divideCycle: number;
+  link: string;
+  bookmark: boolean;
+}
+
+export interface IMusicProductProfitDetail {
+  musicPublish: {
+    name: string;
+    type: string;
+    singer: string;
+    piece: number;
+    basePrice: number;
+    totalPrice: number;
+    issuDay: string;
+  };
+  musicSong: {
+    introduceSong: string;
+    genre: string;
+    singer: string;
+    writer: string;
+    composing: string;
+    announcementDate: string;
+  };
+  musicDivide: {
+    lastDividend: number;
+    lastDividendRate: number;
+    divideDto: {
+      broadcasting: number;
+      transfer: number;
+      replication: number;
+      performance: number;
+      deum: number;
+      etc: number;
+    };
+    paymentDay: string;
+    divideCycle: number;
+  };
+}
+
+export interface IMusicYoutube {
+  youtubeUrl: string;
+  youtubeTitle: string;
+}
+
+export interface IYoutubeViewChartData {
+  viewCount: string;
+  viewDate: string;
+}
+
+export interface IYoutubeSearchData {
+  value: string;
+  date: string;
+}
+
+export type IContentYoutubeViewCharts = IYoutubeViewChartData[];
+export type IContentYoutubeSearchCharts = IYoutubeSearchData[];
+
+export interface IMusicScheduleData {
+  title: string;
+  place: string;
+  period: string;
+  imageUrl: string;
+}
+
+export type IMusicSchedule = IMusicScheduleData[];
+
+export interface IMusicCopyRightFee {
+  decisionDate: string;
+  paymentDate: string;
+  divide: number;
+  divide_rate: number;
+}
+
+export interface IMusicCopyRightFeeChart {
+  divide: IMusicCopyRightFee[];
+}
+
+export interface IMusicStockPrice {
+  date: string;
+  price: number;
+}
+
+export interface IMusicStockPriceChart {
+  transaction: IMusicStockPrice[];
+}
diff --git a/yarn.lock b/yarn.lock
index 73791d2..3d870d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1312,6 +1312,13 @@ date-fns@^3.6.0:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
   integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
 
+debug@^2.6.6:
+  version "2.6.9"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
 debug@^3.2.7:
   version "3.2.7"
   resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
@@ -1852,7 +1859,7 @@ extend@^3.0.0:
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
-fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
@@ -2671,6 +2678,11 @@ lines-and-columns@^1.1.6:
   resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
   integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
 
+load-script@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/load-script/-/load-script-1.0.0.tgz#0491939e0bee5643ee494a7e3da3d2bac70c6ca4"
+  integrity sha512-kPEjMFtZvwL9TaZo0uZ2ml+Ye9HUMmPwbYRJ324qF9tqMejwykJ5ggTyvzmrbBeapCAbk98BSbTeovHEEP1uCA==
+
 locate-path@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
@@ -3078,6 +3090,11 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz"
   integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
 
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
@@ -3475,7 +3492,7 @@ prettier@^3.2.5:
   resolved "https://registry.npmjs.org/prettier/-/prettier-3.3.3.tgz"
   integrity sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==
 
-prop-types@^15.8.1:
+prop-types@15.8.1, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -3615,6 +3632,15 @@ react-virtuoso@^4.10.1:
   resolved "https://registry.yarnpkg.com/react-virtuoso/-/react-virtuoso-4.10.1.tgz#868a40073e497777f49c052eb24be55171ce8639"
   integrity sha512-vDBt9AarmCjPNshw3VxPXW355ZQKSO0p9vrAJ0pi04TB6aXk+qHWTu8NuaQ3ppcd/Ub1r5ryRA4fJ2QGuH0H0g==
 
+react-youtube@^10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/react-youtube/-/react-youtube-10.1.0.tgz#7e5670c764f12eb408166e8eb438d788dc64e8b5"
+  integrity sha512-ZfGtcVpk0SSZtWCSTYOQKhfx5/1cfyEW1JN/mugGNfAxT3rmVJeMbGpA9+e78yG21ls5nc/5uZJETE3cm3knBg==
+  dependencies:
+    fast-deep-equal "3.1.3"
+    prop-types "15.8.1"
+    youtube-player "5.5.2"
+
 react@^18:
   version "18.3.1"
   resolved "https://registry.npmjs.org/react/-/react-18.3.1.tgz"
@@ -3869,6 +3895,11 @@ signal-exit@^4.0.1, signal-exit@^4.1.0:
   resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz"
   integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
 
+sister@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/sister/-/sister-3.0.2.tgz#bb3e39f07b1f75bbe1945f29a27ff1e5a2f26be4"
+  integrity sha512-p19rtTs+NksBRKW9qn0UhZ8/TUI9BPw9lmtHny+Y3TinWlOa9jWh9xB0AtPSdmOy49NJJJSSe0Ey4C7h0TrcYA==
+
 slash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
@@ -4657,6 +4688,15 @@ yoctocolors-cjs@^2.1.2:
   resolved "https://registry.npmjs.org/yoctocolors-cjs/-/yoctocolors-cjs-2.1.2.tgz"
   integrity sha512-cYVsTjKl8b+FrnidjibDWskAv7UKOfcwaVZdp/it9n1s9fU3IkgDbhdIRKCW4JDsAlECJY0ytoVPT3sK6kideA==
 
+youtube-player@5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/youtube-player/-/youtube-player-5.5.2.tgz#052b86b1eabe21ff331095ffffeae285fa7f7cb5"
+  integrity sha512-ZGtsemSpXnDky2AUYWgxjaopgB+shFHgXVpiJFeNB5nWEugpW1KWYDaHKuLqh2b67r24GtP6HoSW5swvf0fFIQ==
+  dependencies:
+    debug "^2.6.6"
+    load-script "^1.0.0"
+    sister "^3.0.0"
+
 zustand@^4.5.4:
   version "4.5.4"
   resolved "https://registry.npmjs.org/zustand/-/zustand-4.5.4.tgz"