refactor: [1주차 리뷰] optional 설정 및 컴포넌트 분리

src/components/GoodsItem.tsx

@@ -1,47 +1,68 @@
 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;
 }
 
 export const GoodsItem = ({ imageSrc, subtitle, title, amount, rankingIndex }: IGoodsItem) => {
   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;
 `;