Merge pull request #94 from LikeLion-Hackathon-T1/develop

[DEPLOY] QA 1차 배포

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`

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 = ({
                 <Wrapper>
                     <div
                         className="store"
-                        onClick={() => {
-                            navigate(`/market/1/${item.storeId}`, {
-                                state: { item: item },
-                            });
-                        }}
+                        onClick={() =>
+                            // onClickItem(item.latitude, item.longitude)
+                            navigate(`/store/${item.storeId}`)
+                        }
                     >
                         <img src={item.imageUrl} alt="store" />
                         <div className="store-info">

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}
                     />
                 </Container>
             ))}

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 = `
           <svg width="28" height="32" viewBox="0 0 28 32" fill="none" xmlns="http://www.w3.org/2000/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 <Splash />;
     }
 
@@ -96,13 +108,14 @@ const VisitTab = ({
             <Map
                 style={{
                     width: "100%",
-                    height: "224px",
+                    height: "420px",
                 }}
                 center={{
-                    lat: firstPosition.latitude,
-                    lng: firstPosition.longitude,
+                    lat: mapCenter.latitude,
+                    lng: mapCenter.longitude,
                 }}
-                level={1}
+                isPanto={true}
+                level={mapCenter.level}
             >
                 {/* 내 위치 마커 */}
                 {/* <MapMarker
@@ -128,7 +141,7 @@ const VisitTab = ({
                 ))}
             </Map>
             {visitList.length > 0 ? (
-                <>
+                <BodyContainer>
                     <NavBar>
                         <span className="text-title">오늘의 방문 리스트</span>
                         {isEdit ? (
@@ -159,9 +172,12 @@ const VisitTab = ({
                             handleSelect={handleSelect}
                         />
                     ) : (
-                        <VisitList visitList={visitList} />
+                        <VisitList
+                            visitList={visitList}
+                            onClickItem={moveCenter}
+                        />
                     )}
-                </>
+                </BodyContainer>
             ) : (
                 <ItemContainer>
                     <NoItem />
@@ -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;
 `;

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",

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 (
         <Container>
             <ImageContainer>
+                <HeaderBack3 />
                 <BackButton onClick={() => navigate(-1)} aria-label="뒤로가기">
-                    <BackIcon />
+                    <BackIcon color="white" />
                 </BackButton>
-                <HomeButton onClick={() => navigate("/")} aria-label="홈으로">
-                    <HomeIcon />
+                <HeaderBack1 />
+                <HomeButton onClick={() => navigate("/")}>
+                    <HomeIcon color="white" />
                 </HomeButton>
+                <HeaderBack2 />
                 <CartButton
                     onClick={() => navigate("/cart")}
                     aria-label="장바구니로"
                 >
-                    <CartIcon />
+                    <CartIcon color="white" />
                     {showModal && <CartBadge>{quantity}</CartBadge>}
                 </CartButton>
                 <Image src={menu.menuImage} alt={menu.name} />
@@ -118,7 +133,7 @@ const MenuItemDetail = ({ menu }) => {
                 </QuantityWrapper>
             </QuantityContainer>
             <AddToCartButton onClick={handleAddToCart}>
-                {menu.price}원 담기
+                {menu.price * quantity}원 담기
             </AddToCartButton>
             {showModal && (
                 <ModalBackground show={showModal}>

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);

src/components/Store/ReviewItem.js

@@ -169,7 +169,23 @@ const ReviewItem = ({
                 Array.isArray(review.image) &&
                 review.image.length > 1 && (
                     <ReviewImageContainerMultiple>
-                        <Swiper slidesPerView={1.7} spaceBetween={6}>
+                        <Swiper
+                            slidesPerView={1.7}
+                            breakpoints={{
+                                640: {
+                                    slidesPerView: 1.2,
+                                    spaceBetween: 10,
+                                },
+                                768: {
+                                    slidesPerView: 1.5,
+                                    spaceBetween: 15,
+                                },
+                                1024: {
+                                    slidesPerView: 1.7,
+                                    spaceBetween: 6,
+                                },
+                            }}
+                        >
                             {review.image.map((image, index) => (
                                 <SwiperSlide key={index}>
                                     <MultipleReviewImage
@@ -192,6 +208,7 @@ const ReviewItem = ({
                 <div>{helpfulness}명에게 도움이 되었어요</div>
                 <HelpfulButton
                     onClick={() => {
+                        console.log("HelpfulButton clicked");
                         handleHelpfulnessClick();
                     }}
                     $active={isHelpfulClicked}

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);