team-da-sh · rtttr1 · Jan 1, 2026 · Jan 2, 2026 · Jan 2, 2026 · Jan 2, 2026
@@ -10,6 +10,7 @@
     "preview": "vite preview",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "analyze": "vite-bundle-visualizer",
     "svgr": "npx @svgr/cli -d src/shared/assets/svg --no-prettier --ignore-existing --typescript --no-dimensions --no-index --jsx-runtime automatic public/svg"
   },
   "dependencies": {

@@ -1,13 +1,22 @@
 import { lazy, Suspense } from 'react';
 import Card from '@/pages/class/components/Card/Card';
-import * as styles from '@/pages/class/components/TabWrapper/TabLevel/tabLevel.css';
+import {
+  cardStyle,
+  levelStyle,
+  recommendClassStyle,
+  sectionStyle,
+  headerWrapperStyle,
+  cardContentStyle,
+  infoWrapperStyle,
+  recommendationSectionStyle,
+  recommendationHeaderStyle,
+} from '@/pages/class/components/TabWrapper/TabLevel/tabLevel.css';
 import type { LessonDetailResponseTypes } from '@/pages/class/types/api';
 import IcQuesitonmark from '@/shared/assets/svg/IcQuesitonmark';
 import Head from '@/shared/components/Head/Head';
 import Text from '@/shared/components/Text/Text';
 import { notify } from '@/shared/components/Toast/Toast';
 import { LEVEL, levelMapping } from '@/shared/constants/index';
-import { sprinkles } from '@/shared/styles/sprinkles.css';
 
 const IcSparkleMain20 = lazy(() => import('@/shared/assets/svg/IcSparkleMain20'));
 const IcLevelStarter = lazy(() => import('@/shared/assets/svg/IcLevelStarter'));
@@ -18,41 +27,28 @@ const TabLevel = ({ lessonData }: { lessonData: LessonDetailResponseTypes }) =>
   const levelData = LEVEL.find((item) => item.title === levelMapping[level]);
 
   return (
-    <section className={sprinkles({ display: 'flex', flexDirection: 'column', gap: 36 })}>
-      <div
-        className={sprinkles({
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'flex-end',
-          width: '100%',
-          gap: 8,
-        })}>
-        <Card className={styles.cardStyle}>
-          <div className={sprinkles({ display: 'flex', alignItems: 'center', gap: 8 })}>
+    <section className={sectionStyle}>
+      <div className={headerWrapperStyle}>
+        <Card className={cardStyle}>
+          <div className={cardContentStyle}>
             {levelData?.icon || <IcLevelStarter width={'3.6rem'} />}
-            <Head level="h6" tag="b1_sb" className={styles.levelStyle}>
+            <Head level="h6" tag="b1_sb" className={levelStyle}>
               {levelMapping[level]}
             </Head>
             <Text tag="b3_m_narrow" color="gray8">
               {levelData?.description}
             </Text>
           </div>
         </Card>
-        <div
-          className={sprinkles({
-            display: 'flex',
-            justifyContent: 'flex-end',
-            alignItems: 'center',
-            gap: 6,
-          })}>
+        <div className={infoWrapperStyle}>
           <Text tag="c1_m" color="gray7">
             클래스 난이도는 이렇게 설정되어있어요!
           </Text>
           <IcQuesitonmark width={'1.4rem'} onClick={() => notify({ message: '해당 기능은 추후 구현 예정이에요' })} />
         </div>
       </div>
-      <div className={sprinkles({ display: 'flex', flexDirection: 'column', gap: 17 })}>
-        <div className={sprinkles({ display: 'flex', justifyContent: 'flex-start', alignItems: 'center', gap: 4 })}>
+      <div className={recommendationSectionStyle}>
+        <div className={recommendationHeaderStyle}>
           <Suspense fallback={<div style={{ width: '2.4rem', height: '22.85px' }} />}>
             <IcSparkleMain20 width={'2.4rem'} />
           </Suspense>
@@ -61,7 +57,7 @@ const TabLevel = ({ lessonData }: { lessonData: LessonDetailResponseTypes }) =>
           </Head>
         </div>
 
-        <Text tag="b2_m_long" color="gray8" className={styles.recommendClassStyle}>
+        <Text tag="b2_m_long" color="gray8" className={recommendClassStyle}>
           {recommendation}
         </Text>
       </div>

@@ -20,3 +20,43 @@ export const levelStyle = style({
 export const cardStyle = style({
   border: `1px solid ${vars.colors.gray03}`,
 });
+
+export const sectionStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '3.6rem',
+});
+
+export const headerWrapperStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end',
+  width: '100%',
+  gap: '0.8rem',
+});
+
+export const cardContentStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '0.8rem',
+});
+
+export const infoWrapperStyle = style({
+  display: 'flex',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  gap: '0.6rem',
+});
+
+export const recommendationSectionStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '1.7rem',
+});
+
+export const recommendationHeaderStyle = style({
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  gap: '0.4rem',
+});
@@ -1,28 +1,33 @@
 import Card from '@/pages/class/components/Card/Card';
