Merge pull request #148 from kakao-tech-campus-2nd-step3/Feature/카드_리…

…펙토링-#145 Feature/카드 리펙토링 #145
kakao-tech-campus-2nd-step3 · Nov 19, 2024 · 4c1e01c · 4c1e01c
2 parents 2e059f4 + c840a5f
commit 4c1e01c
Show file tree

Hide file tree

Showing 14 changed files with 143 additions and 63 deletions.
diff --git 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 (
     <Link href={link} isExternal>

diff --git 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) => (
-  <ImageCard
-    {...props}
-    imageProps={{
-      filter: "auto",
-      brightness: item?.mainImage ? 1 : 0.6,
-    }}
-    bgImg={item.mainImage}
-  >
-    <Flex align="center" direction="column" w="full" mt="auto" mb="10">
-      <Text px="5" color="green" bg="white" borderRadius="xl">
-        {item.farm.address}
-      </Text>
-      <Text color="white" fontSize="2xl" fontWeight="bold">
-        {item.name}
-      </Text>
-    </Flex>
-  </ImageCard>
+  <Box as={Link} to={`/schedule/${item.id}`}>
+    <ImageCard
+      h="full"
+      {...props}
+      imageProps={{
+        filter: "auto",
+        brightness: item?.mainImage ? 1 : 0.6,
+      }}
+      bgImg={item.mainImage}
+      _hover={{
+        transform: "scale(1.05)",
+      }}
+    >
+      <Flex align="center" direction="column" w="full" mt="auto" mb="10">
+        <Text px="5" color="green" bg="white" borderRadius="xl">
+          {item.farm.address}
+        </Text>
+        <Text color="white" fontSize="2xl" fontWeight="bold">
+          {item.name}
+        </Text>
+      </Flex>
+    </ImageCard>
+  </Box>
 );
 
 export default ScheduleCard;
diff --git 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) => (
-  <Card {...props}>
-    <Image w="full" borderRadius="2xl" alt={item.name} aspectRatio="1" src={item.mainImage} />
-    <Flex py="3">
-      <Text maxW="70%" fontSize="lg" fontWeight="bold" isTruncated>
-        {item.name}
-      </Text>
-      {item?.tag && (
-        <Text ml="auto" px="3" color="white" bg="#22543D" borderRadius="lg">
-          {item.tag}
+  <Link to={`/store/${item.id}`}>
+    <Card {...props} _hover={{ transform: "translateY(-10px)" }}>
+      <Image w="full" borderRadius="2xl" alt={item.name} aspectRatio="1" src={item.mainImage} />
+      <Flex py="3">
+        <Text maxW="70%" fontSize="lg" fontWeight="bold" isTruncated>
+          {item.name}
         </Text>
-      )}
-    </Flex>
-    <Text>{item.unit}</Text>
-    <Text my="3">{item.pricePerGram}</Text>
-    <Text overflow="hidden" color="#999" noOfLines={3}>
-      {item.description}
-    </Text>
-    <Text color="#999">{item.farm.address}</Text>
-    <Flex align="center" py="3">
-      <Avatar src={item.farm.profile} />
-      <Text ml="1">{item.farm.name}</Text>
-    </Flex>
-  </Card>
+        {item?.tag && (
+          <Text ml="auto" px="3" color="white" bg="#22543D" borderRadius="lg">
+            {item.tag}
+          </Text>
+        )}
+      </Flex>
+      <Text>{item.unit}</Text>
+      <Text my="3">{item.pricePerGram}</Text>
+      <Text overflow="hidden" color="#999" noOfLines={3}>
+        {item.description}
+      </Text>
+      <Text color="#999">{item.farm.address}</Text>
+      <Flex align="center" py="3">
+        <Avatar src={item.farm.profile} />
+        <Text ml="1">{item.farm.name}</Text>
+      </Flex>
+    </Card>
+  </Link>
 );
 
 export default ProductCard;
