refactor: use picture tag with webp

boostcampwm2023 · Apr 22, 2024 · b7d45c3 · b7d45c3
1 parent d4ce567
commit b7d45c3
Show file tree

Hide file tree

Showing 21 changed files with 91 additions and 40 deletions.
diff --git a/front/public/models/img/Bottom/bottom.webp b/front/public/models/img/Bottom/bottom.webp
diff --git a/front/public/models/img/Bottom/bottom1.png b/front/public/models/img/Bottom/bottom1.png
diff --git a/front/public/models/img/Bottom/bottom2.webp b/front/public/models/img/Bottom/bottom2.webp
diff --git a/front/public/models/img/Bottom/bottom3.webp b/front/public/models/img/Bottom/bottom3.webp
diff --git a/front/public/models/img/Deco/chest.webp b/front/public/models/img/Deco/chest.webp
diff --git a/front/public/models/img/Deco/ddong.webp b/front/public/models/img/Deco/ddong.webp
diff --git a/front/public/models/img/Deco/fishBread.webp b/front/public/models/img/Deco/fishBread.webp
diff --git a/front/public/models/img/Deco/gingerBread.webp b/front/public/models/img/Deco/gingerBread.webp
diff --git a/front/public/models/img/Deco/miniSnowMan.webp b/front/public/models/img/Deco/miniSnowMan.webp
diff --git a/front/public/models/img/Deco/ribbonBox.webp b/front/public/models/img/Deco/ribbonBox.webp
diff --git a/front/public/models/img/Deco/socks.webp b/front/public/models/img/Deco/socks.webp
diff --git a/front/public/models/img/Main/bcduck.webp b/front/public/models/img/Main/bcduck.webp
diff --git a/front/public/models/img/Main/bcduck_glasses.webp b/front/public/models/img/Main/bcduck_glasses.webp
diff --git a/front/public/models/img/Main/lamp.webp b/front/public/models/img/Main/lamp.webp
diff --git a/front/public/models/img/Main/santa.webp b/front/public/models/img/Main/santa.webp
diff --git a/front/public/models/img/Main/snowman.webp b/front/public/models/img/Main/snowman.webp
diff --git a/front/public/models/img/Main/tree.webp b/front/public/models/img/Main/tree.webp
diff --git a/front/public/models/img/Main/tux.webp b/front/public/models/img/Main/tux.webp
diff --git a/front/src/constants/deco.tsx b/front/src/constants/deco.tsx
@@ -19,37 +19,44 @@ export const DECO = [
   {
     name: '선물상자',
     fileName: '/models/ribbonBox.glb',
-    img: '/models/img/Deco/ribbonBox.gif'
+    img: '/models/img/Deco/ribbonBox.gif',
+    webp: '/models/img/Deco/ribbonBox.webp'
   },
   {
     name: '붕어빵',
     fileName: '/models/fishBread.glb',
-    img: '/models/img/Deco/fishBread.gif'
+    img: '/models/img/Deco/fishBread.gif',
+    webp: '/models/img/Deco/fishBread.webp'
   },
   {
     name: '진저브레드',
     fileName: '/models/gingerBread.glb',
-    img: '/models/img/Deco/gingerBread.gif'
+    img: '/models/img/Deco/gingerBread.gif',
+    webp: '/models/img/Deco/gingerBread.webp'
   },
   {
     name: '마크상자',
     fileName: '/models/chest.glb',
-    img: '/models/img/Deco/chest.gif'
+    img: '/models/img/Deco/chest.gif',
+    webp: '/models/img/Deco/chest.webp'
   },
   {
     name: '똥',
     fileName: '/models/ddong.glb',
-    img: '/models/img/Deco/ddong.gif'
+    img: '/models/img/Deco/ddong.gif',
+    webp: '/models/img/Deco/ddong.webp'
   },
   {
     name: '미니눈사람',
     fileName: '/models/miniSnowMan.glb',
-    img: '/models/img/Deco/miniSnowMan.gif'
+    img: '/models/img/Deco/miniSnowMan.gif',
+    webp: '/models/img/Deco/miniSnowMan.webp'
   },
   {
     name: '양말',
     fileName: '/models/socks.glb',
-    img: '/models/img/Deco/socks.gif'
+    img: '/models/img/Deco/socks.gif',
+    webp: '/models/img/Deco/socks.webp'
   }
 ];
 
@@ -58,27 +65,32 @@ export const MAIN = [
   {
     name: '턱스',
     fileName: '/models/tux.glb',
-    img: '/models/img/Main/tux.gif'
+    img: '/models/img/Main/tux.gif',
+    webp: '/models/img/Main/tux.webp'
   },
   {
     name: '산타',
     fileName: '/models/santa.glb',
-    img: '/models/img/Main/santa.gif'
+    img: '/models/img/Main/santa.gif',
+    webp: '/models/img/Main/santa.webp'
   },
   {
     name: '부캠덕',
     fileName: '/models/bcduck.glb',
-    img: '/models/img/Main/bcduck.gif'
+    img: '/models/img/Main/bcduck.gif',
+    webp: '/models/img/Main/bcduck.webp'
   },
   {
     name: '안경부캠덕',
     fileName: '/models/bcduck_glasses.glb',
-    img: '/models/img/Main/bcduck_glasses.gif'
+    img: '/models/img/Main/bcduck_glasses.gif',
+    webp: '/models/img/Main/bcduck_glasses.webp'
   },
   {
     name: '눈사람',
     fileName: '/models/snowman.glb',
-    img: '/models/img/Main/snowman.gif'
+    img: '/models/img/Main/snowman.gif',
+    webp: '/models/img/Main/snowman.webp'
   }
 ];
 
