[Feat] Pnpm Workspace를 통한 모노레포 도입 (#332)

* init: pnpm workspace setting, 기존 project -> apps/client

* docs: @tiki/tsconfig package setting

* docs: root dependencies에 따른 하위 패키지 디펜던시 정리

* feat: icon package

* docs: common hook directory

* refactor: import error 해결, lib 생성

* refactor: utils package 필요한 훅, 함수 이전

* feat: 기존 project @common/component 를 제공하는 ui package 세팅

* chore: readme root로

* refactor: composition 컴포넌트 default export, index 파일 생성

* feat: tsup config 작성

* chore: client story ui package 반영

* docs: theme, type export 추가

* feat: 모든 기존 코드 @tiki package 반영

* init: landing next project setting

* chore: svg 수정

* chore: cachedImage common으로 이동

* refactor: navbar Item 컴포넌트 구조 수정 (svg는 icon 패키지로만 사용)

* refactor: svgr option no-index 추가

* refactor: noEmit 제거 및 tsconfig 수정

* docs: tsconfig 수정

* fix: item 컴포넌트 prop type 반영

* docs: pnpm version match

* docs: ci script 수정

* docs: storybook deploy workflow command 수정

* docs: ci build-storybook scripts 추가

* docs: install frozen-lockfile 추가

* chore: ui tsconfig composite 제거

* fix: package resolve 문제 alias 추가

* fix: main.ts @tiki/ui alias 추가

* chore: icon, utils package 추가

* fix: preview @tiki/ui/dist 로부터 import

* chore: resolve alias 적용, ui package exports 다시 세팅

* chore: relative path 수정

* chore: icon build script 추가

* chore: alias 제거

* chore: hoisting pattern 추가

* docs: ui, icon build caching

* fix: version 오타 수정

* chore: node modules caching setting

* docs: storybook deploy workflow 수정

* chore: 불필요 파일 제거 및 git ignore

* chore: next tsconfig 임시 설정

.editorConfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 120
+trim_trailing_whitespace = true

.github/workflows/automatic-aws-deployment.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9
+          version: 9.1.3
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile

.github/workflows/check.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Setup Pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9
+          version: 9.1.3
 
       - name: Cache node modules
         id: cache-node

.github/workflows/chromatic.yml

@@ -14,13 +14,50 @@ jobs:
        - name: Install pnpm
          uses: pnpm/action-setup@v4
          with:
-           version: 9
+           version: 9.1.3
        - name: Setup Node.js
          uses: actions/setup-node@v4
          with:
            node-version: 21
+
+       - name: Cache node modules
+         id: cache-node
+         uses: actions/cache@v4
+         with:
+          path: |
+            **/node_modules
+          key: ${{ runner.OS }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.OS }}-node-
+
        - name: Install dependencies
-         run: pnpm install
+         if: steps.cache-node.outputs.cache-hit != 'true'
+         run: pnpm install --frozen-lockfile
+
+       - name: Build tiki ui
+         id: cache-tiki-ui
+         uses: actions/cache@v4
+         with: 
+          path: packages/ui/dist
+          key: ${{runner.os}}-ui-${{hashFiles('packages/ui/package.json', 'packages/ui/src/**')}}
+          restore-keys: ${{runner.os}}-ui-
+
+       - name: Build tiki icon
+         id: cache-tiki-icon
+         uses: actions/cache@v4
+         with:
+          path: packages/icon/dist
+          key: ${{runner.os}}-icon-${{hashFiles('packages/icon/package.json', 'packages/icon/src/**')}}
+          restore-keys: ${{runner.os}}-icon-
+
+       - name: Check ui cache hit
+         if: steps.cache-tiki-ui.outputs.cache-hit != 'true'
+         run: pnpm --filter ui build
+
+       - name: Check icon cache hit
+         if: steps.cache-tiki-icon.outputs.cache-hit != 'true'
+         run: pnpm --filter icon build
+
        - name: Run Chromatic
          id: chromatic
          uses: chromaui/action@v1

.github/workflows/storybook-deploy.yml

@@ -19,18 +19,53 @@ jobs:
       - name: Install Pnpm
         uses: pnpm/action-setup@v4
         with:
-          version: 9
+          version: 9.1.3
+
+      - name: Cache node modules
+        id: cache-node
+        uses: actions/cache@v4
+        with:
+          path: |
+            **/node_modules
+          key: ${{ runner.OS }}-node-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.OS }}-node-
 
       - name: Install dependencies
+        if: steps.cache-node.outputs.cache-hit != 'true'
         run: pnpm install --frozen-lockfile
 
+      - name: Build tiki ui
+        id: cache-tiki-ui
+        uses: actions/cache@v4
+        with: 
+         path: packages/ui/dist
+         key: ${{runner.os}}-ui-${{hashFiles('packages/ui/package.json', 'packages/ui/src/**')}}
+         restore-keys: ${{runner.os}}-ui-
+
+      - name: Build tiki icon
+        id: cache-tiki-icon
+        uses: actions/cache@v4
+        with:
+         path: packages/icon/dist
+         key: ${{runner.os}}-icon-${{hashFiles('packages/icon/package.json', 'packages/icon/src/**')}}
+         restore-keys: ${{runner.os}}-icon-
+
+      - name: Check ui cache hit
+        if: steps.cache-tiki-ui.outputs.cache-hit != 'true'
+        run: pnpm --filter ui build
+
+      - name: Check icon cache hit
+        if: steps.cache-tiki-icon.outputs.cache-hit != 'true'
+        run: pnpm --filter icon build
+
       - name: Build
