Merge pull request #441 from woowacourse-teams/develop

Release: 1.3.0

frontend/.eslintrc.js

@@ -83,6 +83,7 @@ module.exports = {
         tsx: 'never',
         svg: 'always',
         png: 'always',
+        webp: 'always',
       },
     ],
   },

frontend/config/webpack.common.js

@@ -25,6 +25,7 @@ module.exports = {
     path: paths.appOutput,
     publicPath: PUBLIC_PATH,
     clean: true,
+    assetModuleFilename: 'static/[name].[contenthash][ext]',
   },
   resolve: {
     extensions: paths.moduleFileExtensions.map(e => `.${e}`),
@@ -45,41 +46,11 @@ module.exports = {
         ],
       },
       {
-        test: /\.(woff|woff2|eot|ttf|otf)$/i,
+        test: /\.(png|gif|svg|jpg|jpeg|webp)$/i,
         type: 'asset/resource',
       },
       {
-        test: /\.(jpe?g|png|webp)$/,
-        use: [
-          {
-            loader: 'responsive-loader',
-            options: {
-              adapter: require('responsive-loader/sharp'),
-              sizes: [600],
-              format: 'webp',
-              placeholder: true,
-              quality: 50,
-              placeholderSize: 20,
-              name: '[name].[contenthash].[ext]',
-            },
-          },
-          {
-            loader: 'responsive-loader',
-            options: {
-              adapter: require('responsive-loader/sharp'),
-              sizes: [600],
-              format: 'png',
-              placeholder: true,
-              quality: 40,
-              placeholderSize: 20,
-              name: '[name].[contenthash].[ext]',
-            },
-          },
-        ],
-        type: 'javascript/auto',
-      },
-      {
-        test: /\.(gif|svg)$/i,
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
         type: 'asset/resource',
       },
     ],

frontend/package.json

@@ -73,9 +73,7 @@
     "postcss-styled-syntax": "^0.4.0",
     "prettier": "2.8.8",
     "react-refresh": "^0.14.0",
-    "responsive-loader": "^3.1.2",
     "serve": "^14.2.0",
-    "sharp": "^0.32.6",
     "storybook": "^7.0.24",
     "storybook-addon-react-router-v6": "^2.0.2",
     "styled-components": "^6.0.4",

frontend/public/index.html

@@ -14,7 +14,7 @@
     <link rel="preconnect" href="https://image.zipgo.pet" />
     <link rel="preconnect" href="https://api.zipgo.pet" />
 
-    <link rel="preload" as="image" href="landing_banner.8653779c19a90d9c.webp" />
+    <link rel="preload" as="image" href="static/landing_banner.bde60016b53f21a726fb.webp" />
 
     <script type="text/javascript" defer src="/axios/axios.min.js"></script>
 

frontend/src/pages/Landing/Landing.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-import ZipgoBannerPng from '@/assets/png/landing_banner.png?responsive';
+import ZipgoBannerPng from '@/assets/webp/landing_banner.webp';
 import Header from '@/components/@common/Header/Header';
 import Template from '@/components/@common/Template';
 import ToastContainer from '@/components/@common/Toast/ToastContainer';
@@ -33,7 +33,7 @@ const Landing = () => {
               <BannerTitle>집사의 고민</BannerTitle>
             </TitleContainer>
           </BannerText>
-          <BannerImg src={ZipgoBannerPng.src} onClick={onToast} alt="집사의고민 배너 이미지" />
+          <BannerImg src={ZipgoBannerPng} onClick={onToast} alt="집사의고민 배너 이미지" />
         </BannerSection>
         <ListSection>
           <FilterBottomSheet />

frontend/src/pages/Login/Login.tsx

@@ -3,9 +3,9 @@ import { useEffect } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
-import ZipgoBanner from '@/assets/png/landing_banner.png?responsive';
 import KakaoSymbol from '@/assets/svg/kakao_symbol.svg';
 import ZipgoLogo from '@/assets/svg/zipgo_logo_dark.svg';
+import ZipgoBanner from '@/assets/webp/landing_banner.webp';
 import Template from '@/components/@common/Template';
 import { KAKAO_HREF } from '@/constants/auth';
 import { useAuth } from '@/hooks/auth';
@@ -34,7 +34,7 @@ const Login = () => {
         <IntroContainer>
           <LogoBannerContainer>
             <LogoImg src={ZipgoLogo} alt="집사의고민 로고" />
-            <BannerImg src={ZipgoBanner.src} alt="집사의고민 배너 이미지" />
+            <BannerImg src={ZipgoBanner} alt="집사의고민 배너 이미지" />
           </LogoBannerContainer>
           <Intro>
             답답했던 사료 고민은

frontend/src/types/assets/assets.d.ts

@@ -8,18 +8,3 @@ declare module '*.jpg';
 declare module '*.jpeg';
 declare module '*.png';
 declare module '*.webp';
-
-declare module '*responsive' {
-  const content: ResponsiveImageOutput;
-  export default content;
-}
-
-interface ResponsiveImageOutput {
-  src: string;
-  srcSet: string;
-  placeholder: string | undefined;
-  images: { path: string; width: number; height: number }[];
-  width: number;
-  height: number;
-  toString: () => string;
-}