[Feature] Text 컴포넌트 구현

apps/admin/app/layout.tsx

@@ -1,5 +1,6 @@
 import "./global.css";
 import "wowds-ui/styles.css";
+import "@wow-class/ui/styles.css";
 
 import Navbar from "components/Navbar";
 import type { Metadata } from "next";

apps/admin/app/page.tsx

@@ -1,11 +1,15 @@
 import { styled } from "@styled-system/jsx";
+import { Text } from "@wow-class/ui";
 
 const Home = () => {
   return (
     <div>
       Home
       <styled.div color="red.300">sdf</styled.div>
       <styled.div color="mono.100">sdf</styled.div>
+      <Text color="error" typo="h1">
+        헤딩1
+      </Text>
     </div>
   );
 };

apps/client/app/layout.tsx

@@ -1,5 +1,6 @@
 import "./global.css";
 import "wowds-ui/styles.css";
+import "@wow-class/ui/styles.css";
 
 import type { Metadata } from "next";
 

package.json

@@ -42,6 +42,8 @@
     "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/src/components/NavItem/NavItem.stories.tsx

@@ -5,7 +5,7 @@ import homeImageUrl from "../../assets/home.svg";
 import Navbar from ".";
 
 const meta = {
-  title: "Client/Navbar",
+  title: "UI/Navbar",
   component: Navbar,
   tags: ["autodocs"],
   parameters: {

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

@@ -8,6 +8,7 @@ import { useSelectedLayoutSegments } from "next/navigation";
 import { useState } from "react";
 
 import arrowImageUrl from "../../assets/arrow.svg";
+import Text from "../Text";
 
 /**
  * @description 내비게이션 바에서 사용하는 내비게이션 아이템 컴포넌트입니다.
@@ -66,7 +67,9 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => {
           src={imageUrl}
           width={20}
         />
-        <div className={navItemTextStyle}>{name}</div>
+        <Text as="div" typo="body1">
+          {name}
+        </Text>
         {items?.length && items?.length > 1 && (
           <Image
             alt="toggle-icon"
@@ -102,7 +105,9 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => {
                   src={item.imageUrl}
                   width={20}
                 />
-                <div className={navItemTextStyle}>{item.name}</div>
+                <Text as="div" typo="body1">
+                  {item.name}
+                </Text>
               </Link>
             </li>
           ))}
@@ -133,10 +138,3 @@ const navItemStyle = cva({
     },
   },
 });
-
-const navItemTextStyle = css({
-  fontSize: "16px",
-  fontWeight: 500,
-  lineHeight: "160%",
-  letterSpacing: "-0.16px",
-});

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

@@ -0,0 +1,53 @@
+import { css } from "@styled-system/css";
+import { styled } from "@styled-system/jsx";
+import type { ColorToken } from "@styled-system/tokens";
+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;
+
+/**
+ * @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 = <T extends ElementType = "p">({
+  as,
+  typo = "body1",
+  color = "textBlack",
+  children,
+  className,
+  ...rest
+}: TextProps<T>) => {
+  const Component = styled(as || "p");
+
+  return (
+    <Component
+      className={clsx(
+        css({
+          textStyle: typo,
+          color: color,
+        }),
+        className
+      )}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+};
+
+export default Text;

packages/ui/src/components/index.ts

@@ -1 +1,2 @@
 export { default as NavItem } from "./NavItem";
+export { default as Text } from "./Text";