#Refactor/#25: 불필요한 Global CSS, Reset CSS 검토 및 Text 컴포넌트 wordBreak 속성 추가

package.json

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

src/components/Text/Text.tsx

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

src/styles/globalStyles.ts

@@ -2,48 +2,22 @@ import { css } from '@emotion/react';
 
 export const GlobalStyles = css`
   #root {
-    height: 100vh;
-    width: 100%;
     margin: 0 auto;
   }
 
   * {
     font-family: 'SUIT', sans-serif;
   }
 
-  body {
-    margin: 0;
-    display: flex;
-    place-items: center;
-    overflow: hidden;
-    min-height: 100vh;
-    min-height: -webkit-fill-available;
-    user-select: none;
-  }
-
-  input {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    border: none;
-    outline: none;
-  }
-  textarea {
-    box-sizing: border-box;
-    padding: 0;
-    margin: 0;
-    resize: none;
-    border: none;
-    outline: none;
-  }
-
   ::-webkit-scrollbar {
     width: 4px;
   }
+
   ::-webkit-scrollbar-thumb {
     background-color: #00000066;
     border-radius: 16px;
   }
+
   ::-webkit-scrollbar-track {
     margin-top: 14px;
     opacity: 0;

src/styles/reset.css

@@ -86,6 +86,23 @@ video {
   vertical-align: baseline;
 }
 
+input {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+}
+
+textarea {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  resize: none;
+  border: none;
+  outline: none;
+}
+
 button {
   border: none;
   background: none;