feat(text): text sx 옵션 추가

DingX2 · May 20, 2024 · 3e8244c · 3e8244c
1 parent bb0725d
commit 3e8244c
Showing 1 changed file with 13 additions and 2 deletions.
diff --git a/src/components/atoms/Text.tsx b/src/components/atoms/Text.tsx
@@ -1,5 +1,6 @@
 import type { ParentComponent } from 'solid-js';
 import { styled } from 'solid-styled-components';
+import type { Style } from '@/types';
 
 interface PositionSelector {
     [key: string]: string;
@@ -16,30 +17,40 @@ const positionSelector: PositionSelector = {
 
 type ComponentType = keyof HTMLElementTagNameMap;
 
-interface Props {
+interface Props extends Style {
     color?: string;
     fontSize?: string;
     textAlign?: 'start' | 'center' | 'end' | 'justify';
     position?: 'left' | 'center' | 'right';
     component?: ComponentType;
 }
 
+/**
+ * @param {string} color - color
+ * @param {string} fontSize - font-size
+ * @param {'start' | 'center' | 'end' | 'justify'} textAlign - text-align
+ * @param {'left' | 'center' | 'right'} position - position
+ */
+
 export const Text: ParentComponent<Props> = ({
     component = 'span',
     children,
     color,
     fontSize,
     textAlign,
     position,
+    sx,
 }) => {
     const TextComponent = styled(component ?? 'h1')`
         display: flex;
+        display: inline-block;
         ${color ? `color: ${color};` : ''}
         ${textAlign ? `text-align: ${textAlign};` : ''}
         ${position ? `justify-content: ${positionSelector[position]};` : ''}
-
+    
         white-space: pre-line;
         font-size: ${fontSize || '16px'};
+        ${sx || ''}
     `;
 
     return <TextComponent>{children}</TextComponent>;