diff --git a/src/Components/Views/CartPage/CartItems/CartItems.scss b/src/Components/Views/CartPage/CartItems/CartItems.scss
index 2395c890..67c92e13 100644
--- a/src/Components/Views/CartPage/CartItems/CartItems.scss
+++ b/src/Components/Views/CartPage/CartItems/CartItems.scss
@@ -28,12 +28,12 @@
   .ProductNameBox {
     @include CartNameStyle;
     width: 60px;
-    left: 300px;
+    left: 400px;
   }
 
   .PriceNameBox{
     @include CartNameStyle;
-    right: 450px;
+    right: 400px;
   }
 
   .NumberBox{
@@ -43,7 +43,7 @@
 
   .DeleteNameBox{
     @include CartNameStyle;
-    right: 100px;
+    right: 120px;
   }
 
 
@@ -56,8 +56,8 @@
     overflow-y: auto; /* 세로 스크롤 생성 */  
 
     .ItemContainer {
-      width: 1180px;
-      height: 90px;
+      width: 1182px;
+      padding-bottom: 5px;
       position: relative;
       margin-top: 20px;
       border-bottom: 2px solid rgb(208, 203, 185);
@@ -66,34 +66,34 @@
         width: 60px;
         height: 40px;
         position: absolute;
-        top: 12px;
+        top: 40px;
         left: 30px;  
       }
       
       .ImageBox{
         width: 100px;
-        height: 100px;
-        margin-left: 150px;
+        //height: 100px;
+        position: relative;
+        bottom: 10px;
+        margin-left: 120px;
+        background-color: rebeccapurple;
 
         img{
-          position: absolute;
+          //position: absolute;
           width: inherit;
-          height: 80px;
+          background-color: orange;
+          height: auto;
         }
       }
 
       .TextInner {
-        width: 400px;
-        height: 100px;
+        width: 450px;
+        padding-bottom: 30px;
         position: absolute;
-        top: 1px;
+        top: 50px;
         left: 260px;
-        font-size: 20px;
-        
+
         span:nth-child(1) {
-          width: 400px;
-          height: 20px;
-          position: absolute;
           font-size: 20px;
         }
 
@@ -107,49 +107,21 @@
       }
 
       .PriceInner{
-        width: 150px;
-        height: 90px;
+        width: auto;
+        padding-bottom: 10px;
+        top: 50px;
         position: absolute;
-        top: -10px;
-        right: 350px;
-        //background-color: olivedrab;
-        display: table-column;
+        right: 370px;
+        background-color: olivedrab;
         font-size: 15px;
         
-
-        span:nth-child(1){
-          width: 100px;
-          height: 20px;
-          position: absolute;
-        }
-
-        span:nth-child(2){
-          height: 30px;
-          position: absolute;
-          margin-top: 30px;
-        }
-
-        span:nth-child(3){
-          height: 30px;
-          position: absolute;
-          margin-top: 60px;
-        }
-    }
-
-    .ChooseNumber{
-      width: 90px;
-      height: 50px;
-      //background-color: brown;
-      position: absolute;
-      right: 220px;
-      top: 15px;
+       
     }
 
     .CartButtonBox{
       width: 60px;
-      height: 60px;
       position: absolute;
-      top: 15px;
+      top: 30px;
       right: 100px;
       //background-color: burlywood;
       
@@ -157,7 +129,7 @@
         display: block;
         width: 50px;
         height: 30px;
-        margin-top: 5px;
+        margin-top: 10px;
       }
     }
   }
diff --git a/src/Components/Views/CartPage/CartItems/CartItems.tsx b/src/Components/Views/CartPage/CartItems/CartItems.tsx
index 473ce715..2f760111 100644
--- a/src/Components/Views/CartPage/CartItems/CartItems.tsx
+++ b/src/Components/Views/CartPage/CartItems/CartItems.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useState } from 'react';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
@@ -6,99 +6,76 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 import YearBox from 'Common/section/number';
 import './CartItems.scss';
 
