diff --git a/src/components/Market/MarketInfo.js b/src/components/Market/MarketInfo.js index e9c56a8..48cb31c 100644 --- a/src/components/Market/MarketInfo.js +++ b/src/components/Market/MarketInfo.js @@ -46,6 +46,7 @@ const MarketImg = styled.img` width: 100%; height: 144px; border-radius: 12px; + object-fit: cover; `; const InfoContainer = styled.div` diff --git a/src/components/Market/VisitItem.js b/src/components/Market/VisitItem.js index 9d38042..2766eca 100644 --- a/src/components/Market/VisitItem.js +++ b/src/components/Market/VisitItem.js @@ -14,6 +14,7 @@ const VisitItem = ({ isLast, openId, handleOpenModal = () => {}, + onClickItem = () => {}, }) => { const [clickable, setClickable] = useState(false); const [status, setStatus] = useState(null); @@ -75,11 +76,10 @@ const VisitItem = ({
{ - navigate(`/market/1/${item.storeId}`, { - state: { item: item }, - }); - }} + onClick={() => + // onClickItem(item.latitude, item.longitude) + navigate(`/store/${item.storeId}`) + } > store
diff --git a/src/components/Market/VisitList.js b/src/components/Market/VisitList.js index 0e5aeb0..ca31112 100644 --- a/src/components/Market/VisitList.js +++ b/src/components/Market/VisitList.js @@ -2,7 +2,7 @@ import styled from "styled-components"; import VisitItem from "./VisitItem"; import { useState } from "react"; -const VisitList = ({ visitList }) => { +const VisitList = ({ visitList, onClickItem = () => {} }) => { const [openedModal, setOpenedModal] = useState(null); const handleOpenModal = (id) => { setOpenedModal(id); @@ -19,6 +19,7 @@ const VisitList = ({ visitList }) => { key={index} // 추가된 부분: key prop openId={openedModal} handleOpenModal={handleOpenModal} + onClickItem={onClickItem} /> ))} diff --git a/src/components/Market/VisitTab.js b/src/components/Market/VisitTab.js index 4496b15..746bf3d 100644 --- a/src/components/Market/VisitTab.js +++ b/src/components/Market/VisitTab.js @@ -1,7 +1,7 @@ import styled from "styled-components"; import VisitList from "./VisitList"; import { Map, MapMarker, Polyline } from "react-kakao-maps-sdk"; -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import EditList from "./EditList"; import useSyluvAxios from "hooks/useSyluvAxios"; import { useGeoLocation } from "hooks/useGeoLocation"; @@ -22,20 +22,21 @@ const VisitTab = ({ const [isEdit, setIsEdit] = useState(false); const [selectedList, setSelectedList] = useState([]); const syluvAxios = useSyluvAxios(); - const [firstPosition, setFirstPosition] = useState({ + const [mapCenter, setMapCenter] = useState({ latitude: visitList[0]?.latitude, longitude: visitList[0]?.longitude, + level: 3, }); const { location, error } = useGeoLocation(geolocationOptions); useEffect(() => { if (visitList.length > 0) { - setFirstPosition({ + setMapCenter({ latitude: visitList[0]?.latitude, longitude: visitList[0]?.longitude, }); } else { - setFirstPosition({ + setMapCenter({ latitude: location?.latitude, longitude: location?.longitude, }); @@ -73,6 +74,20 @@ const VisitTab = ({ } }; + const moveCenter = useCallback((latitude, longitude) => { + setMapCenter({ + latitude, + longitude, + level: 1, + }); + + // 스크롤 이동 + window.scrollTo({ + top: 0, + behavior: "smooth", + }); + }, []); + const createMarkerSvg = (number) => { const svg = ` @@ -84,10 +99,7 @@ const VisitTab = ({ return `data:image/svg+xml;base64,${btoa(svg)}`; }; - if ( - firstPosition.latitude === undefined || - firstPosition.longitude === undefined - ) { + if (mapCenter.latitude === undefined || mapCenter.longitude === undefined) { return ; } @@ -96,13 +108,14 @@ const VisitTab = ({ {/* 내 위치 마커 */} {/* {visitList.length > 0 ? ( - <> + 오늘의 방문 리스트 {isEdit ? ( @@ -159,9 +172,12 @@ const VisitTab = ({ handleSelect={handleSelect} /> ) : ( - + )} - + ) : ( @@ -207,4 +223,9 @@ const NavBar = styled.div` const Container = styled.div` display: flex; flex-direction: column; + max-height: 100dvh; +`; + +const BodyContainer = styled.div` + overflow-y: auto; `; diff --git a/src/components/Order/Payment.js b/src/components/Order/Payment.js index 12a7522..a05bba4 100644 --- a/src/components/Order/Payment.js +++ b/src/components/Order/Payment.js @@ -29,6 +29,8 @@ const Payments = ({ pickUpRoute, }); + const deleteDash = (str) => str.replace(/-/g, ""); + useEffect(() => { const totalAmount = data.reduce( (total, item) => total + item.price * item.quantity, @@ -84,7 +86,7 @@ const Payments = ({ failUrl: `${window.location.origin}/order/fail`, customerEmail: newOrderData.userData.email, customerName: newOrderData.userData.name, - customerMobilePhone: newOrderData.phone, + customerMobilePhone: deleteDash(newOrderData.phone), card: { useEscrow: false, flowMode: "DEFAULT", diff --git a/src/components/Store/MenuItemDetail.js b/src/components/Store/MenuItemDetail.js index bf0f3a8..8c82251 100644 --- a/src/components/Store/MenuItemDetail.js +++ b/src/components/Store/MenuItemDetail.js @@ -1,11 +1,10 @@ import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; -import { ReactComponent as BackIcon } from "assets/images/back.svg"; -import { ReactComponent as CartIcon } from "assets/images/marketbag.svg"; -import { ReactComponent as HomeIcon } from "assets/images/newhome.svg"; +import HomeIcon from "assets/icons/HomeIcon"; +import BackIcon from "assets/icons/BackIcon"; +import CartIcon from "assets/icons/CartIcon"; import useSyluvAxios from "hooks/useSyluvAxios"; import Splash from "components/Common/Splash"; -import styled from "styled-components"; import { Container, ImageContainer, @@ -26,6 +25,9 @@ import { VisitModal, ModalButton, CartBadge, + HeaderBack1, + HeaderBack2, + HeaderBack3, } from "./MenuItemDetailStyle"; const MenuItemDetail = ({ menu }) => { @@ -52,16 +54,26 @@ const MenuItemDetail = ({ menu }) => { return; } - try { - console.log("Adding new item to cart..."); - const addResponse = await syluvAxios.post(`/cart`, { - menuId: menuId, - quantity: quantity, - }); + console.log("Adding to cart..."); + console.log("Menu ID: ", menuId); + console.log("Menu Name: ", menuName); + console.log("Quantity: ", quantity); + try { + console.log("Adding new item to cart..."); + const addResponse = await syluvAxios.post(`/cart`, { + menuId: menuId, + quantity: quantity, + }); + console.log("Add Response: ", addResponse.data); // 장바구니 다시 불러오기 const updatedCartResponse = await syluvAxios.get("/cart"); + console.log( + "Updated Cart items: ", + updatedCartResponse.data.payload + ); + console.log("장바구니 업데이트 완료"); setShowModal(true); // 모달 표시 } catch (addError) { console.error( @@ -82,17 +94,20 @@ const MenuItemDetail = ({ menu }) => { return ( + navigate(-1)} aria-label="뒤로가기"> - + - navigate("/")} aria-label="홈으로"> - + + navigate("/")}> + + navigate("/cart")} aria-label="장바구니로" > - + {showModal && {quantity}} {menu.name} @@ -118,7 +133,7 @@ const MenuItemDetail = ({ menu }) => { - {menu.price}원 담기 + {menu.price * quantity}원 담기 {showModal && ( diff --git a/src/components/Store/MenuItemDetailStyle.js b/src/components/Store/MenuItemDetailStyle.js index f135ac9..0c76c1e 100644 --- a/src/components/Store/MenuItemDetailStyle.js +++ b/src/components/Store/MenuItemDetailStyle.js @@ -46,6 +46,30 @@ export const CartButton = styled.div` padding: 8px; `; +const HeaderBack = styled.div` + position: absolute; + opacity: 0.3; + background-color: black; + width: 40px; + height: 40px; + border-radius: 50%; +`; + +export const HeaderBack3 = styled(HeaderBack)` + top: 16px; + left: 16px; +`; + +export const HeaderBack1 = styled(HeaderBack)` + top: 16px; + right: 64px; +`; + +export const HeaderBack2 = styled(HeaderBack)` + top: 16px; + right: 20px; +`; + export const CartBadge = styled.div` position: absolute; top: 5px; @@ -159,8 +183,6 @@ export const AddToCartButton = styled.button` border: none; border-radius: 8px; bottom: 10px; - /* left: 50%; - transform: translateX(-50%); */ margin: 0 20px; @media (max-width: 480px) { width: calc(100% - 40px); diff --git a/src/components/Store/ReviewItem.js b/src/components/Store/ReviewItem.js index ad43e2e..20cd175 100644 --- a/src/components/Store/ReviewItem.js +++ b/src/components/Store/ReviewItem.js @@ -169,7 +169,23 @@ const ReviewItem = ({ Array.isArray(review.image) && review.image.length > 1 && ( - + {review.image.map((image, index) => ( {helpfulness}명에게 도움이 되었어요
{ + console.log("HelpfulButton clicked"); handleHelpfulnessClick(); }} $active={isHelpfulClicked} diff --git a/src/owner/components/MenuEditTab.js b/src/owner/components/MenuEditTab.js index 4d8650f..27347f1 100644 --- a/src/owner/components/MenuEditTab.js +++ b/src/owner/components/MenuEditTab.js @@ -40,15 +40,11 @@ const MenuEditTab = ({ items, setItems, storeId }) => { formData.append("file", newItem.menuImage); // assuming newItem.file is a File object try { - const response = await syluvAxios.post( - `/customer/${storeId}/addmenu`, - formData, - { - headers: { - "Content-Type": "multipart/form-data", - }, - } - ); + await syluvAxios.post(`/customer/${storeId}/addmenu`, formData, { + headers: { + "Content-Type": "multipart/form-data", + }, + }); setItems([...items, newItem]); // Assuming the API returns the new item } catch (error) { console.error("Error adding item:", error); diff --git a/src/owner/components/OrderManageItem.js b/src/owner/components/OrderManageItem.js index 737bfe6..39a76db 100644 --- a/src/owner/components/OrderManageItem.js +++ b/src/owner/components/OrderManageItem.js @@ -1,8 +1,8 @@ -import Button from "components/Common/Button"; import ButtonModal from "components/Common/ButtonModal"; import Splash from "components/Common/Splash"; import useSyluvAxios from "hooks/useSyluvAxios"; import { useCallback, useEffect, useState } from "react"; +import { useParams } from "react-router-dom"; import styled from "styled-components"; const OrderManageItem = ({ item, handleItem = () => {} }) => { @@ -10,6 +10,7 @@ const OrderManageItem = ({ item, handleItem = () => {} }) => { const [isLoading, setIsLoading] = useState(true); const syluvAxios = useSyluvAxios(); const [modal, setModal] = useState(); + const { storeId } = useParams(); const formatAmount = (amount) => { return amount.toLocaleString(); @@ -24,17 +25,21 @@ const OrderManageItem = ({ item, handleItem = () => {} }) => { setStatus("방문 대기"); } setIsLoading(false); - }, [item]); + }, [item.orderStatus]); const handleStauts = useCallback(() => { if (status === "접수") { - syluvAxios.post(`/customer/17/2/preparing`).then((res) => { - setStatus("준비 완료"); - }); + syluvAxios + .post(`/customer/${storeId}/${item.orderId}/preparing`) + .then((res) => { + setStatus("준비 완료"); + }); } else if (status === "준비 완료") { - syluvAxios.post(`/customer/17/7/prepared`).then((res) => { - setStatus("방문 대기"); - }); + syluvAxios + .post(`/customer/${storeId}/${item.orderId}/prepared`) + .then((res) => { + setStatus("방문 대기"); + }); } }, [status]); @@ -55,6 +60,8 @@ const OrderManageItem = ({ item, handleItem = () => {} }) => { } }; + const padZero = (num) => num.toString().padStart(2, "0"); + if (isLoading) { return ; } @@ -66,8 +73,12 @@ const OrderManageItem = ({ item, handleItem = () => {} }) => {
{item.pickUpRoute === "픽업하기" - ? `픽업(${item.visitHour}:${item.visitMin})` - : `가게 이용(${item.visitHour}:${item.visitMin})`} + ? `픽업(${padZero(item.visitHour)}:${padZero( + item.visitMin + )})` + : `가게 이용(${padZero( + item.visitHour + )}:${padZero(item.visitMin)})`} 주문시각: {formatTime(item.createdAt)} @@ -80,12 +91,13 @@ const OrderManageItem = ({ item, handleItem = () => {} }) => { status === "접수" || status === "방문 대기" ? "accept" : "" - } + } ${status === "방문 대기" ? "complete" : ""} `} onClick={() => - status === "접수" + status !== "방문 대기" && + (status === "접수" ? setModal("accept") - : setModal("complete") + : setModal("complete")) } > {status} @@ -95,7 +107,7 @@ const OrderManageItem = ({ item, handleItem = () => {} }) => {
{ - handleItem(item); + handleItem(item, status); }} > @@ -183,6 +195,9 @@ const OrderContainer = styled.div` background-color: white; color: ${({ theme }) => theme.color.primary}; } + .complete { + cursor: default; + } margin-bottom: 20px; } border-bottom: 1px solid ${({ theme }) => theme.color.gray100}; diff --git a/src/owner/components/OrderManageTab.js b/src/owner/components/OrderManageTab.js index c982c29..887ee26 100644 --- a/src/owner/components/OrderManageTab.js +++ b/src/owner/components/OrderManageTab.js @@ -1,4 +1,4 @@ -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import styled from "styled-components"; import OrderManageItem from "./OrderManageItem"; import OwnerDetailPage from "owner/pages/OwnerDetailPage"; @@ -11,6 +11,7 @@ const OrderManageTab = ({ storeId }) => { const [endItems, setEndItems] = useState([]); const [newItems, setNewItems] = useState([]); const [detailItem, setDetailItem] = useState(null); + const [detailStatus, setDetailStatus] = useState(); useEffect(() => { syluvAxios @@ -18,8 +19,10 @@ const OrderManageTab = ({ storeId }) => { .then((res) => { setItems(res.data.payload); }) - .catch((err) => {}); - }, []); + .catch((err) => { + setItems([]); + }); + }, [storeId]); useEffect(() => { const newItems = items.filter((item) => item.status !== "VISITED"); @@ -28,13 +31,37 @@ const OrderManageTab = ({ storeId }) => { setEndItems(endItems); }, [items]); - const handleDetailItem = (item) => { + const handleDetailItem = useCallback((item, status) => { setDetailItem(item); - }; + setDetailStatus(status); + }, []); + + const handleAccept = useCallback((orderId) => { + syluvAxios + .post(`/customer/${storeId}/${orderId}/preparing`) + .then((res) => { + setItems((prev) => { + return prev.map((item) => { + if (item.orderId === orderId) { + return { ...item, orderStatus: "PREPARING" }; + } + return item; + }); + }); + }) + .catch((err) => { + console.error(err); + }); + }, []); if (detailItem !== null) { return ( - + ); } diff --git a/src/owner/components/OwnerHeader.js b/src/owner/components/OwnerHeader.js index 1853e06..a080ef9 100644 --- a/src/owner/components/OwnerHeader.js +++ b/src/owner/components/OwnerHeader.js @@ -3,23 +3,14 @@ import { useNavigate } from "react-router-dom"; import useSyluvAxios from "hooks/useSyluvAxios"; import { useEffect, useState } from "react"; -const OwnerHeader = ({ name }) => { - const syluvAxios = useSyluvAxios(); +const OwnerHeader = ({ name, stores }) => { const navigate = useNavigate(); - const [storeData, setStoreData] = useState([]); + const storeData = stores || []; const handleSelectStore = (storeId) => { navigate(`/owner/${storeId}`); }; - useEffect(() => { - syluvAxios.get(`/store/info`).then((res) => { - setStoreData(res.data.payload); - }); - }, []); - - console.log(storeData); - return (
{name}
diff --git a/src/owner/pages/OwnerDetailPage.js b/src/owner/pages/OwnerDetailPage.js index f7a6947..db88ed7 100644 --- a/src/owner/pages/OwnerDetailPage.js +++ b/src/owner/pages/OwnerDetailPage.js @@ -5,9 +5,9 @@ import styled from "styled-components"; const OwnerDetailPage = ({ item, + status, handleItem = () => {}, - handleCancel = () => {}, - handleSuccess = () => {}, + handleAccept = () => {}, }) => { const handleDate = (date) => { // "2024-08-01T01:54:46" -> "2024.08.01 오후 1:54" @@ -30,7 +30,7 @@ const OwnerDetailPage = ({
handleItem(null)} + onLeftClick={() => handleItem(null, null)} />
@@ -41,7 +41,7 @@ const OwnerDetailPage = ({ 주문자명: {item.userName}
{item.menu.map((order) => ( - + ))}
@@ -55,23 +55,18 @@ const OwnerDetailPage = ({ 토스페이
- -