fix: item card design

Author: halionaz

src/common/components/ItemTokenList/index.tsx

@@ -19,9 +19,9 @@ interface Props {
     quality?: Quality;
     size: Size;
   };
-  showAll?: boolean;
+  showCount?: number;
 }
-const ItemTokenList = ({ itemInfo, showAll = true }: Props) => {
+const ItemTokenList = ({ itemInfo, showCount }: Props) => {
   const tags: TagType[] = [
     ...(itemInfo.transactionTypes || []),
     ...(itemInfo.productTypes || []),
@@ -30,7 +30,8 @@ const ItemTokenList = ({ itemInfo, showAll = true }: Props) => {
     ...(itemInfo.color ? [itemInfo.color] : []),
     ...(itemInfo.tradeMethods || []),
   ];
-  const showTags = showAll ? tags : tags.slice(0, 4);
+  const showAll = showCount === undefined;
+  const showTags = showAll ? tags : tags.slice(0, showCount);
   const noneShownCount = tags.length - showTags.length;
 
   return (

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

@@ -7,14 +7,16 @@ interface Props {
 const PriceToken = ({ price, deposit }: Props) => {
   const isRental = deposit !== undefined;
   return (
-    <div className={s.PriceItem}>
-      <label>{isRental ? '대여' : '판매'}</label>
-      <p>{price.toLocaleString()}원</p>
+    <div className={s.Wrapper}>
+      <div className={s.PriceItem}>
+        <label>{isRental ? '대여료' : '판매가'}</label>
+        <p>{price.toLocaleString()}원</p>
+      </div>
       {isRental && (
-        <p>
+        <div className={s.PriceItem}>
           <label>보증금</label>
-          {deposit.toLocaleString()}원
-        </p>
+          <p>{deposit.toLocaleString()}원</p>
+        </div>
       )}
     </div>
   );

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

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

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

@@ -28,7 +28,7 @@ const ItemCard = ({ data }: Props) => {
         <div className={s.Footer}>
           <div className={s.Tokens}>
             <ItemTokenList
-              showAll={false}
+              showCount={3}
               itemInfo={{
                 productTypes: data.productTypes,
                 quality: data.quality,

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

@@ -35,7 +35,7 @@ export const Header = css({
 export const Title = css({
   color: '100',
   fontSize: '1rem',
-  fontWeight: 400,
+  fontWeight: 500,
   lineHeight: 'normal',
   letterSpacing: '-0.04rem',
   lineClamp: 1,
@@ -44,7 +44,6 @@ export const Title = css({
 export const Price = css({
   display: 'flex',
   flexDir: 'column',
-  gap: '0.125rem',
 });
 
 export const Footer = css({