feat: picture태그를 사용한 이미지 최적화

#267

client/src/App.tsx

@@ -4,6 +4,7 @@ import { WorkSpace } from "@features/workSpace/WorkSpace";
 import { useErrorStore } from "@stores/useErrorStore";
 import { useUserInfo } from "@stores/useUserStore";
 import { useSocketStore } from "./stores/useSocketStore";
+import { BackgroundImage } from "./components/backgroundImage/BackgroundImage";
 
 const App = () => {
   // TODO 라우터, react query 설정
@@ -25,6 +26,7 @@ const App = () => {
 
   return (
     <>
+      <BackgroundImage />
       {isErrorModalOpen && <ErrorModal errorMessage={errorMessage} />}
       <WorkSpace />
     </>

client/src/components/backgroundImage/BackgroundImage.tsx

@@ -0,0 +1,28 @@
+import backgroundPNG from "@assets/images/background.png";
+import backgroundWEBP from "@assets/images/background.webp";
+import backgroundAVIF from "@assets/images/background.avif";
+
+export const BackgroundImage = () => (
+  <picture
+    style={{
+      position: "fixed",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      zIndex: -1,
+    }}
+  >
+    <source srcSet={backgroundAVIF} type="image/avif" />
+    <source srcSet={backgroundWEBP} type="image/webp" />
+    <img
+      src={backgroundPNG}
+      alt="background"
+      style={{
+        width: "100%",
+        height: "100%",
+        objectFit: "cover",
+      }}
+    />
+  </picture>
+);