-        run: pnpm build-storybook
+        run: pnpm --filter client build-storybook
 
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v4 
         with: 
-          publish_dir: ./storybook-static
+          publish_dir: apps/client/storybook-static
           github_token: ${{ secrets.GITHUB_TOKEN }}
 
 

.gitignore

@@ -22,6 +22,10 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-.env
+
+**/next-env.d.ts
+**/.env
+
 *storybook.log
 storybook-static
+

.npmrc

@@ -0,0 +1 @@
+public-hoist-pattern=*

apps/client/.prettierrc

@@ -0,0 +1,31 @@
+{
+    "plugins": ["@trivago/prettier-plugin-sort-imports"],
+
+    "printWidth": 120,
+    "tabWidth": 2,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5",
+    "requirePragma": false,
+    "arrowParens": "always",
+    "bracketSameLine": true,
+    "endOfLine": "auto",
+
+    "importOrder": [
+      "^react(.*)",
+      "^@emtion/(.*)$",
+      "^@tanstack/(.*)$",
+      "^zustand(.*)",
+      "^axios(.*)",
+      "^msw(.*)",
+      "^@/common/(.*)$",
+      "^@/page/(.*)$",
+      "^@/shared/(.*)$",
+      "^@/story/(.*)$",
+      "^@/mock/(.*)$",
+      "^[./]"
+    ],
+    "importOrderSeparation": true,
+    "importOrderSortSpecifiers": true
+  }
+

apps/client/.storybook/main.ts

@@ -0,0 +1,47 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import { dirname, join, resolve } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    getAbsolutePath('@storybook/addon-links'),
+    getAbsolutePath('@storybook/addon-essentials'),
+    getAbsolutePath('@storybook/addon-onboarding'),
+    getAbsolutePath('@storybook/addon-interactions'),
+    getAbsolutePath('@storybook/addon-a11y'),
+    getAbsolutePath('@chromatic-com/storybook'),
+  ],
+  framework: {
+    name: getAbsolutePath('@storybook/react-vite'),
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+  async viteFinal(config) {
+    const { mergeConfig } = await import('vite');
+
+    if (config.resolve) {
+      (config.resolve.preserveSymlinks = true),
+        (config.resolve.alias = {
+          ...config.resolve.alias,
+          '@': resolve(__dirname, '../src'),
+          '@/common': resolve(__dirname, '../src/common'),
+          '@/page': resolve(__dirname, '../src/page'),
+          '@/shared': resolve(__dirname, '../src/shared'),
+        });
+    }
+
+    return mergeConfig(config, {
+      optimizeDeps: ['@tiki/ui', '@tiki/icon'],
+    });
+  },
+};
+export default config;

.storybook/preview.tsx → apps/client/.storybook/preview.tsx

@@ -1,13 +1,13 @@
 import { Global, ThemeProvider } from '@emotion/react';
 import type { Preview } from '@storybook/react';
+import { theme } from '@tiki/ui';
 
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 import { GlobalStyle } from '../src/common/style/globalStyle';
-import { theme } from '../src/common/style/theme/theme';
 
 const customViewports = {
   Default: {

index.html → apps/client/index.html

@@ -2,7 +2,7 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/common/asset/svg/favicon.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel='preload' href="/font/subset-PretendardVariable.woff2" />
     <link rel='preload' href="/font/subset-PretendardVariable.woff" />

apps/client/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "client",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "tsc && vite build",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=chpt_f4088febbfb82b7",
+    "dev": "vite",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006"
+  },
+  "dependencies": {
+    "@sentry/react": "^8.22.0",
+    "@tanstack/react-query": "^5.49.2",
+    "@tanstack/react-query-devtools": "^5.49.2",
+    "@tiki/icon": "workspace:^",
+    "@tiki/ui": "workspace:^",
+    "@tiki/utils": "workspace:^",
+    "axios": "^1.7.2",
+    "framer-motion": "^11.11.11",
+    "mime": "^4.0.4",
+    "react-hook-form": "^7.53.1",
+    "react-router-dom": "^6.24.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^1.6.1",
+    "@eslint/js": "^9.6.0",
+    "@sentry/vite-plugin": "^2.21.1",
+    "@storybook/addon-a11y": "^8.2.6",
+    "@storybook/addon-essentials": "^8.2.6",
+    "@storybook/addon-interactions": "^8.2.6",
+    "@storybook/addon-links": "^8.2.6",
+    "@storybook/addon-onboarding": "^8.2.6",
+    "@storybook/blocks": "^8.2.6",
+    "@storybook/builder-vite": "^8.2.6",
+    "@storybook/react": "^8.2.6",
+    "@storybook/react-vite": "^8.2.6",
+    "@storybook/test": "^8.2.6",
+    "@tiki/tsconfig": "workspace:^",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/react-slick": "^0.23.13",
+    "@typescript-eslint/eslint-plugin": "^7.13.1",
+    "@typescript-eslint/parser": "^7.13.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react-swc": "^3.5.0",
+    "chromatic": "^11.5.4",
+    "concurrently": "^9.0.1",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "eslint-plugin-storybook": "^0.8.0",
+    "globals": "^15.7.0",
+    "msw": "^2.3.1",
+    "prettier": "^3.3.2",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "storybook": "^8.2.6",
+    "typescript-eslint": "^7.14.1",
+    "vite": "^5.3.2",
+    "vite-plugin-svgr": "^4.2.0",
+    "vite-tsconfig-paths": "^4.3.2"
+  }
+}