feat: 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 type { Metadata } from "next";
 import localFont from "next/font/local";

apps/admin/app/page.tsx

@@ -1,5 +1,5 @@
 import { styled } from "@styled-system/jsx";
-import { Button } from "@wow-class/ui";
+import { Button, Text } from "@wow-class/ui";
 
 const Home = () => {
   return (
@@ -8,6 +8,9 @@ const Home = () => {
       <Button appName="admin">버튼</Button>
       <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";
 import localFont from "next/font/local";

apps/client/app/page.tsx

@@ -1,5 +1,5 @@
 import { styled } from "@styled-system/jsx";
-import { Button } from "@wow-class/ui";
+import { Button, Text } from "@wow-class/ui";
 
 const Home = () => {
   return (
@@ -8,6 +8,9 @@ const Home = () => {
       <Button appName="admin">버튼</Button>
       <styled.div color="blue.100">sdf</styled.div>
       <styled.div color="yellow.500">sdf</styled.div>
+      <Text color="primary" typo="h1">
+        헤딩1
+      </Text>
     </div>
   );
 };

apps/client/tsconfig.json

@@ -9,7 +9,7 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["app/*"],
-      "@styled-system/*": ["./styled-system/*"],
+      "@styled-system/*": ["./styled-system/*"]
     }
   },
   "include": [

package.json

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

packages/ui/package.json

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "private": true,
   "exports": {
-    ".": "./src/components/index.ts"
+    ".": "./src/components/index.ts",
+    "./styles.css": "./dist/styles.css"
   },
   "scripts": {
     "lint": "eslint . --max-warnings 0",

packages/ui/panda.config.ts

@@ -1,8 +1,19 @@
 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/index.tsx

@@ -0,0 +1,34 @@
+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 type { typography as typoType } from "wowds-tokens";
+
+type ColorKey = ColorToken;
+type TypoKey = keyof typeof typoType;
+
+interface TextProps extends PropsWithChildren {
+  typo?: TypoKey;
+  color?: ColorKey;
+  style?: CSSProperties;
+  className?: string;
+}
+
+export const Text = ({
+  typo = "body0",
+  color = "blue.100",
+  children,
+  ...rest
+}: TextProps) => {
+  return (
+    <styled.p
+      className={css({
+        textStyle: typo,
+        color: color,
+      })}
+      {...rest}
+    >
+      {children}
+    </styled.p>
+  );
+};

packages/ui/src/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./Button";
 export * from "./Modal";
+export * from "./Text";