release: v1.0.10 릴리즈 (#142)

* refactor: solutionTab의 상태관련 로직들을 custom hook으로 분리 (#124)

* refactor: popup의 인증 관련들을 custom hook으로 분리 (#125)

* refactor: profile tab의 데이터 파싱 로직들을 service 레이어로 분리 (#126)

* chore: 브라우저 호환 대상 브라우저 리스트 수정 (#128)

Babel에서 브라우저를 점유율 0.25퍼센트 이상 호환하게끔 수정하였다.
또한 @babel/plugin-transform-runtime 플러그인을 사용해 전역 네임스페이스를 오염시키지 않게끔 수정하였다.

* refactor: URLSearchParams를 이용해 쿼리 파라미터를 얻게끔 수정 (#129)

기존 방식은 정규표현식을 이용해 쿼리 파라미터를 얻었었다.
URLSearchParams를 이용해 쿼리 파라미터를 얻는 방식으로 리팩터링 하였다.

* refactor: fetch util함수 커스터마이징 (#130)

기존 방식은 HTTP 상태코드와 데이터 타입에 따라 커스텀하기 어려웠습니다.
그래서 fetch util함수가 상태코드에 따라 에러 핸들링 작업을 위임하게끔 수정했고, json 뿐만 아니라 다른 데이터타입도 처리할 수 있게끔 수정하였습니다.

close #127

* refactor: 프로그래머스 테스트 페이지의 문제 업로드 로직을 service로 분리 (#131)

* refactor: 재사용되는 컴포넌트와 해당 도메인에서만 사용되는 컴포넌트들을 분리 (#132)

기존 component 폴더는 재사용되는 컴포넌트들만을 각 유형에 따라 분리하였다.
하지만 각 도메인에서 사용되는 컴포넌트들을 해당 페이지에서 구현하는 것이 아닌 component 폴더에 따로 관리하는 것이 좋다고 생각하게 되었다.
그래서 재사용되는 컴포넌트들은 shared 하위 폴더로, 각 도메인에서만 사용되는 컴포넌트들은 domain 하위 폴더로 따로 관리하였다.

* chore: webpack, babel 설정 최적화 (#134)

* feat: 문제 아카이빙 아이디어 탭을 생성하는 버튼 구현

* feat: 문제 아카이빙 탭 생성

* test: 페이지네이션 스토리북 작성

* refactor: webpack 개발용 설정, 빌드, 배포용 설정 나누어서 설정하기

* refactor: webpack 개발용 설정에 HMR 추가

* chore: Babel에서 중복되는 플러그인들을 제거

* chore: webpack 정적파일 압축

* chore: GitHub Actions를 이용한 storybook cd 구현 (#135)

* chore: webpack production 설정 수정 (#136)

* feat: 문제 아카이빙 아이디어 탭을 생성하는 버튼 구현

* feat: 문제 아카이빙 탭 생성

* test: 페이지네이션 스토리북 작성

* feat: 비동기 에러를 처리하는 AsyncBoundary 구현

자식 컴포넌트를 렌더링할 때 발생하는 에러를 핸들링하는 ErrorBoundary를 구현후 해당 Errorboundary를 Suspense와 조합하여
비동기로 데이터를 받아오는 컴포넌트를 다룰 때 사용할 수 있는 AsyncBoundary를 구현하였다.

* chore: webpack production 설정 수정

- devtool을 source-map에서 hidden-source-map으로 변경해 보안 문제 해결
- image-webpack-loader 로더를 이용한 이미지 압축

* refactor: Profile 페이지 컴포넌트의 비즈니스 로직을 Custom Hook으로  분리 (#137)

* chore: webpack publicPath 수정

* refactor: Profile 페이지 컴포넌트의 비즈니스 로직을 Custom Hook으로 분리

* feat: 코드가 렌더링되기 전에 보여줄 Skeleton UI 구현 (#138)

* fix: 나의 풀이 페이지 버튼 위치를 %에서 rem으로 수정

기존에는 %로 버튼을 위치시켰으나, 모니터 해상도에 따라 원하는 위치에 버튼이 있지 않았음
rem을 이용해 모든 모니터에 대해서 동일한 위치에 있게끔 수정했다.

* fix: 코드 깜빡임 현상 해결

* feat: SkeletonUI 구현

* feat: Virtual Scroll 구현

* feat: code mirror 스타일링

* refactor: Select 컴포넌트 리팩터링 (#139)

Compound Component패턴을 이용해 Select 컴포넌트의 option를 렌더링하게끔 리팩터링했다.
기존에는 각 option들의 값을 지정하는 것을 Select 컴포넌트에서 수행했으나,
Compound Component 패턴을 이용해 Select.Item을 이용해 각 옵션들을 렌더링하면서 option들의 값을 지정하는 것을 Select.Item에 위임하였다.

* fix: problem.json을 계속 request하는 이슈 해결 (#140)

기존 코드에서 problem.json을 계속 request하는 이슈가 있었다.
그 이유는 useEffect의 dependency에 문제 배열이 들어가 있어 계속 useEffect 함수가 호출된 것이다.
이슈가 발생되지 않게끔 수정해 초기 로드 때만 request하게끔 수정하였다.

* test: storybook 컴포넌트 스토리 문서화 (#141)

* test: solution page 통합테스트 코드 작성

* refactor: Popup page Compound 패턴 제거

* feat: 각 스토리의 argument와 component에 대한 description 작성

* fix: 로딩 완료될 때의 isLoaded의 값을 false에서 true로 변경

* modify: SolutionTab 페이지 하위 컴포넌트를 component 폴더로 이동

* test: select 컴포넌트 스토리북 작성

Author: dev-redo

.github/workflows/chromatic.yml

@@ -0,0 +1,18 @@
+name: 'Chromatic Deployment'
+
+on:
+  push:
+    branches:
+      - main
+      - develop
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - run: yarn
+      - uses: chromaui/action@v1
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -7,6 +7,7 @@
 /dist
 build.zip
 .firebase
+storybook-static
 
 # misc
 .DS_Store
@@ -19,4 +20,5 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-firebase-debug.log
+firebase-debug.log
+*.log

.storybook/main.js

@@ -16,6 +16,15 @@ module.exports = {
     builder: 'webpack5',
   },
   webpackFinal: async config => {
+    const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
+    fileLoaderRule.exclude = /\.svg$/;
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      enforce: 'pre',
+      loader: require.resolve('@svgr/webpack'),
+    });
+
     config.resolve.plugins = [
       ...(config.resolve.plugins || []),
       new TsconfigPathsPlugin({

.storybook/preview.js

@@ -1,6 +1,16 @@
 import { ThemeProvider } from 'styled-components';
 import { theme } from '../src/styles/theme';
-const themeDecorator = storyFn => <ThemeProvider theme={theme}>{storyFn()}</ThemeProvider>;
+import { RecoilRoot } from 'recoil';
+import GlobalStyles from '../src/styles/global';
+
+const themeDecorator = Story => (
+  <ThemeProvider theme={theme}>
+    <RecoilRoot>
+      <GlobalStyles />
+      <Story />
+    </RecoilRoot>
+  </ThemeProvider>
+);
 export const decorators = [themeDecorator];
 
 export const parameters = {

babel.config.js

@@ -1,27 +1,36 @@
 module.exports = {
-  exclude: [/node_modules[\\\/]core-js/, /node_modules[\\\/]webpack[\\\/]buildin/],
   presets: [
-    ['@babel/preset-env', { modules: false }],
+    ['@babel/preset-env', { targets: '> 0.25%' }],
     ['@babel/preset-react', { runtime: 'automatic' }],
-    "@babel/preset-typescript"
+    '@babel/preset-typescript',
   ],
   plugins: [
-    '@babel/plugin-transform-template-literals',
-    '@babel/plugin-transform-arrow-functions',
-    '@babel/plugin-transform-runtime',
+    ['@babel/plugin-transform-runtime', { corejs: 3 }],
     '@babel/plugin-syntax-dynamic-import',
   ],
-  env: {
-    development: {
-      plugins: ['babel-plugin-styled-components'],
-    },
-    production: {
-      only: ['src'],
-      plugins: [
-        ['transform-react-remove-prop-types', { removeImport: true }],
-        '@babel/plugin-transform-react-inline-elements',
-        '@babel/plugin-transform-react-constant-elements',
-      ],
-    },
-  },
 };
+
+// Fix: Storybook build시 오류 발생하는 설정 (env field 문제)
+// module.exports = {
+//   presets: [
+//     ['@babel/preset-env', { targets: '> 0.25%' }],
+//     ['@babel/preset-react', { runtime: 'automatic' }],
+//     '@babel/preset-typescript',
+//   ],
+//   plugins: [
+//     ['@babel/plugin-transform-runtime', { corejs: 3 }],
+//     '@babel/plugin-syntax-dynamic-import',
+//     'babel-plugin-styled-components',
+//   ],
+//   env: {
+//     production: {
+//       only: ['src'],
+//       plugins: [
+//         ['babel-plugin-styled-components', { displayName: false }],
+//         'transform-react-remove-prop-types',
+//         '@babel/plugin-transform-react-inline-elements',
+//         '@babel/plugin-transform-react-constant-elements',
+//       ],
+//     },
+//   },
+// };

build/app-paths.js

@@ -0,0 +1,4 @@
+const path = require('path');
+const APP_PATH = pathDir => path.resolve(__dirname, `../${pathDir}`);
+
+module.exports = APP_PATH;

build/optionalPlugin/webpack.bundleAnalyzer.js

@@ -0,0 +1,12 @@
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
+module.exports = {
+  plugins: [
+    new BundleAnalyzerPlugin({
+      analyzerMode: 'static', // 분석된 결과를 파일로 저장
+      openAnalyzer: false, // 분석 결과 페이지 자동 열기 여부
+      reportFilename: `bundle-size.html.html`, // 분석 결과 파일명
+      openAnalyzer: true, // 웹팩 빌드 후 보고서파일을 자동으로 열지 여부
+    }),
+  ],
+};

build/webpack.common.js

@@ -0,0 +1,93 @@
+const path = require('path');
+
+const APP_PATH = require('./app-paths');
+const HTML_PLUGIN = chunks => {
+  return chunks.map(
+    ({ chunk, title }) =>
+      new HtmlPlugin({
+        title: `${title}`,
+        filename: `${chunk}.html`,
+        chunks: [chunk],
+      }),
+  );
+};
+
+const Dotenv = require('dotenv-webpack');
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
+const HtmlPlugin = require('html-webpack-plugin');
+const { env } = require('process');
+
+module.exports = {
+  entry: {
+    popup: APP_PATH('src/pages/popup/index.tsx'),
+    background: APP_PATH('src/pages/background/index.ts'),
+    testContent: APP_PATH('src/pages/content/testPage.tsx'),
+    solutionContent: APP_PATH('src/pages/content/solutionPage.tsx'),
+    problemContent: APP_PATH('src/pages/content/problemPage.tsx'),
+    profileTab: APP_PATH('src/pages/newTab/profile/index.tsx'),
+    solutionTab: APP_PATH('src/pages/newTab/Solution.tsx'),
+  },
+  output: {
+    filename: 'script/[name].js',
+    publicPath: './',
+    path: APP_PATH('dist'),
+  },
+  cache: {
+    type: env.dev ? 'memory' : 'filesystem',
+    buildDependencies: {
+      config: [__filename],
+    },
+    idleTimeout: 2000,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts(x?)$/,
+        exclude: /node_modules/,
+        loader: 'esbuild-loader',
+        options: {
+          loader: 'tsx',
+          target: 'esnext',
+          tsconfigRaw: require('../tsconfig.json'),
+        },
+      },
+      {
+        test: /\.css$/i,
+        use: ['style-loader', 'css-loader'],
+      },
+      {
+        test: /\.svg$/i,
+        use: ['@svgr/webpack'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js', '.json'],
+    alias: {
+      '@src': APP_PATH('./src'),
+      '@assets': APP_PATH('./assets'),
+    },
+  },
+  plugins: [
+    new Dotenv({
+      path: '.env',
+    }),
+    new CopyPlugin({
+      patterns: [
+        {
+          from: APP_PATH('src/static'),
+          to: APP_PATH('dist'),
+        },
+      ],
+    }),
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: ['**/*', path.resolve(process.cwd(), 'dist/**/*')],
+    }),
+    ...HTML_PLUGIN([
+      { chunk: 'popup', title: '프로솔브 - PopUp 페이지' },
+      { chunk: 'solutionTab', title: '프로솔브 - 문제 풀이 페이지' },
+      { chunk: 'profileTab', title: '프로솔브 - 나의 풀이 페이지' },
+    ]),
+  ],
+};

build/webpack.dev.js

@@ -0,0 +1,15 @@
+const { HotModuleReplacementPlugin } = require('webpack');
+
+module.exports = {
+  mode: 'development',
+  devtool: 'source-map',
+  plugins: [new HotModuleReplacementPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.(jpe?g|png|gif)$/i,
+        type: 'asset/inline',
+      },
+    ],
+  },
+};

build/webpack.prod.js

@@ -0,0 +1,51 @@
+const { ESBuildMinifyPlugin } = require('esbuild-loader');
+
+module.exports = {
+  mode: 'production',
+  devtool: 'hidden-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.(jpe?g|png|gif)$/i,
+        type: 'asset',
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10 * 1024, // 10KB
+          },
+        },
+        use: [
+          {
+            loader: 'image-webpack-loader',
+            options: {
+              mozjpeg: {
+                progressive: true,
+                quality: 65,
+              },
+              optipng: {
+                enabled: false,
+              },
+              pngquant: {
+                quality: [0.65, 0.9],
+                speed: 4,
+              },
+              gifsicle: {
+                interlaced: false,
+              },
+              webp: {
+                quality: 75,
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimizer: [
+      new ESBuildMinifyPlugin({
+        target: 'es2015',
+        css: true,
+      }),
+    ],
+  },
+};