feat: 물품 상세페이지로 이동 (#1)

prgrms-web-devcourse-final-project · Nov 21, 2024 · 5b179a6 · 5b179a6
1 parent 1eef513
commit 5b179a6
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 50 deletions.
diff --git a/src/components/pages/HomePage/CategoryProduct.tsx b/src/components/pages/HomePage/CategoryProduct.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 interface Product {
@@ -48,19 +49,21 @@ const CategoryProduct: React.FC<CategoryProductsProps> = ({
       <CardWrapper>
         {products.map((product) => (
           <Card key={product.id}>
-            <ProductImg src={product.image} alt={product.name} />
-            <ProductWrapper>
-              <ProductName>{product.name}</ProductName>
-              <ProductStar>{'⭐'.repeat(product.stars)}</ProductStar>
-              <PriceWrapper>
-                <OriginalPrice>
-                  ${product.originalPrice.toFixed(2)}
-                </OriginalPrice>
-                <DiscountedPrice>
-                  ${product.discountedPrice.toFixed(2)}
-                </DiscountedPrice>
-              </PriceWrapper>
-            </ProductWrapper>
+            <StyledLink to={`/products/${product.id}`}>
+              <ProductImg src={product.image} alt={product.name} />
+              <ProductWrapper>
+                <ProductName>{product.name}</ProductName>
+                <ProductStar>{'⭐'.repeat(product.stars)}</ProductStar>
+                <PriceWrapper>
+                  <OriginalPrice>
+                    ${product.originalPrice.toFixed(2)}
+                  </OriginalPrice>
+                  <DiscountedPrice>
+                    ${product.discountedPrice.toFixed(2)}
+                  </DiscountedPrice>
+                </PriceWrapper>
+              </ProductWrapper>
+            </StyledLink>
             <LikeButton>♡</LikeButton>
           </Card>
         ))}
@@ -74,7 +77,6 @@ const Recommend = styled.div`
   width: 80%;
   height: auto;
   margin: 0 auto;
-  background-color: gray;
 `;
 
 const RecommendTitle = styled.h2`
@@ -107,7 +109,18 @@ const Card = styled.div`
   align-items: center;
   position: relative;
 `;
-
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  &:link {
+    color: inherit;
+  }
+  &:visited {
+    color: inherit;
+  }
+  &:active {
+    color: inherit;
+  }
+`;
 const ProductImg = styled.img`
   width: 90%;
   height: 200px;

diff --git a/src/components/pages/HomePage/PopularProduct.tsx b/src/components/pages/HomePage/PopularProduct.tsx
@@ -1,22 +1,27 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 interface PopularProductProps {
   product: {
+    id: number;
     image: string;
     stars: number;
   };
 }
 
-const PopularProduct: React.FC<PopularProductProps> = ({ product }) => (
-  <Popular>
-    <PopularImg src={product.image} alt="상단 인기 상품" />
-    <PopularStar>{'⭐'.repeat(product.stars)}</PopularStar>
-  </Popular>
-);
+const PopularProduct: React.FC<PopularProductProps> = ({ product }) => {
+  return (
+    <Popular>
+      <Link to={`/products/${product.id}`}>
+        <PopularImg src={product.image} alt="상단 인기 상품" />
+        <PopularStar>{'⭐'.repeat(product.stars)}</PopularStar>
+      </Link>
+    </Popular>
+  );
+};
 
 const Popular = styled.div`
-  background-color: gray;
   width: 80%;
   height: 250px;
   align-items: center;

diff --git a/src/components/pages/HomePage/RecommendProduct.tsx b/src/components/pages/HomePage/RecommendProduct.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 interface Product {
@@ -14,39 +15,44 @@ interface PopularProductsListProps {
   products: Product[];
 }
 
-const RecommendProduct: React.FC<PopularProductsListProps> = ({ products }) => (
-  <Recommend>
-    <RecommendTitle>
-      실시간 인기 상품(전체 물건에서 댓글많이 달린 순)
-    </RecommendTitle>
-    <CardWrapper>
-      {products.map((product) => (
-        <Card key={product.id}>
-          <ProductImg src={product.image} alt={product.name} />
-          <ProductWrapper>
-            <ProductName>{product.name}</ProductName>
-            <ProductStar>{'⭐'.repeat(product.stars)}</ProductStar>
-            <PriceWrapper>
-              <OriginalPrice>${product.originalPrice.toFixed(2)}</OriginalPrice>
-              <DiscountedPrice>
-                ${product.discountedPrice.toFixed(2)}
-              </DiscountedPrice>
-            </PriceWrapper>
-          </ProductWrapper>
-          <LikeButton>♡</LikeButton>
-        </Card>
-      ))}
-    </CardWrapper>
-  </Recommend>
-);
-
+const RecommendProduct: React.FC<PopularProductsListProps> = ({ products }) => {
+  return (
+    <Recommend>
+      <RecommendTitle>
+        실시간 인기 상품(전체 물건에서 댓글많이 달린 순)
+      </RecommendTitle>
+
+      <CardWrapper>
+        {products.map((product) => (
+          <Card key={product.id}>
+            <StyledLink to={`/products/${product.id}`}>
+              <ProductImg src={product.image} alt={product.name} />
+              <ProductWrapper>
+                <ProductName>{product.name}</ProductName>
+                <ProductStar>{'⭐'.repeat(product.stars)}</ProductStar>
+                <PriceWrapper>
+                  <OriginalPrice>
+                    ${product.originalPrice.toFixed(2)}
+                  </OriginalPrice>
+                  <DiscountedPrice>
+                    ${product.discountedPrice.toFixed(2)}
+                  </DiscountedPrice>
+                </PriceWrapper>
+              </ProductWrapper>
+            </StyledLink>
+            <LikeButton>♡</LikeButton>
+          </Card>
+        ))}
+      </CardWrapper>
+    </Recommend>
+  );
+};
 const Recommend = styled.div`
   display: flex;
   flex-wrap: wrap;
   width: 80%;
   height: auto;
   margin: 0 auto;
-  background-color: gray;
 `;
 
 const RecommendTitle = styled.h2`
@@ -79,7 +85,18 @@ const Card = styled.div`
   align-items: center;
   position: relative;
 `;
-
+const StyledLink = styled(Link)`
+  text-decoration: none;
+  &:link {
+    color: inherit;
+  }
+  &:visited {
+    color: inherit;
+  }
+  &:active {
+    color: inherit;
+  }
+`;
 const ProductImg = styled.img`
   width: 90%;
   height: 200px;