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

배포
TEAM-SYLUV · Jul 31, 2024 · 36b6d55 · 36b6d55
2 parents 5874982 + 03fc064
commit 36b6d55
Show file tree

Hide file tree

Showing 19 changed files with 405 additions and 150 deletions.
diff --git a/src/components/Cart/StoreList.js b/src/components/Cart/StoreList.js
@@ -11,35 +11,40 @@ const StoreList = ({ cartList, setCartList, isLoading }) => {
     const syluvAxios = useSyluvAxios();
     const navigate = useNavigate();
 
-    const putCart = useCallback(async () => {
-        const payload = cartList.map((item) => {
-            return {
-                cartId: item.cartid,
-                quantity: item.quantity,
-                isChecked: item.isChecked,
-            };
-        });
-        try {
-            await syluvAxios.put("/cart", payload);
-        } catch (err) {
-            console.log(err);
-        }
-    }, [cartList]);
-
-    if (isLoading) return <Splash />;
-
-    const stores = cartList.reduce((acc, item) => {
-        acc[item.storeName] = acc[item.storeName] || [];
-        acc[item.storeName].push(item);
-        return acc;
-    }, {});
-
-    const totalAmount = cartList.reduce(
-        (acc, item) => acc + item.price * item.quantity,
-        0
+    const toggleStoreCheck = useCallback(
+        (storeName, isChecked) => {
+            setCartList((prevCartList) => {
+                return prevCartList.map((item) => {
+                    // 현재 스토어의 모든 아이템이 체크되어 있는지 확인
+                    const allItemsChecked = prevCartList
+                        .filter((i) => i.storeName === storeName)
+                        .every((i) => i.isChecked);
+
+                    // 스토어가 체크 해제되는 경우
+                    if (!isChecked) {
+                        if (allItemsChecked) {
+                            // 모든 아이템이 체크되어 있다면 아이템도 함께 체크 해제
+                            if (item.storeName === storeName) {
+                                return { ...item, isChecked };
+                            }
+                        } else {
+                            // 그렇지 않다면 아이템 상태 유지
+                            return item;
+                        }
+                    } else {
+                        // 스토어가 체크되는 경우 아이템 상태 변경
+                        if (item.storeName === storeName) {
+                            return { ...item, isChecked };
+                        }
+                    }
+                    return item;
+                });
+            });
+        },
+        [setCartList]
     );
 
-    const changeCartList = (cartId, updatedProperties) => {
+    const changeCartList = useCallback((cartId, updatedProperties) => {
         if (updatedProperties.quantity === 0) {
             setCartList((prevCartList) =>
                 prevCartList.filter((item) => item.cartid !== cartId)
@@ -63,37 +68,20 @@ const StoreList = ({ cartList, setCartList, isLoading }) => {
                 quantity: updatedProperties.quantity,
             },
         ]);
-    };
-
-    const toggleStoreCheck = (storeName, isChecked) => {
-        setCartList((prevCartList) => {
-            return prevCartList.map((item) => {
-                // 현재 스토어의 모든 아이템이 체크되어 있는지 확인
-                const allItemsChecked = prevCartList
-                    .filter((i) => i.storeName === storeName)
-                    .every((i) => i.isChecked);
-
-                // 스토어가 체크 해제되는 경우
-                if (!isChecked) {
-                    if (allItemsChecked) {
-                        // 모든 아이템이 체크되어 있다면 아이템도 함께 체크 해제
-                        if (item.storeName === storeName) {
-                            return { ...item, isChecked };
-                        }
-                    } else {
-                        // 그렇지 않다면 아이템 상태 유지
-                        return item;
-                    }
-                } else {
-                    // 스토어가 체크되는 경우 아이템 상태 변경
-                    if (item.storeName === storeName) {
-                        return { ...item, isChecked };
-                    }
-                }
-                return item;
-            });
-        });
-    };
+    }, []);
+
+    if (isLoading) return <Splash />;
+
+    const stores = cartList.reduce((acc, item) => {
+        acc[item.storeName] = acc[item.storeName] || [];
+        acc[item.storeName].push(item);
+        return acc;
+    }, {});
+
+    const totalAmount = cartList.reduce(
+        (acc, item) => acc + item.price * item.quantity,
+        0
+    );
 
     return (
         <CartList>

diff --git a/src/components/Common/Search.js b/src/components/Common/Search.js
@@ -2,30 +2,30 @@ import { ReactComponent as SearchIcon } from "assets/images/search.svg";
 import { useCallback, useState } from "react";
 import styled from "styled-components";
 import Hangul from "hangul-js";
+import { useNavigate } from "react-router-dom";
 
-const Search = () => {
+const Search = ({ marketList }) => {
+    const navigate = useNavigate();
     const [searchInput, setSearchInput] = useState("");
-    const marketList = [
-        "광동시장",
-        "광명시장",
-        "광장시장",
-        "광안리시장",
-        "광교시장",
-        // 추가할 시장 목록
-    ];
 
     const filteredMarkets = marketList.filter(
-        (market) => Hangul.search(market, searchInput) >= 0
+        (market) => Hangul.search(market.marketName, searchInput) >= 0
     );
 
     const handleChange = useCallback((e) => {
         setSearchInput(e.target.value);
     }, []);
 
-    const handleKeyDown = useCallback((event) => {
-        if (event.key === "Enter") {
-        }
-    }, []);
+    const handleKeyDown = useCallback(
+        (event) => {
+            if (event.key === "Enter") {
+                if (filteredMarkets.length > 0) {
+                    navigate(`/market/${filteredMarkets[0].marketId}`);
+                }
+            }
+        },
+        [filteredMarkets]
+    );
 
     return (
         <Container>
@@ -41,7 +41,14 @@ const Search = () => {
                     <div>
                         {filteredMarkets.length > 0 ? (
                             filteredMarkets.map((market, index) => (
-                                <span key={index}>{market}</span>
+                                <span
+                                    key={index}
+                                    onClick={() => {
+                                        navigate(`/market/${market.marketId}`);
+                                    }}
+                                >
+                                    {market.marketName}
+                                </span>
                             ))
                         ) : (
                             <NoResults>검색 결과가 없습니다.</NoResults>

diff --git a/src/components/Home/HotMarket.js b/src/components/Home/HotMarket.js
@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import star from "assets/images/star-fill.png";
 
-const HotMarket = () => {
+const HotMarket = ({ market }) => {
     return (
         <Wrapper className="body">
             <img
@@ -10,14 +10,18 @@ const HotMarket = () => {
                 alt="최근 방문한 시장"
             />
             <div className="body-info">
-                <span className="body-text">광장시장</span>
+                <span className="body-text">{market.marketName}</span>
                 <div>
                     <div className="body-content">
                         <img src={star} alt="rating" width="14px" />
                         <div>4.2</div>
-                        <span>최근 300명 방문</span>
+                        <span>
+                            최근{" "}
+                            {market.totalQrvisit ? market.totalQrvisit : "0"}명
+                            방문
+                        </span>
                     </div>
-                    <span>서울시 종로구 창경궁로 88</span>
+                    <span>{market.location}</span>
                 </div>
             </div>
         </Wrapper>

diff --git a/src/components/Home/LatestMarket.js b/src/components/Home/LatestMarket.js
@@ -1,9 +1,16 @@
 import star from "assets/images/star-fill.png";
+import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
 
 const LatestMarket = ({ market }) => {
+    const navigate = useNavigate();
     return (
-        <Wrapper className="body">
+        <Wrapper
+            className="body"
+            onClick={() => {
+                navigate(`/market/${market.marketId}`);
+            }}
+        >
             <img
                 className="market-image"
                 src="https://via.placeholder.com/150"

diff --git a/src/components/Home/NearbyMarket.js b/src/components/Home/NearbyMarket.js
@@ -1,19 +1,55 @@
 import styled from "styled-components";
 import { ReactComponent as Location } from "assets/images/location.svg";
 import { useNavigate } from "react-router-dom";
+import useSyluvAxios from "hooks/useSyluvAxios";
+import { useCallback, useEffect, useState } from "react";
+import { useGeoLocation } from "hooks/useGeoLocation";
+import Splash from "components/Common/Splash";
 
-const NearbyMarket = () => {
+const geolocationOptions = {
+    enableHighAccuracy: true,
+    timeout: 5000,
+    maximumAge: 1000 * 3600 * 24,
+};
+
+const NearbyMarket = ({ username }) => {
     const navigate = useNavigate();
+    const syluvAxios = useSyluvAxios();
+    const { location, error } = useGeoLocation(geolocationOptions);
+    const [nearMarket, setNearMarket] = useState("...");
+
+    const getLocation = useCallback(() => {
+        syluvAxios
+            .get("/home/nearmarket", {
+                params: {
+                    xloc: location.latitude,
+                    yloc: location.longitude,
+                },
+            })
+            .then((res) => {
+                setNearMarket(res.data.payload);
+            });
+    }, [location, syluvAxios]);
+
+    useEffect(() => {
+        if (location) {
+            getLocation();
+        }
+    }, [location]);
+
     return (
         <Container>
             <span className="title">
-                김강민님과
+                {username}님과
                 <br />
                 지금 가까운 시장은?
             </span>
-            <div className="location" onClick={() => navigate("/market/1")}>
+            <div
+                className="location"
+                onClick={() => navigate(`/market/${nearMarket.marketId}`)}
+            >
                 <Location />
-                <span>광장시장</span>
+                <span>{nearMarket.marketName}</span>
             </div>
         </Container>
     );
@@ -45,6 +81,7 @@ const Container = styled.div`
             font-size: 20px;
             font-weight: ${(props) => props.theme.fontWeight.bold};
             color: ${(props) => props.theme.color.primary};
+            cursor: pointer;
         }
     }
 `;
diff --git a/src/components/Market/EditList.js b/src/components/Market/EditList.js
@@ -26,13 +26,14 @@ export default EditList;
 const Wrapper = styled.div`
     position: relative;
     height: 58dvh;
+    padding-bottom: 90px;
 `;
 
 const Infomation = styled.div`
-    position: absolute;
-    width: calc(100% - 40px);
+    position: fixed;
+    width: 440px;
     margin-bottom: 20px;
-    left: 20px;
+    margin-left: 20px;
     height: 43px;
     border-radius: 4px;
     background-color: ${({ theme }) => theme.color.gray400};
@@ -45,6 +46,10 @@ const Infomation = styled.div`
     font-size: 14px;
     color: white;
     font-weight: ${({ theme }) => theme.fontWeight.medium};
+
+    @media (max-width: 480px) {
+        width: calc(100vw - 40px);
+    }
 `;
 
 const ListContainer = styled.div`

diff --git a/src/components/Market/EditVisitItem.js b/src/components/Market/EditVisitItem.js
@@ -7,7 +7,7 @@ const EditVisitItem = ({ item, handleSelect = () => {} }) => {
 
     const handleClick = () => {
         setIsChecked(!isChecked);
-        handleSelect(item.id);
+        handleSelect(item.visitListId);
     };
 
     return (

diff --git a/src/components/Market/MarketItem.js b/src/components/Market/MarketItem.js
@@ -14,6 +14,7 @@ const MarketItem = ({
     imgSrc = "https://via.placeholder.com/150",
     marketId = 0,
     visitList,
+    onChange = () => {},
 }) => {
     const navigate = useNavigate();
     const syluvAxios = useSyluvAxios();
@@ -32,11 +33,15 @@ const MarketItem = ({
     }, [visitList, storeId]);
 
     const handleVisit = () => {
-        syluvAxios.post(`/market/${storeId}/visitlist`, {
-            storeId: storeId,
-        });
-        setIsVisitClicked(false);
-        setIsSelected(true);
+        syluvAxios
+            .post(`/market/${storeId}/visitlist`, {
+                storeId: storeId,
+            })
+            .finally(() => {
+                onChange();
+                setIsVisitClicked(false);
+                setIsSelected(true);
+            });
     };
 
     const handleClick = () => {
@@ -59,9 +64,12 @@ const MarketItem = ({
                             .delete(`/market/${visitListId}/visitlist/delete`)
                             .then((response) => {
                                 setIsSelected(false);
+                            })
+                            .finally(() => {
+                                onChange();
                             });
                     } else {
-                        handleVisit();
+                        setIsVisitClicked(true);
                     }
                 }}
                 selected={isSelected}