Skip to content

Commit

Permalink
Merge pull request #68 from THEGOODs-repo/Fix/ShoppingList
Browse files Browse the repository at this point in the history 
Fix/shopping list
  • Loading branch information
@gracelee5
gracelee5 authored Aug 15, 2024
2 parents 4af4cf7 + 553867f commit 910f8bf
Show file tree
Hide file tree
Showing 5 changed files with 88 additions and 106 deletions.
90 changes: 45 additions & 45 deletions src/Components/Posting/PostList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,51 +22,51 @@ const PostItem = styled.div`
width: 100%;
`;
//{ posts = [] } 추가하기 api 완성되면!
const PostList = () => {
const posts = [
{
id: 1,
userProfile: NewjeansProfile,
nickname: "뉴진스",
postDate: "1일",
content:
"NewJeans ID Card 판매 조사합니다. 구매 의향이 있으시면 좋아요 눌러주세요!!",
images: NewjeansImage,
likeCount: 102,
commentCount: 0,
},
{
id: 2,
userProfile: IUProfile,
nickname: "아이유애나",
postDate: "2일",
content: "아이유 도무송 스티커 판매 시작되었습니다!",
images: IUImage,
likeCount: 40,
commentCount: 27,
},
{
id: 3,
userProfile: IUProfile,
nickname: "아이유애나",
postDate: "2일",
content: "아이유 도무송 스티커 판매 시작되었습니다!3",
images: null,
likeCount: 40,
commentCount: 27,
},
{
id: 4,
userProfile: IUProfile,
nickname: "아이유애나",
postDate: "2일",
content: "아이유 도무송 스티커 판매 시작되었습니다!4",
images: IUImage,
likeCount: 40,
commentCount: 27,
},
// 다른 포스트들...
];
const PostList = ({ posts = [] }) => {
// const posts = [
// {
// id: 1,
// userProfile: NewjeansProfile,
// nickname: "뉴진스",
// postDate: "1일",
// content:
// "NewJeans ID Card 판매 조사합니다. 구매 의향이 있으시면 좋아요 눌러주세요!!",
// images: NewjeansImage,
// likeCount: 102,
// commentCount: 0,
// },
// {
// id: 2,
// userProfile: IUProfile,
// nickname: "아이유애나",
// postDate: "2일",
// content: "아이유 도무송 스티커 판매 시작되었습니다!",
// images: IUImage,
// likeCount: 40,
// commentCount: 27,
// },
// {
// id: 3,
// userProfile: IUProfile,
// nickname: "아이유애나",
// postDate: "2일",
// content: "아이유 도무송 스티커 판매 시작되었습니다!3",
// images: null,
// likeCount: 40,
// commentCount: 27,
// },
// {
// id: 4,
// userProfile: IUProfile,
// nickname: "아이유애나",
// postDate: "2일",
// content: "아이유 도무송 스티커 판매 시작되었습니다!4",
// images: IUImage,
// likeCount: 40,
// commentCount: 27,
// },
// // 다른 포스트들...
// ];
return (
<PostBox>
{posts.length > 0 ? (
Expand Down
37 changes: 17 additions & 20 deletions src/Components/ShoppingCart/OrderModificationModal.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,20 +27,18 @@ const OrderModificationModal = ({
}
}, [selectedOptions]);

const handleDecreaseAmount = (cartDetailId) => {
const handleDecreaseAmount = () => {
const updatedOptions = selectedOptions.map((option) => {
if (option.cartDetailId === cartDetailId) {
return {
...option,
amount: Math.max(option.amount - 1, 1),
};
}
return option;
// amount가 1보다 큰 경우에만 줄어들도록 수정
return {
...option,
amount: option.amount > 1 ? option.amount - 1 : option.amount,
};
});
setSelectedOptions(updatedOptions);
};

const handleIncreaseAmount = (cartDetailId) => {
const handleIncreaseAmount = () => {
const updatedOptions = selectedOptions.map((option) => {
const stockQuantity = getStockQuantity(option.itemOptionId);
if (option.amount + 1 <= stockQuantity) {
Expand Down Expand Up @@ -137,14 +135,14 @@ const OrderModificationModal = ({
};

const getStockQuantity = (itemOptionId) => {
if (
stockInfo &&
stockInfo.result &&
stockInfo.result.cartOptionStockDTOList
) {
if (stockInfo && Array.isArray(stockInfo)) {
// 재고 정보 배열을 순회하면서 itemOptionId와 일치하는 아이템을 찾습니다.
for (const stockData of stockInfo.result.cartOptionStockDTOList) {
if (stockData.itemOptionId === itemOptionId) {
for (const stockData of stockInfo) {
// itemOptionId가 null이거나 일치하는 경우 재고를 반환합니다.
if (
stockData.itemOptionId === itemOptionId ||
stockData.itemOptionId === null
) {
return stockData.stock; // 해당 아이템의 재고를 반환합니다.
}
}
Expand Down Expand Up @@ -194,15 +192,13 @@ const OrderModificationModal = ({
</div>

<QuantityControl>
<Button onClick={() => handleDecreaseAmount(option.cartId)}>
-
</Button>
<Button onClick={() => handleDecreaseAmount()}>-</Button>
<AmountInput>
<span style={{ marginTop: "9px" }}>{option.amount}</span>
</AmountInput>

<Button
onClick={() => handleIncreaseAmount(option.cartId)}
onClick={() => handleIncreaseAmount()}
disabled={
option.amount >= getStockQuantity(option.itemOptionId)
}
Expand Down Expand Up @@ -351,6 +347,7 @@ const Button = styled.div`
height: 3vh;
text-align: center;
border: 1px solid rgba(32, 33, 35, 0.8);
cursor: pointer;
`;
const CheckPosition = styled.div`
margin-left: 1vw;
Expand Down
29 changes: 11 additions & 18 deletions src/Components/ShoppingCart/ProductItem.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ const ProductItem = ({
deliveryFee,
isChecked,
itemId,
cartId,
onToggle,
}) => {
const dispatch = useDispatch();
Expand All @@ -26,6 +25,7 @@ const ProductItem = ({

const token = useSelector((state) => state.login.token);
const [stockInfo, setStockInfo] = useState([]); // 재고 정보 상태 추가
const cartId = cartOptionViewDTOList.cartId;

const fetchStockInfo = async () => {
try {
Expand All @@ -37,7 +37,7 @@ const ProductItem = ({
},
},
);
setStockInfo(response.data);
setStockInfo(response.data.result.cartOptionStockDTOList);
} catch (error) {
console.error("Error fetching stock info:", error);
}
Expand All @@ -47,6 +47,10 @@ const ProductItem = ({
fetchStockInfo();
}, [itemId, cartId, token]);

useEffect(() => {
console.log("Updated stock:", stockInfo);
}, [stockInfo]);

// 전체 선택 상태가 변경될 때 isCheckedAll 상태 업데이트
useEffect(() => {
setIsCheckedAll(isChecked);
Expand All @@ -73,14 +77,6 @@ const ProductItem = ({
const navigate = useNavigate(); // useNavigate 훅을 사용하여 navigate 함수 얻기

const handleOrderClick = () => {
const item = {
itemId,
sellerName,
itemName,
itemImg,
deliveryFee,
cartOptionViewDTOList,
};
if (isCheckedAll) {
dispatch(emptyOrderItems());
dispatch(
Expand All @@ -105,15 +101,13 @@ const ProductItem = ({
const handleModifyOrderClick = () => {
setIsModalOpen(true);
};
// 각 옵션의 가격과 개수를 곱하여 합산하는 함수

const calculateOptionTotalPrice = () => {
let totalPrice = 0;

if (!Array.isArray(cartOptionViewDTOList)) {
console.error("cartOptionViewDTOList가 배열이 아닙니다.");
if (!cartOptionViewDTOList || !Array.isArray(cartOptionViewDTOList)) {
console.error("cartOptionViewDTOList가 유효하지 않거나 배열이 아닙니다.");
return 0;
}

cartOptionViewDTOList.forEach((option) => {
if (
option &&
Expand Down Expand Up @@ -311,7 +305,7 @@ const SellerBox = styled.div`
`;

const SellerName = styled.p`
margin-top: 0vw;
margin-top: -0.5vw;
font-family: "Noto Sans";
font-style: normal;
font-weight: 700;
Expand Down Expand Up @@ -486,7 +480,6 @@ const OptionOrder = styled.button`
height: ${43 / 19.2}vw;
margin-left: 2vw;
margin-top: ${20 / 19.2}vw;
background:;
background-color: ${(props) =>
props.isActive ? "#F0C920" : "rgba(156, 156, 156, 0.8)"};
border: 1px solid rgba(156, 156, 156, 0.5);
Expand Down Expand Up @@ -538,4 +531,4 @@ const Text = styled.p`
text-align: center;
margin-top: 6.5vh;
color: #202123;
`;
`;
37 changes: 15 additions & 22 deletions src/Components/ShoppingCart/ShoppingCart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { updateSelectedItems } from "./selectedItemsSlice";
import { setOrderItems, emptyOrderItems } from "../../redux/orderSlice";

const ShoppingCart = ({ cartItems }) => {
const [isChecked, setIsChecked] = useState(false);
const [isTotalChecked, setIsTotalChecked] = useState(false);
const dispatch = useDispatch();
const [selectedItems, setSelectedItems] = useState([]);
Expand All @@ -23,27 +22,30 @@ const ShoppingCart = ({ cartItems }) => {
useEffect(() => {
//console.log("dispatch실행");
dispatch(updateSelectedItems(selectedItems));
}, [selectedItems]);

useEffect(() => {
setTotalPrice(calculateTotalOrderPrice(selectedItems));
}, [selectedItems]);

const calculateTotalOrderPrice = (items) => {
if (!items) return 0;
if (!items || !Array.isArray(items)) return 0;

let totalPrice = 0;
items.forEach((item) => {
totalPrice += item.deliveryFee;
item.cartDetailViewDTOList.forEach((option) => {
totalPrice += option.price * option.amount;
});
if (item && typeof item === "object") {
totalPrice += item.deliveryFee || 0;
if (Array.isArray(item.cartOptionViewDTOList)) {
item.cartOptionViewDTOList.forEach((option) => {
if (option && typeof option === "object") {
totalPrice += (option.price || 0) * (option.amount || 0);
}
});
}
}
});
return totalPrice;
};

const handleOrderButtonClick = () => {
console.log(selectedItems);
console.log("selectedItems", selectedItems);
dispatch(emptyOrderItems());
selectedItems.forEach((selectedItem) =>
dispatch(
Expand All @@ -53,7 +55,7 @@ const ShoppingCart = ({ cartItems }) => {
itemName: selectedItem.itemName,
itemImg: selectedItem.itemImg,
deliveryFee: selectedItem.deliveryFee,
optionList: selectedItem.cartDetailViewDTOList.map((detail) => ({
optionList: selectedItem.cartOptionViewDTOList.map((detail) => ({
optionId: detail.optionId,
optionName: detail.optionName,
optionPrice: detail.price,
Expand Down Expand Up @@ -100,14 +102,6 @@ const ShoppingCart = ({ cartItems }) => {
}
};

const handleItemToggle = (item, isChecked) => {
if (isChecked) {
setCheckedItems([...checkedItems, item.cartId]);
} else {
setCheckedItems(checkedItems.filter((id) => id !== item.cartId));
}
};

const handleDeleteSelectedItems = () => {
const cartIdList = selectedItems
.filter((item) => item !== null)
Expand Down Expand Up @@ -181,10 +175,9 @@ const ShoppingCart = ({ cartItems }) => {
sellerName={cartItem.sellerName}
itemName={cartItem.itemName}
itemImg={cartItem.itemImg}
cartOptionViewDTOList={cartItem.cartOptionViewDTOList}
cartOptionViewDTOList={cartItem.cartOptionViewDTOList || []}
deliveryFee={cartItem.deliveryFee}
onUpdate={handleConfirmChanges}
cartId={cartItem.cartId}
isChecked={checkedItems.includes(cartItem.cartId)}
onToggle={(item, isChecked) => handleToggleItem(item, isChecked)}
/>
Expand Down Expand Up @@ -379,4 +372,4 @@ const ItemCount = styled.button`
height: 1.5vw;
margin-bottom: 10px;
margin-left: 0.5vw;
`;
`;
1 change: 0 additions & 1 deletion src/Pages/ShoppingList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ const ShoppingList = () => {
"https://dev.the-goods.store/api/cart",
header,
);
console.log(response);
setCartData(response.data.result.cartViewDTOList);
} catch (error) {
console.error("Error fetching data:", error);
Expand Down

0 comments on commit 910f8bf

Please sign in to comment.