feat:GoodsItem 컴포넌트 구현

README.old.md

@@ -28,9 +28,9 @@ FE 카카오 선물하기 1주차 과제: React 기초
     - [o] isvalid props에 따라 input값 ui에서 오류 인지
     - [o] input Element 기본 속성 모두 사용
 - Image 컴포넌트 구현
-    - [] ratio props에 따라 이미지 비율 설정
-    - [] radius props에 따라 모서리 둥글게 적용
-    - [] image Element 기본 속성 모두 사용
+    - [o] ratio props에 따라 이미지 비율 설정
+    - [o] radius props에 따라 모서리 둥글게 적용
+    - [o] image Element 기본 속성 모두 사용
 - GoodsItem 컴포넌트 구현
     - [] default 형태와 ranking 형태 컴포넌트 구현
     - [] Ranking 컴포넌트 랭킹 지정

src/stories/GoodsItem.css

@@ -0,0 +1,39 @@
+.goods-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .goods-item__image {
+    width: 100px;
+    height: 100px;
+  }
+
+  .goods-item__details {
+    text-align: center;
+  }
+
+  .goods-item__subtitle,
+  .goods-item__title,
+  .goods-item__amount {
+    margin: 4px 0;
+  }
+
+  .ranking-goods-item {
+    position: relative;
+  }
+
+  .ranking-goods-item__badge {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    background-color: pink;
+    border-radius: 50%;
+    padding: 5px 10px;
+    font-weight: bold;
+  }
+
+  .ranking-goods-item--normal .ranking-goods-item__badge {
+    background-color: gray;
+  }
+

src/stories/GoodsItem.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, Story } from '@storybook/react';
+import { GoodsItem, RankingGoodsItem, GoodsItemProps, RankingGoodsItemProps } from './GoodsItem';
+
+export default {
+  title: 'COMMON/GoodsItem',
+  component: GoodsItem,
+  argTypes: {
+    imageSrc: { control: 'text' },
+    subtitle: { control: 'text' },
+    title: { control: 'text' },
+    amount: { control: 'text' },
+    rankingIndex: { control: { type: 'number', min: 1, max: 10, step: 1 } },
+  },
+} as Meta;
+
+const Template: Story<GoodsItemProps> = (args) => <GoodsItem {...args} />;
+const RankingTemplate: Story<RankingGoodsItemProps> = (args) => <RankingGoodsItem {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  imageSrc: 'https://t1.kakaocdn.net/friends/www/talk/kakaofriends_talk_2018.png',
+  subtitle: '카카오 프렌즈 특별 한정판',
+  title: '[특가] 카카오 프렌즈 특별 한정판 브라이트 쿠션',
+  amount: '100000000000원',
+};
+
+export const Ranking = RankingTemplate.bind({});
+Ranking.args = {
+  rankingIndex: 1,
+  imageSrc: 'https://t1.kakaocdn.net/friends/www/talk/kakaofriends_talk_2018.png',
+  subtitle: '카카오 프렌즈 특별 한정판',
+  title: '[특가] 카카오 프렌즈 특별 한정판 브라이트 쿠션',
+  amount: '10000원',
+};

src/stories/GoodsItem.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import './GoodsItem.css';
+
+export interface GoodsItemProps {
+  imageSrc: string;
+  subtitle: string;
+  title: string;
+  amount: string;
+}
+
+export interface RankingGoodsItemProps extends GoodsItemProps {
+  rankingIndex: number;
+}
+
+export const GoodsItem: React.FC<GoodsItemProps> = ({ imageSrc, subtitle, title, amount }) => {
+  return (
+    <div className="goods-item">
+      <img src={imageSrc} alt={title} className="goods-item__image" />
+      <div className="goods-item__details">
+        <div className="goods-item__subtitle">{subtitle}</div>
+        <div className="goods-item__title">{title}</div>
+        <div className="goods-item__amount">{amount}</div>
+      </div>
+    </div>
+  );
+};
+
+export const RankingGoodsItem: React.FC<RankingGoodsItemProps> = ({ rankingIndex, imageSrc, subtitle, title, amount }) => {
+  const rankingClass = rankingIndex <= 3 ? 'ranking-goods-item--top' : 'ranking-goods-item--normal';
+  return (
+    <div className={`ranking-goods-item ${rankingClass}`}>
+      <div className="ranking-goods-item__badge">{rankingIndex}</div>
+      <GoodsItem imageSrc={imageSrc} subtitle={subtitle} title={title} amount={amount} />
+    </div>
+  );
+};