From 3e1a7b9318e86c484ee3896995c22c3a2f2b1757 Mon Sep 17 00:00:00 2001 From: yunseok Date: Wed, 31 Jul 2024 13:52:40 +0900 Subject: [PATCH 1/6] =?UTF-8?q?feat:=20=EB=B0=A9=EB=AC=B8=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=82=AD=EC=A0=9C=EA=B8=B0=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Market/EditList.js | 11 ++++-- src/components/Market/EditVisitItem.js | 2 +- src/components/Market/MarketItem.js | 14 +++++-- src/components/Market/MarketList.js | 8 +++- src/components/Market/MarketTab.js | 8 +++- src/components/Market/VisitTab.js | 53 ++++++++++++++++++++------ src/pages/MarketPage.js | 15 +++++++- 7 files changed, 88 insertions(+), 23 deletions(-) diff --git a/src/components/Market/EditList.js b/src/components/Market/EditList.js index 313e57b..2996efa 100644 --- 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 index bf80745..7f82ef5 100644 --- 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 index 6de36f6..365173b 100644 --- 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,9 +33,13 @@ const MarketItem = ({ }, [visitList, storeId]); const handleVisit = () => { - syluvAxios.post(`/market/${storeId}/visitlist`, { - storeId: storeId, - }); + syluvAxios + .post(`/market/${storeId}/visitlist`, { + storeId: storeId, + }) + .finally(() => { + onChange(); + }); setIsVisitClicked(false); setIsSelected(true); }; @@ -59,6 +64,9 @@ const MarketItem = ({ .delete(`/market/${visitListId}/visitlist/delete`) .then((response) => { setIsSelected(false); + }) + .finally(() => { + onChange(); }); } else { handleVisit(); diff --git a/src/components/Market/MarketList.js b/src/components/Market/MarketList.js index 891b09b..9715b3e 100644 --- a/src/components/Market/MarketList.js +++ b/src/components/Market/MarketList.js @@ -3,7 +3,12 @@ import MarketItem from "./MarketItem"; import useSyluvAxios from "hooks/useSyluvAxios"; import { useEffect, useState } from "react"; -const MarketList = ({ searchInfo, marketId = 0, visitList }) => { +const MarketList = ({ + searchInfo, + marketId = 0, + visitList, + onChange = () => {}, +}) => { const syluvAxios = useSyluvAxios(); const [storeList, setStoreList] = useState(null); @@ -39,6 +44,7 @@ const MarketList = ({ searchInfo, marketId = 0, visitList }) => { desc={store.description} imgSrc={store.image} visitList={visitList} + onChange={onChange} /> ))} diff --git a/src/components/Market/MarketTab.js b/src/components/Market/MarketTab.js index ecc5496..983d18c 100644 --- a/src/components/Market/MarketTab.js +++ b/src/components/Market/MarketTab.js @@ -20,7 +20,12 @@ const categories = [ "기타", ]; -const MarketTab = ({ marketInfo, marketHours, visitList }) => { +const MarketTab = ({ + marketInfo, + marketHours, + visitList, + onChange = () => {}, +}) => { const [searchInfo, setSearchInfo] = useState({ search: "", category: "", @@ -70,6 +75,7 @@ const MarketTab = ({ marketInfo, marketHours, visitList }) => { searchInfo={searchInfo} marketId={marketInfo?.marketId} visitList={visitList} + onChange={onChange} /> diff --git a/src/components/Market/VisitTab.js b/src/components/Market/VisitTab.js index 1c39fdc..a08e131 100644 --- a/src/components/Market/VisitTab.js +++ b/src/components/Market/VisitTab.js @@ -3,10 +3,12 @@ import VisitList from "./VisitList"; import { Map } from "react-kakao-maps-sdk"; import { useState } from "react"; import EditList from "./EditList"; +import useSyluvAxios from "hooks/useSyluvAxios"; -const VisitTab = ({ visitList }) => { +const VisitTab = ({ visitList, onChange = () => {} }) => { const [isEdit, setIsEdit] = useState(false); const [selectedList, setSelectedList] = useState([]); + const syluvAxios = useSyluvAxios(); const handleSelect = (id) => { if (selectedList.includes(id)) { @@ -16,6 +18,23 @@ const VisitTab = ({ visitList }) => { } }; + const handleDelete = async () => { + try { + await Promise.all( + selectedList.map((id) => + syluvAxios.delete(`/market/${id}/visitlist/delete`) + ) + ); + console.log("방문 리스트 삭제 성공"); + + setSelectedList([]); + onChange(selectedList); + setIsEdit(!isEdit); + } catch (error) { + console.error("방문 리스트 삭제 중 에러가 발생했습니다:", error); + } + }; + return ( { 오늘의 방문 리스트 {isEdit ? ( - { - setIsEdit(!isEdit); - }} - > - 삭제 - + selectedList.length > 0 ? ( + { + handleDelete(); + }} + > + 삭제 + + ) : ( + { + setIsEdit(!isEdit); + }} + > + 취소 + + ) ) : ( theme.color.primary}; + cursor: pointer; } .disabled { color: ${({ theme }) => theme.color.gray300}; - cursor: default; + cursor: pointer; } `; diff --git a/src/pages/MarketPage.js b/src/pages/MarketPage.js index a4335e2..96ee219 100644 --- a/src/pages/MarketPage.js +++ b/src/pages/MarketPage.js @@ -19,6 +19,12 @@ const MarketPage = () => { const [marketInfo, setMarketInfo] = useState(null); const [marketHours, setMarketHours] = useState(null); + const [listChanged, setListChanged] = useState(false); + + const onListChange = () => { + setListChanged(!listChanged); + }; + const { isLoading, data, isError, error } = useQuery({ queryKey: ["get-markets"], queryFn: () => syluvAxios.get(`/market/${marketId}/info`), @@ -51,7 +57,7 @@ const MarketPage = () => { error ); }); - }, []); + }, [listChanged]); if (isLoading) return ; if (isError) return
Error: {error.message}
; @@ -73,9 +79,14 @@ const MarketPage = () => { marketInfo={marketInfo} marketHours={marketHours} visitList={visitList} + onChange={onListChange} /> ) : ( - + )} ); From 2b74f94af2036af058e51e3f1daa826be77baec2 Mon Sep 17 00:00:00 2001 From: yunseok Date: Wed, 31 Jul 2024 14:12:28 +0900 Subject: [PATCH 2/6] =?UTF-8?q?feat:=20=EB=A7=88=EC=A7=84=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Cart/StoreList.js | 106 ++++++++++++++----------------- src/pages/MarketPage.js | 9 ++- 2 files changed, 55 insertions(+), 60 deletions(-) diff --git a/src/components/Cart/StoreList.js b/src/components/Cart/StoreList.js index ebdfffc..9986508 100644 --- a/src/components/Cart/StoreList.js +++ b/src/components/Cart/StoreList.js @@ -11,35 +11,42 @@ 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 ; - - 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 + console.log(cartList); + + 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 +70,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 ; + + 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 ( diff --git a/src/pages/MarketPage.js b/src/pages/MarketPage.js index 96ee219..5491d27 100644 --- a/src/pages/MarketPage.js +++ b/src/pages/MarketPage.js @@ -7,6 +7,7 @@ import { useParams } from "react-router-dom"; import useSyluvAxios from "hooks/useSyluvAxios"; import { useQuery } from "@tanstack/react-query"; import Splash from "components/Common/Splash"; +import styled from "styled-components"; const MarketPage = () => { const items = ["홈", "방문"]; @@ -66,7 +67,7 @@ const MarketPage = () => { setSelectedNav(navItem); }; return ( - <> +
{ onChange={onListChange} /> )} - + ); }; export default MarketPage; + +const Wrapper = styled.div` + margin-bottom: 20px; +`; From 70c0e6146183a560751615c332b61405b2ee0adf Mon Sep 17 00:00:00 2001 From: yunseok Date: Wed, 31 Jul 2024 14:51:34 +0900 Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=EC=88=AB=EC=9E=90=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Market/MarketItem.js | 6 +++--- src/components/Market/VisitItem.js | 2 +- src/components/Market/VisitModal.js | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/Market/MarketItem.js b/src/components/Market/MarketItem.js index 365173b..54894cd 100644 --- a/src/components/Market/MarketItem.js +++ b/src/components/Market/MarketItem.js @@ -39,9 +39,9 @@ const MarketItem = ({ }) .finally(() => { onChange(); + setIsVisitClicked(false); + setIsSelected(true); }); - setIsVisitClicked(false); - setIsSelected(true); }; const handleClick = () => { @@ -69,7 +69,7 @@ const MarketItem = ({ onChange(); }); } else { - handleVisit(); + setIsVisitClicked(true); } }} selected={isSelected} diff --git a/src/components/Market/VisitItem.js b/src/components/Market/VisitItem.js index 7ebf5d8..af4d2cd 100644 --- a/src/components/Market/VisitItem.js +++ b/src/components/Market/VisitItem.js @@ -25,7 +25,7 @@ const VisitItem = ({ }} > - {index} + {index + 1} {!isLast &&
} {/* 수정된 부분 */} diff --git a/src/components/Market/VisitModal.js b/src/components/Market/VisitModal.js index a160479..3f55eff 100644 --- a/src/components/Market/VisitModal.js +++ b/src/components/Market/VisitModal.js @@ -23,8 +23,8 @@ const Container = styled.div` position: fixed; top: 0; left: 0; - width: 100vw; - height: 100vh; + width: 100dvw; + height: 100dvh; display: flex; justify-content: center; align-items: flex-end; From b715711af06ac1fd60d3a26754a4257933929cde Mon Sep 17 00:00:00 2001 From: yunseok Date: Wed, 31 Jul 2024 16:22:40 +0900 Subject: [PATCH 4/6] =?UTF-8?q?feat:=20=ED=99=88=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=99=84=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Cart/StoreList.js | 2 - src/components/Common/Search.js | 37 +++++++++++------- src/components/Home/HotMarket.js | 13 +++++-- src/components/Home/LatestMarket.js | 10 ++++- src/components/Home/LatestMarketList.js | 1 + src/components/Home/NearbyMarket.js | 45 +++++++++++++++++++-- src/components/Market/MarketTab.js | 3 +- src/components/Market/VisitItem.js | 52 ++++++++++++++++++++----- src/components/Market/VisitList.js | 2 +- src/components/Market/VisitTab.js | 1 - src/hooks/useGeoLocation.js | 32 +++++++++++++++ src/pages/HomePage.js | 23 +++++++---- src/utils/OauthCallback.js | 4 +- 13 files changed, 177 insertions(+), 48 deletions(-) create mode 100644 src/hooks/useGeoLocation.js diff --git a/src/components/Cart/StoreList.js b/src/components/Cart/StoreList.js index 9986508..10f7142 100644 --- a/src/components/Cart/StoreList.js +++ b/src/components/Cart/StoreList.js @@ -11,8 +11,6 @@ const StoreList = ({ cartList, setCartList, isLoading }) => { const syluvAxios = useSyluvAxios(); const navigate = useNavigate(); - console.log(cartList); - const toggleStoreCheck = useCallback( (storeName, isChecked) => { setCartList((prevCartList) => { diff --git a/src/components/Common/Search.js b/src/components/Common/Search.js index 3a86c0a..ec233bc 100644 --- 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 ( @@ -41,7 +41,14 @@ const Search = () => {
{filteredMarkets.length > 0 ? ( filteredMarkets.map((market, index) => ( - {market} + { + navigate(`/market/${market.marketId}`); + }} + > + {market.marketName} + )) ) : ( 검색 결과가 없습니다. diff --git a/src/components/Home/HotMarket.js b/src/components/Home/HotMarket.js index af89b25..8a85ac5 100644 --- a/src/components/Home/HotMarket.js +++ b/src/components/Home/HotMarket.js @@ -1,7 +1,8 @@ import styled from "styled-components"; import star from "assets/images/star-fill.png"; -const HotMarket = () => { +const HotMarket = ({ market }) => { + console.log(market); return ( { alt="최근 방문한 시장" />
- 광장시장 + {market.marketName}
rating
4.2
- 최근 300명 방문 + + 최근{" "} + {market.totalQrvisit ? market.totalQrvisit : "0"}명 + 방문 +
- 서울시 종로구 창경궁로 88 + {market.location}
diff --git a/src/components/Home/LatestMarket.js b/src/components/Home/LatestMarket.js index 13de76d..783b7c1 100644 --- a/src/components/Home/LatestMarket.js +++ b/src/components/Home/LatestMarket.js @@ -1,9 +1,17 @@ import star from "assets/images/star-fill.png"; +import { useNavigate } from "react-router-dom"; import styled from "styled-components"; const LatestMarket = ({ market }) => { + console.log(market); + const navigate = useNavigate(); return ( - + { + navigate(`/market/${market.marketId}`); + }} + > { + console.log(latestMarkets); return ( 최근 방문한 시장 diff --git a/src/components/Home/NearbyMarket.js b/src/components/Home/NearbyMarket.js index 399d998..08ac39a 100644 --- 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 ( - 김강민님과 + {username}님과
지금 가까운 시장은? -
navigate("/market/1")}> +
navigate(`/market/${nearMarket.marketId}`)} + > - 광장시장 + {nearMarket.marketName}
); @@ -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/MarketTab.js b/src/components/Market/MarketTab.js index 983d18c..02ddafd 100644 --- a/src/components/Market/MarketTab.js +++ b/src/components/Market/MarketTab.js @@ -47,9 +47,10 @@ const MarketTab = ({ const handleCategory = (category) => { setSearchInfo({ - ...searchInfo, + search: "", category: category, }); + setSearchInput(""); }; return ( diff --git a/src/components/Market/VisitItem.js b/src/components/Market/VisitItem.js index af4d2cd..034fb00 100644 --- a/src/components/Market/VisitItem.js +++ b/src/components/Market/VisitItem.js @@ -1,7 +1,7 @@ import styled from "styled-components"; import { ReactComponent as Time } from "assets/images/visit_time.svg"; import { ReactComponent as Time2 } from "assets/images/visit_time2.svg"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import Button from "components/Common/Button"; const VisitItem = ({ @@ -11,12 +11,36 @@ const VisitItem = ({ openId, handleOpenModal = () => {}, }) => { + const [status, setStatus] = useState(null); + const [style, setStyle] = useState(true); + console.log(item); const onCompleteClick = () => { handleOpenModal(null); }; const onCancelClick = () => { handleOpenModal(null); }; + useEffect(() => { + switch (item.status) { + case "BEFORE": + setStatus("방문 전"); + break; + case "PREPARING": + setStatus("준비 중"); + setStyle(true); + break; + case "PREPARED": + setStatus("준비 완료"); + setStyle(true); + break; + case "VISITED": + setStatus("방문 완료"); + break; + default: + setStatus("Unknown status"); + break; + } + }, []); return ( <>
- - 분식 - {item.store} - -
-
-
{item.status}
+
+ {style ? :
{openId === index && ( @@ -218,4 +248,8 @@ const Wrapper = styled.div` color: ${({ theme }) => theme.color.gray300}; font-weight: ${({ theme }) => theme.fontWeight.medium}; } + + .color { + color: ${({ theme }) => theme.color.primary}; + } `; diff --git a/src/components/Market/VisitList.js b/src/components/Market/VisitList.js index a21a5b1..48704a7 100644 --- a/src/components/Market/VisitList.js +++ b/src/components/Market/VisitList.js @@ -7,7 +7,7 @@ const VisitList = ({ visitList }) => { const handleOpenModal = (id) => { setOpenedModal(id); }; - console.log(visitList); + return ( {visitList.map((item, index) => ( diff --git a/src/components/Market/VisitTab.js b/src/components/Market/VisitTab.js index a08e131..31ded54 100644 --- a/src/components/Market/VisitTab.js +++ b/src/components/Market/VisitTab.js @@ -25,7 +25,6 @@ const VisitTab = ({ visitList, onChange = () => {} }) => { syluvAxios.delete(`/market/${id}/visitlist/delete`) ) ); - console.log("방문 리스트 삭제 성공"); setSelectedList([]); onChange(selectedList); diff --git a/src/hooks/useGeoLocation.js b/src/hooks/useGeoLocation.js new file mode 100644 index 0000000..455cd57 --- /dev/null +++ b/src/hooks/useGeoLocation.js @@ -0,0 +1,32 @@ +import { useState, useEffect } from "react"; + +export const useGeoLocation = (options = {}) => { + const [location, setLocation] = useState(); + const [error, setError] = useState(""); + + const handleSuccess = (pos) => { + const { latitude, longitude } = pos.coords; + + setLocation({ + latitude, + longitude, + }); + }; + + const handleError = (err) => { + setError(err.message); + }; + + useEffect(() => { + const { geolocation } = navigator; + + if (!geolocation) { + setError("Geolocation is not supported."); + return; + } + + geolocation.getCurrentPosition(handleSuccess, handleError, options); + }, [options]); + + return { location, error }; +}; diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 0c9fbdc..952731e 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -7,23 +7,30 @@ import useSyluvAxios from "hooks/useSyluvAxios"; import HotMarketList from "components/Home/HotMarketList"; import LatestMarketList from "components/Home/LatestMarketList"; import Search from "components/Common/Search"; +import useTokenStore from "hooks/useTokenStore"; const HomePage = () => { + const { getName } = useTokenStore(); const syluvAxios = useSyluvAxios(); - + const username = getName(); + const [allMarkets, setAllMarkets] = useState([]); const [latestMarkets, setLatestMarkets] = useState([]); const [hotMarkets, setHotMarkets] = useState([]); useEffect(() => { - syluvAxios.get("/home/search").then((res) => { - console.log(res); + syluvAxios.get("/home").then((res) => { + if (res) { + setLatestMarkets(res.data?.payload.visitListHomeList); + setHotMarkets(res.data?.payload.hotListHomeList); + console.log(res.data.payload); + } }); }, []); useEffect(() => { - syluvAxios.get("/home").then((res) => { - setLatestMarkets(res.data?.payload.visitListHomeList); - setHotMarkets(res.data?.payload.hotListHomeList); + syluvAxios.get("/home/search").then((res) => { + setAllMarkets(res.data.payload); + console.log(res.data.payload); }); }, []); @@ -31,8 +38,8 @@ const HomePage = () => { <>
- - + + {latestMarkets.length > 0 && ( )} diff --git a/src/utils/OauthCallback.js b/src/utils/OauthCallback.js index 2eae400..9343c0e 100644 --- a/src/utils/OauthCallback.js +++ b/src/utils/OauthCallback.js @@ -58,10 +58,10 @@ const OauthCallback = () => { setAccessToken(syluvData.accessToken); setRefreshToken(syluvData.refreshToken); setName(syluvData.nickname); - if (syluvData.existYn === false) { + if (syluvData.existYn === true) { setIsFirstLogin(true); } else { - // navigate("/", { replace: true }); + navigate("/", { replace: true }); } } catch (error) { setIsError(true); From 38b04173a9eb504df2125c08f776eb6501a431d6 Mon Sep 17 00:00:00 2001 From: yunseok Date: Wed, 31 Jul 2024 16:44:05 +0900 Subject: [PATCH 5/6] =?UTF-8?q?feat:=20=ED=99=88=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Home/HotMarket.js | 1 - src/components/Home/LatestMarket.js | 1 - src/components/Home/LatestMarketList.js | 1 - src/components/Market/VisitItem.js | 13 ++++---- src/components/Market/VisitList.js | 43 ++++++++++++++++++++----- src/pages/HomePage.js | 2 -- 6 files changed, 41 insertions(+), 20 deletions(-) diff --git a/src/components/Home/HotMarket.js b/src/components/Home/HotMarket.js index 8a85ac5..35b2556 100644 --- a/src/components/Home/HotMarket.js +++ b/src/components/Home/HotMarket.js @@ -2,7 +2,6 @@ import styled from "styled-components"; import star from "assets/images/star-fill.png"; const HotMarket = ({ market }) => { - console.log(market); return ( { - console.log(market); const navigate = useNavigate(); return ( { - console.log(latestMarkets); return ( 최근 방문한 시장 diff --git a/src/components/Market/VisitItem.js b/src/components/Market/VisitItem.js index 034fb00..de7c499 100644 --- a/src/components/Market/VisitItem.js +++ b/src/components/Market/VisitItem.js @@ -1,7 +1,7 @@ import styled from "styled-components"; import { ReactComponent as Time } from "assets/images/visit_time.svg"; import { ReactComponent as Time2 } from "assets/images/visit_time2.svg"; -import { useEffect, useState } from "react"; +import { useCallback, useEffect, useState } from "react"; import Button from "components/Common/Button"; const VisitItem = ({ @@ -13,13 +13,12 @@ const VisitItem = ({ }) => { const [status, setStatus] = useState(null); const [style, setStyle] = useState(true); - console.log(item); - const onCompleteClick = () => { + const onCompleteClick = useCallback(() => { handleOpenModal(null); - }; - const onCancelClick = () => { + }, [handleOpenModal]); + const onCancelClick = useCallback(() => { handleOpenModal(null); - }; + }, [handleOpenModal]); useEffect(() => { switch (item.status) { case "BEFORE": @@ -79,7 +78,7 @@ const VisitItem = ({
- {openId === index && ( + {openId === item.visitListId && ( 이 가게에 방문 완료하셨나요? diff --git a/src/components/Market/VisitList.js b/src/components/Market/VisitList.js index 48704a7..5eb5394 100644 --- a/src/components/Market/VisitList.js +++ b/src/components/Market/VisitList.js @@ -11,14 +11,24 @@ const VisitList = ({ visitList }) => { return ( {visitList.map((item, index) => ( - + + +
{ + handleOpenModal(item.visitListId); + }} + > + 방문 완료 +
+ ))} ); @@ -26,9 +36,26 @@ const VisitList = ({ visitList }) => { export default VisitList; +const Container = styled.div` + position: relative; +`; + const ListContainer = styled.div` margin-top: 18px; display: flex; flex-direction: column; padding: 0 20px; + + .visit-complete { + position: absolute; + right: 0; + top: 0; + cursor: pointer; + color: ${({ theme }) => theme.color.primary}; + border: 1px solid ${({ theme }) => theme.color.primary}; + font-weight: ${({ theme }) => theme.fontWeight.regular}; + font-size: 12px; + padding: 6px 8px; + border-radius: 5px; + } `; diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 952731e..6e0d54d 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -22,7 +22,6 @@ const HomePage = () => { if (res) { setLatestMarkets(res.data?.payload.visitListHomeList); setHotMarkets(res.data?.payload.hotListHomeList); - console.log(res.data.payload); } }); }, []); @@ -30,7 +29,6 @@ const HomePage = () => { useEffect(() => { syluvAxios.get("/home/search").then((res) => { setAllMarkets(res.data.payload); - console.log(res.data.payload); }); }, []); From 69b8313bff02e1fcb4568e32d4d6cf23f980c9cf Mon Sep 17 00:00:00 2001 From: yunseok Date: Wed, 31 Jul 2024 16:56:10 +0900 Subject: [PATCH 6/6] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/ReviewPage.js | 51 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 48 insertions(+), 3 deletions(-) diff --git a/src/pages/ReviewPage.js b/src/pages/ReviewPage.js index 06dd7d0..1262af9 100644 --- a/src/pages/ReviewPage.js +++ b/src/pages/ReviewPage.js @@ -5,10 +5,11 @@ import starFilled from "assets/images/star-fill.png"; import add from "assets/images/add-button.png"; import { useEffect, useState } from "react"; import Button from "components/Common/Button"; -import { useParams } from "react-router-dom"; +import { useNavigate, useParams } from "react-router-dom"; import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; import "swiper/css/navigation"; +import useSyluvAxios from "hooks/useSyluvAxios"; const ReviewPage = () => { const [review, setReview] = useState(""); @@ -17,6 +18,8 @@ const ReviewPage = () => { const [ratingText, setRatingText] = useState(""); const [photos, setPhotos] = useState([]); const { orderId } = useParams(); + const syluvAxios = useSyluvAxios(); + const navigate = useNavigate(); useEffect(() => { setCurrentCount(review.length); @@ -43,6 +46,39 @@ const ReviewPage = () => { setPhotos([...photos, ...files]); }; + const handleSubmit = () => { + const formData = new FormData(); + + const dto = { + menuId: orderId, + rate: rating, + content: ratingText, + }; + + formData.append( + "dto", + new Blob([JSON.stringify(dto)], { type: "application/json" }) + ); + + if (photos.length > 0) { + photos.forEach((photo) => { + formData.append("file", photo); + }); + } + syluvAxios + .post("review", formData, { + headers: { + "Content-Type": "multipart/form-data", + }, + }) + .then((response) => { + console.log(response); + }) + .finally(() => { + navigate(-1, { replace: true }); + }); + }; + return (
@@ -125,7 +161,11 @@ const ReviewPage = () => {
-