[FEAT] Tag, PriorityIcon 컴포넌트 추가 및 Storybook 커스터마이징

.github/workflows/chromatic.yml

@@ -38,9 +38,12 @@ jobs:
 
       - name: Publish to Chromatic
         id: chromatic
-        run: pnpm chromatic
-        env:
-          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          workingDir: packages/timo-design-system
+          onlyChanged: true
+          exitZeroOnChanges: true
 
       - name: Comment Storybook preview link on PR
         if: success()

packages/tailwind-config/tokens/typography.css

@@ -2,11 +2,22 @@
   --font-pretendard: var(--font-family-pretendard), sans-serif;
 
   /* Headline */
+
+  --typo-size-headline-b-50: 50px;
+  --typo-line-height-headline-b-50: 1.5;
+  --typo-letter-spacing-headline-b-50: -0.03em;
+  --typo-font-weight-headline-b-50: 700;
+
   --typo-size-headline-b-30: 30px;
   --typo-line-height-headline-b-30: 1.5;
   --typo-letter-spacing-headline-b-30: -0.03em;
   --typo-font-weight-headline-b-30: 700;
 
+  --typo-size-headline-m-26: 26px;
+  --typo-line-height-headline-m-26: 1.5;
+  --typo-letter-spacing-headline-m-26: -0.03em;
+  --typo-font-weight-headline-m-26: 500;
+
   --typo-size-headline-b-24: 24px;
   --typo-line-height-headline-b-24: 1.5;
   --typo-letter-spacing-headline-b-24: -0.03em;
@@ -22,6 +33,11 @@
   --typo-letter-spacing-headline-b-20: -0.03em;
   --typo-font-weight-headline-b-20: 700;
 
+  --typo-size-headline-m-20: 20px;
+  --typo-line-height-headline-m-20: 1.5;
+  --typo-letter-spacing-headline-m-20: -0.03em;
+  --typo-font-weight-headline-m-20: 500;
+
   --typo-size-headline-b-18: 18px;
   --typo-line-height-headline-b-18: 1.5;
   --typo-letter-spacing-headline-b-18: -0.03em;

packages/timo-design-system/.storybook/manager-head.html

@@ -0,0 +1,21 @@
+<style>
+  .sidebar-header img {
+    height: 50px;
+    width: auto;
+  }
+
+  .sidebar-header a {
+    display: flex;
+    align-items: center;
+  }
+
+  .sidebar-header a::after {
+    content: "TIMO DESIGN SYSTEM";
+    font-size: 13px;
+    font-weight: 700;
+    color: #1f1f1f;
+    margin-left: 10px;
+    letter-spacing: 0.04em;
+    white-space: nowrap;
+  }
+</style>

packages/timo-design-system/.storybook/manager.ts

@@ -0,0 +1,7 @@
+import { addons } from "@storybook/manager-api";
+
+import { timoTheme } from "./theme";
+
+addons.setConfig({
+  theme: timoTheme,
+});

packages/timo-design-system/.storybook/preview.ts

@@ -1,7 +1,26 @@
+import React from "react";
+
+import type { Preview } from "@storybook/react";
+
 import "../src/styles/globals.css";