-function CartItems() {
-  interface Item {
-    id: number;
-    // image:string;
-    name: string;
-    text: string;
-    price: string;
-    sale: string;
-    malize: string;
-  }
+interface BuyItem {
+  id: number;
+  product_name: string;
+  price: number;
+  detail_image: string;
+}
+
+interface CartItemsProps {
+  check: number[];
+  pitem: any;
+  setItems:any;
+
+}
 
+const CartItems = ({ check, pitem, setItems }: CartItemsProps) => {
   const [info, setInfo] = useState([]);
-  const [checked, setChecked] = useState([true, false]);
-  const [items, setItems] = useState<Item[]>([
-    {
-      id: 1,
-      name: '[국내도서]시작하세요! C# 10프로그래밍',
-      text: '*밤 11시 잠들기전 배송',
-      price: '정가: 36000',
-      sale: '판매가:32,400',
-      malize: '마일리지: 1,800원',
-    },
-    {
-      id: 2,
-      name: '도서명2',
-      text: '*밤 11시 잠들기전 배송',
-      price: '정가: 36000',
-      sale: '판매가:32,400',
-      malize: '마일리지: 1,800원',
-    },
-    {
-      id: 3,
-      name: '도서명3',
-      text: '*밤 11시 잠들기전 배송',
-      price: '정가: 36000',
-      sale: '판매가:32,400',
-      malize: '마일리지: 1,800원',
-    },
-    {
-      id: 4,
-      name: '도서명3',
-      text: '*밤 11시 잠들기전 배송',
-      price: '정가: 36000',
-      sale: '판매가:32,400',
-      malize: '마일리지: 1,800원',
-    },
-    {
-      id: 5,
-      name: '도서명3',
-      text: '*밤 11시 잠들기전 배송',
-      price: '정가: 36000',
-      sale: '판매가:32,400',
-      malize: '마일리지: 1,800원',
-    },
-  ]);
-  const [checkedItems, setCheckedItems] = useState<number[]>([]);
+  const [buyItem, setbuyItem] = useState<BuyItem[]>([]);
+  const [checkedItems, setCheckedItems] = useState<number[]>(check);
+
+
+  useEffect(() => {
+    BuyCart();
+  }, []);
+
+  const BuyCart = () => {
+    const BuyItems = JSON.parse(localStorage.getItem("cart")) || [];
+    setbuyItem(BuyItems);
+    console.log(BuyItems)
+  }
 
   const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
     const checkedValue = event.target.checked;
     const updatedCheckedItems = checkedValue
-      ? items.map((item) => item.id)
+      ? buyItem.map((item) => item.id)
       : [];
-    setCheckedItems(updatedCheckedItems);
+    setCheckedItems(updatedCheckedItems);  
   };
 
-  const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleChange2 = (el: any) => (event: React.ChangeEvent<HTMLInputElement>) => {
+    console.log(el);
     const itemId = parseInt(event.target.name);
     let updatedCheckedItems: number[] = [];
-
+    let updatedItems: any[] = [];
     if (event.target.checked) {
       updatedCheckedItems = [...checkedItems, itemId];
+      updatedItems = [...pitem , el];
     } else {
       updatedCheckedItems = checkedItems.filter((id) => id !== itemId);
-    }
+      updatedItems = pitem.filter((key) => key.product_no !== el.product_no);
+    } 
+    setItems(updatedItems);
     setCheckedItems(updatedCheckedItems);
+    setCheck(updatedCheckedItems);
   };
 
-  const children = (itemId: number) => (
+  const children = (el:any ,index:number) => (
     <Box
       sx={{
         display: 'flex',
         flexDirection: 'column',
         ml: 3,
         fontSize: 'large',
-      }}
-    >
+      }}>
       <FormControlLabel
         label=""
         control={
           <Checkbox
-            checked={checkedItems.includes(itemId)}
-            onChange={handleChange2}
-            name={itemId.toString()}
+            checked={checkedItems.includes(index)}
+            onChange={handleChange2(el)}
+            name={index}
           />
         }
       />
