@tipp/ui 2.1.19 → 2.1.20

package/src/atoms/heading.tsx

@@ -45,19 +45,7 @@ export function Heading(props: HeadingProps): React.ReactNode {
           mapFn: mapVariant,
         })
       : size;
-
-    // if (typeof variant === 'string') {
-    //   return mapVariant(variant);
-    // }
-    // if (typeof variant === 'object') {
-    //   const newObj: Partial<Record<Breakpoint, HeadingSize>> = {};
-    //   let key: Breakpoint;
-    //   for (key in variant) {
-    //     newObj[key] = mapVariant(variant[key]);
-    //   }
-    //   return newObj;
-    // }
-    // return size;
+ 
   }, [size, variant]);
 
   return (

package/src/atoms/typo.tsx

@@ -1,9 +1,11 @@
 import type { TextProps as RadixTextProps } from '@radix-ui/themes';
+import type { Responsive } from '@radix-ui/themes/props';
 import { Text as RadixText } from '@radix-ui/themes';
 import React, { useMemo, forwardRef } from 'react';
+import { mapWithResponsive } from '@/utils/map-with-responsive';
 
 export type TypoProps = RadixTextProps & {
-  variant?: 'body' | 'caption' | 'subtitle';
+  variant?: Responsive<'body' | 'caption' | 'subtitle'>;
 };
 
 export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
@@ -12,15 +14,23 @@ export const Typo = forwardRef<HTMLSpanElement, TypoProps>(
 
     const radixSize = useMemo<RadixTextProps['size']>(() => {
       if (size !== undefined) return size;
-      switch (variant) {
-        case 'caption':
-          return '1';
-        case 'subtitle':
-          return '3';
-        case 'body':
-        default:
-          return '2';
-      }
+
+      if (variant === undefined) return '2';
+
+      return mapWithResponsive({
+        value: variant,
+        mapFn: (variantValue?: 'body' | 'caption' | 'subtitle') => {
+          switch (variantValue) {
+            case 'caption':
+              return '1';
+            case 'subtitle':
+              return '3';
+            case 'body':
+            default:
+              return '2';
+          }
+        },
+      });
     }, [size, variant]);
 
     return (

package/src/molecules/curriculumV2/curriculum-sub-nav.tsx

@@ -1,11 +1,5 @@
 import React, { useCallback } from 'react';
-import {
-  Box, 
-  Grid,
-  Heading,
-  IconButton,
-  Typo,
-} from '@/atoms';
+import { Box, Grid, Heading, IconButton, Typo } from '@/atoms';
 import { ChevronLeftIcon, ChevronRightIcon } from '@/icon';
 import { useCurriculumContext } from './curriculum-context';
 
@@ -54,10 +48,19 @@ export function CurriculumSubNav(): React.ReactNode {
         <Box />
       )}
       <Box width="100%">
-        <Heading style={{ textOverflow: 'ellipsis' }} variant="heading4">
-          {selectedItem.title}
-        </Heading>
-        <Typo as="p" color="gray" style={{ textOverflow: 'ellipsis' }}>
+        {/* 데스크탑 타이틀 */}
+        <Box display={{ initial: 'none', md: 'block' }}>
+          <Heading style={{ textOverflow: 'ellipsis' }} variant="heading5">
+            {selectedItem.title}
+          </Heading>
+        </Box>
+
+        {/* 모바일 타이틀 */}
+        <Box display={{ initial: 'block', md: 'none' }}>
+          <Typo weight="bold">{selectedItem.title}</Typo>
+        </Box>
+
+        <Typo as="p" color="gray" mt="1" style={{ textOverflow: 'ellipsis' }} variant='caption'>
           {selectedSectionTitle?.title}
         </Typo>
       </Box>
@@ -76,4 +79,3 @@ export function CurriculumSubNav(): React.ReactNode {
     </Grid>
   );
 }
-