Skip to content

Commit

Permalink
Issue#309 ~ing (#310)
Browse files Browse the repository at this point in the history 
* [chore] refactoring read/add/delete/edit cartList #244

* [feat] fix add cart / read cartList and delivery Fee

* [feat] fix add cart / read cartList and delivery Fee

* [feat] add cart (License)

---------

Co-authored-by: Dongwoo <[email protected]>
  • Loading branch information
@Autumn-Rainfall @Dongwoo-CU
Autumn-Rainfall and Dongwoo-CU authored Nov 22, 2023
1 parent 9f78f8d commit 25e2625
Show file tree
Hide file tree
Showing 3 changed files with 94 additions and 37 deletions.
18 changes: 9 additions & 9 deletions src/axios/cart/Cart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,17 @@ import {
PRODUCT_OPTION,
} from '../../constants/api';

export default function post(dto, file) {
export default function post(dto, file, isCustom) {
const formData = new FormData();
formData.append('file', file);
if (isCustom) formData.append('file', file);
formData.append('dto', new Blob([JSON.stringify(dto)], { type: CONTENT_TYPE.ApplicationJson }));
if (sessionStorage.getItem(ACCESS_TOKEN)) {
axios
.post(ADD_CART, formData, {
headers: {
Authorization: sessionStorage.getItem(ACCESS_TOKEN),
'Content-Type': CONTENT_TYPE.MultipartFormData,
},
.post(ADD_CART(), formData, {
headers: {
Authorization: sessionStorage.getItem(ACCESS_TOKEN),
"Content-Type": CONTENT_TYPE.MultipartFormData,
},
})
.then(() => {
alert('장바구니에 담겼습니다!');
Expand All @@ -51,13 +51,13 @@ export const fetchCartData = (token, setCartList, setEmptyMode, setProductOption
};

axios
.get(CART_LIST, { headers })
.get(CART_LIST(), { headers })
.then((response) => {
setCartList(response.data);
if (!response.data || response.data === '') {
setEmptyMode(true);
} else {
axios.get(PRODUCT_OPTION, { headers }).then((response) => {
axios.get(PRODUCT_OPTION(), { headers }).then((response) => {
setProductOption(response.data[0].productOptionList);
});
}
Expand Down
28 changes: 24 additions & 4 deletions src/component/order/OrderOptions.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export default function OrderOptions({ productId, productInfo, price, setPrice }
const [mode, setMode] = useState('');
const [additionalPrice, setAdditionalPrice] = useState({});
const [quantity, setQuantity] = useState(1);
const [licenseId, setLicenseId] = useState('');

useEffect(() => {
setFrameOption({});
Expand Down Expand Up @@ -56,12 +57,16 @@ export default function OrderOptions({ productId, productInfo, price, setPrice }
const options = Object.values(frameOption).map((item) => {
return item.id;
});
const image = e.target.file.files[0];
const data = {
productId: productInfo?.id,
optionDetailIds: options,
quantity: parseInt(quantity),
};
const isCustom = productInfo?.custom;
let image = null;
if (isCustom) {
image = e.target.file.files[0];
}
imageFile = image;
let pass = true;

Expand All @@ -75,18 +80,29 @@ export default function OrderOptions({ productId, productInfo, price, setPrice }
pass = false;
}
});
if (!imageFile) {
if (!imageFile && isCustom) {
Swal.fire({
title: '이미지를 입력해주세요',
icon: 'warning',
});
window.location.href = '#add-image';
pass = false;
}
if (!isCustom) {
data.optionDetailIds = [licenseId, ...options];
if (licenseId == '') {
Swal.fire({
title: '라이선스 이미지를 입력해주세요',
icon: 'warning',
});
window.location.href = '#add-image';
pass = false;
}
}
switch (mode) {
case ORDER_MODE.CART:
if (!pass) break;
post(data, imageFile);
post(data, imageFile, isCustom);
break;
case ORDER_MODE.BUY:
if (!pass) break;
Expand Down Expand Up @@ -123,6 +139,7 @@ export default function OrderOptions({ productId, productInfo, price, setPrice }
custom={productInfo.custom}
optionItems={license.optionItems}
moveToEditor={moveToEditor}
setLicenseId={setLicenseId}
/>
<Quantity
productName={productInfo.name}
Expand Down Expand Up @@ -211,7 +228,7 @@ const Options = ({ options, onHandleChange }) => {
);
};

const AddImage = ({ custom, optionItems, moveToEditor }) => {
const AddImage = ({ custom, optionItems, moveToEditor, setLicenseId }) => {
return (
<>
{custom ? (
Expand All @@ -234,6 +251,9 @@ const AddImage = ({ custom, optionItems, moveToEditor }) => {
<img
src={optionItem.artUrl}
alt={optionItem.artName}
onClick={() => {
setLicenseId(optionItem.id);
}}
onContextMenu={(e) => {
e.preventDefault();
}}
Expand Down
85 changes: 61 additions & 24 deletions src/screen/cart/CartList.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useState, useRef } from 'react';
import './Cart.css';
import './CartPrice.css';
import 'bootstrap/dist/css/bootstrap.min.css';
Expand All @@ -17,9 +17,11 @@ import { MAIN, PAYMENT } from '../../constants/path';
export default function CartList({ setEmptyMode }) {
const isDesktopOrMobile = useMediaQuery({ query: '(max-width:768px)' });
const navigate = useNavigate();
const fileInputRef = useRef(null);

const [checkedList, setCheckedList] = useState([]);
const [totalPrice, setTotalPrice] = useState(0.0);
const [deliveryPrice, setDeliveryPrice] = useState(0.0);
const [paymentValue, setPaymentValue] = useState([]);
const [editMode, setEditMode] = useState(false);
const [formValue, setFormValue] = useState({});
Expand All @@ -30,8 +32,17 @@ export default function CartList({ setEmptyMode }) {
let [customProductId, setCustomProductId] = useState('');
let basicFormValue = {};
const onImageChange = (e) => {
const img = e.target.files[0];
setImageFile(img);
const file = e.target.files[0];
if (file) {
const imageUrl = URL.createObjectURL(file);
setImageFile({ file, imageUrl });
}
};
const onImageClick = () => {
const fileInput = document.getElementById('fileInput');
if (fileInput) {
fileInput.click();
}
};
const onHandleSubmit = (e) => {
e.preventDefault();
Expand Down Expand Up @@ -63,14 +74,15 @@ export default function CartList({ setEmptyMode }) {
setCustomProductId(id);
setFormValue(basicFormValue);
setQuantity(quantity);
setImageFile('');
};
const onHandleChange = (value, optionId) => {
setFormValue({
...formValue,
[optionId]: value,
});
};
const onCheckedElement = (checked, item, price, options, quantity, url) => {
const onCheckedElement = (checked, item, price, options, quantity, url, deliveryFee) => {
const frameOption = {};
options.map((option) => {
frameOption[option.optionName] = option.detailName;
Expand All @@ -85,11 +97,13 @@ export default function CartList({ setEmptyMode }) {
if (checked) {
setCheckedList([...checkedList, item]);
setTotalPrice(totalPrice + price);
setDeliveryPrice(deliveryPrice + (deliveryFee * quantity));
setPaymentValue([...paymentValue, thisValue]);
} else if (!checked) {
setCheckedList(checkedList.filter((element) => element !== item));
setPaymentValue(paymentValue.filter((data) => data.id !== item));
setTotalPrice(totalPrice - price);
setDeliveryPrice(deliveryPrice - (deliveryFee * quantity));
}
};

Expand Down Expand Up @@ -120,7 +134,7 @@ export default function CartList({ setEmptyMode }) {
}, [cartData]);

function pay() {
if (checkedList === '') {
if (checkedList == '') {
alert('체크된 장바구니 항목이 없습니다');
} else {
navigate(PAYMENT, {
Expand Down Expand Up @@ -151,11 +165,12 @@ export default function CartList({ setEmptyMode }) {
<tr>
<th width='5%'></th>
<th width='15%'>제품명</th>
<th width='15%'>제품가격</th>
<th width='25%'>옵션</th>
<th width='15%'>첨부사진</th>
<th width='10%'>수량</th>
<th width='15%'>주문금액</th>
<th width='10%'>제품가격</th>
<th width='35%'>옵션</th>
<th width='10%'>첨부사진</th>
<th width='7%'>수량</th>
<th width='9%'>주문금액</th>
<th width='9%'>배송비</th>
</tr>
</thead>
<tbody>
Expand All @@ -180,11 +195,12 @@ export default function CartList({ setEmptyMode }) {
<tr>
<th width='5%'></th>
<th width='15%'>제품명</th>
<th width='12%'>제품가격</th>
<th width='33%'>옵션</th>
<th width='10%'>제품가격</th>
<th width='35%'>옵션</th>
<th width='10%'>첨부사진</th>
<th width='10%'>수량</th>
<th width='15%'>주문금액</th>
<th width='7%'>수량</th>
<th width='9%'>주문금액</th>
<th width='9%'>배송비</th>
</tr>
</thead>
<tbody>
Expand Down Expand Up @@ -214,6 +230,7 @@ export default function CartList({ setEmptyMode }) {
item.options,
item.quantity,
item.imageUrl,
item.deliveryFee,
);
}}
></input>
Expand All @@ -230,13 +247,18 @@ export default function CartList({ setEmptyMode }) {
</th>
<th>
<button onClick={() => window.open(item.imageUrl, '_blank')}>
[이미지 링크]
<img
src={item.imageUrl}
alt='이미지 링크'
style={{ width: '100%', height: 'auto', cursor: 'pointer' }}
/>
</button>
</th>
<th>{item.quantity}</th>
<th>{addComma(orderAmount)}원</th>
<th>{addComma(item.deliveryFee)}원</th>
</tr>
<tr style={hidden[idx] ? { display: 'none' } : { display: '' }}>
<tr style={hidden[idx] ? { display: 'none' } : { display: '', backgroundColor: '#f0f0f0' }}>
<th></th>
<th></th>
<th></th>
Expand Down Expand Up @@ -268,12 +290,24 @@ export default function CartList({ setEmptyMode }) {
</div>
</th>
<th>
<input
type='file'
accept='image/*'
name='file'
onChange={onImageChange}
></input>
{imageFile !== '' ? (
<div onClick={onImageClick}>
<img
src={imageFile.imageUrl}
alt='Selected'
style={{ width: '100%', height: 'auto', cursor: 'pointer' }}
/>
</div>
) : (
<input
type='file'
accept='image/*'
name='file'
onChange={onImageChange}
className='form-control'
id='fileInput'
/>
)}
</th>
<th>
<input
Expand All @@ -288,6 +322,7 @@ export default function CartList({ setEmptyMode }) {
/>
</th>
<th></th>
<th></th>
</tr>
</>
);
Expand Down Expand Up @@ -331,12 +366,14 @@ export default function CartList({ setEmptyMode }) {
</div>
<div className='shipping'>
<p className='title'>배송비</p>
<p className='price'>무료</p>
<p className='price'>
{deliveryPrice === 0.0 ? '무료' : ` ${addComma(deliveryPrice)} 원`}
</p>
</div>
</div>
<div className='total'>
<p className='title'>총 결제 금액</p>
<p className='price'>{addComma(totalPrice)} 원</p>
<p className='price'>{addComma(totalPrice + deliveryPrice)} 원</p>
</div>
</div>
<Payment></Payment>
Expand Down

0 comments on commit 25e2625

Please sign in to comment.