♻️ 비어 있는 스타일 객체를 사용하지 않도록 리팩토링

boostcampwm2023 · Nov 28, 2023 · ddb6813 · ddb6813
1 parent ed9a5dc
commit ddb6813
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 13 deletions.
diff --git a/app/frontend/src/components/Sidebar/Contents/Mogaco/GroupWrapper.tsx b/app/frontend/src/components/Sidebar/Contents/Mogaco/GroupWrapper.tsx
@@ -1,4 +1,5 @@
 import { UserChip } from '@/components';
+import { sansBold14 } from '@/styles/font.css';
 import { Member } from '@/types';
 
 import * as styles from './index.css';
@@ -11,7 +12,7 @@ export function GroupWrapper({
     <div className={styles.groupWrapper}>
       <UserChip username={nickname} profileSrc={profilePicture} />
       {/* TODO: group 받아와서 적용 */}
-      <span className={styles.group}>부스트캠프 웹모바일 8기</span>
+      <span className={sansBold14}>부스트캠프 웹모바일 8기</span>
     </div>
   );
 }
diff --git a/app/frontend/src/components/Sidebar/Contents/Mogaco/MogacoInfo.tsx b/app/frontend/src/components/Sidebar/Contents/Mogaco/MogacoInfo.tsx
@@ -1,4 +1,5 @@
 import { Button } from '@/components';
+import { sansRegular16 } from '@/styles/font.css';
 import { Mogaco } from '@/types';
 
 import { GroupWrapper } from './GroupWrapper';
@@ -39,7 +40,7 @@ export function MogacoInfo({
           maxHumanCount={maxHumanCount}
           address={address}
         />
-        <p className={styles.contents}>{contents}</p>
+        <p className={sansRegular16}>{contents}</p>
       </div>
       <Button
         fullWidth

diff --git a/app/frontend/src/components/Sidebar/Contents/Mogaco/TitleWrapper.tsx b/app/frontend/src/components/Sidebar/Contents/Mogaco/TitleWrapper.tsx
@@ -1,4 +1,5 @@
 import { Label } from '@/components';
+import { sansBold24 } from '@/styles/font.css';
 import { MogacoTypes } from '@/types';
 
 import * as styles from './index.css';
@@ -12,7 +13,7 @@ export function TitleWrapper({
       <Label theme="primary" shape="fill">
         {status}
       </Label>
-      <span className={styles.title}>{title}</span>
+      <span className={sansBold24}>{title}</span>
     </div>
   );
 }
diff --git a/app/frontend/src/components/Sidebar/Contents/Mogaco/index.css.ts b/app/frontend/src/components/Sidebar/Contents/Mogaco/index.css.ts
@@ -1,12 +1,7 @@
 import { style } from '@vanilla-extract/css';
 
 import { vars } from '@/styles';
-import {
-  sansBold14,
-  sansBold24,
-  sansRegular12,
-  sansRegular16,
-} from '@/styles/font.css';
+import { sansRegular12 } from '@/styles/font.css';
 
 export const container = style({
   display: 'flex',
@@ -16,8 +11,6 @@ export const container = style({
   color: vars.color.grayscaleBlack,
   padding: '2rem',
 });
-export const contents = style([sansRegular16, {}]);
-export const group = style([sansBold14, {}]);
 export const groupWrapper = style({
   display: 'flex',
   alignItems: 'center',
@@ -49,8 +42,6 @@ export const infoWrapper = style({
   flexDirection: 'column',
   gap: '0.4rem',
 });
-
-export const title = style([sansBold24, {}]);
 export const titleWrapper = style({
   display: 'flex',
   gap: '0.4rem',