woowacourse-teams · turtle601 · Sep 20, 2023 · Sep 19, 2023 · Sep 19, 2023 · Sep 19, 2023
diff --git a/frontend/.babelrc b/frontend/.babelrc
@@ -15,8 +15,7 @@
       {
         "runtime": "automatic"
       }
-    ],
-    "@babel/preset-typescript"
+    ]
   ],
   "plugins": [
     [

diff --git a/frontend/.webpack/webpack.dev.js → frontend/.webpack/webpack.common.js b/frontend/.webpack/webpack.dev.js → frontend/.webpack/webpack.common.js
@@ -1,16 +1,12 @@
 const path = require('path');
 
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
-const Dotenv = require('dotenv-webpack');
-
 module.exports = {
-  mode: 'production',
+  mode: process.env.NODE_ENV,
   entry: ['./src/index.tsx'],
   output: {
     path: path.resolve(__dirname, '../dist/'),
     publicPath: '/',
+    filename: '[name].[chunkhash:8].js',
     clean: true,
   },
   resolve: {
@@ -61,15 +57,4 @@ module.exports = {
     historyApiFallback: true,
     allowedHosts: 'all',
   },
-
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './public/index.html',
-      filename: 'index.html',
-    }),
-    new ForkTsCheckerWebpackPlugin(),
-    new Dotenv({
-      path: path.resolve(__dirname, `../.dev.env`),
-    }),
-  ],
 };
diff --git a/frontend/.webpack/webpack.config.js b/frontend/.webpack/webpack.config.js
@@ -1,18 +1,28 @@
-const productionConfig = require('./webpack.prod.js');
-const developmentConfig = require('./webpack.dev.js');
-const localConfig = require('./webpack.local.js');
+const path = require('path');
+const commonConfig = require('./webpack.common.js');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+const Dotenv = require('dotenv-webpack');
+
+const commonPlugins = [
+  new HtmlWebpackPlugin({
+    template: './public/index.html',
+    filename: 'index.html',
+  }),
+  new ForkTsCheckerWebpackPlugin(),
+];
 
 module.exports = (env, args) => {
   const { TARGET_ENV } = env;
 
-  switch (TARGET_ENV) {
-    case 'msw':
-      return localConfig;
-    case 'dev':
-      return developmentConfig;
-    case 'prod':
-      return productionConfig;
-    default:
-      throw new Error('No matching configuration was found!');
-  }
+  return {
+    ...commonConfig,
+    plugins: [
+      ...commonPlugins,
+      new Dotenv({
+        path: path.resolve(__dirname, `../.${TARGET_ENV}.env`),
+      }),
+    ],
+  };
 };
