Feat/file upload

.github/workflows/chromatic.yml

@@ -1,14 +1,17 @@
-name: 'storybook Chromatic 배포'
+name: "storybook Chromatic 배포"
 
 on:
+  pull_request:
+    branches:
+      - main
   push:
     branches:
       - main # 메인 브랜치에 푸시될 때 실행
     paths:
-      - 'apps/storybook/**'
+      - "apps/storybook/**"
 
 jobs:
-  storybook-deploy:
+  storybook-preview:
     runs-on: ubuntu-latest
     defaults:
       run:
@@ -41,5 +44,29 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_TOKEN }}
           onlyChanged: true
+          autoAcceptChanges: true
           externals: apps/**
-          workingDir: apps/storybook
+          workingDir: apps/storybook
+
+      - name: 현재 시간 가져오기
+        uses: josStorer/get-current-time@v2
+        id: current-time
+        with:
+          format: "YYYY년 MM월 DD일 HH시 mm분 ss초"
+          utcOffset: "+09:00"
+
+    outputs:
+      storybook_url: ${{ steps.chromatic.outputs.storybookUrl }}
+      current_time: ${{ steps.current-time.outputs.formattedTime }}
+
+  github-bot-storybook:
+    runs-on: ubuntu-latest
+    needs: [storybook-preview]
+    steps:
+      - name: PR 코멘트 남기기
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          comment_tag: ${{github.event.number}}-storybook
+          message: |
+            💄 Storybook: ${{ needs.storybook-preview.outputs.storybook_url }}
+            🕖 Update: ${{ needs.storybook-preview.outputs.current_time }}

apps/admin/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "admin",
+  "name": "@date-project/admin",
   "version": "0.2.0",
   "private": true,
   "scripts": {

apps/admin/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+// import "@repo/ui/src/globalStyle/global.css.ts";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

apps/storybook/.storybook/addons.js

@@ -0,0 +1,2 @@
+import "@storybook/addon-actions/register";
+import "@storybook/addon-links/register";

apps/storybook/.storybook/main.ts

@@ -1,4 +1,5 @@
 import type { StorybookConfig } from "@storybook/react-vite";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
 
 const config: StorybookConfig = {
   stories: ["../../../packages/ui/src/**/*.stories.@(js|jsx|ts|tsx)"],
@@ -18,6 +19,15 @@ const config: StorybookConfig = {
   docs: {
     autodocs: true,
   },
+  async viteFinal(config) {
+    config.plugins = config.plugins || [];
+    config.plugins.push(
+      vanillaExtractPlugin({
+        identifiers: ({ hash }) => `_${hash}`,
+      }),
+    );
+    return config;
+  },
 };
 
 export default config;

apps/storybook/.storybook/preview.ts

@@ -1,14 +1,15 @@
-import type { Preview } from '@storybook/react'
+import type { Preview } from "@storybook/react";
+import "../../../packages/ui/src/globalStyle/global.css"; // alias 설정해도 안됨
 
 const preview: Preview = {
   parameters: {
     controls: {
       matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
+        color: /(background|color)$/i,
+        date: /Date$/i,
       },
     },
   },
 };
 
-export default preview;
+export default preview;

apps/storybook/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "storybook",
+  "name": "@date-project/storybook",
   "version": "0.2.0",
   "private": true,
   "scripts": {
@@ -12,23 +12,26 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "3.2.5",
+    "@storybook/addon-actions": "^8.6.4",
     "@storybook/addon-essentials": "8.6.4",
     "@storybook/addon-interactions": "8.6.4",
-    "@storybook/addon-links": "8.6.4",
+    "@storybook/addon-links": "^8.6.4",
     "@storybook/blocks": "8.6.4",
     "@storybook/core-common": "8.6.4",
     "@storybook/manager-api": "8.6.4",
     "@storybook/preview-api": "^8.3.3",
-    "@storybook/react": "8.6.4",
+    "@storybook/react": "^8.6.4",
     "@storybook/react-vite": "8.6.4",
     "@storybook/theming": "8.6.4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vanilla-extract/vite-plugin": "^5.0.1",
     "@vitejs/plugin-react-swc": "^3.8.0",
+    "@repo/ui": "workspace:*",
     "chromatic": "^11.27.0",
     "postcss": "^8",
-    "storybook": "0.2.0",
+    "storybook": "8.6.4",
     "typescript": "^5",
     "vite": "^6.2.1"
   }

apps/storybook/stories/index.js

@@ -0,0 +1,19 @@
+import React from "react";
+
+import { storiesOf } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import { linkTo } from "@storybook/addon-links";
+
+import { Button, Welcome } from "@storybook/react/demo";
+
+storiesOf("Welcome", module).add("to Storybook", () => (
+  <Welcome showApp={linkTo("Button")} />
+));
+
+storiesOf("Button", module)
+  .add("with text", () => (
+    <Button onClick={action("clicked")}>Hello Button</Button>
+  ))
+  .add("with some emoji", () => (
+    <Button onClick={action("clicked")}>😀 😎 👍 💯</Button>
+  ));

apps/storybook/tsconfig.json

@@ -12,8 +12,10 @@
     "isolatedModules": true,
     "jsx": "preserve",
     "incremental": true,
+    "baseUrl": ".", // alias 기준 설정
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@repo/ui/*": ["../../../packages/ui/*"] // alias  설정
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],

apps/storybook/vite.config.ts

@@ -1,7 +1,14 @@
 import react from "@vitejs/plugin-react-swc";
+import path from "path";
 import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  // alias 설정 추가
+  resolve: {
+    alias: {
+      "@repo/ui": path.resolve(__dirname, "../../../packages/ui"),
+    },
+  },
 });

apps/user/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "user",
+  "name": "@date-project/user",
   "version": "0.2.0",
   "private": true,
   "scripts": {

apps/user/src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+// import "@repo/ui/src/globalStyle/global.css";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",

package.json

@@ -39,5 +39,8 @@
     "*.{json,css,md}": [
       "prettier --write"
     ]
+  },
+  "dependencies": {
+    "zustand": "^5.0.3"
   }
 }

packages/eslint-config/base.js

@@ -18,6 +18,8 @@ export const config = [
       "turbo/no-undeclared-env-vars": "warn",
       "prettier/prettier": "warn",
       "react/button-has-type": "error",
+      "prefer-const": "off",
+      "@typescript-eslint/consistent-type-imports": "error",
     },
   },
   {