Skip to content

Commit

Permalink
Merge pull request #3 from KDT5TeamWink/kimHaEun
Browse files Browse the repository at this point in the history 
[230612]1차PR-김하은
  • Loading branch information
@hahahaday12
hahahaday12 authored Jun 12, 2023
2 parents 09a915f + 68d2890 commit 28793d7
Show file tree
Hide file tree
Showing 2 changed files with 133 additions and 61 deletions.
31 changes: 26 additions & 5 deletions src/Components/Views/DetailPage/DetailPage.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
left: 0;
right: 0;
//font-family: 'Dovemayo_gothic';

font-family: 'SUITE-Regular';

.ImgContainer{
height: 780px;
position: relative;
Expand All @@ -37,7 +38,7 @@
z-index: 100;

.TitleBox{
width: 250px;
width: auto;
height: 60px;
position: absolute;
margin: 0 auto;
Expand All @@ -46,7 +47,7 @@
//background-color: red;

p{
font-size: 40px;
font-size: 30px;
}
}
.BookimgBox{
Expand All @@ -64,7 +65,7 @@
img{
width: 360px;
height: auto;
position: absolute;
//position: absolute;
margin: auto;
left: 0;
right: 0;
Expand Down Expand Up @@ -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;
}

}
}

163 changes: 107 additions & 56 deletions src/Components/Views/DetailPage/DetailPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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>
</>
);
}
Expand Down

0 comments on commit 28793d7

Please sign in to comment.