Merge pull request #469 from Mile-Writings/refactor/#461/webp

[Refactor/#461] 큰 일러 webp로 교체 및 대체이미지 설정

src/pages/createGroup/components/CreateGroupInfo.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { AxiosError } from 'axios';
 import { ChangeEvent, Dispatch, SetStateAction, useEffect, useRef, useState } from 'react';
-
+import createGroupWebp from '/src/assets/webps/creategroup.webp';
 import {
   CreateGroupImageUpload,
   CreateGroupImageUploadedIc,
@@ -190,7 +190,10 @@ const CreateGroupInfo = ({
           <Spacing marginBottom="1.1" />
           <Title>나만의 글 모임을 만들어보세요</Title>
           <Spacing marginBottom="2.4" />
-          <IllustImg src={createGroupIlust} />
+          <picture>
+            <source srcSet={createGroupWebp} />
+            <img src={createGroupIlust} />
+          </picture>
         </TitleWrapper>
         <WhiteInputWrapper isValid={!isGroupNameEmpty}>
           <GroupInputWrapper>
@@ -623,13 +626,6 @@ const SubTitle = styled.h2`
   ${({ theme }) => theme.fonts.title5};
 `;
 
-const IllustImg = styled.img`
-  display: flex;
-  flex-shrink: 0;
-  width: 100%;
-  height: 36.6rem;
-`;
-
 const WhiteInputWrapper = styled.section<{ isValid: boolean }>`
   display: flex;
   align-items: center;

src/pages/error/Error.tsx

@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
 
 import Spacing from '../../components/commons/Spacing';
 import errorIlust from '/src/assets/images/errorIlust.png';
+import errorWebp from '/src/assets/webps/error.webp';
 
 const Error = () => {
   const navigate = useNavigate();
@@ -12,7 +13,10 @@ const Error = () => {
 
   return (
     <ErrorWrapper>
-      <ErrorIlustImage src={errorIlust} />
+      <picture>
+        <source srcSet={errorWebp} type="image/webp" />
+        <img src={errorIlust} />
+      </picture>
       <Spacing marginBottom="0.8" />
       <Title>페이지를 찾지 못했어요</Title>
       <Spacing marginBottom="1.2" />
@@ -69,8 +73,3 @@ const BackToPrevPageBtn = styled.button`
   ${({ theme }) => theme.fonts.button3};
   border-radius: 8px;
 `;
-
-const ErrorIlustImage = styled.img`
-  width: 51rem;
-  height: 24.5rem;
-`;

src/pages/groupJoinCongrats/GroupJoinCongrats.tsx

@@ -3,6 +3,7 @@ import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { DefaultHeader } from '../../components/commons/Header';
 import Spacing from '../../components/commons/Spacing';
 import groupJoinCongratsIlust from '/src/assets/images/createGroupCongrats.png';
+import groupJoinCongratsWebp from '/src/assets/webps/joincongratulation.webp';
 
 const GroupJoinCongrats = () => {
   const { groupId } = useParams() as { groupId: string };
@@ -25,7 +26,10 @@ const GroupJoinCongrats = () => {
           <GroupJoinText>글 모임에서 당신의 소중한 이야기를 들려주세요.</GroupJoinText>
         </GroupJoinTitleWrapper>
         <Spacing marginBottom="4.8" />
-        <img src={groupJoinCongratsIlust} />
+        <picture>
+          <source srcSet={groupJoinCongratsWebp} />
+          <img src={groupJoinCongratsIlust} />
+        </picture>
         <Spacing marginBottom="4.8" />
         <GoToGroupFeedBtn onClick={onClickGoToGroupFeedBtn}>모임 페이지 보러가기</GoToGroupFeedBtn>
       </GroupJoinCongratsContainer>

src/pages/login/Login.tsx

@@ -3,6 +3,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import { HeaderLogoIc, KakaoLoginBtnIc } from '../../assets/svgs';
 import Spacing from '../../components/commons/Spacing';
 import loginIlust from '/src/assets/images/loginIlust.png';
+import loginWebP from '/src/assets/webps/login.webp';
 
 const Login = () => {
   //const REDIRECT_URL = 'https://www.milewriting.com/redirect-kakao';
@@ -39,7 +40,10 @@ const Login = () => {
             <SubText>Make it look easy 글쓰기를 쉽고 편안하게</SubText>
           </LoginTextBox>
           <Spacing marginBottom="2.4" />
-          <img src={loginIlust} />
+          <picture>
+            <source srcSet={loginWebP} type="image/webp" />
+            <img src={loginIlust} />
+          </picture>
           <Spacing marginBottom="2.4" />
           <KakaoLoginBtnIcon onClick={handleKakaoLogin} />
         </LoginContainer>

src/pages/main/components/Manual.tsx

@@ -1,15 +1,19 @@
 import styled from '@emotion/styled';
 
 import Spacing from '../../../components/commons/Spacing';
-import { MAIN_MANUAL_IMG_URL } from '../constants/mainManualImgURL';
+import { MAIN_MANUAL_IMG_URL, MAIN_MANUAL_WEBP_URL } from '../constants/mainManualImgURL';
+
 const Manual = () => {
   return (
     <ManualWrapper>
       <ManualTitle>마일 메뉴얼</ManualTitle>
       <Spacing marginBottom="3.6" />
       <ManualLayout>
-        {MAIN_MANUAL_IMG_URL.map((item, idx) => (
-          <ManualImg src={item} alt={`매뉴얼 이미지${idx}`} key={idx} />
+        {MAIN_MANUAL_WEBP_URL.map((webpSrc, idx) => (
+          <picture key={idx}>
+            <source srcSet={webpSrc} type="image/webp" />
+            <ManualImg src={MAIN_MANUAL_IMG_URL[idx]} alt={`매뉴얼 이미지 ${idx}`} />
+          </picture>
         ))}
       </ManualLayout>
     </ManualWrapper>

src/pages/main/components/OnBoarding.tsx

@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
 import Spacing from '../../../components/commons/Spacing';
-import mainOnBoradingImg from '/src/assets/images/mainOnBoarding.png';
+import mainOnBoardingImg from '/src/assets/images/mainOnBoarding.png';
+import mainOnBoardingWebp from '/src/assets/webps/mainonboarding.webp';
 const OnBoarding = () => {
   return (
     <OnBoardingWrapper>
@@ -15,8 +16,10 @@ const OnBoarding = () => {
           </SubText>
         </TextLayout>
         <Spacing marginBottom="3.2" />
-
-        <MainOnboardingImg src={mainOnBoradingImg} alt="메인 온보딩 이미지" />
+        <picture>
+          <source srcSet={mainOnBoardingWebp} type="image/webp" />
+          <MainOnboardingImg src={mainOnBoardingImg} alt="메인 온보딩 이미지" />
+        </picture>
       </OnBoardingIcWithTextLayout>
     </OnBoardingWrapper>
   );

src/pages/main/constants/mainManualImgURL.ts

@@ -4,6 +4,12 @@ import mainManualLook from '/src/assets/images/mainManualLook.jpg';
 import mainManualMake from '/src/assets/images/mainManualMake.jpg';
 import mainManualShare from '/src/assets/images/mainManualShare.jpg';
 import mainManualWrite from '/src/assets/images/mainManualWrite.jpg';
+import mainManualCuriousWebp from '/src/assets/webps/mainmanualcurious.webp';
+import mainManualJoinWebp from '/src/assets/webps/mainmanualjoin.webp';
+import mainManualLookWebp from '/src/assets/webps/mainmanuallook.webp';
+import mainManualMakeWebp from '/src/assets/webps/mainmanualmake.webp';
+import mainManualShareWebp from '/src/assets/webps/mainmanualshare.webp';
+import mainManualWriteWebp from '/src/assets/webps/mainmanualwrite.webp';
 
 export const MAIN_MANUAL_IMG_URL = [
   mainManualMake,
@@ -13,3 +19,12 @@ export const MAIN_MANUAL_IMG_URL = [
   mainManualCurious,
   mainManualLook,
 ];
+
+export const MAIN_MANUAL_WEBP_URL = [
+  mainManualMakeWebp,
+  mainManualJoinWebp,
+  mainManualWriteWebp,
+  mainManualShareWebp,
+  mainManualCuriousWebp,
+  mainManualLookWebp,
+];

vite.config.ts

@@ -24,7 +24,7 @@ export default defineConfig({
     visualizer() as PluginOption,
   ],
   build: {
-    sourcemap: true,
+    sourcemap: false,
     rollupOptions: {
       output: {
         manualChunks: {