Merge pull request #114 from TEAM-SYLUV/develop

Develop
TEAM-SYLUV · Aug 6, 2024 · fce9128 · fce9128
2 parents e2c2a28 + 0c6e8ce
commit fce9128
Show file tree

Hide file tree

Showing 13 changed files with 157 additions and 48 deletions.
diff --git a/src/assets/images/dropdown.png b/src/assets/images/dropdown.png
diff --git a/src/assets/images/reload.svg b/src/assets/images/reload.svg
diff --git a/src/assets/images/syrup_icon.svg b/src/assets/images/syrup_icon.svg
diff --git a/src/components/Market/CartegoryBar.js b/src/components/Market/CartegoryBar.js
@@ -1,11 +1,12 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 import { Swiper, SwiperSlide } from "swiper/react";
 import "swiper/css";
 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 (
         <CategoryContainer>
-            <Swiper slidesPerView={6} spaceBetween={8}>
+            <Swiper slidesPerView={slidesPerView} spaceBetween={8}>
                 {categories.map((categories) => (
                     <SwiperSlide key={categories}>
                         <Category
@@ -43,10 +63,11 @@ const CategoryContainer = styled.div`
     display: flex;
     gap: 12px;
     margin-bottom: 12px;
-    text-wrap: nowrap;
 `;
 
 const Category = styled.div`
+    word-wrap: keep-all;
+    word-break: keep-all;
     border: ${(props) =>
         props.selected
             ? `1px solid ${props.theme.color.primary}`

diff --git 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 (
         <MenuItemWrapper
             onClick={() => {
@@ -55,7 +60,7 @@ const MenuItem = ({ item, onClick }) => {
                 }
             }}
         >
-            <MenuItemImage src={item.menuImage} alt={item.name} />
+            <MenuItemImage src={imageSrc} alt={item.name} />
             <MenuItemInfo>
                 <MenuItemName>{item.name}</MenuItemName>
                 <MenuItemPrice>{formatPrice(item.price)}원</MenuItemPrice>

diff --git 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
@@ -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 = () => {} }) => {
             <div className="body">
                 <div className="photo">
                     {menu.menuImage ? (
-                        <img
-                            src={URL.createObjectURL(menu.menuImage)}
-                            alt="uploaded"
-                        />
+                        <img src={menu.menuImage} alt="uploaded" />
                     ) : (
                         <>
                             <span>사진을 추가해주세요</span>

diff --git 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
@@ -1,64 +1,85 @@
 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}`);
     };
 
     return (
         <>
+            {isClicked && (
+                <ButtonModal
+                    title="계정 유형 전환"
+                    subText="일반 사용자 계정으로 전환하시겠습니까?"
+                    left="이동"
+                    right="취소"
+                    onLeftClick={() => {
+                        navigate("/");
+                    }}
+                    onRightClick={() => {
+                        setIsClicked(false);
+                    }}
+                />
+            )}
             <Header>
-                <div className="title">
-                    <Syluv
-                        cursor={"pointer"}
-                        onClick={() => setOpenModal(true)}
-                    />
-                    {name}
-                </div>
-                <select
+                <Selecter
                     onChange={(e) => handleSelectStore(e.target.value)}
                     defaultValue=""
                 >
                     <option value="" disabled>
-                        가게 이동
+                        가게를 선택해주세요.
                     </option>
                     {storeData.map((store) => (
                         <option key={store.storeId} value={store.storeId}>
                             {store.name}
                         </option>
                     ))}
-                </select>
+                </Selecter>
+                <Reload
+                    onClick={() => {
+                        setIsClicked(true);
+                    }}
+                >
+                    <ReloadIcon alt="reload" />
+                </Reload>
             </Header>
-            {openModal && (
-                <ButtonModal
-                    title="일반 사용자 뷰 방문하기"
-                    subText="홈으로 이동하시겠습니까?"
-                    left="이동"
-                    right="취소"
-                    onLeftClick={() => 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
@@ -53,7 +53,9 @@ const OwnerPage = () => {
                         setItems={setItems}
                     />
                 ) : (
-                    <OrderManageTab storeId={storeId} />
+                    <>
+                        <OrderManageTab storeId={storeId} />
+                    </>
                 )
             ) : (
                 <Wrapper>

diff --git a/src/pages/MyPage.js b/src/pages/MyPage.js
@@ -89,6 +89,14 @@ const MyPage = () => {
                             <div>
                                 <span className="menu-title">계정</span>
                                 <Line />
+                                <span
+                                    onClick={() => {
+                                        navigate("/owner");
+                                    }}
+                                >
+                                    상인 계정 전환
+                                </span>
+                                <Line />
                                 <span
                                     onClick={() => {
                                         handleLogout();

diff --git a/src/pages/OrderDetailPage.js b/src/pages/OrderDetailPage.js
@@ -74,9 +74,9 @@ const OrderDetailPage = () => {
         <Container>
             <Header
                 title="주문상세"
-                rightText="삭제"
+                // rightText="삭제"
                 cart={false}
-                handleRight={deleteOrder}
+                // handleRight={deleteOrder}
                 backSrc={-1}
             />
             <SimpleReceipt

diff --git a/src/utils/syluvAxios.js b/src/utils/syluvAxios.js
@@ -55,7 +55,7 @@ const CreateSyluvAxios = (navigate) => {
     const syluvAxios = axios.create({
         withCredentials: true,
         baseURL: baseURL + "/v1",
-        timeout: 10000,
+        timeout: 100000,
     });
 
     let token = getAccessToken();