style: 복사, 저장 횟수 스타일 수정

YAPP-Github · Feb 22, 2024 · cf568a2 · cf568a2
1 parent dba829c
commit cf568a2
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 6 deletions.
diff --git a/src/domain/landing/components/LandingCard.tsx b/src/domain/landing/components/LandingCard.tsx
@@ -24,8 +24,14 @@ const LandingCard = ({ data }: LandingCardProps) => {
       </Card.Header>
       <Card.Body className={styles.cardBody}>{content}</Card.Body>
       <Card.Footer>
-        복사 <span>{formatNumberToCompact(copiedCount)}</span> • 저장{' '}
-        <span>{formatNumberToCompact(savedCount)}</span>
+        복사&nbsp;
+        <span className={styles.count}>
+          {formatNumberToCompact(copiedCount)}
+        </span>
+        &nbsp; • 저장&nbsp;
+        <span className={styles.count}>
+          {formatNumberToCompact(savedCount)}
+        </span>
       </Card.Footer>
     </Card>
   );

diff --git a/src/domain/landing/style.css.ts b/src/domain/landing/style.css.ts
@@ -174,3 +174,9 @@ export const buttonText = style({
   height: '58px',
   paddingTop: '17px',
 });
+
+export const count = style({
+  fontWeight: 500,
+  fontSize: '14px',
+  color: COLORS['Grey/500'],
+});
diff --git a/src/domain/저장하는/components/ArchivedCard/index.tsx b/src/domain/저장하는/components/ArchivedCard/index.tsx
@@ -73,8 +73,14 @@ const ArchivedCard = ({ folderId, card }: ArchivedCardProps) => {
         </Card.Header>
         <Card.Body>{card.content}</Card.Body>
         <Card.Footer>
-          복사 <span>{formatNumberToCompact(card.copiedCount)}</span> • 저장{' '}
-          <span>{formatNumberToCompact(card.savedCount)}</span>
+          복사&nbsp;
+          <span className={styles.count}>
+            {formatNumberToCompact(card.copiedCount)}
+          </span>
+          &nbsp; • 저장&nbsp;
+          <span className={styles.count}>
+            {formatNumberToCompact(card.savedCount)}
+          </span>
         </Card.Footer>
       </Card>
     );

diff --git a/src/domain/저장하는/components/ArchivedCard/style.css.ts b/src/domain/저장하는/components/ArchivedCard/style.css.ts
@@ -20,3 +20,9 @@ export const editButton = style([
     },
   },
 ]);
+
+export const count = style({
+  fontWeight: 500,
+  fontSize: '14px',
+  color: COLORS['Grey/500'],
+});
diff --git a/src/domain/참고하는/components/참고하는TemplateCard.css.ts b/src/domain/참고하는/components/참고하는TemplateCard.css.ts
@@ -1,6 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
 import { sprinkles } from '@styles/sprinkles.css';
+import { COLORS } from '@styles/tokens';
 
 export const wrapper = style([
   sprinkles({
@@ -15,3 +16,9 @@ export const wrapper = style([
     padding: '28px 32px 20px',
   },
 ]);
+
+export const count = style({
+  fontWeight: 500,
+  fontSize: '14px',
+  color: COLORS['Grey/500'],
+});
diff --git a/src/domain/참고하는/components/참고하는TemplateCard.tsx b/src/domain/참고하는/components/참고하는TemplateCard.tsx
@@ -69,8 +69,14 @@ const 참고하는TemplateCard = ({
       </Card.Header>
       <Card.Body>{content}</Card.Body>
       <Card.Footer>
-        복사 <span>{formatNumberToCompact(copiedCount)}</span> • 저장{' '}
-        <span>{formatNumberToCompact(savedCount)}</span>
+        복사&nbsp;
+        <span className={styles.count}>
+          {formatNumberToCompact(copiedCount)}
+        </span>
+        &nbsp; • 저장&nbsp;
+        <span className={styles.count}>
+          {formatNumberToCompact(savedCount)}
+        </span>
       </Card.Footer>
     </Card>
   );