@@ -137,21 +149,25 @@ export const BOTTOM = [
   {
     name: '받침대',
     fileName: '/models/bottom.glb',
-    img: '/models/img/Bottom/bottom.png'
+    img: '/models/img/Bottom/bottom.png',
+    webp: '/models/img/Bottom/bottom.webp'
   },
   {
     name: '받침대1',
     fileName: '/models/bottom1.glb',
-    img: '/models/img/Bottom/bottom1.png'
+    img: '/models/img/Bottom/bottom.png',
+    webp: '/models/img/Bottom/bottom.webp'
   },
   {
     name: '받침대2',
     fileName: '/models/bottom2.glb',
-    img: '/models/img/Bottom/bottom2.png'
+    img: '/models/img/Bottom/bottom2.png',
+    webp: '/models/img/Bottom/bottom2.webp'
   },
   {
     name: '받침대3',
     fileName: '/models/bottom3.glb',
-    img: '/models/img/Bottom/bottom3.png'
+    img: '/models/img/Bottom/bottom3.png',
+    webp: '/models/img/Bottom/bottom3.webp'
   }
 ];
diff --git a/front/src/pages/Make/Snowball/MainDeco/DecoBox.tsx b/front/src/pages/Make/Snowball/MainDeco/DecoBox.tsx
@@ -25,35 +25,57 @@ const StyledImg = styled.img`
   width: 100%;
 `;
 
+const StyledPicture = styled.picture`
+  width: 100%;
+`;
+
 const DecoImgs = (folder: string) => {
   const setMakeDecoBox = useSetRecoilState(MakeDecoRecoil);
 
   return folder === 'Main'
-    ? MAIN.map(({ img }, index) => {
+    ? MAIN.map(({ img, webp }, index) => {
         if (index > 0)
           return (
             <StyledBox key={img}>
-              <StyledImg
-                src={img}
-                alt={`mainDeco${index}`}
-                onClick={() =>
-                  setMakeDecoBox(prev => ({ ...prev, mainDecoID: index }))
-                }
-              />
+              <StyledPicture>
+                <source
+                  srcSet={webp}
+                  type="image/webp"
+                  onClick={() =>
+                    setMakeDecoBox(prev => ({ ...prev, mainDecoID: index }))
+                  }
+                />
+                <StyledImg
+                  src={img}
+                  alt={`mainDeco${index}`}
+                  onClick={() =>
+                    setMakeDecoBox(prev => ({ ...prev, mainDecoID: index }))
+                  }
+                />
+              </StyledPicture>
             </StyledBox>
           );
       })
-    : BOTTOM.map(({ img }, index) => {
+    : BOTTOM.map(({ img, webp }, index) => {
         if (index > 0)
           return (
             <StyledBox key={img}>
-              <StyledImg
-                src={img}
-                alt={`bottomDeco${index}`}
-                onClick={() =>
-                  setMakeDecoBox(prev => ({ ...prev, bottomID: index }))
-                }
-              />
+              <StyledPicture>
+                <source
+                  srcSet={webp}
+                  type="image/webp"
+                  onClick={() =>
+                    setMakeDecoBox(prev => ({ ...prev, bottomID: index }))
+                  }
+                />
+                <StyledImg
+                  src={img}
+                  alt={`bottomDeco${index}`}
+                  onClick={() =>
+                    setMakeDecoBox(prev => ({ ...prev, bottomID: index }))
+                  }
+                />
+              </StyledPicture>
             </StyledBox>
           );
       });

diff --git a/front/src/pages/Visit/Deco/DecoBox.tsx b/front/src/pages/Visit/Deco/DecoBox.tsx
@@ -25,6 +25,10 @@ const StyledImg = styled.img`
   width: 100%;
 `;
 
+const StyledPicture = styled.picture`
+  width: 100%;
+`;
+
 const StyledColorBox = styled(StyledBox)`
   background-color: ${props => props.color};
 `;
@@ -33,17 +37,26 @@ const DecoImgs = (folder: string) => {
   const setVisitDecoBox = useSetRecoilState(VisitDecoRecoil);
 
   return folder === 'Deco'
-    ? DECO.map(({ img }, index) => {
+    ? DECO.map(({ img, webp }, index) => {
         if (index > 0)
           return (
             <StyledBox key={img}>
-              <StyledImg
-                src={img}
-                alt="deco"
-                onClick={() =>
-                  setVisitDecoBox(prev => ({ ...prev, decoID: index }))
-                }
-              />
+              <StyledPicture>
+                <source
+                  srcSet={webp}
+                  type="image/webp"
+                  onClick={() =>
+                    setVisitDecoBox(prev => ({ ...prev, decoID: index }))
+                  }
+                />
+                <StyledImg
+                  src={img}
+                  alt="deco"
+                  onClick={() =>
+                    setVisitDecoBox(prev => ({ ...prev, decoID: index }))
+                  }
+                />
+              </StyledPicture>
             </StyledBox>
           );
       })