diff --git a/src/Components/Views/DetailPage/DetailPage.scss b/src/Components/Views/DetailPage/DetailPage.scss
index 4056ab5e..a1b2463e 100644
--- a/src/Components/Views/DetailPage/DetailPage.scss
+++ b/src/Components/Views/DetailPage/DetailPage.scss
@@ -20,7 +20,8 @@
     left: 0;
     right: 0;
     //font-family: 'Dovemayo_gothic';
-    
+    font-family: 'SUITE-Regular';
+
     .ImgContainer{
       height: 780px;
       position: relative;
@@ -37,7 +38,7 @@
       z-index: 100;
   
       .TitleBox{
-        width: 250px;
+        width: auto;
         height: 60px;
         position: absolute;
         margin: 0 auto;
@@ -46,7 +47,7 @@
         //background-color: red;
         
         p{
-          font-size: 40px;
+          font-size: 30px;
         }
       }
       .BookimgBox{
@@ -64,7 +65,7 @@
         img{
           width: 360px;
           height: auto;
-          position: absolute;
+          //position: absolute;
           margin: auto;
           left: 0;
           right: 0;
@@ -184,6 +185,26 @@
       }
     }
   
-  
+    .InnerContent{
+      width: 900px;
+      background-color: red;
+      height: auto;
+      display: block;
+      margin: 0 auto;
+      font-family: 'SUITE-Regular';
+
+      img{
+        width: 900px;
+        //position: absolute;
+        display: flex;
+        margin: 0 auto;
+      }
+
+      p{
+        font-family: 'SUITE-Regular' !important;
+        background-color: antiquewhite;
+      }
+      
+    }
   }
   
\ No newline at end of file
diff --git a/src/Components/Views/DetailPage/DetailPage.tsx b/src/Components/Views/DetailPage/DetailPage.tsx
index 461799ee..2d5567cc 100644
--- a/src/Components/Views/DetailPage/DetailPage.tsx
+++ b/src/Components/Views/DetailPage/DetailPage.tsx
@@ -1,11 +1,28 @@
 import BookCustom from '../../../bookcustom/bookcustom';
 import { useEffect, useState } from 'react';
-import './DetailPage.scss';
+import './DetailPage.scss'
 import { useParams } from 'react-router-dom';
 import { getDetail } from '@/Apis/productApi';
 
