From 6f339689e926a6a9e7037d181fd8649865b8b653 Mon Sep 17 00:00:00 2001
From: Leejin-Yang <ejin1996@gmail.com>
Date: Tue, 9 Apr 2024 22:41:10 +0200
Subject: [PATCH] =?UTF-8?q?refactor:=20Text=20=EC=BB=B4=ED=8F=AC=EB=84=8C?=
 =?UTF-8?q?=ED=8A=B8=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ProductDetailItem/ProductDetailItem.tsx   | 28 +++++++++++--------
 .../productDetailItem.css.ts                  | 19 ++-----------
 .../ReviewFavoriteButton.tsx                  |  4 +--
 .../reviewFavoriteButton.css.ts               | 13 +--------
 .../Review/ReviewItem/ReviewItem.tsx          | 11 ++++----
 .../Review/ReviewItem/reviewItem.css.ts       | 11 --------
 6 files changed, 28 insertions(+), 58 deletions(-)

diff --git a/src/components/Product/ProductDetailItem/ProductDetailItem.tsx b/src/components/Product/ProductDetailItem/ProductDetailItem.tsx
index 5d65d2af..ba78a5e5 100644
--- a/src/components/Product/ProductDetailItem/ProductDetailItem.tsx
+++ b/src/components/Product/ProductDetailItem/ProductDetailItem.tsx
@@ -1,6 +1,4 @@
 import {
-  categoryName,
-  preview,
   previewWrapper,
   productContent,
   productDetails,
@@ -14,7 +12,7 @@ import {
   tagList,
 } from './productDetailItem.css';
 
-import { SvgIcon } from '@/components/Common';
+import { SvgIcon, Text } from '@/components/Common';
 import type { ProductDetail } from '@/types/product';
 
 interface ProductDetailItemProps {
@@ -31,33 +29,41 @@ const ProductDetailItem = ({ productDetail }: ProductDetailItemProps) => {
       <div className={productOverview}>
         <div className={productInfo}>
           <div className={productDetails}>
-            <p className={categoryName}>{category.name}</p>
+            <Text size="caption1" weight="medium">
+              {category.name}
+            </Text>
             <h2 className={productName}>{name}</h2>
-            <p className={productPrice}>{price.toLocaleString('ko-KR')}원</p>
+            <Text weight="semiBold" className={productPrice}>
+              {price.toLocaleString('ko-KR')}원
+            </Text>
           </div>
 
           <div className={summaryWrapper}>
             <div className={previewWrapper}>
               <SvgIcon variant="star2" width={14} height={14} fill="#ffc14a" />
-              <span className={preview} aria-label={`${averageRating}점`}>
+              <Text as="span" size="caption1" weight="medium" aria-label={`${averageRating}점`}>
                 {averageRating.toFixed(1)}
-              </span>
+              </Text>
             </div>
             <div className={previewWrapper}>
               <SvgIcon variant="review2" width={14} height={14} fill="#ddd" />
-              <span className={preview} aria-label={`리뷰 ${reviewCount}개`}>
+              <Text as="span" size="caption1" weight="medium" aria-label={`리뷰 ${reviewCount}개`}>
                 {reviewCount}
-              </span>
+              </Text>
             </div>
           </div>
         </div>
 
-        <p className={productContent}>{content}</p>
+        <Text color="info" size="caption2" className={productContent}>
+          {content}
+        </Text>
 
         <ul className={tagList}>
           {tags.map(({ id, name }) => (
             <li key={id} className={tag}>
-              <span>{name}</span>
+              <Text as="span" color="info" size="caption2" weight="medium">
+                {name}
+              </Text>
             </li>
           ))}
         </ul>
diff --git a/src/components/Product/ProductDetailItem/productDetailItem.css.ts b/src/components/Product/ProductDetailItem/productDetailItem.css.ts
index 20bb7584..a5f52705 100644
--- a/src/components/Product/ProductDetailItem/productDetailItem.css.ts
+++ b/src/components/Product/ProductDetailItem/productDetailItem.css.ts
@@ -1,3 +1,4 @@
+import { vars } from '@/styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const container = style({
@@ -29,10 +30,7 @@ export const productDetails = style({
 });
 
 export const categoryName = style({
-  fontSize: '1.4rem',
-  fontWeight: 500,
-  color: '#808080',
-  lineHeight: 1.4,
+  color: vars.colors.gray4,
 });
 
 export const productName = style({
@@ -43,8 +41,6 @@ export const productName = style({
 
 export const productPrice = style({
   fontSize: '2.2rem',
-  fontWeight: 600,
-  lineHeight: 1.4,
 });
 
 export const summaryWrapper = style({
@@ -59,17 +55,9 @@ export const previewWrapper = style({
   gap: 4,
 });
 
-export const preview = style({
-  fontSize: '1.4rem',
-  fontWeight: 500,
-});
-
 export const productContent = style({
   padding: '0 20px',
   marginTop: 16,
-  color: '#808080',
-  fontSize: '1.3rem',
-  lineHeight: 1.4,
   whiteSpace: 'pre-line',
 });
 
@@ -86,9 +74,6 @@ export const tag = style({
   justifyContent: 'center',
   height: 26,
   padding: '0 10px',
-  color: '#808080',
-  fontSize: 11,
-  fontWeight: 500,
   textAlign: 'center',
   borderRadius: 4,
   backgroundColor: '#f2f2f2',
diff --git a/src/components/Review/ReviewFavoriteButton/ReviewFavoriteButton.tsx b/src/components/Review/ReviewFavoriteButton/ReviewFavoriteButton.tsx
index ac278774..db809e2c 100644
--- a/src/components/Review/ReviewFavoriteButton/ReviewFavoriteButton.tsx
+++ b/src/components/Review/ReviewFavoriteButton/ReviewFavoriteButton.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { count, favoriteButton } from './reviewFavoriteButton.css';
+import { favoriteButton } from './reviewFavoriteButton.css';
 
 import { SvgIcon, Text } from '@/components/Common';
 import { useTimeout } from '@/hooks/common';
@@ -51,7 +51,7 @@ const ReviewFavoriteButton = ({ productId, reviewId, favorite, favoriteCount }:
       aria-label={`좋아요 ${currentFavoriteCount}개`}
     >
       <SvgIcon variant="favorite2" width={16} fill={isFavorite ? vars.colors.error : vars.colors.icon.light} />
-      <Text as="span" className={isFavorite ? count.favorite : count.default}>
+      <Text as="span" color={isFavorite ? 'sub' : 'info'} size="caption1" weight="medium">
         {currentFavoriteCount}
       </Text>
     </button>
diff --git a/src/components/Review/ReviewFavoriteButton/reviewFavoriteButton.css.ts b/src/components/Review/ReviewFavoriteButton/reviewFavoriteButton.css.ts
index fa5695ad..b8698b1a 100644
--- a/src/components/Review/ReviewFavoriteButton/reviewFavoriteButton.css.ts
+++ b/src/components/Review/ReviewFavoriteButton/reviewFavoriteButton.css.ts
@@ -1,5 +1,4 @@
-import { vars } from '@/styles/theme.css';
-import { style, styleVariants } from '@vanilla-extract/css';
+import { style } from '@vanilla-extract/css';
 
 export const favoriteButton = style({
   display: 'flex',
@@ -7,13 +6,3 @@ export const favoriteButton = style({
   gap: 4,
   cursor: 'pointer',
 });
-
-export const countBase = style({
-  fontSize: '1.4rem',
-  fontWeight: 500,
-});
-
-export const count = styleVariants({
-  favorite: [countBase, { color: vars.colors.gray4 }],
-  default: [countBase, { color: vars.colors.gray3 }],
-});
diff --git a/src/components/Review/ReviewItem/ReviewItem.tsx b/src/components/Review/ReviewItem/ReviewItem.tsx
index c5ed4eed..789778ed 100644
--- a/src/components/Review/ReviewItem/ReviewItem.tsx
+++ b/src/components/Review/ReviewItem/ReviewItem.tsx
@@ -5,7 +5,6 @@ import {
   favoriteWrapper,
   memberImage,
   memberInfo,
-  memberName,
   ratingInfo,
   ratingNumber,
   ratingWrapper,
@@ -32,7 +31,7 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => {
     <div>
       <div className={memberInfo}>
         <img src={profileImage} className={memberImage} width={36} height={36} alt={`${userName}의 프로필`} />
-        <p className={memberName}>{userName}</p>
+        <Text weight="semiBold">{userName}</Text>
         {rebuy && (
           <Badge color={vars.colors.black} textColor={vars.colors.secondary1}>
             또 살래요
@@ -47,7 +46,7 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => {
 
       <div className={ratingWrapper}>
         <div className={ratingInfo}>
-          <Text as="span" className={ratingNumber}>
+          <Text as="span" size="caption3" weight="medium" className={ratingNumber}>
             {rating.toFixed(1)}
           </Text>
           {Array.from({ length: 5 }, (_, index) => (
@@ -60,7 +59,7 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => {
             />
           ))}
         </div>
-        <Text as="span" className={date}>
+        <Text as="span" size="caption4" color="disabled" className={date}>
           {getRelativeDate(createdAt)}
         </Text>
       </div>
@@ -71,7 +70,9 @@ const ReviewItem = ({ productId, review }: ReviewItemProps) => {
 
       <div style={{ height: '8px' }} />
 
-      <Text className={reviewContent}>{content}</Text>
+      <Text color="sub" size="caption2" className={reviewContent}>
+        {content}
+      </Text>
 
       <div style={{ height: '8px' }} />
 
diff --git a/src/components/Review/ReviewItem/reviewItem.css.ts b/src/components/Review/ReviewItem/reviewItem.css.ts
index 33f80140..3d3751d3 100644
--- a/src/components/Review/ReviewItem/reviewItem.css.ts
+++ b/src/components/Review/ReviewItem/reviewItem.css.ts
@@ -12,10 +12,6 @@ export const memberImage = style({
   objectFit: 'cover',
 });
 
-export const memberName = style({
-  fontWeight: 600,
-});
-
 export const favoriteWrapper = style({
   marginLeft: 'auto',
 });
@@ -34,16 +30,11 @@ export const ratingInfo = style({
 
 export const ratingNumber = style({
   paddingTop: 4,
-  fontSize: '1.2rem',
   color: vars.colors.gray5,
-  fontWeight: 500,
 });
 
 export const date = style({
   paddingTop: 2,
-  fontSize: '1.1rem',
-  fontWeight: 500,
-  color: vars.colors.text.disabled,
 });
 
 export const reviewImage = style({
@@ -52,7 +43,5 @@ export const reviewImage = style({
 });
 
 export const reviewContent = style({
-  fontSize: '1.3rem',
-  color: vars.colors.text.sub,
   whiteSpace: 'pre-wrap',
 });