diff --git a/frontend/.webpack/webpack.local.js b/frontend/.webpack/webpack.local.js
diff --git a/frontend/cypress/fixtures/restaurants.json b/frontend/cypress/fixtures/restaurants.json
@@ -24,7 +24,7 @@
       "images": [
         {
           "id": 355,
-          "name": "UmF3RmlzaEVhdGVyX-uwlOydtO2CueyKpOybjO2UhF_roa_rjbDsm5Trk5zrqrDsoJA.jpeg",
+          "name": "UmF3RmlzaEVhdGVyX-uwlOydtO2CueyKpOybjO2UhF_roa_rjbDsm5Trk5zrqrDsoJA",
           "author": "@RawFishEater",
           "sns": "YOUTUBE"
         }
@@ -54,7 +54,7 @@
       "images": [
         {
           "id": 63,
-          "name": "bW9uc3RlcmdvdXJtZXRf7Y6Y66mU7KKF.jpeg",
+          "name": "bW9uc3RlcmdvdXJtZXRf7Y6Y66mU7KKF",
           "author": "@monstergourmet",
           "sns": "YOUTUBE"
         }
@@ -84,7 +84,7 @@
       "images": [
         {
           "id": 136,
-          "name": "bGl3b29f66q965Oc7IOs66Gv.jpeg",
+          "name": "bGl3b29f66q965Oc7IOs66Gv",
           "author": "@Liwoo_foodie",
           "sns": "YOUTUBE"
         }
@@ -114,7 +114,7 @@
       "images": [
         {
           "id": 121,
-          "name": "bWFyaWFnZV_rjIDshLHsl7Dtg4TqsIjruYQ.jpeg",
+          "name": "bWFyaWFnZV_rjIDshLHsl7Dtg4TqsIjruYQ",
           "author": "@mariage_in",
           "sns": "YOUTUBE"
         }
@@ -144,7 +144,7 @@
       "images": [
         {
           "id": 151,
-          "name": "bGl3b29f66-47YOA7Jqw64-Z.jpeg",
+          "name": "bGl3b29f66-47YOA7Jqw64-Z",
           "author": "@Liwoo_foodie",
           "sns": "YOUTUBE"
         }
@@ -174,7 +174,7 @@
       "images": [
         {
           "id": 330,
-          "name": "UmF3RmlzaEVhdGVyX-2YleygnOyDge2ajF_qsIDrnb3rqrDsp4DsoJA.jpeg",
+          "name": "UmF3RmlzaEVhdGVyX-2YleygnOyDge2ajF_qsIDrnb3rqrDsp4DsoJA",
           "author": "@RawFishEater",
           "sns": "YOUTUBE"
         }
@@ -204,7 +204,7 @@
       "images": [
         {
           "id": 183,
-          "name": "bGl3b29f6re4656c65Oc7JuM7Luk7Z6Q7ISc7Jq4642U7YyM67mM66as7Jio.jpeg",
+          "name": "bGl3b29f6re4656c65Oc7JuM7Luk7Z6Q7ISc7Jq4642U7YyM67mM66as7Jio",
           "author": "@Liwoo_foodie",
           "sns": "YOUTUBE"
         }
@@ -234,7 +234,7 @@
       "images": [
         {
           "id": 92,
-          "name": "bWFyaWFnZV_sgrDqs7zrsJTri6Q.jpeg",
+          "name": "bWFyaWFnZV_sgrDqs7zrsJTri6Q",
           "author": "@mariage_in",
           "sns": "YOUTUBE"
         }

diff --git a/frontend/package.json b/frontend/package.json
@@ -4,11 +4,11 @@
   "main": "index.tsx",
   "license": "MIT",
   "scripts": {
-    "start:msw": "webpack serve --port 3000 --env TARGET_ENV=msw",
-    "start:dev": "webpack serve --port 3000 --env TARGET_ENV=dev",
-    "start:prod": "webpack serve --port 3000 --env TARGET_ENV=prod",
-    "build:dev": "webpack --env TARGET_ENV=dev",
-    "build:prod": "webpack --env TARGET_ENV=prod",
+    "start:msw": "webpack serve --port 3000 --env TARGET_ENV=msw --mode development",
+    "start:dev": "webpack serve --port 3000 --env TARGET_ENV=dev --mode production",
+    "start:prod": "webpack serve --port 3000 --env TARGET_ENV=prod --mode production",
+    "build:dev": "webpack --env TARGET_ENV=dev --mode production",
+    "build:prod": "webpack --env TARGET_ENV=prod --mode production",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
     "lint:css": "stylelint './src/**/*.{tsx,ts,jsx,js}'",
     "lint:css:fix": "stylelint './src/**/*.{tsx,ts,jsx,js}' --fix",
@@ -21,36 +21,36 @@
   },
   "dependencies": {
     "@googlemaps/react-wrapper": "^1.1.35",
-    "@storybook/react": "^7.0.25",
-    "@storybook/react-webpack5": "^7.0.25",
     "@tanstack/react-query": "^4.32.0",
-    "@tanstack/react-query-devtools": "^4.32.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
-    "@types/styled-components": "^5.1.26",
     "axios": "^1.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
+    "styled-components": "^6.0.2",
+    "zustand": "^4.3.9",
+    "typescript": "^5.1.6"
+  },
+  "devDependencies": {
+    "@types/styled-components": "^5.1.26",
+    "ts-loader": "^9.4.4",
     "babel-plugin-root-import": "^6.6.0",
-    "copy-webpack-plugin": "^11.0.0",
     "cypress": "^12.17.3",
     "dotenv": "^16.3.1",
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "html-webpack-plugin": "^5.5.3",
     "msw": "^1.2.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-router-dom": "^6.14.2",
+    "copy-webpack-plugin": "^11.0.0",
+    "@tanstack/react-query-devtools": "^4.32.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@types/react": "^18.2.14",
+    "@types/react-dom": "^18.2.6",
+    "@storybook/react": "^7.0.25",
+    "@storybook/react-webpack5": "^7.0.25",
     "storybook": "^7.0.25",
-    "styled-components": "^6.0.2",
-    "ts-loader": "^9.4.4",
-    "typescript": "^5.1.6",
     "webpack": "^5.88.1",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
     "webpack-merge": "^5.9.0",
-    "zustand": "^4.3.9"
-  },
-  "devDependencies": {
     "@babel/core": "^7.22.5",
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",

diff --git a/frontend/src/assets/all.png b/frontend/src/assets/all.png
diff --git a/frontend/src/components/@common/Toast/Toast.tsx b/frontend/src/components/@common/Toast/Toast.tsx
@@ -4,6 +4,7 @@ import { Modal } from '~/components/@common/Modal';
 import useToastState from '~/hooks/store/useToastState';
 import useMediaQuery from '~/hooks/useMediaQuery';
 import { BORDER_RADIUS, FONT_SIZE } from '~/styles/common';
+import getImgUrl from '~/utils/image';
 
 interface StyledToastProps {
   isSuccess?: boolean;
@@ -20,7 +21,12 @@ function Toast() {
     <Modal open={open} close={close} isOpen={isOpen}>
       {isOpen && (
         <StyledToastWrapper isSuccess={isSuccess} isMobile={isMobile}>
-          {image && <StyledToastImg src={`https://www.celuveat.com/images-data/${image.url}`} alt={image.alt} />}
+          {image && (
+            <picture>
+              <StyledToastSource type="image/webp" srcSet={`${getImgUrl(image.url, 'webp')}`} />
+              <StyledToastImg src={`${getImgUrl(image.url, 'jpeg')}`} alt={image.alt} />
+            </picture>
+          )}
           <StyledToastText>{text}</StyledToastText>
         </StyledToastWrapper>
       )}
@@ -30,13 +36,21 @@ function Toast() {
 
 export default Toast;
 
-const StyledToastImg = styled.img`
+const styledToastImgVariable = css`
   width: 44px;
   height: 44px;
 
   border-radius: ${BORDER_RADIUS.sm};
 `;
 
+const StyledToastImg = styled.img`
+  ${styledToastImgVariable}
+`;
+
+const StyledToastSource = styled.source`
+  ${styledToastImgVariable}
+`;
+
 const StyledToastText = styled.span`
   color: var(--gary-4);
 `;
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,8 +15,7 @@ @@
           {
             "runtime": "automatic"
           }
-        ],
-        "@babel/preset-typescript"
+        ]
       ],
       "plugins": [
         [
@@ Expand Down @@