feat: Text Component 생성 (#5)

* chore: css 초기화 코드 추가

* feat: Text 컴포넌트 생성

* design: tailwind 적용

* refactor: 코드 리뷰 반영

app/globals.css

@@ -90,3 +90,101 @@ body {
     @apply bg-background text-foreground;
   }
 }
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd,
+button {
+  margin: 0 !important;
+  padding: 0;
+}
+
+/* 스크롤 없애는 css */
+::-webkit-scrollbar {
+  display: none; /* Chrome, Safari, and Opera */
+}
+
+/* 스크롤 없애는 css */
+body {
+  -ms-overflow-style: none; /* Internet Explorer and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+ul,
+ol,
+li {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+  list-style: none;
+}
+
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+:target {
+  scroll-margin-block: 5ex;
+}

components/ui/Text.stories.tsx

@@ -0,0 +1,83 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Text from './Text';
+
+const meta: Meta<typeof Text> = {
+  title: 'Components/ui/Text',
+  component: Text,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    children: {
+      defaultValue: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+      control: { type: 'text' },
+    },
+    size: {
+      defaultValue: 'md',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      control: { type: 'select' },
+    },
+    weight: {
+      defaultValue: 'regular',
+      options: ['light', 'regular', 'bold'],
+      control: { type: 'inline-radio' },
+    },
+    underline: {
+      defaultValue: false,
+      control: { type: 'boolean' },
+    },
+    block: {
+      defaultValue: false,
+      control: { type: 'boolean' },
+    },
+    transform: {
+      options: [undefined, 'capitalize', 'uppercase', 'lowercase'],
+      control: { type: 'inline-radio' },
+    },
+    align: {
+      options: [undefined, 'left', 'center', 'right'],
+      control: { type: 'inline-radio' },
+    },
+    lineClamp: {
+      defaultValue: undefined,
+      control: { type: 'number' },
+    },
+    color: {
+      options: [undefined, 'primary', 'black', 'gray', 'white'],
+      control: { type: 'inline-radio' },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    size: 'md',
+    weight: 'regular',
+    underline: false,
+    block: false,
+    transform: undefined,
+    align: undefined,
+    lineClamp: undefined,
+    color: undefined,
+  },
+};
+
+export const Center: Story = {
+  args: {
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    size: 'md',
+    weight: 'regular',
+    underline: false,
+    block: false,
+    transform: undefined,
+    align: 'center',
+    lineClamp: undefined,
+    color: undefined,
+  },
+};

components/ui/Text.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+interface TextProps {
+  children: React.ReactNode;
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  weight?: 'light' | 'regular' | 'bold';
+  underline?: boolean;
+  block?: boolean;
+  transform?: 'capitalize' | 'uppercase' | 'lowercase';
+  align?: 'left' | 'center' | 'right';
+  lineClamp?: number;
+  color?: 'primary' | 'black' | 'gray' | 'white';
+  inherit?: boolean;
+}
+
+function Text({
+  children,
+  size = 'md',
+  weight = 'regular',
+  underline = false,
+  block = false,
+  transform,
+  align,
+  lineClamp,
+  color = 'black',
+  inherit = false,
+}: TextProps): JSX.Element {
+  // 말줄임 설정 위한 코드
+  let displayStyle: string = 'inline';
+  if (lineClamp) {
+    displayStyle = '-webkit-box';
+  } else if (block) {
+    displayStyle = 'block';
+  }
+
+  const colorClass =
+    {
+      primary: 'text-primary', // #007BFF
+      black: 'text-black',
+      gray: 'text-gray-500',
+      white: 'text-white',
+    }[color] || 'text-black'; // 기본값
+
+  const sizeClass =
+    {
+      xs: 'text-xs',
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-xl',
+      xl: 'text-2xl',
+    }[size] || 'text-base';
+
+  const weightClass =
+    {
+      light: 'font-extralight',
+      regular: 'font-medium',
+      bold: 'font-extrabold',
+    }[weight] || 'regular';
+
+  const baseStyles: React.CSSProperties = {
+    display: displayStyle,
+    textDecoration: underline ? 'underline' : 'none',
+    textTransform: transform,
+    textAlign: align,
+    color: inherit ? 'inherit' : color || 'black',
+    WebkitLineClamp: lineClamp,
+    overflow: lineClamp ? 'hidden' : 'visible',
+    WebkitBoxOrient: lineClamp ? 'vertical' : undefined,
+  };
+
+  return (
+    <span
+      style={{ ...baseStyles }}
+      className={[colorClass, sizeClass, weightClass].join(' ')}
+    >
+      {children}
+    </span>
+  );
+}
+
+export default Text;