design: 반응형에 따른 textStyle 조정 (#161)

#144
BDD-CLUB · Mar 21, 2024 · eaf31c1 · eaf31c1
1 parent 4942af7
commit eaf31c1
Showing 1 changed file with 3 additions and 3 deletions.
diff --git a/src/containers/team/AttendanceRate/index.tsx b/src/containers/team/AttendanceRate/index.tsx
@@ -1,4 +1,4 @@
-import { CircularProgress, CircularProgressLabel, useBreakpointValue } from '@chakra-ui/react';
+import { CircularProgress, CircularProgressLabel, useBreakpointValue, Text } from '@chakra-ui/react';
 
 import { AttendanceRateProps } from './types';
 
@@ -15,8 +15,8 @@ const AttendanceRate = ({ attendanceRate }: AttendanceRateProps) => {
       thickness="5"
       value={attendanceRate}
     >
-      <CircularProgressLabel color="orange" fontSize="2xl" fontWeight="bold">
-        {attendanceRate}%
+      <CircularProgressLabel color="orange">
+        <Text textStyle={useBreakpointValue({ base: 'bold_md', md: 'bold_2xl' })}>{attendanceRate}%</Text>
       </CircularProgressLabel>
     </CircularProgress>
   );