Refactor/#36: Text 컴포넌트 HTMLAttributes 타입 확장 및 Theme Font 값 추가

package.json

@@ -1,7 +1,7 @@
 {
   "name": "concept-be-design-system",
   "description": "컨셉비 디자인 시스템",
-  "version": "0.5.3",
+  "version": "0.5.13",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

src/App.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 
-import { Alert, BottomSheet, Button, Confirm } from '.';
+import { Alert, BottomSheet, Button, Confirm, Text } from '.';
 
 const App = () => {
   const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false);
@@ -10,7 +10,7 @@ const App = () => {
   return (
     <>
       <Button onClick={() => setIsBottomSheetOpen(true)}>Bottom Sheet</Button>
-
+      <Text font="suit10eb">피드</Text>
       <BottomSheet
         isOpen={isBottomSheetOpen}
         onClose={() => setIsBottomSheetOpen(false)}

src/components/Badge/Badge.tsx

@@ -25,7 +25,7 @@ const Badge = <T extends ElementType>({
   children,
   backgroundColor = 'bg1',
   fontColor = 'b9',
-  radius = 4,
+  radius = 50,
   ...attributes
 }: Props<T>) => {
   return (

src/components/BottomSheet/BottomSheet.tsx

@@ -36,7 +36,7 @@ const BottomSheetWrapper = styled.div<{ isOpen: boolean }>`
   margin: 0 auto;
   width: auto;
   max-width: 420px;
-  max-height: 90%;
+  max-height: 70%;
   min-height: 70%;
   background-color: #fff;
   box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);

src/components/Navigation/Navigation.tsx

@@ -36,6 +36,5 @@ const NavWrapper = styled.nav`
   position: absolute;
   bottom: 8%;
   display: flex;
-  justify-content: space-between;
-  gap: 20%;
+  justify-content: space-around;
 `;

src/components/Navigation/NavigationItem.tsx

@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ReactNode } from 'react';
+import { HtmlHTMLAttributes, ReactNode } from 'react';
 
 type PositionType = 'normal' | 'center';
 
-export interface Props {
+export interface Props extends HtmlHTMLAttributes<HTMLDivElement> {
   onClick?: () => void;
   position?: PositionType;
   children: ReactNode;

src/components/Tag/Tag.tsx

@@ -1,10 +1,11 @@
 import styled from '@emotion/styled';
 
+import { HTMLAttributes } from 'react';
 import { ReactComponent as SVGCancel } from '../../assets/svg/cancel.svg';
 import Spacer from '../Spacer/Spacer';
 import Text from '../Text/Text';
 
-interface TagProps {
+interface TagProps extends HTMLAttributes<HTMLDivElement> {
   children: string;
   onDelete: (name: string) => void;
 }

src/components/Text/Text.tsx

@@ -1,9 +1,10 @@
 import styled from '@emotion/styled';
 import {
-  ReactNode,
-  ElementType,
   ComponentPropsWithoutRef,
   CSSProperties,
+  ElementType,
+  HTMLAttributes,
+  ReactNode,
 } from 'react';
 
 import { ReactComponent as SVGTextRequired } from '../../assets/svg/text_required.svg';
@@ -16,7 +17,8 @@ type Props<T extends ElementType> = {
   color?: ColorKeyType;
   required?: boolean;
   wordBreak?: CSSProperties['wordBreak'];
-} & ComponentPropsWithoutRef<T>;
+} & ComponentPropsWithoutRef<T> &
+  HTMLAttributes<T>;
 
 const Text = <T extends ElementType>({
   as,

src/index.ts

@@ -60,6 +60,7 @@ export { ReactComponent as SVGScrap24 } from './assets/svg/scrap_24.svg';
 export { ReactComponent as SVGScrapFilled24 } from './assets/svg/scrap_filled_24.svg';
 export { ReactComponent as SVGTextRequired } from './assets/svg/text_required.svg';
 export { ReactComponent as SVGTripleDots } from './assets/svg/triple_dots.svg';
+export { ReactComponent as SVGWritePencil } from './assets/svg/write_pencil.svg';
 
 export { ReactComponent as SVGHeaderBack24B } from './assets/svg/header/back_24_B.svg';
 export { ReactComponent as SVGHeaderBack24W } from './assets/svg/header/back_24_W.svg';

src/stories/SVGCommon.stories.tsx

@@ -4,18 +4,20 @@ import {
   SVGAdd24,
   SVGCancel,
   SVGCheckFilled24,
+  SVGDropdownArrow,
   SVGFeed24,
   SVGFeedFilled24,
+  SVGGoldBell,
   SVGProfile24,
   SVGProfileFilled24,
+  SVGRadioCheck24,
+  SVGRadioFilled24,
+  SVGRadioUncheck24,
   SVGScrap24,
   SVGScrapFilled24,
-  SVGRadioUncheck24,
-  SVGRadioFilled24,
-  SVGRadioCheck24,
   SVGTextRequired,
   SVGTripleDots,
-  SVGDropdownArrow,
+  SVGWritePencil,
 } from '../.';
 
 const meta = {
@@ -44,6 +46,8 @@ export const Default: Story = {
       <SVGRadioCheck24 />
       <SVGTextRequired />
       <SVGTripleDots />
+      <SVGGoldBell />
+      <SVGWritePencil />
     </div>
   ),
 };

src/styles/theme.ts

@@ -19,6 +19,10 @@ const color = {
 } as const;
 
 const font = {
+  suit10eb: {
+    fontSize: 10,
+    fontWeight: 800,
+  },
   suit12r: {
     fontSize: 12,
     fontWeight: 400,
@@ -47,15 +51,15 @@ const font = {
     fontSize: 14,
     fontWeight: 600,
   },
+  suit14sb: {
+    fontSize: 14,
+    fontWeight: 600,
+  },
   suit14b: {
     fontSize: 14,
     fontWeight: 700,
   },
-  suit15ra: {
-    fontSize: 15,
-    fontWeight: 400,
-  },
-  suit15rb: {
+  suit15r: {
     fontSize: 15,
     fontWeight: 400,
   },
@@ -67,6 +71,10 @@ const font = {
     fontSize: 15,
     fontWeight: 600,
   },
+  suit16r: {
+    fontSize: 16,
+    fontWeight: 400,
+  },
   suit16m: {
     fontSize: 16,
     fontWeight: 500,

yarn.lock

@@ -5268,7 +5268,7 @@ eslint-module-utils@^2.7.4, eslint-module-utils@^2.8.0:
   dependencies:
     debug "^3.2.7"
 
-eslint-plugin-import@*, eslint-plugin-import@^2.28.1, eslint-plugin-import@>=1.4.0:
+eslint-plugin-import@*, eslint-plugin-import@>=1.4.0:
   version "2.28.1"
   resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.28.1.tgz"
   integrity sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==