-import * as styles from '@/pages/class/components/TabWrapper/TabPeriod/tabPeriod.css';
+import {
+  cardStyle,
+  roundBoxStyle,
+  sectionStyle,
+  cardContentStyle,
+  periodInfoStyle,
+} from '@/pages/class/components/TabWrapper/TabPeriod/tabPeriod.css';
 import type { LessonDetailResponseTypes } from '@/pages/class/types/api';
 import Text from '@/shared/components/Text/Text';
-import { sprinkles } from '@/shared/styles/sprinkles.css';
 import { calculatePeriod, formatDate } from '@/shared/utils/dateCalculate';
 
 const TabPeriod = ({ lessonData }: { lessonData: LessonDetailResponseTypes }) => {
   const { lessonRound } = lessonData;
   const lessonRounds = lessonRound.lessonRounds;
 
   return (
-    <section className={sprinkles({ display: 'flex', flexDirection: 'column', justifyContent: 'center', gap: 12 })}>
+    <section className={sectionStyle}>
       {lessonRounds.map((item, id) => {
         const { startDateTime, endDateTime } = item;
         const { startTime, formattedEndTime, durationString } = calculatePeriod(startDateTime, endDateTime);
         return (
-          <Card key={id} className={styles.cardStyle}>
-            <div className={sprinkles({ display: 'flex', alignItems: 'center', width: '100%' })}>
-              <div className={styles.roundBoxStyle}>
+          <Card key={id} className={cardStyle}>
+            <div className={cardContentStyle}>
+              <div className={roundBoxStyle}>
                 <Text tag="b3_sb_narrow" color="white">
                   {id + 1}회차
                 </Text>
               </div>
-              <div className={sprinkles({ display: 'flex', flexDirection: 'column', gap: 4 })}>
+              <div className={periodInfoStyle}>
                 <Text tag="b2_sb" color="black">
                   {formatDate(startDateTime)}
                 </Text>

@@ -16,3 +16,22 @@ export const roundBoxStyle = style({
 export const cardStyle = style({
   border: `0.5px solid ${vars.colors.gray02}`,
 });
+
+export const sectionStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  gap: '1.2rem',
+});
+
+export const cardContentStyle = style({
+  display: 'flex',
+  alignItems: 'center',
+  width: '100%',
+});
+
+export const periodInfoStyle = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.4rem',
+});
@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const reviewSectionStyle = style({
+  height: '100%',
+});
@@ -1,7 +1,7 @@
-import { sprinkles } from '@/shared/styles/sprinkles.css';
+import { reviewSectionStyle } from '@/pages/class/components/TabWrapper/TabReview/tabReview.css';
 
 const TabReview = () => {
-  return <section className={sprinkles({ height: 100 })} />;
+  return <section className={reviewSectionStyle} />;
 };
 
 export default TabReview;
@@ -1,10 +1,9 @@
 import { useState } from 'react';
-import * as styles from '@/pages/class/components/TabWrapper/tabWrapper.css';
+import { tabPanelStyle, tabListWrapperStyle } from '@/pages/class/components/TabWrapper/tabWrapper.css';
 import type { LessonDetailResponseTypes } from '@/pages/class/types/api';
 import { TabButton, TabList, TabPanel, TabRoot } from '@/shared/components/Tab';
 import { notify } from '@/shared/components/Toast/Toast';
 import { CLASS_TABS } from '@/shared/constants';
-import { sprinkles } from '@/shared/styles/sprinkles.css';
 
 interface TabWrapperPropTypes {
   colorScheme: 'tertiary';
@@ -24,7 +23,7 @@ const TabWrapper = ({ colorScheme, lessonData }: TabWrapperPropTypes) => {
 
   return (
     <TabRoot>
-      <div className={sprinkles({ display: 'flex', pt: 24, justifyContent: 'center' })}>
+      <div className={tabListWrapperStyle}>
         <TabList gap="responsive">
           {CLASS_TABS.map((tab) => (
             <TabButton
@@ -38,7 +37,7 @@ const TabWrapper = ({ colorScheme, lessonData }: TabWrapperPropTypes) => {
         </TabList>
       </div>
 
-      <div className={styles.tabPanelStyle}>
+      <div className={tabPanelStyle}>
         {CLASS_TABS.map((tab) => (
           <TabPanel key={tab.id} isSelected={selectedTab === tab.id - 1}>
             {tab.isImplemented && tab.component(lessonData)}

@@ -10,3 +10,9 @@ export const tabPanelStyle = style({
 
   borderColor: vars.colors.gray01,
 });
+
+export const tabListWrapperStyle = style({
+  display: 'flex',
+  paddingTop: '2.4rem',
+  justifyContent: 'center',
+});
@@ -1,29 +1,34 @@
-import * as styles from '@/pages/dancer/components/DancerInfo/DancerClassItem/dancerClassItem.css';
+import {
+  classImageStyle,
+  deadlineTagStyle,
+  lessonNameStyle,
+  sectionStyle,
+  tagWrapperStyle,
+} from '@/pages/dancer/components/DancerInfo/DancerClassItem/dancerClassItem.css';
 import type { ClassItemPropTypes } from '@/pages/dancer/types/api';
 import Head from '@/shared/components/Head/Head';
 import Tag from '@/shared/components/Tag/Tag';
 import { genreMapping, levelMapping } from '@/shared/constants/index';
-import { sprinkles } from '@/shared/styles/sprinkles.css';
 
 const DancerClassItem = ({ imageUrl, remainingDays, genre, level, name }: ClassItemPropTypes) => {
   const renderDeadlineTag = () => {
     if (remainingDays < 0) {
       return (
-        <Tag type="deadline" size="thumbnail" className={styles.deadlineTagStyle}>
+        <Tag type="deadline" size="thumbnail" className={deadlineTagStyle}>
           마감
         </Tag>
       );
     }
     if (remainingDays === 0) {
       return (
-        <Tag type="deadline" size="thumbnail" className={styles.deadlineTagStyle}>
+        <Tag type="deadline" size="thumbnail" className={deadlineTagStyle}>
           D-DAY
         </Tag>
       );
     }
     if (remainingDays <= 4) {
       return (
-        <Tag type="deadline" size="thumbnail" className={styles.deadlineTagStyle}>
+        <Tag type="deadline" size="thumbnail" className={deadlineTagStyle}>
           마감 D-{remainingDays}
         </Tag>
       );
@@ -35,26 +40,19 @@ const DancerClassItem = ({ imageUrl, remainingDays, genre, level, name }: ClassI
   const translatedLevel = levelMapping[level] || level;
 
   return (
-    <section
-      className={sprinkles({
-        display: 'flex',
-        position: 'relative',
-        flexDirection: 'column',
-        width: 164,
-        gap: 8,
-      })}>
-      <img src={imageUrl} alt="클래스 섬네일" className={styles.classImageStyle} />
+    <section className={sectionStyle}>
+      <img src={imageUrl} alt="클래스 섬네일" className={classImageStyle} />
       {renderDeadlineTag()}
 
-      <div className={sprinkles({ display: 'flex', gap: 4 })}>
+      <div className={tagWrapperStyle}>
         <Tag type="genre" size="small">
           {translatedGenre}
         </Tag>
         <Tag type="level" size="small">
           {translatedLevel}
         </Tag>
       </div>
-      <span className={styles.lessonNameStyle}>
+      <span className={lessonNameStyle}>
         <Head level="h5" tag="b1_sb_long">
           {name}
         </Head>

@@ -19,3 +19,16 @@ export const lessonNameStyle = style({
   overflowWrap: 'break-word',
   wordBreak: 'break-all',
 });
+
+export const sectionStyle = style({
+  display: 'flex',
+  position: 'relative',
+  flexDirection: 'column',
+  width: '16.4rem',
+  gap: '0.8rem',
+});
+
+export const tagWrapperStyle = style({
+  display: 'flex',
+  gap: '0.4rem',
+});