From 9bbc5d72b696d1d991ffbad601871476df43b550 Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Tue, 19 Nov 2024 21:32:10 +0900 Subject: [PATCH 1/9] feat: scroll saver - #145 --- src/components/layouts/MainLayout.tsx | 2 ++ src/components/layouts/ScrollSaver.tsx | 19 +++++++++++++++++++ src/hooks/useScrollSaver.ts | 26 ++++++++++++++++++++++++++ src/routes/AppRouter.tsx | 25 +++++++++++++++++++------ 4 files changed, 66 insertions(+), 6 deletions(-) create mode 100644 src/components/layouts/ScrollSaver.tsx create mode 100644 src/hooks/useScrollSaver.ts diff --git a/src/components/layouts/MainLayout.tsx b/src/components/layouts/MainLayout.tsx index 836eb33..6f9a671 100644 --- a/src/components/layouts/MainLayout.tsx +++ b/src/components/layouts/MainLayout.tsx @@ -2,10 +2,12 @@ import { Outlet } from "react-router-dom"; import { Box } from "@chakra-ui/react"; import Footer from "@components/layouts/Footer"; import Header from "@components/layouts/Header"; +import ScrollSaver from "@components/layouts/ScrollSaver"; import size from "@constants/size"; const MainLayout = () => (
+
diff --git a/src/components/layouts/ScrollSaver.tsx b/src/components/layouts/ScrollSaver.tsx new file mode 100644 index 0000000..b81c45d --- /dev/null +++ b/src/components/layouts/ScrollSaver.tsx @@ -0,0 +1,19 @@ +import { useEffect, useState } from "react"; +import { useLocation } from "react-router-dom"; +import useScrollSaver from "@hooks/useScrollSaver"; + +const ScrollSaver = () => { + const location = useLocation(); + const [prevLocation, setPrevLocation] = useState(location.pathname); + const { getScroll, setScroll } = useScrollSaver(); + + useEffect(() => { + setScroll(prevLocation, window.scrollY); + setPrevLocation(location.pathname); + window.scrollTo(0, getScroll(location.pathname)); + }, [location]); + + return null; +}; + +export default ScrollSaver; diff --git a/src/hooks/useScrollSaver.ts b/src/hooks/useScrollSaver.ts new file mode 100644 index 0000000..0e260e8 --- /dev/null +++ b/src/hooks/useScrollSaver.ts @@ -0,0 +1,26 @@ +const useScrollSaver = () => { + const initScroll = () => { + const originScrolls = sessionStorage.getItem("poomasi-scroll-index"); + if (!originScrolls) { + sessionStorage.setItem("poomasi-scroll-index", JSON.stringify({})); + } + }; + + const setScroll = (location: string, scroll: number) => { + initScroll(); + const scrolls = sessionStorage.getItem("poomasi-scroll-index"); + const scrollsObj = JSON.parse(scrolls || "{}"); + scrollsObj[location] = scroll; + sessionStorage.setItem("poomasi-scroll-index", JSON.stringify(scrollsObj)); + }; + + const getScroll = (location: string) => { + const scrolls = sessionStorage.getItem("poomasi-scroll-index"); + const scroll = JSON.parse(scrolls || "{}")[location]; + return scroll || 0; + }; + + return { initScroll, setScroll, getScroll }; +}; + +export default useScrollSaver; diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx index cd9a0e8..3963050 100644 --- a/src/routes/AppRouter.tsx +++ b/src/routes/AppRouter.tsx @@ -1,7 +1,9 @@ +import { useEffect } from "react"; import { createBrowserRouter, RouterProvider } from "react-router-dom"; import MainLayout from "@components/layouts/MainLayout"; import MyPageLayout from "@components/layouts/MyPageLayout"; import SellerLayout from "@components/layouts/SellerLayout"; +import useScrollSaver from "@hooks/useScrollSaver"; import BuyerMyPage from "@pages/BuyerMyPage"; import CallbackPage from "@pages/CallbackPage"; import EmailLoginPage from "@pages/EmailLoginPage"; @@ -19,6 +21,7 @@ import MyOrdersPage from "@pages/MyPage/OrdersPage"; import ReviewListPage from "@pages/MyPage/ReviewListPage"; import WithdrawPage from "@pages/MyPage/WithdrawPage"; import ProductCartPage from "@pages/ProductCartPage"; +import ProductDetailPage from "@pages/ProductDetailPage"; import RegisterPage from "@pages/RegisterPage"; import SchedulePage from "@pages/SchedulePage"; import SellerMyPage from "@pages/SellerMyPage"; @@ -34,10 +37,15 @@ import SellerProductListPage from "@pages/SellerPage/SellerProductList"; import SellerWithdraw from "@pages/SellerPage/SellerWithdraw"; import SoldOuts from "@pages/SellerPage/SoldOuts"; import TaxCalculator from "@pages/SellerPage/TaxCalculator"; -import StoreDetailPage from "@pages/StoreDetailPage"; import StorePage from "@pages/StorePage"; const AppRouter = () => { + const { initScroll } = useScrollSaver(); + + useEffect(() => { + initScroll(); + }, []); + const routers = createBrowserRouter([ { path: "/", @@ -59,10 +67,6 @@ const AppRouter = () => { path: "SellerMyPage", element: , }, - { - path: "StoreDetail", - element: , - }, { path: "schedule/:scheduleId", element: , @@ -178,7 +182,16 @@ const AppRouter = () => { }, { path: "store", - element: , + children: [ + { + index: true, + element: , + }, + { + path: ":productId", + element: , + }, + ], }, { path: "callback/:provider", From 1dccc32f5d3d288fac3ec2656b3f278a1589324e Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Tue, 19 Nov 2024 21:34:29 +0900 Subject: [PATCH 2/9] feat: refreshLogin - #145 --- src/hooks/useLogin.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/hooks/useLogin.ts b/src/hooks/useLogin.ts index a8bb89b..4a8efaa 100644 --- a/src/hooks/useLogin.ts +++ b/src/hooks/useLogin.ts @@ -5,7 +5,7 @@ import { userAtomWithPersistence } from "@atom/userAtom"; const useLogin = () => { const [user, setUser] = useAtom(userAtomWithPersistence); - const login = (accessToken: string) => { + const login = async (accessToken: string) => defaultApi .get("/api/members/self", { headers: { @@ -20,7 +20,8 @@ const useLogin = () => { role: data.role, }); }); - }; + + const refreshLogin = async () => login(user?.token || ""); const logout = () => { setUser(null); @@ -30,7 +31,7 @@ const useLogin = () => { const sellerCheck = () => user?.role === "ROLE_FARMER"; - return { user, login, logout, loginCheck, sellerCheck }; + return { user, login, logout, refreshLogin, loginCheck, sellerCheck }; }; export default useLogin; From bb8527ddbf9642132be4c3c77c33995d8ceb3a22 Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Tue, 19 Nov 2024 21:36:15 +0900 Subject: [PATCH 3/9] design: Product - #145 --- .../features/StorePage/ProductList/ProductFilter/index.tsx | 2 +- src/components/features/StorePage/ProductList/index.tsx | 2 +- src/pages/Home/index.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/features/StorePage/ProductList/ProductFilter/index.tsx b/src/components/features/StorePage/ProductList/ProductFilter/index.tsx index 74d4266..66c6bb3 100644 --- a/src/components/features/StorePage/ProductList/ProductFilter/index.tsx +++ b/src/components/features/StorePage/ProductList/ProductFilter/index.tsx @@ -10,7 +10,7 @@ type ProductFilterProps = { }; const ProductFilter = ({ items = [], filterState = useFilters() }: ProductFilterProps) => ( - + 필터 diff --git a/src/components/features/StorePage/ProductList/index.tsx b/src/components/features/StorePage/ProductList/index.tsx index bada6b4..abb04fc 100644 --- a/src/components/features/StorePage/ProductList/index.tsx +++ b/src/components/features/StorePage/ProductList/index.tsx @@ -12,7 +12,7 @@ const ProductList = () => { - + ); diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx index 1be401c..8206528 100644 --- a/src/pages/Home/index.tsx +++ b/src/pages/Home/index.tsx @@ -24,7 +24,7 @@ const Home = () => { - + ); From b7673fe45127e6614263248733891b5e755e7665 Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Tue, 19 Nov 2024 21:36:35 +0900 Subject: [PATCH 4/9] fix: kakaologin url -- #145 --- src/components/common/KaKaoLoginButton.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/KaKaoLoginButton.tsx b/src/components/common/KaKaoLoginButton.tsx index 38a3ede..0034fbe 100644 --- a/src/components/common/KaKaoLoginButton.tsx +++ b/src/components/common/KaKaoLoginButton.tsx @@ -4,7 +4,7 @@ import Image from "@components/common/Image"; type KaKaoLoginButtonProps = ImageProps; const KaKaoLoginButton = ({ ...props }: KaKaoLoginButtonProps) => { - const link = "http://172.22.42.12:8080/oauth2/authentication/kakao"; + const link = `${process.env.REACT_APP_API_URL}/oauth2/authentication/kakao`; return ( From 5e6b5876a90e2fb8b19aae2dbbf51379c43fd287 Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Tue, 19 Nov 2024 21:37:28 +0900 Subject: [PATCH 5/9] fix: redirect after login - #145 --- src/pages/CallbackPage/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/pages/CallbackPage/index.tsx b/src/pages/CallbackPage/index.tsx index 99774a4..fe3443f 100644 --- a/src/pages/CallbackPage/index.tsx +++ b/src/pages/CallbackPage/index.tsx @@ -1,14 +1,17 @@ -import { useSearchParams } from "react-router-dom"; +import { useNavigate, useSearchParams } from "react-router-dom"; import useLogin from "@hooks/useLogin"; const CallbackPage = () => { const [searchParams] = useSearchParams(); + const navigate = useNavigate(); const { login } = useLogin(); const accessToken = searchParams.get("access"); if (accessToken) { - login(accessToken); + login(accessToken).then(() => { + navigate("/"); + }); } return null; From 9f672f3ff0b00a64e8a0ae5974f007cec0bb9f8d Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Tue, 19 Nov 2024 21:37:45 +0900 Subject: [PATCH 6/9] fix: header - #145 --- src/components/layouts/Header.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx index d07f259..d4d73e0 100644 --- a/src/components/layouts/Header.tsx +++ b/src/components/layouts/Header.tsx @@ -51,6 +51,7 @@ const Header = () => { )} {menuLinks.map(menuLink => ( { , - + , From b9b73750055e8abffbd2f0d23dea153b569c7430 Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Tue, 19 Nov 2024 21:38:30 +0900 Subject: [PATCH 7/9] fix: file name - #145 --- src/pages/{StoreDetailPage => ProductDetailPage}/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename src/pages/{StoreDetailPage => ProductDetailPage}/index.tsx (92%) diff --git a/src/pages/StoreDetailPage/index.tsx b/src/pages/ProductDetailPage/index.tsx similarity index 92% rename from src/pages/StoreDetailPage/index.tsx rename to src/pages/ProductDetailPage/index.tsx index b55bc9c..6b01edb 100644 --- a/src/pages/StoreDetailPage/index.tsx +++ b/src/pages/ProductDetailPage/index.tsx @@ -3,7 +3,7 @@ import Product from "@components/features/StoreDetailPage/Product"; import ProductDescription from "@components/features/StoreDetailPage/ProductDescription"; import ReviewList from "@components/features/StoreDetailPage/ReviewList"; -const StoreDetailPage = () => ( +const ProductDetailPage = () => ( <> @@ -24,4 +24,4 @@ const StoreDetailPage = () => ( ); -export default StoreDetailPage; +export default ProductDetailPage; From 19988bd2cdda4b12c7ccef9cbaaa872c21b6ebe2 Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Tue, 19 Nov 2024 21:38:58 +0900 Subject: [PATCH 8/9] feat: product detail - #145 --- .../features/StorePage/ProductCard.tsx | 47 ++++++++++--------- 1 file changed, 25 insertions(+), 22 deletions(-) diff --git a/src/components/features/StorePage/ProductCard.tsx b/src/components/features/StorePage/ProductCard.tsx index 3da6eda..1f15241 100644 --- a/src/components/features/StorePage/ProductCard.tsx +++ b/src/components/features/StorePage/ProductCard.tsx @@ -1,3 +1,4 @@ +import { Link } from "react-router-dom"; import { Flex, Text } from "@chakra-ui/react"; import Avatar from "@components/common/Avatar"; import Card, { CardProps } from "@components/common/Card"; @@ -9,29 +10,31 @@ export type ProductCardProps = { } & CardProps; const ProductCard = ({ item, ...props }: ProductCardProps) => ( - - {item.name} - - - {item.name} - - {item?.tag && ( - - {item.tag} + + + {item.name} + + + {item.name} - )} - - {item.unit} - {item.pricePerGram} - - {item.description} - - {item.farm.address} - - - {item.farm.name} - - + {item?.tag && ( + + {item.tag} + + )} + + {item.unit} + {item.pricePerGram} + + {item.description} + + {item.farm.address} + + + {item.farm.name} + + + ); export default ProductCard; From 63d21667891b91a428ef610cca1a78bb309df6a1 Mon Sep 17 00:00:00 2001 From: gimdogyun Date: Tue, 19 Nov 2024 21:55:26 +0900 Subject: [PATCH 9/9] feat: schedule link - #145 --- .../features/SchedulePage/ScheduleCard.tsx | 43 +++++++++++-------- src/routes/AppRouter.tsx | 15 ++++--- 2 files changed, 35 insertions(+), 23 deletions(-) diff --git a/src/components/features/SchedulePage/ScheduleCard.tsx b/src/components/features/SchedulePage/ScheduleCard.tsx index 2f2087f..be926cb 100644 --- a/src/components/features/SchedulePage/ScheduleCard.tsx +++ b/src/components/features/SchedulePage/ScheduleCard.tsx @@ -1,4 +1,5 @@ -import { Flex, Text } from "@chakra-ui/react"; +import { Link } from "react-router-dom"; +import { Box, Flex, Text } from "@chakra-ui/react"; import ImageCard, { ImageCardProps } from "@components/common/ImageCard"; import { Schedule } from "@type/index"; @@ -7,23 +8,29 @@ type ScheduleCardProps = ImageCardProps & { }; const ScheduleCard = ({ item, ...props }: ScheduleCardProps) => ( - - - - {item.farm.address} - - - {item.name} - - - + + + + + {item.farm.address} + + + {item.name} + + + + ); export default ScheduleCard; diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx index 3963050..a0950a0 100644 --- a/src/routes/AppRouter.tsx +++ b/src/routes/AppRouter.tsx @@ -67,10 +67,6 @@ const AppRouter = () => { path: "SellerMyPage", element: , }, - { - path: "schedule/:scheduleId", - element: , - }, { path: "seller", element: , @@ -199,7 +195,16 @@ const AppRouter = () => { }, { path: "schedule", - element: , + children: [ + { + index: true, + element: , + }, + { + path: ":scheduleId", + element: , + }, + ], }, { path: "cart/product",