diff --git 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) => (
-  <Flex direction="column" w="250px" h="100%">
+  <Flex direction="column" w="250px" h="100%" pt="10">
     <Text w="full" py="5" fontSize="xl" fontWeight="bold">
       필터
     </Text>

diff --git a/src/components/features/StorePage/ProductList/index.tsx b/src/components/features/StorePage/ProductList/index.tsx
@@ -12,7 +12,7 @@ const ProductList = () => {
     <Flex gap="5" w="100%" h="100vh">
       <ProductFilter filterState={productFilterState} items={mockCategory.map(encodeCategory)} />
       <Flex overflow="scroll" w="100%" h="100%">
-        <ProductsView filters={productFilterState.filters} columns={3} gap="25px" />
+        <ProductsView filters={productFilterState.filters} py="10" columns={3} gap="25px" />
       </Flex>
     </Flex>
   );

diff --git a/src/components/layouts/Header.tsx b/src/components/layouts/Header.tsx
@@ -51,6 +51,7 @@ const Header = () => {
           )}
           {menuLinks.map(menuLink => (
             <Text
+              key={menuLink.link}
               as={Link}
               mx="5"
               color={menuLink.link === location.pathname ? "#1C4532" : "#999999"}
@@ -70,7 +71,7 @@ const Header = () => {
               <Link to="/wish">
                 <Icon as={HeartOutlined} color="#1C4532" fontSize="25px" />
               </Link>,
-              <Link to="/cart">
+              <Link to="/cart/product">
                 <Icon as={ShoppingCartOutlined} color="#1C4532" fontSize="25px" />
               </Link>,
               <Flex as={Link} gap="1" to="/me">

diff --git 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 = () => (
   <div className="main-layout">
+    <ScrollSaver />
     <Header />
     <Box w="100vw" minH={`calc(100vh - ${size.header.h})`}>
       <Outlet />

diff --git a/src/components/layouts/ScrollSaver.tsx 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/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;
diff --git a/src/hooks/useScrollSaver.ts 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/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;

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -24,7 +24,7 @@ const Home = () => {
           <Review />
         </Flex>
         <BestScheduleSection />
-        <GridView items={products || []} ItemComponent={ProductCard} columns={3} gap="25px" />
+        <GridView items={products || []} ItemComponent={ProductCard} py="10" columns={3} gap="25px" />
       </Flex>
     </Flex>
   );

diff --git a/src/pages/StoreDetailPage/index.tsx → src/pages/ProductDetailPage/index.tsx b/src/pages/StoreDetailPage/index.tsx → 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 = () => (
   <>
     <Product productId={1} />
     <Tabs mt={100} ml={200}>
@@ -24,4 +24,4 @@ const StoreDetailPage = () => (
   </>
 );
 
-export default StoreDetailPage;
+export default ProductDetailPage;
diff --git 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 CallbackPage from "@pages/CallbackPage";
 import EmailLoginPage from "@pages/EmailLoginPage";
 import EmailRegisterPage from "@pages/EmailRegisterPage";
@@ -19,6 +21,7 @@ import ProductWishlistPage from "@pages/MyPage/ProductWishlistPage";
 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 SellerPage from "@pages/SellerPage";
@@ -33,11 +36,16 @@ 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";
 import WishPage from "@pages/WishPage";
 
 const AppRouter = () => {
+  const { initScroll } = useScrollSaver();
+
+  useEffect(() => {
+    initScroll();
+  }, []);
+
   const routers = createBrowserRouter([
     {
       path: "/",
@@ -55,14 +63,6 @@ const AppRouter = () => {
           path: "wish",
           element: <WishPage />,
         },
-        {
-          path: "StoreDetail",
-          element: <StoreDetailPage />,
-        },
-        {
-          path: "schedule/:scheduleId",
-          element: <FarmDetailPage />,
-        },
         {
           path: "seller",
           element: <SellerLayout />,
@@ -178,15 +178,33 @@ const AppRouter = () => {
         },
         {
           path: "store",
-          element: <StorePage />,
+          children: [
+            {
+              index: true,
+              element: <StorePage />,
+            },
+            {
+              path: ":productId",
+              element: <ProductDetailPage />,
+            },
+          ],
         },
         {
           path: "callback/:provider",
           element: <CallbackPage />,
         },
         {
           path: "schedule",
-          element: <SchedulePage />,
+          children: [
+            {
+              index: true,
+              element: <SchedulePage />,
+            },
+            {
+              path: ":scheduleId",
+              element: <FarmDetailPage />,
+            },
+          ],
         },
         {
           path: "cart/product",