@@ -113,6 +90,26 @@ function CartItems() {
     });
   };
 
+  const RemoveBuyItem = (index: number, key:any) => {
+    console.log(key);
+    const confirmation = window.confirm('삭제하시겠습니까?');
+    if (confirmation) {
+
+      const updatedCartData = JSON.parse(localStorage.getItem('cart'));
+      localStorage.setItem('cart', JSON.stringify(updatedCartData.filter((item) => item.product_no !== key)));
+      
+      const updatedBuyItem = [...buyItem];
+      //선택한 index 1개를 buyItem 배열에서 제거.
+      updatedBuyItem.splice(index, 1);
+      // 제거한후의 값 setState 갑에 담아줌.
+      setbuyItem(updatedBuyItem);
+      // cart 키 값으로 로컬에서 데이터 찾아옴
+      alert('삭제되었습니다.');
+    } else {
+      alert('취소되었습니다.');
+    }
+  };
+
   return (
     <>
       <div className="CartPageTable__Buy">
@@ -122,9 +119,9 @@ function CartItems() {
             <div className="LableBox">
               <Checkbox
                 size="large"
-                checked={checkedItems.length === items.length}
+                checked={checkedItems.length === buyItem.length}
                 indeterminate={
-                  checkedItems.length > 0 && checkedItems.length < items.length
+                  checkedItems.length > 0 && checkedItems.length < buyItem.length
                 }
                 onChange={handleChange1}
               />
@@ -132,10 +129,6 @@ function CartItems() {
           }
         />
 
-        {/* <div className="Product-Buy">
-        <span>구매</span>
-      </div> */}
-
         <div className="ProductNameBox">
           <span>상품명</span>
         </div>
@@ -150,25 +143,23 @@ function CartItems() {
       </div>
 
       <div className="ItemsContainer">
-        {items.map((item) => (
-          <div className="ItemContainer">
-            <div className="CheckContainer">{children(item.id)}</div>
-            <div key={item.id} className="ImageBox">
-              <img src="/images/cartbookimage.jpg" alt="cartbookimage" />
+        {buyItem.map((el, index) => (
+          <div className="ItemContainer" key={index}>
+            {/* 아이템 체크 하는 부분 */}
+            <div className="CheckContainer">{children(el, index)}</div>
+            <div key={el.id} className="ImageBox">
+              <img src={el.detail_image} alt="cartbookimage" />
             </div>
             <div className="TextInner">
-              <span>{item.name}</span>
-              <span>{item.text}</span>
+              <span>{el.product_name}</span>
             </div>
 
             <div className="PriceInner">
-              <span>{item.price}</span>
-              <span>{item.sale}</span>
-              <span>{item.malize}</span>
+              <span>{Number(el.price).toFixed(0)}원</span>
             </div>
 
             <div className="CartButtonBox">
-              <button>삭제</button>
+              <button onClick={() => RemoveBuyItem(index, el.product_no)}>삭제</button>
             </div>
           </div>
         ))}
diff --git a/src/Components/Views/CartPage/CartPage.tsx b/src/Components/Views/CartPage/CartPage.tsx
index 915c301f..3b312cd6 100644
--- a/src/Components/Views/CartPage/CartPage.tsx
+++ b/src/Components/Views/CartPage/CartPage.tsx
@@ -1,49 +1,68 @@
 import './CartPage.scss'
-import { FormEvent, useState } from 'react';
+import { useState, useEffect } from 'react';
 import CartItems from './CartItems/CartItems';
-import { Value } from 'sass';
 import RentalItems from './CartRent/CartRent';
 
 
 function CartPage() {
 
-    // const [rentalbook, setRentalBook] = useState<Item[]>([
-    //   { id: 1,  name: '[국내도서]시작하세요! C# 10프로그래밍', text:"*밤 11시 잠들기전 배송", 
-    //   price:"정가: 36000", sale:"판매가:32,400", malize:"마일리지: 1,800원"},
-    // ])
+  const BuyProducts = () => {
+    alert("주문완료!")
+  }
 
-    const Text = {
-      '1':'상품명',
-      '2':'가격',
-      '3':'수량',
-      '4':'대여날자',
-    } as const;
+  const [CartItemsValue, setCartItemsValue] = useState<number[]>([]);
+  const [selectedItem, setSelectedItem] = useState<any[]>([]);
+  const [Total, setTotal] = useState(0)
+  const [ShowTotal, setShowTotal] = useState(false)
+  
+  const [RentalItemsValue, setRentalItemsValue] = useState<number[]>([]);
 
-    const BuyProducts = () => {
-      alert("주문완료!")
+  useEffect(() => {
+    console.log(CartItemsValue+"k");
+    console.log(selectedItem)
+  }, [CartItemsValue]);
+
+  useEffect(() => {
+    calculateTotal();
+  }, [selectedItem]);
+
+  const calculateTotal = () => {
+    console.log('ccccccc' + Array.isArray(selectedItem))
+    let total = 0;
+    if (Array.isArray(selectedItem)) {
+      selectedItem.forEach((item) => {
+        console.log(item);
+        const itemPrice = parseFloat(item.price);
+        console.log(itemPrice)
+        if (!isNaN(itemPrice)) {
+          console.log(itemPrice)
+          total += itemPrice;
+        }
+      });
     }
- 
+    setTotal(total);
+    console.log(total + "토");
+    setShowTotal(true);
+  };
+
+
   return (
   <>
   <div className='CartPage-AllLayout'>  
-
-    {/* <div className="CartPageTable">    */}
-
       <span className="ProductText">구매</span>  
       <div className="CartContainer">
-        <CartItems/>
+        <CartItems 
+          check={CartItemsValue} 
+          pitem={selectedItem} 
+          setItems={setSelectedItem}
+        />
       </div>  
-    
-    
-    {/* </div> */}
-
     {/* 여기에서는 대여 부분  */}
     <span className='RentText'>대여 </span>
       <div className='RentContainer'>
         <RentalItems/>
       </div>
 
-    
     <span className='BuyText'>결제</span>
       <div className='BuyContainer'>
         
@@ -51,12 +70,7 @@ function CartPage() {
           <div className='Buy-Container'>
             <div className='Pay-Container'> 
               <span>총 상품 가격 </span>
-              <span>28,000</span>
-            </div>
-
-            <div className='Pay-Container'> 
-              <span>총 주문 상품수</span>
-              <span>1종 1권(개)</span>
+              {ShowTotal && <h2>Total Amount: ${Total}</h2>}
             </div>
           </div>
         </div>
diff --git a/src/Components/Views/DetailPage/DetailPage.scss b/src/Components/Views/DetailPage/DetailPage.scss
index a1b2463e..b1e33d44 100644
--- a/src/Components/Views/DetailPage/DetailPage.scss
+++ b/src/Components/Views/DetailPage/DetailPage.scss
@@ -12,7 +12,17 @@
     font-size: 20px;
     margin-left: 50px;
   }
-  
+
+  @mixin ButtonStyle{
+    width: 150px;
+    height: 50px;
+    position: absolute;
+    color: white;
+    border: none;
+    cursor: pointer;
+  }  
+
+
   .DetailContainer {
     position: relative;
     width: 1400px;
@@ -30,7 +40,6 @@
     .LeftContainer {
       width: 600px;
       max-width: 500px;
-      //background-color: yellow;
       position: absolute;
       height: 650px;
       top: 60px;
@@ -38,35 +47,42 @@
       z-index: 100;
   
       .TitleBox{
-        width: auto;
-        height: 60px;
         position: absolute;
-        margin: 0 auto;
-        left: 0;
-        right: 0;
-        //background-color: red;
-        
-        p{
+        margin-top: 10px;
+        padding-bottom: 5px;
+        border-bottom: 2px solid black;
+
+        span:nth-child(1){
           font-size: 30px;
         }
+        
+        span:nth-child(2) {
+          font-size: 15px;
+          margin-left: 20px;
+        }
+
+        .InnerTitleBox{
+          width: 500px;
+
+          p{
+            margin-top: 10px;
+            font-size: 15px;
+          }
+        }
       }
       .BookimgBox{
-        width: 450px;
-        height: 560px;
+        padding-bottom: 500px;
         border-radius: 10px;
-        background-color: rgb(253, 251, 251);
         border: 2px solid rgb(116, 45, 1);
-        position: absolute;
-        top: 80px;
+        position: relative;
+        top: 150px;
         margin: auto;
         left: 0;
         right: 0;
        
         img{
-          width: 360px;
-          height: auto;
-          //position: absolute;
-          margin: auto;
+          position: absolute;
+          margin: 0 auto;
           left: 0;
           right: 0;
         }
@@ -77,7 +93,6 @@
       width: 500px;
       max-width: 500px;
       padding-bottom: 540px;
-      //background-color: yellow;
       position: absolute;
       top: 100px;
       right: 130px;
@@ -93,118 +108,185 @@
       .RightContainer-Content{
         width: inherit;
         height: 400px;
-        //background-color: blue;
         position: absolute;
-        top: 100px;
+        top: 60px;
         
   
         .OriginPrice{
           @include PriceContainer;
           margin-top: 20px;
-          //background-color: aliceblue;
-          //position: relative;
   
           .PriceText{
             @include PriceText;
-            //background-color: yellow;
           }
   
           .PriceNumber{
             @include PriceNumber;
-            //background-color: rgb(18, 220, 18);
           }
         }
   
         .ContentContainer{
           width: 400px;
           height: 200px;
-          //background-color: blanchedalmond;
           margin-top: 10px;
           position: relative;
   
           .ContentBox{
             width: 200px;
             height: 100px;
-            //background-color: olive;
             font-size: 20px;
           }
   
           .contentText{
             width: 400px;
             height: 100px;
-            //background-color: orangered;
             position: absolute;
             top: 40px;
             left: 0;
             right: 0;
           }
         }
-  
-  
+
         .CardPrice{
-          width: 350px;
+          width: 450px;
           height: 30px;
-          //background-color: palevioletred;
-          margin-top: 10px;
-  
-          .CardText{
-            font-size: 20px;
-            height: 30px;
-            //background-color: yellow;
-          }
-          
-          .PriceNumber{
-            @include PriceNumber;
-          }   
+          margin-top: 60px;
+          display: flex;
+          gap: 40px;
+          font-size: 18px; 
         }
   
         .ButtonContainer{
           width: 400px;
           height: 50px;
-          //background-color: orchid;
           position: relative;
-          margin: 0 auto;
           margin-top: 20px;
         
           .CartAdd{
-            width: 150px;
-            height: 50px;
-            background-color: palegreen;
-            position: absolute;
-            margin: auto;
+            @include ButtonStyle;
+            background-color: #df307f;
           }
         
           .BookBill{
-            width: 150px;
-            height: 50px;
-            background-color: rgb(228, 207, 13);
-            position: absolute;
+            @include ButtonStyle;
+            background-color: #e24457;
             right: 20px;
           }
         }
       }
     }
+
+    .BookContent {
+      width: 1150px;
+      margin: auto;
+      border: 1px solid black;
+      margin-top: 50px !important;
+    }
+
+    .BookContent-text{
+      width: 140px;
+      position: absolute;
+      padding-bottom: 10px;
+      background-color: rgb(253, 248, 248);
+      border-radius: 10px;
+      padding: 10px;
+      font-size: 23px;
+      font-weight: bold;
+      margin-top: 20px;
+      margin-left: 50px;
+    }
+
+    .TopBox {
+      width: 100%;
+      top: 0;
+      background-color: white;
+      right: 0;
+      font-size: 20px;
+      z-index: 1;
+      position: fixed;
+      border-bottom: 2px solid gray;
+      transition: transform 0.3s ease-in-out;
+      transform: translateY(-50px);
+    }
+
+    .TopBox.slide-down {
+      transform: translateY(-1px); /* Apply the slide-down transform value */
+    }
+
+    .TopContentBox{
+      width: 130px;
+      margin: 0 auto;
+      background-color: darkcyan;
+    }
   
-    .InnerContent{
-      width: 900px;
-      background-color: red;
-      height: auto;
-      display: block;
+    .InnerContent {
+      padding-bottom: 20px;
+      width: 800px;
       margin: 0 auto;
-      font-family: 'SUITE-Regular';
+      font-size: 20px !important;
 
-      img{
-        width: 900px;
-        //position: absolute;
-        display: flex;
+      img {
+        width: 800px;
         margin: 0 auto;
       }
 
-      p{
+      a {
         font-family: 'SUITE-Regular' !important;
-        background-color: antiquewhite;
+        background-color: #f8ede3 !important;
+        border-radius: 10px;
+        width: 800px;
+        margin: 0 auto !important;
+        padding: 20px !important;
+        font-size: 20px !important;
+      }
+
+      p {
+        background-color: #f8ede3 !important;
+        border-radius: 10px;
+        width: 800px;
+        margin: 0 auto !important;
+        padding: 20px !important;
+        font-size: 20px !important;   
+      }
+
+      span {
+        font-size: 18px !important;
+      }  
+    }
+
+    .Bookple-Container{
+      width: 800px;
+      padding-bottom: 10px;
+      //background-color: aliceblue;
+      margin: auto;
+      position: relative;
+      border-bottom:  1px solid black;
+      border-top: 1px solid black;
+
+      .Bookple-Container__text{
+        width: 180px;
+        background-color: rgb(248, 244, 244);
+        position: absolute;
+        color: #0086cd;
+        left: -250px;
+        margin-top: 20px;
+        font-size: 20px;
+        padding: 10px;
+        font-size: 23px;
+        //font-weight: bold;
+        border-radius: 10px;
+      }
+
+      .Bookple-Container__coment{
+        width: 500px;
+        display: flex;
+        gap: 30px;
+        font-size: 20px;
+        font-weight: bold;
+        position: relative;
+        margin-top: 40px;
+        margin-left: 20px;
       }
-      
     }
   }
   
\ No newline at end of file
diff --git a/src/Components/Views/DetailPage/DetailPage.tsx b/src/Components/Views/DetailPage/DetailPage.tsx
index 2d5567cc..27659c5a 100644
--- a/src/Components/Views/DetailPage/DetailPage.tsx
+++ b/src/Components/Views/DetailPage/DetailPage.tsx
@@ -1,8 +1,9 @@
 import BookCustom from '../../../bookcustom/bookcustom';
-import { useEffect, useState } from 'react';
-import './DetailPage.scss'
-import { useParams } from 'react-router-dom';
+import { useEffect, useState, useRef } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import TopHeader from './components/TopHeader';
 import { getDetail } from '@/Apis/productApi';
+import './DetailPage.scss'
 
 function DetailPage(){
 
@@ -18,9 +19,9 @@ function DetailPage(){
     selling: string,
     description:string 
   }
-  const [detail, setDetail] = useState<DetailInfo>({} as DetailInfo);
-  const [book, setBook] = useState([]);
 
+  const navigate = useNavigate();
+  const [detail, setDetail] = useState<DetailInfo>({} as DetailInfo);
 
 
   const { productNo } = useParams();
@@ -33,36 +34,61 @@ function DetailPage(){
     }
   }
 
+  const [isScrolled, setIsScrolled] = useState(false);
+  const [ScrollY, setScrollY] = useState(0);
+
+  function handleScroll() {
+    if (ScrollY > 800) {
+      setScrollY(window.pageYOffset);
+      setIsScrolled(true);
+    } else {
+      setScrollY(window.pageYOffset);
+      setIsScrolled(false);
+    }
+  }
+  
+  useEffect(() => {
+    function scrollListener() {
+      window.addEventListener("scroll", handleScroll);
+    } //  window 에서 스크롤을 감시 시작
+    scrollListener(); // window 에서 스크롤을 감시
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    }; //  window 에서 스크롤을 감시를 종료
+  });
+    
+
   useEffect(() => {
     (async () => {
       await getDetails();
     })();
   }, []);
 
-
-  const BuyBook = (detailnum) => {
+  const BuyBook = (detail:any) => {
     let Cart = localStorage.getItem('cart');
+    if(Cart === null) {
+      Cart = [];
+    } else {
+      Cart = JSON.parse(Cart);
+    }
+
+    const datalist = {
+      "buy": []
+      ,"rent": []
+    };
 
-    // if(Cart === null) {
-    //   Cart = [];
+    // if (Cart.some((item) => item.id === detail.id)) {
+    //   alert('이미 장바구니에 담으셨습니다.');
     // } else {
-    //   Cart = JSON.parse(Cart);
+      Cart.push(detail);
+      Cart = new Set(Cart);
+      Cart = [...Cart];
+      localStorage.setItem('cart', JSON.stringify(Cart));
+      datalist.buy = Cart;
+      console.log(datalist);
+      alert('장바구니에 담겼습니다.');
+      navigate('/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) => {
@@ -75,6 +101,20 @@ function DetailPage(){
         match.replace('href', 'data-disabled-href')
       )
     : '';
+
+    const renderCardPriceItems = () => {
+      const cardPriceItems = {
+        '카드/간편결제할인': '',
+        '무이자 할부': '',
+        '소득공제300원': '',
+      };
+
+      return Object.entries(cardPriceItems).map(([key]) => (
+        <span key={key}>{`${key}`}</span>
+      ));  
+    }
+
+    
   
   return(
     <>
@@ -86,8 +126,13 @@ function DetailPage(){
 
       <div className="LeftContainer">
         <div className="TitleBox">
-          <span>{detail.product_name} </span>
+          <span>{detail.product_name}</span>
+          <span>-단돈 1,000원으로 시작할수 있는</span>
+          <div className='InnerTitleBox'>
+            <p>윙크북 {detail.product_name} 전자책 출간일  2023-0505</p>
+          </div>
         </div>
+
         <div className="BookimgBox">
           <img src={detail.detail_image}/>
         </div>
@@ -106,37 +151,39 @@ function DetailPage(){
           <div className="ContentContainer">
             <span className="ContentBox">줄거리</span>
             <span className="contentText">
-            <p></p>
+            <p>{detail.summary_description}</p>
             </span>
           </div>
           <div className="CardPrice">
-            <span className="CardText">카드</span>
-            <span className="PriceNumber">무이자 할부</span>
-            <span className="PriceNumber">소득공제300원</span>
+            {renderCardPriceItems()}
           </div>
 
           <div className="ButtonContainer">
-            <button className="CartAdd" onClick={()=> BuyBook(detail.product_no)}> 책 구매하기</button>
+            <button className="CartAdd" onClick={()=> BuyBook(detail)}> 책 구매하기</button>
             <button className="BookBill">책 대여하기</button>
-            
           </div>
         </div>
       </div>
+
+      <div className='BookContent'></div>
+      <span className='BookContent-text'>출판사 제공 <br/>책소개</span>
+      <div className={`TopBox ${isScrolled ? 'slide-down' : ''}`}>
+        {isScrolled ? <TopHeader productName={detail.product_name} productPrice={detail.price}/> : ""}
+      </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 className='Bookple-Container'>
+        <span className='Bookple-Container__text'>북플 BOOKPLE</span>
+        <ul className='Bookple-Container__coment'>
+          <li>이책의 마니아가 남긴글</li>
+          <li>친구가 남긴글</li>
+          <li>내가 남긴글</li>
+        </ul>
+      </div>
+    </div>
     </>
   );
 }