-function DetailPage() {
-  const [detail, setDetail] = useState<Product>({} as Product);
+function DetailPage(){
+
+  interface DetailInfo {
+    detail_image:string,
+    product_name:string,
+    retail_price:number,
+    simple_description:string,
+    summary_description:string,
+    product_no:string,
+    price:number,
+    price_excluding_tax: string,
+    selling: string,
+    description:string 
+  }
+  const [detail, setDetail] = useState<DetailInfo>({} as DetailInfo);
+  const [book, setBook] = useState([]);
+
+
+
   const { productNo } = useParams();
   async function getDetails() {
     try {
@@ -22,70 +39,104 @@ function DetailPage() {
     })();
   }, []);
 
-  return (
+
+  const BuyBook = (detailnum) => {
+    let Cart = localStorage.getItem('cart');
+
+    // if(Cart === null) {
+    //   Cart = [];
+    // } else {
+    //   Cart = JSON.parse(Cart);
+    // }
+
+    // let datalist = {
+    //   "buy": []
+    //   ,"rent": []
+    // }1
+
+
+    // datalist.buy[1]= productid;
+    
+    // buy - [1,2,4,56]
+    // rent - [1,3,6,7]
+    // let c = localStorage.getIte(cart);
+    // c.buy 
+    // Cart.push()
+    // console.log(detail);
+  }
+
+    const disableLinkClick = (event) => {
+      event.preventDefault();
+      // You can add any additional handling here if needed
+    };
+  
+    const modifiedDescription = detail.description
+    ? detail.description.replace(/<a\b[^>]*>/gi, (match) =>
+        match.replace('href', 'data-disabled-href')
+      )
+    : '';
+  
+  return(
     <>
-      <div className="DetailContainer">
-        <div className="ImgContainer">
-          <BookCustom />
+
+    <div className="DetailContainer">
+      <div className="ImgContainer">
+        <BookCustom/>
+      </div>
+
+      <div className="LeftContainer">
+        <div className="TitleBox">
+          <span>{detail.product_name} </span>
         </div>
+        <div className="BookimgBox">
+          <img src={detail.detail_image}/>
+        </div>
+      </div>
 
-        <div className="LeftContainer">
-          <div className="TitleBox">
-            <p>제목입니다. </p>
-          </div>
-          <div className="BookimgBox">
-            <img src="/public/images/bookcover.jpg" alt="bookimgs" />
-          </div>
+      <div className="RightContainer">
+        <div className="RightContainer-TopText">
+          <p>책모양 아크릴 거울 <br/>(대상 도서 포함 3만원 이상 구매 시)</p>
         </div>
 
-        <div className="RightContainer">
-          <div className="RightContainer-TopText">
-            <p>
-              책모양 아크릴 거울 <br />
-              (대상 도서 포함 3만원 이상 구매 시)
-            </p>
+        <div className="RightContainer-Content">
+          <div className="OriginPrice">
+            <span className="PriceText">판매가</span>
+            <span className="PriceNumber">{detail.price}</span>
+          </div>
+          <div className="ContentContainer">
+            <span className="ContentBox">줄거리</span>
+            <span className="contentText">
+            <p></p>
+            </span>
+          </div>
+          <div className="CardPrice">
+            <span className="CardText">카드</span>
+            <span className="PriceNumber">무이자 할부</span>
+            <span className="PriceNumber">소득공제300원</span>
           </div>
 
-          <div className="RightContainer-Content">
-            <div className="OriginPrice">
-              <span className="PriceText">정가</span>
-              <span className="PriceNumber">22,000</span>
-            </div>
-            <div className="OriginPrice">
-              <span className="PriceText">판매가</span>
-              <span className="PriceNumber">22,000</span>
-            </div>
-            <div className="OriginPrice">
-              <span className="PriceText">수량</span>
-              <span className="PriceNumber">22,000</span>
-            </div>
-            <div className="ContentContainer">
-              <span className="ContentBox">줄거리</span>
-              <span className="contentText">
-                <p>
-                  더 이상 설명이 필요 없는 20세기 환경학 최고의 고전 [침묵의
-                  봄]이 50주년 기념 개정판으로 나왔다. 이번 개정판에는 서문과
-                  후기가 완전히 새롭게 단장되었으며, 2002년 출간본에는
-                  없던(원서에도 없었음) 찾아보기를 새롭게 추가했다. 그리고
-                  편집과 장정도 완전히 바뀌었다.
-                </p>
-              </span>
-            </div>
-            <div className="CardPrice">
-              <span className="CardText">카드</span>
-              <span className="PriceNumber">무이자 할부</span>
-              <span className="PriceNumber">소득공제300원</span>
-            </div>
-
-            <div className="ButtonContainer">
-              <button className="CartAdd">장바구니 담기</button>
-              <button className="BookBill">책 대여하기</button>
-            </div>
+          <div className="ButtonContainer">
+            <button className="CartAdd" onClick={()=> BuyBook(detail.product_no)}> 책 구매하기</button>
+            <button className="BookBill">책 대여하기</button>
+            
           </div>
         </div>
       </div>
+      <div className="InnerContent"dangerouslySetInnerHTML={{ __html: modifiedDescription}} 
+      onClick={disableLinkClick}>
+      </div>
+    </div>
+    {/* <div className="InnerContent"dangerouslySetInnerHTML={{ __html: modifiedDescription}} 
+    onClick={disableLinkClick}>
+      
+      </div> */}
+    {/* <div dangerouslySetInnerHTML={{ __html: detail.detail_image }}>
+    </div> */}
+
+    {/* <div>
+      <img src={detail.detail_image}/>
+    </div> */}
 
-      <div dangerouslySetInnerHTML={{ __html: detail.description }}></div>
     </>
   );
 }