-import type { Preview } from "@storybook/react-vite";
 
 const preview: Preview = {
+  decorators: [
+    (Story: () => React.ReactNode) =>
+      React.createElement(
+        "div",
+        {
+          style: {
+            padding: "2rem",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            minHeight: "120px",
+          },
+        },
+        React.createElement(Story),
+      ),
+  ],
   parameters: {
     controls: {
       matchers: {
@@ -21,7 +40,7 @@ const preview: Preview = {
           styles: { width: "1280px", height: "900px" },
         },
       },
-      defaultViewport: "desktop",
+      defaultViewport: "responsive",
     },
     layout: "centered",
     backgrounds: {

packages/timo-design-system/.storybook/theme.ts

@@ -0,0 +1,42 @@
+import { create } from "@storybook/theming";
+
+export const timoTheme = create({
+  base: "light",
+
+  brandImage: "/timo-logo/timo-logo.png",
+  brandTitle: "TIMO DESIGN SYSTEM",
+  brandUrl: "https://timo.kr",
+  brandTarget: "_blank",
+
+  // 배경
+  colorPrimary: "#74A0F8",
+  colorSecondary: "#8CB0F9",
+
+  // UI
+  appBg: "#f5f5f5",
+  appContentBg: "#ffffff",
+  appPreviewBg: "#ffffff",
+  appBorderColor: "#e5e5e5",
+  appBorderRadius: 10,
+
+  // 텍스트
+  textColor: "#1f1f1f",
+  textMutedColor: "#757575",
+  textInverseColor: "#ffffff",
+
+  // 툴바
+  barTextColor: "#525252",
+  barHoverColor: "#8CB0F9",
+  barSelectedColor: "#74a0f8",
+  barBg: "#ffffff",
+
+  // 인풋
+  inputBg: "#ffffff",
+  inputBorder: "#e5e5e5",
+  inputTextColor: "#1f1f1f",
+  inputBorderRadius: 6,
+
+  // 버튼
+  buttonBg: "#f5f5f5",
+  buttonBorder: "#e5e5e5",
+});

packages/timo-design-system/.storybook/typings.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

packages/timo-design-system/package.json

@@ -25,8 +25,10 @@
     "@storybook/addon-essentials": "8.6.14",
     "@storybook/addon-interactions": "8.6.14",
     "@storybook/addon-links": "^8.6.14",
+    "@storybook/manager-api": "^8.6.14",
     "@storybook/react": "8.6.14",
     "@storybook/react-vite": "^8.6.14",
+    "@storybook/theming": "^8.6.14",
     "@tailwindcss/postcss": "^4.3.1",
     "@types/node": "^22.15.3",
     "@types/react": "19.2.2",

packages/timo-design-system/src/components/index.ts

@@ -1,2 +1,4 @@
 export { Color } from "./color/Color";
 export { Typography } from "./typography/Typography";
+export { Tag } from "./tag/Tag";
+export { PriorityIcon } from "./priority-icon/PriorityIcon";

packages/timo-design-system/src/components/priority-icon/PriorityIcon.stories.tsx

@@ -0,0 +1,40 @@
+import { PriorityIcon } from "./PriorityIcon";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/PriorityIcon",
+  component: PriorityIcon,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    priority: {
+      control: "select",
+      options: ["매우중요", "중요", "보통", "낮음", "Disable"],
+    },
+  },
+} satisfies Meta<typeof PriorityIcon>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const 매우중요: Story = {
+  args: { priority: "매우중요" },
+};
+
+export const 중요: Story = {
+  args: { priority: "중요" },
+};
+
+export const 보통: Story = {
+  args: { priority: "보통" },
+};
+
+export const 낮음: Story = {
+  args: { priority: "낮음" },
+};
+
+export const Disable: Story = {
+  args: { priority: "Disable" },
+};

packages/timo-design-system/src/components/priority-icon/PriorityIcon.tsx

@@ -0,0 +1,23 @@
+import { cn } from "../../lib";
+
+export type Priority = "매우중요" | "중요" | "보통" | "낮음" | "Disable";
+
+const PRIORITY_COLOR: Record<Priority, string> = {
+  매우중요: "bg-timo-red",
+  중요: "bg-timo-orange",
+  보통: "bg-timo-gray-600",
+  낮음: "bg-timo-black",
+  Disable: "bg-timo-gray-500",
+};
+
+export interface PriorityIconProps {
+  priority: Priority;
+}
+
+export const PriorityIcon = ({ priority = "매우중요" }: PriorityIconProps) => {
+  return (
+    <div
+      className={cn("size-4.5 shrink-0 rounded-full", PRIORITY_COLOR[priority])}
+    />
+  );
+};

packages/timo-design-system/src/components/tag/Tag.stories.tsx

@@ -0,0 +1,52 @@
+import { Tag } from "./Tag";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Tag",
+  component: Tag,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["과제", "운동", "일상", "업무", "기타"],
+    },
+  },
+} satisfies Meta<typeof Tag>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const 과제: Story = {
+  args: { variant: "과제" },
+};
+
+export const 운동: Story = {
+  args: { variant: "운동" },
+};
+
+export const 일상: Story = {
+  args: { variant: "일상" },
+};
+
+export const 업무: Story = {
+  args: { variant: "업무" },
+};
+
+export const 기타: Story = {
+  args: { variant: "기타" },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      {(["과제", "운동", "일상", "업무", "기타"] as const).map((variant) => (
+        <div key={variant} className="flex items-center gap-2">
+          <Tag variant={variant} />
+        </div>
+      ))}
+    </div>
+  ),
+};

packages/timo-design-system/src/components/tag/Tag.tsx

@@ -0,0 +1,43 @@
+import { cn } from "../../lib";
+
+export type TagVariant = "과제" | "운동" | "일상" | "업무" | "기타";
+
+const TAG_BG: Record<TagVariant, string> = {
+  과제: "bg-timo-yellow-300",
+  운동: "bg-timo-green",
+  일상: "bg-timo-blue-75",
+  업무: "bg-timo-gray-900",
+  기타: "bg-timo-gray-500",
+};
+
+const TAG_TEXT_COLOR: Record<TagVariant, string> = {
+  과제: "text-timo-black",
+  운동: "text-white",
+  일상: "text-white",
+  업무: "text-white",
+  기타: "text-timo-gray-800",
+};
+
+export interface TagProps {
+  variant?: TagVariant;
+}
+
+export const Tag = ({ variant = "과제" }: TagProps) => {
+  return (
+    <div
+      className={cn(
+        "flex h-4 w-7.5 items-center justify-center rounded-[4px]",
+        TAG_BG[variant],
+      )}
+    >
+      <span
+        className={cn(
+          "typo-caption-r-10 whitespace-nowrap",
+          TAG_TEXT_COLOR[variant],
+        )}
+      >
+        {variant}
+      </span>
+    </div>
+  );
+};

packages/timo-design-system/src/components/typography/Typography.tsx

@@ -18,7 +18,7 @@ export const Typography = ({
       }}
     >
       <div className={token} style={{ minWidth: "200px", color: "#171717" }}>
-        가나다라마 Aa
+        계획 실행의 과정을 함께하는 Timo
       </div>
       <div>
         <div

turbo/generators/config.ts

@@ -22,10 +22,16 @@ export default function generator(plop: PlopTypes.NodePlopAPI): void {
         path: "packages/timo-design-system/src/components/{{kebabCase name}}/{{pascalCase name}}.tsx",
         templateFile: "templates/component/component.tsx.hbs",
       },
+      {
+        type: "add",
+        path: "packages/timo-design-system/src/components/{{kebabCase name}}/{{pascalCase name}}.stories.tsx",
+        templateFile: "templates/component/component.stories.tsx.hbs",
+      },
       {
         type: "append",
         path: "packages/timo-design-system/src/components/index.ts",
-        template: 'export { {{pascalCase name}} } from "./{{kebabCase name}}/{{pascalCase name}}";',
+        template:
+          'export { {{pascalCase name}} } from "./{{kebabCase name}}/{{pascalCase name}}";',
       },
     ],
   });