feat : 스토리북 개발 환경 구축 완료 (#20)

* env : main 파일 생성 * fix : prettier 수정 * feat : 스니펫 생성 * style : 글로벌 스타일 생성 * chore : 웹팩 경로 수정 * style : 전역 스타일 등록 * style : font 설정
prgrms-fe-devcourse · Oct 25, 2024 · 1b130c0 · 1b130c0
1 parent 3087784
commit 1b130c0
Show file tree

Hide file tree

Showing 24 changed files with 523 additions and 308 deletions.
diff --git a/.github/issue_template.md b/.github/issue_template.md
@@ -2,8 +2,8 @@
 
 # 📝작업 내용
 
-- [ ]
-- [ ]
+-   [ ]
+-   [ ]
 
 ## 🔍백엔드 전달 사항
 

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -4,8 +4,8 @@
 
 # 📝작업 내용
 
-- [ ]
-- [ ]
+-   [ ]
+-   [ ]
 
 ## 🔍백엔드 전달 사항
 

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -1,55 +1,55 @@
 name: NFE1-1-8-MOODI
 
 on:
-  push:
-    branches:
-      - main
+    push:
+        branches:
+            - main
 
 jobs:
-  deploy:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v3
-
-      - name: Set up Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: '20.18.0'
-
-      - name: Install dependencies with Yarn
-        uses: actions/cache@v3
-        with:
-          path: ./node_modules
-          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ runner.os }}-yarn-
-
-      - name: Install dependencies
-        run: yarn install
-
-      - name: Build project
-        run: |
-          REACT_APP_API_URL=${{ secrets.REACT_APP_API_URL }} yarn build
-
-      - name: Deploy to S3
-        uses: jakejarvis/[email protected]
-        with:
-          args: --delete
-        env:
-          AWS_S3_BUCKET: moodi-devcourese-3team
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          AWS_REGION: ap-northeast-2
-          SOURCE_DIR: dist
-
-      - name: Invalidate CloudFront Cache
-        run: |
-          aws cloudfront create-invalidation \
-            --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
-            --paths "/*"
-        env:
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          AWS_REGION: ap-northeast-2
+    deploy:
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v3
+
+            - name: Set up Node.js
+              uses: actions/setup-node@v3
+              with:
+                  node-version: '20.18.0'
+
+            - name: Install dependencies with Yarn
+              uses: actions/cache@v3
+              with:
+                  path: ./node_modules
+                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+                  restore-keys: |
+                      ${{ runner.os }}-yarn-
+
+            - name: Install dependencies
+              run: yarn install
+
+            - name: Build project
+              run: |
+                  REACT_APP_API_URL=${{ secrets.REACT_APP_API_URL }} yarn build
+
+            - name: Deploy to S3
+              uses: jakejarvis/[email protected]
+              with:
+                  args: --delete
+              env:
+                  AWS_S3_BUCKET: moodi-devcourese-3team
+                  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+                  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+                  AWS_REGION: ap-northeast-2
+                  SOURCE_DIR: dist
+
+            - name: Invalidate CloudFront Cache
+              run: |
+                  aws cloudfront create-invalidation \
+                    --distribution-id ${{ secrets.CLOUDFRONT_DISTRIBUTION_ID }} \
+                    --paths "/*"
+              env:
+                  AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+                  AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+                  AWS_REGION: ap-northeast-2
diff --git a/.prettierignore b/.prettierignore
@@ -1,2 +1,3 @@
 src/stories/**
 **/*stories*
