Skip to content

Commit

Permalink
♻️refactor: API 복구 및 styled-component 위치 변경으로 인한 코드 수정 (#5)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jaharim
Jaharim committed Jun 7, 2023
1 parent b9480a7 commit 2801c76
Showing 1 changed file with 236 additions and 77 deletions.
313 changes: 236 additions & 77 deletions src/components/main/productdetail/ProductDetail.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,65 +59,6 @@ export default function ProductDetail({ productData }) {
loadProductDetail();
}, []);

const Section = styled.section`
display: flex;
justify-content: center;
max-width: 1280px;
margin: 0 auto;
/* margin-top: 80px; */
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.detail-header {
display: flex;
}
.product-image-container {
max-width: 600px;
width: 100%;
aspect-ratio: 1/1;
img {
max-width: 100%;
height: auto;
object-fit: contain;
}
}
.buying-info {
display: flex;
flex-direction: column;
justify-content: space-between;
.product-summary {
span {
display: block;
}
}
.product-quantity-btns {
display: flex;
input {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
box-sizing: border-box;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
}
`;
return (
<Section>
<div className='wrapper'>
Expand All @@ -127,9 +68,11 @@ export default function ProductDetail({ productData }) {
</div>
<div className='buying-info'>
<div className='product-summary'>
<span>스토어 네임{productDetail.store_name}</span>
<span>프로덕트 네임{productDetail.product_name}</span>
<span>가격{productDetail.price?.toLocaleString()}</span>
<span>{productDetail.store_name}</span>
<span>{productDetail.product_name}</span>
<span>
<strong>{productDetail.price?.toLocaleString()}</strong>원
</span>
</div>
<div className='product-buying'>
<span className='shipping-fee'>
Expand All @@ -141,35 +84,35 @@ export default function ProductDetail({ productData }) {
onClick={() => {
productNumHandler('reduce');
}}
>
-
</button>
></button>
<input
type='number'
value={productNum || ''}
onChange={directInputProductNumHandler}
/>
{/*
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
} */}

<button
onClick={() => {
productNumHandler('add');
}}
>
+
</button>
></button>
</div>
<span className='horizon-line'></span>
<div className='product-price'>
<span>총 상품 금액</span>
<div>
<span>총 수량 {productNum}개</span>
<div className='product-price-quantity'>
<span>
총 수량 <strong>{productNum}</strong>개
</span>
<span>|</span>
<span>
{(productDetail.price * productNum).toLocaleString()}원
<strong>
{(
productDetail.price * productNum +
productDetail.shipping_fee
).toLocaleString()}
</strong>
원
</span>
</div>
</div>
Expand All @@ -190,3 +133,219 @@ export default function ProductDetail({ productData }) {
</Section>
);
}

const Section = styled.section`
display: flex;
justify-content: center;
max-width: 1280px;
margin: 0 auto;
margin-top: 80px;
.wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
.detail-header {
display: flex;
width: 100%;
justify-content: center;
gap: 50px;
margin-bottom: 140px;
}
.product-image-container {
max-width: 600px;
width: 100%;
aspect-ratio: 1/1;
img {
max-width: 100%;
height: 100%;
object-fit: fill;
}
}
.buying-info {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-basis: 630px;
.product-summary {
span {
display: block;
}
span:nth-child(1) {
font-size: 18px;
color: #767676;
}
span:nth-child(2) {
margin-top: 16px;
margin-bottom: 20px;
font-size: 36px;
}
span:nth-child(3) {
font-size: 18px;
strong {
font-size: 36px;
font-weight: bold;
}
}
}
.product-buying {
.shipping-fee {
display: block;
font-size: 16px;
color: #767676;
margin-bottom: 20px;
}
.horizon-line {
display: block;
width: 100%;
height: 2px;
background-color: #c4c4c4;
}
}
.horizon-line:nth-child(4) {
margin-bottom: 30px;
}
.product-quantity-btns {
margin-top: 30px;
margin-bottom: 30px;
display: flex;
button {
border: 1px solid #c4c4c4;
width: 50px;
height: 50px;
cursor: pointer;
}
button:nth-child(1) {
background: url(${minusBtn}) no-repeat center;
border-radius: 5px 0 0 5px;
}
button:nth-child(3) {
background: url(${plusBtn}) no-repeat center;
border-radius: 0 5px 5px 0;
}
input {
width: 50px;
height: 50px;
font-size: 18px;
border: 1px solid #c4c4c4;
text-align: center;
padding: 0;
margin: 0;
box-sizing: border-box;
border-left: none;
border-right: none;
}
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
}
.product-price {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 30px;
span:nth-child(1) {
font-size: 18px;
font-weight: bold;
}
.product-price-quantity {
display: flex;
align-items: baseline;
span:nth-child(1) {
font-size: 18px;
color: #767676;
strong {
font-weight: 700;
color: #21bf48;
}
}
span:nth-child(2) {
display: inline-block;
color: #c4c4c4;
margin-left: 11px;
margin-right: 12px;
}
span:nth-child(3) {
font-size: 18px;
color: #21bf48;
strong {
font-size: 36px;
font-weight: 700;
}
}
}
}
.product-buying-buttons {
display: flex;
gap: 14px;
button {
display: block;
height: 60px;
border: none;
border-radius: 5px;
font-size: 18px;
font-weight: bold;
color: white;
}
button:nth-child(1) {
width: 416px;
background-color: #21bf48;
}
button:nth-child(2) {
width: 200px;
background-color: #767676;
}
}
}
.detail-desc {
width: 100%;
display: flex;
margin-bottom: 200px;
button {
display: block;
width: calc(100% / 4);
height: 60px;
color: #767676;
font-weight: bold;
border: none;
border-bottom: 6px solid #e0e0e0;
cursor: pointer;
}
button.active {
color: #21bf48;
border-color: #21bf48;
}
}
}
`;

0 comments on commit 2801c76

Please sign in to comment.