fix(mod): thx goeng - price token 분리, 아이스하키 하키로 바꿔치기

Author: halionaz

src/features/home/components/ItemCard/PriceToken/index.tsx

@@ -0,0 +1,22 @@
+import * as s from './style.css';
+
+interface Props {
+  price: number;
+  deposit?: number;
+}
+const PriceToken = ({ price, deposit }: Props) => {
+  const isRental = deposit !== undefined;
+  return (
+    <div className={s.PriceItem}>
+      <label>{isRental ? '대여' : '판매'}</label>
+      <p>{price.toLocaleString()}원</p>
+      {isRental && (
+        <p>
+          <label>보증금</label>
+          {deposit.toLocaleString()}원
+        </p>
+      )}
+    </div>
+  );
+};
+export default PriceToken;

src/features/home/components/ItemCard/PriceToken/style.css.ts

@@ -0,0 +1,37 @@
+import { css } from '@styled-system/css';
+
+export const PriceItem = css({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.375rem',
+  '& > label': {
+    padding: '0.125rem 0.25rem',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    rounded: '0.25rem',
+    bgColor: 'systemGray4',
+    color: '54',
+    fontSize: '0.625rem',
+    fontWeight: 500,
+    lineHeight: 1.4,
+    letterSpacing: '-0.025rem',
+    flexShrink: 0,
+  },
+  '& p': {
+    color: '100',
+    fontSize: '1rem',
+    fontWeight: 600,
+    lineHeight: 1.4,
+    letterSpacing: '-0.04rem',
+    display: 'flex',
+    gap: '0.375rem',
+    alignItems: 'baseline',
+    '& > label': {
+      color: '54',
+      fontSize: '0.875rem',
+      fontWeight: 500,
+      letterSpacing: '-0.035rem',
+    },
+  },
+});

src/features/home/components/ItemCard/index.tsx

@@ -4,6 +4,7 @@ import * as s from './style.css';
 
 import type { ItemInterface } from '@/features/home/types';
 import ItemTokenList from '@/common/components/ItemTokenList';
+import PriceToken from '@/features/home/components/ItemCard/PriceToken';
 
 interface Props {
   data: ItemInterface;
@@ -19,22 +20,8 @@ const ItemCard = ({ data }: Props) => {
         <div className={s.Header}>
           <h2 className={s.Title}>{data.title}</h2>
           <div className={s.Price}>
-            {isRental && (
-              <div className={s.PriceItem}>
-                <label>대여</label>
-                <p>{data.rentalFee.toLocaleString()}원</p>
-                <p>
-                  <label>보증금</label>
-                  {data.deposit.toLocaleString()}원
-                </p>
-              </div>
-            )}
-            {isSale && (
-              <div className={s.PriceItem}>
-                <label>판매</label>
-                <p>{data.salePrice.toLocaleString()}원</p>
-              </div>
-            )}
+            {isRental && <PriceToken price={data.rentalFee} deposit={data.deposit} />}
+            {isSale && <PriceToken price={data.salePrice} />}
           </div>
         </div>
         <div className={s.Footer}>

src/features/home/components/ItemCard/style.css.ts

@@ -47,42 +47,6 @@ export const Price = css({
   gap: '0.125rem',
 });
 
-export const PriceItem = css({
-  display: 'flex',
-  alignItems: 'center',
-  gap: '0.375rem',
-  '& > label': {
-    padding: '0.125rem 0.25rem',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    rounded: '0.25rem',
-    bgColor: 'systemGray4',
-    color: '54',
-    fontSize: '0.625rem',
-    fontWeight: 500,
-    lineHeight: 1.4,
-    letterSpacing: '-0.025rem',
-    flexShrink: 0,
-  },
-  '& p': {
-    color: '100',
-    fontSize: '1rem',
-    fontWeight: 600,
-    lineHeight: 1.4,
-    letterSpacing: '-0.04rem',
-    display: 'flex',
-    gap: '0.375rem',
-    alignItems: 'baseline',
-    '& > label': {
-      color: '54',
-      fontSize: '0.875rem',
-      fontWeight: 500,
-      letterSpacing: '-0.035rem',
-    },
-  },
-});
-
 export const Footer = css({
   display: 'flex',
   alignItems: 'center',

src/libs/types/item.ts

@@ -6,7 +6,7 @@ export const PRODUCT_TYPES_MAP = {
   SOCCER: '축구',
   BASKETBALL: '농구',
   BASEBALL: '야구',
-  HOCKEY: '아이스하키',
+  HOCKEY: '하키',
   VARSITY_JACKET: '과잠',
   ACCESSORY: '악세사리',
   SELF_MADE: '자체제작',