From a3d5b2e4cd31b533c6ffb2b1b085e36771592be1 Mon Sep 17 00:00:00 2001
From: Hyoeunkh <lhe4528@knu.ac.kr>
Date: Sun, 30 Jun 2024 15:46:41 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20[1=EC=A3=BC=EC=B0=A8=20=EB=A6=AC?=
 =?UTF-8?q?=EB=B7=B0]=20optional=20=EC=84=A4=EC=A0=95=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GoodsItem.tsx | 71 +++++++++++++++++++++++-------------
 1 file changed, 46 insertions(+), 25 deletions(-)

diff --git a/src/components/GoodsItem.tsx b/src/components/GoodsItem.tsx
index e0dda5311..4a79511b3 100644
--- a/src/components/GoodsItem.tsx
+++ b/src/components/GoodsItem.tsx
@@ -1,10 +1,11 @@
 import styled from '@emotion/styled';
+import { Image } from './Image';
 
 export interface IGoodsItem {
-  imageSrc?: string;
-  subtitle?: string;
-  title?: string;
-  amount?: number;
+  imageSrc: string;
+  subtitle: string;
+  title: string;
+  amount: number;
   rankingIndex?: number;
 }
 
@@ -12,36 +13,56 @@ export const GoodsItem = ({ imageSrc, subtitle, title, amount, rankingIndex }: I
   return (
     <GoodsItemWrapper>
       {rankingIndex ? <RankingNumber rankingIndex={rankingIndex}>{rankingIndex}</RankingNumber> : null}
-      <img src={imageSrc} alt="goodsItem" />
-      <p className="subtitle">{subtitle}</p>
-      <p>{title}</p>
-      <h1>{amount}원</h1>
+      <Image radius={3} ratio="square" src={imageSrc} width="100%" alt="goodsItem" />
+      <GoodsDescription>
+        <GoodsItemSubtitle>{subtitle}</GoodsItemSubtitle>
+        <GoodsItemTitle>{title}</GoodsItemTitle>
+        <GoodsItemAmout>{amount}원</GoodsItemAmout>
+      </GoodsDescription>
     </GoodsItemWrapper>
   );
 };
 
 const GoodsItemWrapper = styled.div`
-  width: 60px;
+  width: 120px;
   position: relative;
-  .subtitle {
-    color: gray;
-  }
-  .img {
-    object-fit: cover;
-    aspect-ratio: auto 1 / 1;
-  }
-  p {
-    width: 100%;
-  }
 `;
-
-const RankingNumber = styled.div<IGoodsItem>`
+const GoodsDescription = styled.div`
+  width: 100%;
+  padding-top: 10px;
+  word-break: break-word;
+`;
+const GoodsItemSubtitle = styled.p`
+  width: 100%;
+  color: gray;
+  font-size: 12px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin: 0;
+`;
+const GoodsItemTitle = styled.h5`
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  margin: 0;
+`;
+const GoodsItemAmout = styled.h2`
+  width: 100%;
+`;
+const RankingNumber = styled.div<Pick<IGoodsItem, 'rankingIndex'>>`
+  width: 30px;
+  height: 30px;
   position: absolute;
+  display: flex;
   left: 4px;
   top: 4px;
-  background-color: ${(props) => (props.rankingIndex && props.rankingIndex > 3 ? 'gray' : '#c93e17')};
-  border-radius: 2px;
+  background-color: ${(props) => (props.rankingIndex && props.rankingIndex > 3 ? 'gray' : '#e05f3b')};
+  border-radius: 6px;
   color: white;
-  text-align: center;
-  align-content: center;
+  justify-content: center;
+  align-items: center;
 `;