chore: chart 컴포넌트 문서 수정

apps/cs/package.json

@@ -12,7 +12,9 @@
     "@common/assets": "workspace:*",
     "@common/components": "workspace:*",
     "@tanstack/react-table": "^8.21.2",
+    "chart.js": "^4.4.8",
     "next": "15.1.7",
+    "react-chartjs-2": "^5.3.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {

apps/cs/tsconfig.json

@@ -25,6 +25,7 @@
     "baseUrl": "./src",
     "paths": {
       "@/*": ["./*"],
+      "@common/components/*": ["../../../packages/common/components/src/*"],
       "@common/components": ["../../../packages/common/components/src"]
     }
   },

packages/common/components/src/ui/bar-chart/chart.stories.tsx

@@ -17,8 +17,82 @@ import { getCssVariableValue } from "../../lib/utils";
 const meta: Meta<typeof Bar> = {
   title: "Chart/Bar",
   component: Bar,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+- [Docs](https://react-chartjs-2.js.org/)
+        `,
+      },
+      source: {
+        code: `
+import {
+  Chart as ChartJS,
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+  type ChartOptions,
+} from "chart.js";
+import { Bar } from "react-chartjs-2";
+import { fakerKO as faker } from "@faker-js/faker";
+
+ChartJS.register(
+  CategoryScale,
+  LinearScale,
+  BarElement,
+  Title,
+  Tooltip,
+  Legend,
+);
+
+const options: ChartOptions<"bar"> = {
+  responsive: true,
+  plugins: {
+    legend: {
+      display: false,
+    },
+    title: {
+      display: true,
+      text: "Chart.js Bar Chart",
+    },
+  },
 };
 
+const labels = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+];
+
+const data = {
+  labels,
+  datasets: [
+    {
+      data: labels.map(() => faker.number.int({ min: 10, max: 100 })),
+      backgroundColor: labels.map((_, i) =>
+        getCssVariableValue(\`--chart-\${i + 1}\`),
+      ),
+    },
+  ],
+};
+
+return (
+  <div className="flex h-[20vw] w-[50vw] justify-center">
+    <Bar options={options} data={data} />
+  </div>
+);
+        `,
+      },
+    },
+  },
+};
 export default meta;
 type Story = StoryObj<typeof Bar>;
 
@@ -37,7 +111,7 @@ export const Default: Story = {
       responsive: true,
       plugins: {
         legend: {
-          position: "top",
+          display: false,
         },
         title: {
           display: true,
@@ -60,7 +134,6 @@ export const Default: Story = {
       labels,
       datasets: [
         {
-          label: "Dataset 1",
           data: labels.map(() => faker.number.int({ min: 10, max: 100 })),
           backgroundColor: labels.map((_, i) =>
             getCssVariableValue(`--chart-${i + 1}`),

packages/common/components/src/ui/data-table/data-table.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof DataTable> = {
       description: {
         component: `
 - [Docs](https://tanstack.com/table/v8/docs/introduction)
-`,
+        `,
       },
       source: {
         code: `

pnpm-lock.yaml

@@ -42,9 +42,15 @@ importers:
       '@tanstack/react-table':
         specifier: ^8.21.2
         version: 8.21.2(react-dom@18.3.1)(react@18.3.1)
+      chart.js:
+        specifier: ^4.4.8
+        version: 4.4.8
       next:
         specifier: 15.1.7
         version: 15.1.7(react-dom@18.3.1)(react@18.3.1)
+      react-chartjs-2:
+        specifier: ^5.3.0
+        version: 5.3.0(chart.js@4.4.8)(react@18.3.1)
       tailwindcss-animate:
         specifier: ^1.0.7
         version: 1.0.7(tailwindcss@3.4.17)