refactor(ui-kit): 타이포그래피의 content, content2를 p1, p2로 변경 (#31)

Lubycon · Jan 6, 2021 · e783e9b · e783e9b
1 parent e3df238
commit e783e9b
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 9 deletions.
diff --git a/ui-kit/src/components/Text/index.tsx b/ui-kit/src/components/Text/index.tsx
@@ -11,7 +11,7 @@ interface TextBaseProps {
 type TextProps<T extends ElementType = typeof DEFAULT_ELEMENT> = OverridableProps<T, TextBaseProps>;
 
 const Text = <T extends ElementType = typeof DEFAULT_ELEMENT>(
-  { typography = 'content', fontWeight = 'regular', as, ...props }: TextProps<T>,
+  { typography = 'p1', fontWeight = 'regular', as, ...props }: TextProps<T>,
   ref: Ref<any>
 ) => {
   const target = as ?? DEFAULT_ELEMENT;

diff --git a/ui-kit/src/components/Text/types.ts b/ui-kit/src/components/Text/types.ts
@@ -6,8 +6,8 @@ export const typographys = [
   'h5',
   'h6',
   'subtitle',
-  'content',
-  'content2',
+  'p1',
+  'p2',
   'caption',
 ] as const;
 export type Typographys = typeof typographys[number];

diff --git a/ui-kit/src/sass/utils/_typography.scss b/ui-kit/src/sass/utils/_typography.scss
@@ -25,6 +25,6 @@
 @include _typography('h5', 24px, 36px);
 @include _typography('h6', 20px, 30px);
 @include _typography('subtitle', 18px, 30px);
-@include _typography('content', 16px, 28px);
-@include _typography('content2', 14px, 24px);
+@include _typography('p1', 16px, 28px);
+@include _typography('p2', 14px, 24px);
 @include _typography('caption', 12px, 20px);
diff --git a/ui-kit/src/stories/Shadows.stories.tsx b/ui-kit/src/stories/Shadows.stories.tsx
@@ -25,7 +25,7 @@ export const Default = () => {
               padding: 34,
             }}
           >
-            <Text typography="content2">{shadow}</Text>
+            <Text typography="p2">{shadow}</Text>
           </div>
         </li>
       ))}

diff --git a/ui-kit/src/stories/Text.stories.tsx b/ui-kit/src/stories/Text.stories.tsx
@@ -16,8 +16,8 @@ const typographyNames: { [key in Typographys]: string } = {
   h5: '머릿말 5',
   h6: '머릿말 6',
   subtitle: '부제',
-  content: '본문 1',
-  content2: '본문 2',
+  p1: '본문 1',
+  p2: '본문 2',
   caption: '캡션',
 };
 
@@ -59,7 +59,7 @@ export const As = () => {
         <Text as="a" href="https://github.com" target="blank">
           앵커 태그를 사용해보자
         </Text>
-        <Text as="h1">h1으로 렌더해도 기본적으로는 Typography: content가 적용됩니다</Text>
+        <Text as="h1">h1으로 렌더해도 기본적으로는 Typography: p1이 적용됩니다</Text>
         <Text as="button">버튼도 가능하기는 함</Text>
       </li>
     </ul>