[Add] Card component

banchan/package.json

@@ -9,6 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.2.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

banchan/src/components/main/CarouselSection.jsx

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import Card from '../utils/Card';
+
+const CarouselSection = (props) => {
+  const [products, setProducts] = useState([]);
+
+  useEffect(() => {
+    fetch(
+      'https://h3rb9c0ugl.execute-api.ap-northeast-2.amazonaws.com/develop/baminchan/main'
+    )
+      .then((response) => response.json())
+      .then((result) => setProducts(result.body))
+      .then((error) => console.log('error', error));
+  }, []);
+
+  return (
+    <ul>
+      {products.map((product) => (
+        <Card key={product.detail_hash} product={product} cardSize={'medium'} />
+      ))}
+    </ul>
+  );
+};
+
+export default CarouselSection;

banchan/src/components/main/MainPage.jsx

@@ -1,3 +1,5 @@
-const MainPage = (props) => <></>;
+import CarouselSection from './CarouselSection';
+
+const MainPage = (props) => <CarouselSection />;
 
 export default MainPage;

banchan/src/components/utils/Card.jsx

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+import theme from './constant';
+
+const Card = ({ product, cardSize }) => {
+  return (
+    <CardContainer cardSize={cardSize}>
+      <img src={product.image} alt="card-image" />
+      <CardInfoContainer>
+        <div className="title">
+          <span>{product.title}</span>
+        </div>
+        <div className="description">
+          <span>{product.description}</span>
+        </div>
+        <Price product={product} />
+      </CardInfoContainer>
+    </CardContainer>
+  );
+};
+
+const Price = ({ product }) => {
+  const isOnSale = !!product.n_price;
+  if (!isOnSale) {
+    return <FinalPriceSpan>{product.s_price}</FinalPriceSpan>;
+  }
+  return (
+    <div className="price">
+      <FinalPriceSpan>{product.n_price}</FinalPriceSpan>
+      <OriginalPriceSpan>{product.s_price}</OriginalPriceSpan>
+    </div>
+  );
+};
+
+// ============================= ● Styled components ● =============================
+
+const CardContainer = styled.li`
+  width: ${(props) => (props.cardSize === 'medium' ? '308px' : '384px')};
+
+  img {
+    border-radius: ${theme.borders.radius};
+    margin-bottom: 16px;
+    width: ${(props) => (props.cardSize === 'medium' ? '308px' : '384px')};
+  }
+`;
+
+const CardInfoContainer = styled.div`
+  .title {
+    font-size: ${theme.fontSizes.S};
+    color: ${theme.colors.darkGray};
+  }
+
+  .description {
+    font-size: ${theme.fontSizes.XS};
+    color: ${theme.colors.gray};
+    margin: 8px 0px;
+  }
+
+  .price {
+    display: flex;
+    align-items: center;
+  }
+`;
+
+const FinalPriceSpan = styled.span`
+  font-size: ${theme.fontSizes.L};
+  font-weight: bold;
+  margin-right: 8px;
+`;
+
+const OriginalPriceSpan = styled.span`
+  font-size: ${theme.fontSizes.XS};
+  text-decoration: line-through;
+  color: ${theme.colors.lightGray};
+`;
+
+export default Card;

banchan/src/index.css

@@ -0,0 +1,4 @@
+* {
+  box-sizing: border-box;
+  list-style: none;
+}