feat: 텍스트 컴포넌트 as 추가, typo 관련 panda 설정 panda-config 로 이동

package.json

@@ -42,6 +42,7 @@
     "node": ">=18"
   },
   "dependencies": {
+    "clsx": "^2.1.1",
     "wowds-tokens": "^0.1.1",
     "wowds-ui": "^0.1.8"
   }

packages/panda-config/common-config.ts

@@ -5,9 +5,23 @@ import {
   removeUnusedCssVars,
   removeUnusedKeyframes,
 } from "wowds-theme";
+import { typography } from "wowds-tokens";
 
 const commonConfig: Config = {
   presets: [pandaPreset],
+  //TODO: wowds-theme의 preset에서 staticCss 를 정의하도록 수정
+  staticCss: {
+    css: [
+      {
+        properties: {
+          ...(pandaPreset?.staticCss?.css?.[0]?.properties?.color && {
+            color: pandaPreset.staticCss.css[0].properties.color,
+          }),
+          textStyle: Object.keys(typography),
+        },
+      },
+    ],
+  },
   preflight: true,
   minify: true,
   watch: true,

packages/ui/panda.config.ts

@@ -1,19 +1,8 @@
 import { defineConfig } from "@pandacss/dev";
 import commonConfig from "@wow-class/panda-config/common-config";
 
-import { typography } from "wowds-tokens";
-
 export default defineConfig({
   ...commonConfig,
-  staticCss: {
-    css: [
-      {
-        properties: {
-          textStyle: Object.keys(typography),
-        },
-      },
-    ],
-  },
   dependencies: ["./src/components/**"],
   include: ["./src/**/*.{ts,tsx,js,jsx}"],
 });

packages/ui/src/components/Text/Text.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Text from ".";
+
+const meta: Meta<typeof Text> = {
+  title: "UI/Text",
+  component: Text,
+  tags: ["autodocs"],
+  parameters: {
+    componentSubtitle: "Text 컴포넌트",
+  },
+  argTypes: {
+    as: {
+      control: { type: "select" },
+      options: ["p", "h1", "h2", "h3", "span", "div"],
+      description: "HTML 태그 이름",
+    },
+    typo: {
+      control: { type: "text" },
+      description: "텍스트 타이포",
+    },
+    color: {
+      control: { type: "color" },
+      description: "텍스트 색상",
+    },
+    children: {
+      control: { type: "text" },
+      description: "텍스트 내용",
+    },
+    style: {
+      control: { type: "object" },
+      description: "커스텀 스타일 객체",
+    },
+    className: {
+      control: { type: "text" },
+      description: "커스텀 클래스 이름",
+    },
+  },
+} satisfies Meta<typeof Text>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: "예시",
+    as: "p",
+    typo: "body1",
+    color: "textBlack",
+  },
+};
+
+export const AsDiv: Story = {
+  args: {
+    children: "예시",
+    as: "div",
+    typo: "h1",
+    color: "primary",
+  },
+};

packages/ui/src/components/Text/index.tsx

@@ -1,39 +1,52 @@
 import { css } from "@styled-system/css";
 import { styled } from "@styled-system/jsx";
 import type { ColorToken } from "@styled-system/tokens";
-import type { CSSProperties, PropsWithChildren } from "react";
+import { clsx } from "clsx";
+import type { CSSProperties, ElementType, PropsWithChildren } from "react";
 import type { typography as typoType } from "wowds-tokens";
 
 type ColorKey = ColorToken;
 type TypoKey = keyof typeof typoType;
 
-interface TextProps extends PropsWithChildren {
+/**
+ * @description Text 컴포넌트
+ * @param {ElementType} as - HTML 태그 이름입니다. 기본값은 "p" 입니다.
+ * @param {TypoKey} typo - 텍스트 타이포입니다. 기본값은 "body1" 입니다.
+ * @param {ColorKey} color - 텍스트 색상입니다. 기본값은 "textBlack" 입니다.
+ * @param {CSSProperties} style - 커스터 할 수 있는 컴포넌트 스타일입니다.
+ * @param {string} className - 커스텀 할 수 있는 컴포넌트 클래스 이름입니다.
+ */
+interface TextProps<T extends ElementType = "p"> extends PropsWithChildren {
+  as?: T;
   typo?: TypoKey;
   color?: ColorKey;
   style?: CSSProperties;
   className?: string;
 }
 
-const Text = ({
+const Text = <T extends ElementType = "p">({
+  as,
   typo = "body1",
   color = "textBlack",
   children,
   className,
   ...rest
-}: TextProps) => {
+}: TextProps<T>) => {
+  const Component = styled(as || "p");
+
   return (
-    <styled.p
-      className={
-        (css({
+    <Component
+      className={clsx(
+        css({
           textStyle: typo,
           color: color,
         }),
-        className)
-      }
+        className
+      )}
       {...rest}
     >
       {children}
-    </styled.p>
+    </Component>
   );
 };