refactor: Text 컴포넌트로 수정

fun-eat · Apr 9, 2024 · 6f33968 · 6f33968
1 parent 9be326a
commit 6f33968
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 58 deletions.
diff --git 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
@@ -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
@@ -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
@@ -1,19 +1,8 @@
-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',
   alignItems: 'center',
   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
@@ -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
@@ -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',
 });