diff --git a/src/assets/images/dropdown.png b/src/assets/images/dropdown.png new file mode 100644 index 0000000..28b8d50 Binary files /dev/null and b/src/assets/images/dropdown.png differ diff --git a/src/assets/images/reload.svg b/src/assets/images/reload.svg new file mode 100644 index 0000000..fe684eb --- /dev/null +++ b/src/assets/images/reload.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/assets/images/syrup_icon.svg b/src/assets/images/syrup_icon.svg new file mode 100644 index 0000000..7d77fb5 --- /dev/null +++ b/src/assets/images/syrup_icon.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Market/CartegoryBar.js b/src/components/Market/CartegoryBar.js index ee34575..4a9a18e 100644 --- a/src/components/Market/CartegoryBar.js +++ b/src/components/Market/CartegoryBar.js @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import styled from "styled-components"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; @@ -6,6 +6,7 @@ import "swiper/css/navigation"; const CategoryBar = ({ categories, onClick }) => { const [selectedCategory, setSelectedCategory] = useState("전체"); + const [slidesPerView, setSlidesPerView] = useState(6); const handleClick = (category) => { if (category === "전체") { @@ -16,9 +17,28 @@ const CategoryBar = ({ categories, onClick }) => { setSelectedCategory(category); }; + useEffect(() => { + // Function to adjust the slides per view based on the window width + const handleResize = () => { + if (window.innerWidth <= 400) { + setSlidesPerView(5); + } else { + setSlidesPerView(6); + } + }; + + // Add the event listener when the component mounts + window.addEventListener("resize", handleResize); + + // Cleanup function to remove the event listener on unmount + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + return ( - + {categories.map((categories) => ( props.selected ? `1px solid ${props.theme.color.primary}` diff --git a/src/components/Store/MenuItem.js b/src/components/Store/MenuItem.js index a1f02cd..6a19aef 100644 --- a/src/components/Store/MenuItem.js +++ b/src/components/Store/MenuItem.js @@ -1,11 +1,12 @@ import React, { useState } from "react"; import styled from "styled-components"; -//커밋 +import defaultImage from "assets/images/syrup_icon.svg"; + const MenuItemWrapper = styled.div` display: flex; align-items: center; margin-bottom: 28px; - cursor: pointer; // 클릭 가능한 커서 추가 + cursor: pointer; `; const MenuItemImage = styled.img` @@ -44,9 +45,13 @@ const MenuItemDescription = styled.p` `; const MenuItem = ({ item, onClick }) => { + console.log(item); const formatPrice = (price) => { return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); }; + + const imageSrc = item.menuImage ? item.menuImage : defaultImage; + return ( { @@ -55,7 +60,7 @@ const MenuItem = ({ item, onClick }) => { } }} > - + {item.name} {formatPrice(item.price)}원 diff --git a/src/hooks/useOrderStore.js b/src/hooks/useOrderStore.js index c202129..45c6faf 100644 --- a/src/hooks/useOrderStore.js +++ b/src/hooks/useOrderStore.js @@ -20,6 +20,11 @@ const useOrderStore = create((set, get) => ({ localStorage.setItem("orderData", JSON.stringify(data)); // 데이터를 로컬 스토리지에 저장 set({ orderData: data }); // Zustand 스토어 업데이트 }, + + deleteGlobalOrderData: () => { + localStorage.removeItem("orderData"); // 로컬 스토리지에서 데이터 삭제 + set({ orderData: {} }); // Zustand 스토어 업데이트 + }, })); export default useOrderStore; diff --git a/src/owner/components/AddModal.js b/src/owner/components/AddModal.js index 8059790..64b8679 100644 --- a/src/owner/components/AddModal.js +++ b/src/owner/components/AddModal.js @@ -24,9 +24,12 @@ const AddModal = ({ onClose = () => {}, onAdd = () => {} }) => { const handlePhotoChange = (e) => { if (e.target.files && e.target.files[0]) { + const file = e.target.files[0]; + const localUrl = URL.createObjectURL(file); setMenu({ ...menu, - menuImage: e.target.files[0], + menuImage: localUrl, + serverImage: file, }); } }; @@ -41,10 +44,7 @@ const AddModal = ({ onClose = () => {}, onAdd = () => {} }) => {
{menu.menuImage ? ( - uploaded + uploaded ) : ( <> 사진을 추가해주세요 diff --git a/src/owner/components/MenuEditTab.js b/src/owner/components/MenuEditTab.js index 27347f1..3aea788 100644 --- a/src/owner/components/MenuEditTab.js +++ b/src/owner/components/MenuEditTab.js @@ -20,7 +20,7 @@ const MenuEditTab = ({ items, setItems, storeId }) => { !newItem.name || !newItem.price || !newItem.content || - !newItem.menuImage + !newItem.serverImage ) { setToastMessage("올바르지 않은 메뉴 정보입니다."); return; @@ -37,7 +37,7 @@ const MenuEditTab = ({ items, setItems, storeId }) => { new Blob([JSON.stringify(dto)], { type: "application/json" }) ); - formData.append("file", newItem.menuImage); // assuming newItem.file is a File object + formData.append("file", newItem.serverImage); // assuming newItem.file is a File object try { await syluvAxios.post(`/customer/${storeId}/addmenu`, formData, { diff --git a/src/owner/components/OwnerHeader.js b/src/owner/components/OwnerHeader.js index 05a76f3..67c409d 100644 --- a/src/owner/components/OwnerHeader.js +++ b/src/owner/components/OwnerHeader.js @@ -1,13 +1,13 @@ import styled from "styled-components"; import { useNavigate } from "react-router-dom"; -import { ReactComponent as Syluv } from "assets/images/syluv-small.svg"; import { useState } from "react"; import ButtonModal from "components/Common/ButtonModal"; +import { ReactComponent as ReloadIcon } from "assets/images/reload.svg"; const OwnerHeader = ({ name, stores }) => { + const [isClicked, setIsClicked] = useState(false); const navigate = useNavigate(); const storeData = stores || []; - const [openModal, setOpenModal] = useState(false); const handleSelectStore = (storeId) => { navigate(`/owner/${storeId}`); @@ -15,50 +15,71 @@ const OwnerHeader = ({ name, stores }) => { return ( <> + {isClicked && ( + { + navigate("/"); + }} + onRightClick={() => { + setIsClicked(false); + }} + /> + )}
-
- setOpenModal(true)} - /> - {name} -
- + + { + setIsClicked(true); + }} + > + +
- {openModal && ( - navigate("/")} - onRightClick={() => setOpenModal(false)} - /> - )} ); }; export default OwnerHeader; +const Selecter = styled.select` + cursor: pointer; + border: none; + outline: none; + border-radius: 10px; + margin-left: 20px; + option { + border: none; + } + font-size: 20px; + font-weight: ${({ theme }) => theme.fontWeight.bold}; + appearance: none; + + background-color: white; +`; + const Header = styled.div` height: 52px; background-color: white; display: flex; align-items: center; justify-content: space-between; + font-weight: ${({ theme }) => theme.fontWeight.bold}; color: ${({ theme }) => theme.color.gray900}; .title { @@ -69,15 +90,24 @@ const Header = styled.div` align-items: center; gap: 12px; } +`; + +const Reload = styled.div` + margin-right: 20px; + + background-color: white; + box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); + border-radius: 100%; + + display: flex; + justify-content: center; + align-items: center; + + cursor: pointer; - select { - margin-right: 22px; - font-size: 16px; - border: 1px solid ${({ theme }) => theme.color.gray300}; - border-radius: 10px; - outline: none; - width: 100px; - height: 30px; - padding: 0 10px; + // 마우스 호버시 앞위로 뒤집히는 효과 + transition: transform 0.3s; + &:hover { + transform: rotate(180deg); } `; diff --git a/src/owner/pages/OwnerPage.js b/src/owner/pages/OwnerPage.js index a357d93..9af9518 100644 --- a/src/owner/pages/OwnerPage.js +++ b/src/owner/pages/OwnerPage.js @@ -53,7 +53,9 @@ const OwnerPage = () => { setItems={setItems} /> ) : ( - + <> + + ) ) : ( diff --git a/src/pages/MyPage.js b/src/pages/MyPage.js index 653b605..6e98728 100644 --- a/src/pages/MyPage.js +++ b/src/pages/MyPage.js @@ -89,6 +89,14 @@ const MyPage = () => {
계정 + { + navigate("/owner"); + }} + > + 상인 계정 전환 + + { handleLogout(); diff --git a/src/pages/OrderDetailPage.js b/src/pages/OrderDetailPage.js index 24c5b9c..72fa11d 100644 --- a/src/pages/OrderDetailPage.js +++ b/src/pages/OrderDetailPage.js @@ -74,9 +74,9 @@ const OrderDetailPage = () => {
{ const syluvAxios = axios.create({ withCredentials: true, baseURL: baseURL + "/v1", - timeout: 10000, + timeout: 100000, }); let token = getAccessToken();