+.eslint.config.mjs
diff --git a/.prettierrc b/.prettierrc
@@ -1,10 +1,10 @@
 {
-  "endOfLine": "auto",
-  "singleQuote": true,
-  "semi": false,
-  "useTabs": false,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "printWidth": 120,
-  "arrowParens": "always"
+    "endOfLine": "auto",
+    "singleQuote": true,
+    "semi": false,
+    "useTabs": false,
+    "tabWidth": 4,
+    "trailingComma": "none",
+    "printWidth": 120,
+    "arrowParens": "always"
 }
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/react-webpack5'
+
+const config: StorybookConfig = {
+    stories: ['../src/**/*.mdx', '../src/**/*.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'
+    ],
+    framework: {
+        name: '@storybook/react-webpack5',
+        options: {}
+    }
+}
+export default config
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -0,0 +1,14 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i
+            }
+        }
+    }
+}
+
+export default preview
diff --git a/.vscode/funcitionComponent.tsx.code-snippets b/.vscode/funcitionComponent.tsx.code-snippets
@@ -0,0 +1,17 @@
+{
+    "React Function Component": {
+        "prefix": "rfc",
+        "body": [
+            "const ${1:ComponentName} = () => {",
+            "  return (",
+            "    <div>",
+            "      $0",
+            "    </div>",
+            "  );",
+            "};",
+            "",
+            "export default ${1:ComponentName};"
+        ],
+        "description": "Create a React function component"
+    }
+}
diff --git a/.vscode/styled.tsx.code-snippets b/.vscode/styled.tsx.code-snippets
@@ -0,0 +1,7 @@
+{
+    "Styled Component": {
+        "prefix": "stc",
+        "body": ["import styled from 'styled-components';", "", "export const $1 = styled.$2`", "  $3", "`;", ""],
+        "description": "Create a styled component"
+    }
+}
diff --git a/bable.config.js b/bable.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['@babel/preset-react', '@babel/preset-env', '@babel/preset-typescript'],
+    presets: ['@babel/preset-react', '@babel/preset-env', '@babel/preset-typescript']
 }
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -1,66 +1,68 @@
 import { FlatCompat } from '@eslint/eslintrc'
 
 const compat = new FlatCompat({
-  baseDirectory: process.cwd(),
+    baseDirectory: process.cwd()
 })
 
 export default [
-  {
-    ignores: ['**/*stories*', '**/webpack*.js', '**/webpack/**/*.js', 'src/stories/**'],
-  },
-  ...compat.config({
-    env: {
-      browser: true,
-      es2021: true,
+    {
+        // ESLint가 무시할 파일 패턴
+        ignores: ['**/*stories*', '**/webpack*.js', '**/webpack/**/*.js', 'src/stories/**']
     },
-    parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint', 'prettier', '@emotion'],
-    extends: [
-      'airbnb',
-      'airbnb/hooks',
-      'plugin:import/errors',
-      'plugin:import/warnings',
-      'plugin:prettier/recommended',
-      'plugin:@typescript-eslint/recommended',
-      'prettier',
-    ],
-    rules: {
-      'prettier/prettier': 'error',
-      'react-hooks/rules-of-hooks': 'error',
-      'react-hooks/exhaustive-deps': 'warn',
-      '@typescript-eslint/no-require-imports': 'off',
-      'global-require': 'off',
-      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
-      'react/react-in-jsx-scope': 'off',
-      'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx'] }],
-      'import/extensions': ['error', 'ignorePackages', { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' }],
-      'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
-      'react/function-component-definition': [
-        'error',
-        {
-          namedComponents: 'arrow-function',
-          unnamedComponents: 'arrow-function',
+    ...compat.config({
+        env: {
+            browser: true,
+            es2021: true
         },
-      ],
-      'import/prefer-default-export': 'off',
-      'import/order': 'off',
-    },
-    overrides: [
-      {
-        files: ['webpack.*.js'],
+        parser: '@typescript-eslint/parser',
+        plugins: ['@typescript-eslint', 'prettier', '@emotion'],
+        extends: [
+            'airbnb',
+            'airbnb/hooks',
+            'plugin:import/errors',
+            'plugin:import/warnings',
+            'plugin:prettier/recommended',
+            'plugin:@typescript-eslint/recommended',
+            'prettier'
+        ],
         rules: {
-          '@typescript-eslint/no-require-imports': 'off',
-          'global-require': 'off',
-          '@typescript-eslint/no-unused-vars': 'off',
-        },
-      },
-    ],
-    settings: {
-      'import/resolver': {
-        node: {
-          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+            'prettier/prettier': 'error',
+            'react-hooks/rules-of-hooks': 'error',
+            'react-hooks/exhaustive-deps': 'warn',
+            '@typescript-eslint/no-require-imports': 'off',
+            'global-require': 'off',
+            '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+            'react/react-in-jsx-scope': 'off',
+            'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx'] }],
+            'import/extensions': ['error', 'ignorePackages', { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' }],
+            'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+            'react/function-component-definition': [
+                'error',
+                {
+                    namedComponents: 'arrow-function',
+                    unnamedComponents: 'arrow-function'
+                }
+            ],
+            'import/prefer-default-export': 'off',
+            'import/order': 'off'
         },
-      },
-    },
-  }),
+        overrides: [
+            {
+                // Webpack 설정 파일에 대한 규칙
+                files: ['webpack.*.js'],
+                rules: {
+                    '@typescript-eslint/no-require-imports': 'off',
+                    'global-require': 'off',
+                    '@typescript-eslint/no-unused-vars': 'off'
+                }
+            }
+        ],
+        settings: {
+            'import/resolver': {
+                node: {
+                    extensions: ['.js', '.jsx', '.ts', '.tsx']
+                }
+            }
+        }
+    })
 ]