프론트엔드 모노레포로 마이그레이션 (#1032)

Co-authored-by: MYONG JAEWI <[email protected]>

.eslintrc.json

@@ -0,0 +1,143 @@
+{
+  "root": true,
+  "env": {
+    "browser": true,
+    "es2020": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:storybook/recommended",
+    "plugin:import/recommended",
+    "plugin:import/errors",
+    "plugin:import/warnings",
+    "plugin:import/typescript"
+  ],
+  "ignorePatterns": [
+    "dist",
+    "*.config.ts",
+    "*.common.js",
+    "*.prod.js",
+    "*.dev.js",
+    "*.polyfills.js"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["react-refresh", "react", "import", "@typescript-eslint"],
+  "settings": {
+    "import/core-modules": ["@jest/globals"],
+    "import/resolver": {
+      "typescript": {
+        "project": "../tsconfig.base.json",
+        "alwaysTryTypes": true
+      },
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "rules": {
+    "prettier/prettier": "error",
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "always", "prev": "*", "next": "return" },
+      {
+        "blankLine": "always",
+        "prev": ["const", "let", "var", "function", "block-like"],
+        "next": "*"
+      },
+      {
+        "blankLine": "any",
+        "prev": ["const", "let", "var"],
+        "next": ["const", "let", "var"]
+      },
+      { "blankLine": "always", "prev": "case", "next": "*" }
+    ],
+    "prefer-template": "error",
+    "object-shorthand": ["error", "always"],
+    "prefer-arrow-callback": "error",
+    "func-style": ["error", "expression", { "allowArrowFunctions": true }],
+    "arrow-body-style": ["error", "as-needed"],
+    "consistent-return": "error",
+    "curly": ["error", "all"],
+    "default-case": "error",
+    "default-case-last": "error",
+    "no-fallthrough": "error",
+    "import/newline-after-import": ["error", { "count": 1 }],
+    "import/order": [
+      "error",
+      {
+        "groups": [
+          ["builtin", "external"],
+          ["internal"],
+          ["parent", "sibling", "index", "type"]
+        ],
+        "warnOnUnassignedImports": true,
+        "alphabetize": { "order": "asc" },
+        "newlines-between": "always",
+        "distinctGroup": false,
+        "pathGroups": [
+          {
+            "pattern": "@storybook/**",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "@/**",
+            "group": "internal",
+            "position": "before"
+          },
+          {
+            "pattern": "../",
+            "group": "parent",
+            "position": "before"
+          },
+          {
+            "pattern": "./components",
+            "group": "sibling",
+            "position": "before"
+          },
+          {
+            "pattern": "./hooks",
+            "group": "sibling",
+            "position": "before"
+          },
+          {
+            "pattern": "./*.style",
+            "group": "sibling",
+            "position": "after"
+          }
+        ]
+      }
+    ],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "react-refresh/only-export-components": [
+      "error",
+      { "allowConstantExport": false }
+    ],
+    "react/no-unknown-property": ["error", { "ignore": ["css"] }],
+    "import/no-default-export": "error"
+  },
+  "overrides": [
+    {
+      "files": ["*.tsx", "*.d.ts"],
+      "rules": {
+        "import/no-default-export": "off",
+        "import/prefer-default-export": "error"
+      }
+    }
+  ]
+}

.github/workflows/frontend_ci.yml

@@ -12,21 +12,27 @@ jobs:
     env:
       frontend-directory: ./frontend
     steps:
-      - uses: actions/checkout@v4
+      - name: Checkout repository
+        uses: actions/checkout@v4
 
       - name: Node.js 설정
         uses: actions/setup-node@v4
         with:
           node-version: 20
 
+      - name: pnpm 설치
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+
       - name: 의존성 설치
-        run: npm install
+        run: pnpm install
         working-directory: ${{ env.frontend-directory }}
 
       - name: 타입 체크 실행
-        run: npm run tsc
+        run: pnpm run tsc
         working-directory: ${{ env.frontend-directory }}
 
       - name: 테스트 실행
-        run: npm run test
+        run: pnpm run test
         working-directory: ${{ env.frontend-directory }}

.gitignore

@@ -1,3 +1,7 @@
+### node_modules
+node_modules
+*/node_modules
+
 ### IntelliJ IDEA ###
 .idea
 
@@ -17,3 +21,5 @@
 *.csr
 *.key
 *.pem
+
+*storybook.log

design-system/.gitignore

@@ -0,0 +1 @@
+storybook-static

design-system/.storybook/main.ts

@@ -0,0 +1,66 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import { Configuration } from 'webpack';
+import path from 'path';
+
+const config: StorybookConfig = {
+  stories: ['../**/*.mdx', '../**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-webpack5-compiler-swc',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  webpackFinal: async (config: Configuration) => {
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+
+    const imageRule = config.module.rules.find((rule) =>
+      rule?.['test']?.test('.svg')
+    );
+
+    if (imageRule) {
+      imageRule['exclude'] = /\.svg$/;
+    }
+
+    config.module?.rules?.push(
+      {
+        test: /\.(ts|tsx)$/,
+        use: [
+          {
+            loader: require.resolve('ts-loader'),
+            options: {
+              transpileOnly: true,
+              compilerOptions: {
+                jsx: 'react-jsx',
+                jsxImportSource: '@emotion/react',
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      }
+    );
+
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve?.alias,
+        '@design': path.resolve(__dirname, '../.'),
+        '@': path.resolve(__dirname, '../../frontend/src'),
+      },
+    };
+
+    return config;
+  },
+
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+};
+export default config;

design-system/.storybook/preview.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { ThemeProvider } from '@emotion/react';
+import type { Preview } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import GlobalStyles from '../style/GlobalStyles';
+import { theme } from '../style/theme';
+import { AuthProvider, ToastProvider } from '../../frontend/src/contexts';
+import { MemoryRouter } from 'react-router-dom';
+
+const queryClient = new QueryClient();
+
+const preview: Preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider>
+          <ToastProvider>
+            <ThemeProvider theme={theme}>
+              <GlobalStyles />
+              <MemoryRouter>
+                <Story />
+              </MemoryRouter>
+            </ThemeProvider>
+          </ToastProvider>
+        </AuthProvider>
+      </QueryClientProvider>
+    ),
+  ],
+};
+
+export default preview;

frontend/src/components/AuthorInfo/AuthorInfo.style.ts → design-system/AuthorInfo/AuthorInfo.style.ts

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 
-import { theme } from '@/style/theme';
+import { theme } from '@design/style/theme';
 
 export const AuthorInfoContainer = styled.div`
   cursor: pointer;

frontend/src/components/AuthorInfo/AuthorInfo.tsx → design-system/AuthorInfo/AuthorInfo.tsx

@@ -1,6 +1,6 @@
 import { PersonIcon } from '@/assets/images';
 import { Text } from '@/components';
-import { theme } from '@/style/theme';
+import { theme } from '@design/style/theme';
 
 import * as S from './AuthorInfo.style';
 
@@ -12,7 +12,9 @@ const AuthorInfo = ({ memberName }: Props) => (
   <S.AuthorInfoContainer>
     <PersonIcon width={17} height={17} color={theme.color.light.primary_500} />
     <S.EllipsisTextWrapper>
-      <Text.Small color={theme.color.light.primary_500}>{memberName}</Text.Small>
+      <Text.Small color={theme.color.light.primary_500}>
+        {memberName}
+      </Text.Small>
     </S.EllipsisTextWrapper>
   </S.AuthorInfoContainer>
 );