feat: product link

- #147

src/components/features/SchedulePage/BestScheduleSection.tsx

@@ -11,7 +11,6 @@ const BestScheduleSection = () => (
     <GridView
       items={mockBestSchedule.map(item => ({
         ...item,
-        disabled: true,
       }))}
       columns={2}
       gap="20px"

src/components/features/SchedulePage/ScheduleCard.tsx

@@ -4,11 +4,11 @@ import ImageCard, { ImageCardProps } from "@components/common/ImageCard";
 import { Schedule } from "@type/index";
 
 type ScheduleCardProps = ImageCardProps & {
-  item: Schedule & { disabled?: boolean };
+  item: Schedule & { link?: string };
 };
 
 const ScheduleCard = ({ item, ...props }: ScheduleCardProps) => (
-  <Box {...(!item?.disabled && { as: Link, to: `/schedule/${item.id}` })}>
+  <Box {...(item.link ? { as: Link, to: item.link } : {})}>
     <ImageCard
       h="full"
       {...props}
@@ -18,7 +18,7 @@ const ScheduleCard = ({ item, ...props }: ScheduleCardProps) => (
       }}
       bgImg={item.mainImage}
       _hover={
-        !item?.disabled
+        item.link
           ? {
               transform: "scale(1.05)",
             }

src/components/features/StorePage/ProductCard.tsx

@@ -1,17 +1,17 @@
 import { Link } from "react-router-dom";
-import { Flex, Text } from "@chakra-ui/react";
+import { Box, Flex, Text } from "@chakra-ui/react";
 import Avatar from "@components/common/Avatar";
 import Card, { CardProps } from "@components/common/Card";
 import Image from "@components/common/Image";
 import { Product } from "@type/index";
 
 export type ProductCardProps = {
-  item: Product;
+  item: Product & { link?: string };
 } & CardProps;
 
 const ProductCard = ({ item, ...props }: ProductCardProps) => (
-  <Link to={`/store/${item.id}`}>
-    <Card {...props} _hover={{ transform: "translateY(-10px)" }}>
+  <Box {...(!item.link && { as: Link, to: item.link })}>
+    <Card {...props} _hover={item.link ? { 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>
@@ -34,7 +34,7 @@ const ProductCard = ({ item, ...props }: ProductCardProps) => (
         <Text ml="1">{item.farm.name}</Text>
       </Flex>
     </Card>
-  </Link>
+  </Box>
 );
 
 export default ProductCard;

src/components/features/StorePage/ProductList/ProductsView.tsx

@@ -10,7 +10,13 @@ type ProductsViewProps = {
 const ProductsView = ({ filters, ...props }: ProductsViewProps) => {
   const { data: products } = useGetProducts(filters[0] ? Number(filters[0]) : 0);
 
-  return <GridView items={products || []} ItemComponent={ProductCard} {...props} />;
+  return (
+    <GridView
+      items={(products || []).map((p: Product) => ({ ...p, link: `/store/${p.id}` }))}
+      ItemComponent={ProductCard}
+      {...props}
+    />
+  );
 };
 
 export default ProductsView;

src/pages/SchedulePage/index.tsx

@@ -6,7 +6,7 @@ import BestScheduleSection from "@components/features/SchedulePage/BestScheduleS
 import ScheduleCard from "@components/features/SchedulePage/ScheduleCard";
 import ScheduleCategory from "@components/features/SchedulePage/ScheduleCategory";
 import size from "@constants/size";
-import { FarmCategory } from "@type/index";
+import { FarmCategory, Schedule } from "@type/index";
 
 const SchedulePage = () => {
   const [category, setCategory] = useState<FarmCategory | null>(null);
@@ -24,7 +24,15 @@ const SchedulePage = () => {
       <Flex direction="column" rowGap="24" w="1100px" my="20">
         <BestScheduleSection />
         <ScheduleCategory category={category} setCategory={ct => setCategory(ct)} />
-        <GridView items={schedules || []} ItemComponent={ScheduleCard} columns={3} gap="10" />
+        <GridView
+          items={(schedules || []).map((s: Schedule) => ({
+            ...s,
+            link: `/schedule/${s.id}`,
+          }))}
+          ItemComponent={ScheduleCard}
+          columns={3}
+          gap="10"
+        />
       </Flex>
     </Flex>
   );

src/pages/SellerPage/SellerProductList.tsx

@@ -1,19 +1,21 @@
-import { useNavigate } from "react-router-dom";
 import { Box } from "@chakra-ui/react";
 import GridView from "@components/ItemView/GridView";
 import Card from "@components/common/Card";
-import ProductCard, { ProductCardProps } from "@components/features/StorePage/ProductCard";
+import ProductCard from "@components/features/StorePage/ProductCard";
 import mockProducts from "@mocks/mockItem/mockProducts";
 
-const EditProductCard = (props: ProductCardProps) => {
-  const navigate = useNavigate();
-  return <ProductCard {...props} onClick={() => navigate(`/seller/product-edit/${props?.item.id}`)} />;
-};
-
 const SellerProductListPage = () => (
   <Card mx="auto" bg="white" w="1000px" p="10" h="100%" title="등록된 상품">
     <Box overflowY="scroll" w="100%" h="100%" p="5">
-      <GridView items={mockProducts} ItemComponent={EditProductCard} columns={3} gap="10" />
+      <GridView
+        items={mockProducts.map(p => ({
+          ...p,
+          link: `/seller/product-edit/${p.id}`,
+        }))}
+        ItemComponent={ProductCard}
+        columns={3}
+        gap="10"
+      />
     </Box>
   </Card>
 );