[release] FE 1차 배포

frontend/.gitignore

@@ -3,6 +3,7 @@ node_modules
 
 # Build artifacts, compiled files not needed in version control.
 dist
+build-storybook.log
 
 ### Environment Variable ###
 .env
@@ -13,3 +14,5 @@ dist
 *.crt
 *.key
 *.csr
+
+*storybook.log

frontend/.storybook/main.ts

@@ -0,0 +1,17 @@
+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-essentials',
+    '@chromatic-com/storybook',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+};
+export default config;

frontend/.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;

frontend/chromatic.config.json

@@ -0,0 +1,6 @@
+{
+  "onlyChanged": true,
+  "projectId": "${PROJECT_ID}",
+  "storybookBaseDir": "frontend",
+  "zip": true
+}

frontend/config/webpack.common.ts

@@ -1,7 +1,8 @@
 import * as path from 'path';
 import * as webpack from 'webpack';
-// plugin
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const Dotenv = require('dotenv-webpack');
 
 const configuration: webpack.Configuration = {
   // 모듈 해석 방법 설정
@@ -11,7 +12,7 @@ const configuration: webpack.Configuration = {
 
     // 절대 경로
     alias: {
-      '@src': path.resolve(__dirname, '/src/'),
+      '@': path.resolve(__dirname, '../src'),
     },
   },
 
@@ -25,6 +26,13 @@ const configuration: webpack.Configuration = {
         use: ['ts-loader'],
         exclude: /node_modules/,
       },
+      {
+        test: /\.(png|jpe?g|svg)$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'images/[hash][ext][query]',
+        },
+      },
     ],
   },
 
@@ -33,6 +41,24 @@ const configuration: webpack.Configuration = {
       template: path.resolve(__dirname, '..', 'public', 'index.html'),
     }),
     new webpack.ProvidePlugin({ React: 'react' }),
+    new Dotenv({
+      path: './.env',
+      systemvars: true,
+      safe: true,
+      ignoreStub: true,
+    }),
+
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: path.resolve(__dirname, '..', 'public'),
+          to: path.resolve(__dirname, '..', 'dist'),
+          globOptions: {
+            ignore: ['**/index.html'],
+          },
+        },
+      ],
+    }),
   ],
 };
 

frontend/config/webpack.dev.ts

@@ -1,66 +1,86 @@
 import * as path from 'path';
 import * as webpack from 'webpack';
-import 'webpack-dev-server';
 import { merge } from 'webpack-merge';
+const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+import 'webpack-dev-server';
 import common from './webpack.common';
+import detectPort from 'detect-port';
 
-const RefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
+const DEFAULT_PORT = 3000;
 
-const configuration: webpack.Configuration = {
-  mode: 'development',
-  devtool: 'inline-source-map',
-  output: {
-    path: path.resolve(__dirname, '../dist'),
-    filename: '[name].bundle.js',
-  },
-  module: {
-    rules: [
+async function getAvailablePort(defaultPort: number): Promise<number> {
+  return await detectPort(defaultPort);
+}
+
+export default getAvailablePort(DEFAULT_PORT).then((port) => {
+  console.log(`🚀 Using available port: ${port}`);
+
+  const configuration: webpack.Configuration = {
+    mode: 'development',
+    devtool: 'inline-source-map',
+    output: {
+      path: path.resolve(__dirname, '../dist'),
+      filename: '[name].bundle.js',
+      publicPath: '/',
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+          include: path.resolve(
+            __dirname,
+            '../node_modules/react-datepicker/dist',
+          ),
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+          exclude: /node_modules/,
+        },
+      ],
+    },
+    plugins: [
+      new RefreshWebpackPlugin(),
       {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-        exclude: /node_modules/,
-      },
-    ],
-  },
-  plugins: [
-    new RefreshWebpackPlugin(),
-    {
-      apply: (compiler) => {
-        compiler.hooks.done.tap('done', (stats) => {
-          if (stats.hasErrors()) {
-            console.error(
-              '❌ Webpack Build Failed! Please check errors above.',
-            );
-          } else if (stats.hasWarnings()) {
-            console.warn('⚠️ Webpack Build Completed with Warnings.');
-          } else {
-            console.log(`
+        apply: (compiler) => {
+          compiler.hooks.done.tap('done', (stats) => {
+            if (stats.hasErrors()) {
+              console.error(
+                '❌ Webpack Build Failed! Please check errors above.',
+              );
+              console.error(stats.toJson().errors);
+            } else if (stats.hasWarnings()) {
+              console.warn('⚠️ Webpack Build Completed with Warnings.');
+            } else {
+              console.log(`
 --------------------------------------------------------
 🎉  WEBPACK BUILD SUCCESSFULLY COMPLETED!
 ✅  Files Generated: ${stats
-              .toJson()
-              .assets.map((asset) => asset.name)
-              .join(', ')}
+                .toJson()
+                .assets.map((asset) => asset.name)
+                .join(', ')}
 ⏱️  Build Time: ${stats.endTime - stats.startTime} ms
-🌐  Server Running at: http://localhost:3000
+🌐  Server Running at: http://localhost:${port}
 --------------------------------------------------------
-                        `);
-          }
-        });
+              `);
+            }
+          });
+        },
       },
+    ],
+    devServer: {
+      port,
+      open: true,
+      historyApiFallback: true,
+    },
+    watchOptions: {
+      ignored: /node_modules/,
+    },
+    stats: {
+      all: false,
     },
-  ],
-  devServer: {
-    port: 3000,
-    open: true,
-    historyApiFallback: true,
-  },
-  watchOptions: {
-    ignored: /node_modules/,
-  },
-  stats: {
-    all: false,
-  },
-};
+  };
 
-export default merge(common, configuration);
+  return merge(common, configuration);
+});

frontend/netlify.toml

@@ -0,0 +1,4 @@
+[[redirects]]
+from = "/*"
+to = "/index.html"
+status = 200