Merge pull request #88 from DevKor-github/fix/#32/home-page

[#32] 홈화면 디자인 수정

Author: halionaz

src/common/components/ItemTokenList/index.tsx

@@ -1,25 +1,47 @@
-import type { ItemInfoInterface } from '@/features/detail/types';
 import Token from '@/common/components/Token';
-import { TAG_TYPES_MAP, type TagType } from '@/libs/types/item';
+import {
+  TAG_TYPES_MAP,
+  type Color,
+  type ProductType,
+  type Quality,
+  type Size,
+  type TagType,
+  type TradeMethods,
+  type TransactionType,
+} from '@/libs/types/item';
 
 interface Props {
-  itemInfo: ItemInfoInterface;
+  itemInfo: {
+    productTypes?: ProductType[];
+    transactionTypes?: TransactionType[];
+    color?: Color;
+    tradeMethods?: TradeMethods[];
+    quality?: Quality;
+    size: Size;
+  };
+  showAll?: boolean;
 }
-const ItemTokenList = ({ itemInfo }: Props) => {
+const ItemTokenList = ({ itemInfo, showAll = true }: Props) => {
   const tags: TagType[] = [
-    ...itemInfo.transactionTypes,
-    ...itemInfo.productTypes,
-    itemInfo.color,
-    ...itemInfo.tradeMethods,
-    itemInfo.quality,
-    itemInfo.size,
+    ...(itemInfo.transactionTypes || []),
+    ...(itemInfo.productTypes || []),
+    ...(itemInfo.size ? [itemInfo.size] : []),
+    ...(itemInfo.quality ? [itemInfo.quality] : []),
+    ...(itemInfo.color ? [itemInfo.color] : []),
+    ...(itemInfo.tradeMethods || []),
   ];
+  const showTags = showAll ? tags : tags.slice(0, 4);
+  const noneShownCount = tags.length - showTags.length;
 
   return (
     <>
-      {tags.map(type => (
-        <Token key={type}>{TAG_TYPES_MAP[type]}</Token>
-      ))}
+      {showTags.map(type => {
+        // 기타는 표시 X
+        if (type === 'COLOR_OTHER' || type === 'PRODUCT_OTHER') return null;
+
+        return <Token key={type}>{TAG_TYPES_MAP[type]}</Token>;
+      })}
+      {!showAll && noneShownCount > 0 && <Token>+{noneShownCount}</Token>}
     </>
   );
 };

src/common/components/Token/style.css.ts

@@ -9,4 +9,5 @@ export const Container = css({
   fontSize: '0.625rem',
   fontWeight: 500,
   letterSpacing: '-0.025rem',
+  flexShrink: 0,
 });

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

@@ -2,36 +2,40 @@ import { Link } from 'react-router';
 
 import * as s from './style.css';
 
-import { PRODUCT_TYPES_MAP } from '@/libs/types/item';
 import type { ItemInterface } from '@/features/home/types';
-import Token from '@/common/components/Token';
+import ItemTokenList from '@/common/components/ItemTokenList';
+import PriceToken from '@/features/home/components/ItemCard/PriceToken';
 
 interface Props {
   data: ItemInterface;
 }
 const ItemCard = ({ data }: Props) => {
+  const isRental = data.transactionTypes.includes('RENTAL');
+  const isSale = data.transactionTypes.includes('SALE');
+
   return (
     <Link className={s.Container} to={`/detail/${data.itemId}`}>
       <img className={s.Image} src={data.thumbnail} aria-hidden />
       <div className={s.Info}>
         <div className={s.Header}>
           <h2 className={s.Title}>{data.title}</h2>
           <div className={s.Price}>
-            <div className={s.PriceItem}>
-              <label>대여료</label>
-              <p>{data.rentalFee.toLocaleString()}원</p>
-            </div>
-            <div className={s.PriceItem}>
-              <label>보증금</label>
-              <p>{data.deposit.toLocaleString()}원</p>
-            </div>
+            {isRental && <PriceToken price={data.rentalFee} deposit={data.deposit} />}
+            {isSale && <PriceToken price={data.salePrice} />}
           </div>
         </div>
         <div className={s.Footer}>
           <div className={s.Tokens}>
-            {data.productTypes.map((type, index) => (
-              <Token key={`${type}-${index}`}>{PRODUCT_TYPES_MAP[type]}</Token>
-            ))}
+            {/* TODO: API 수정 요청 */}
+            <ItemTokenList
+              showAll={false}
+              itemInfo={{
+                productTypes: data.productTypes,
+                quality: 'BEST',
+                size: 'L',
+                tradeMethods: ['DIRECT'],
+              }}
+            />
           </div>
           <div className={s.Interactions}>
             <div className={s.InteractionItem}>

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

@@ -2,84 +2,71 @@ import { css } from '@styled-system/css';
 
 export const Container = css({
   w: 'full',
-  h: '6.25rem',
+  h: '6.5rem',
   display: 'flex',
   alignItems: 'stretch',
   gap: '1rem',
 });
 
 export const Image = css({
-  w: '6.25rem',
-  h: '6.25rem',
-  borderRadius: '12.5px',
+  w: '6.5rem',
+  h: '6.5rem',
+  borderRadius: '0.78125rem',
   objectFit: 'cover',
+  flexShrink: 0,
 });
 
 export const Info = css({
   flex: '1 0 0',
   display: 'flex',
   flexDir: 'column',
   justifyContent: 'space-between',
-  padding: '0.25rem 0',
+  padding: '0.125rem 0',
+  overflow: 'hidden',
 });
 
 export const Header = css({
   display: 'flex',
   flexDir: 'column',
   gap: '0.25rem',
+  alignItems: 'stretch',
 });
 
 export const Title = css({
   color: '100',
   fontSize: '1rem',
-  fontWeight: 500,
-  lineHeight: 1.2,
+  fontWeight: 400,
+  lineHeight: 'normal',
   letterSpacing: '-0.04rem',
+  lineClamp: 1,
 });
 
 export const Price = css({
   display: 'flex',
-  alignItems: 'center',
-  gap: '0.875rem',
-  height: '1.5625rem',
-});
-
-export const PriceItem = css({
-  display: 'flex',
-  alignItems: 'baseline',
-  gap: '0.25rem',
-  '& label': {
-    color: '54',
-    fontSize: '0.875rem',
-    fontWeight: 500,
-    lineHeight: 1.4,
-    letterSpacing: '-0.035rem',
-  },
-  '& p': {
-    color: '100',
-    fontSize: '1rem',
-    fontWeight: 600,
-    lineHeight: 1.4,
-    letterSpacing: '-0.04rem',
-  },
+  flexDir: 'column',
+  gap: '0.125rem',
 });
 
 export const Footer = css({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
+  width: 'full',
+  gap: '0.25rem',
 });
 
 export const Tokens = css({
   display: 'flex',
   alignItems: 'center',
   gap: '0.25rem',
+  overflowX: 'auto',
 });
 
 export const Interactions = css({
   display: 'flex',
   alignItems: 'center',
-  gap: '0.875rem',
+  gap: '0.625rem',
+  flexShrink: 0,
 });
 
 export const InteractionItem = css({

src/libs/constants/index.ts

@@ -0,0 +1 @@
+export const MAX_PRICE = 999999;

src/libs/types/item.ts

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