From ab8f8927680fa7f98bf1bab51a32340b5a5030bf Mon Sep 17 00:00:00 2001
From: pipisebastian <yrt7998@pusan.ac.kr>
Date: Thu, 5 Dec 2024 13:20:58 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20css=EB=A1=9C=20=EB=B0=B0=EA=B2=BD?=
 =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=A7=80=EC=A0=95=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#267
---
 client/src/styles/global.ts | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/client/src/styles/global.ts b/client/src/styles/global.ts
index 07d3397..69bed68 100644
--- a/client/src/styles/global.ts
+++ b/client/src/styles/global.ts
@@ -9,17 +9,6 @@ export const globalStyles = defineGlobalStyles({
   },
 
   "html, body": {
-    // 기본 이미지
-    backgroundImage: 'url("./assets/images/background.jpg")',
-    // WebP 지원
-    "@supports (background-image: url('./assets/images/background.webp'))": {
-      backgroundImage: 'url("./assets/images/background.webp")',
-    },
-    // AVIF 지원
-    "@supports (background-image: url('./assets/images/background.avif'))": {
-      backgroundImage: 'url("./assets/images/background.avif")',
-    },
-    backgroundSize: "cover",
     fontFamily: "Pretendard, sans-serif",
     boxSizing: "border-box",
   },

From 3d2572efa51fc916ceecd741b6aadcc0cad3e6e7 Mon Sep 17 00:00:00 2001
From: pipisebastian <yrt7998@pusan.ac.kr>
Date: Thu, 5 Dec 2024 13:21:24 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20picture=ED=83=9C=EA=B7=B8=EB=A5=BC?=
 =?UTF-8?q?=20=EC=82=AC=EC=9A=A9=ED=95=9C=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EC=B5=9C=EC=A0=81=ED=99=94?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#267
---
 client/src/App.tsx                            |  2 ++
 .../backgroundImage/BackgroundImage.tsx       | 28 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 client/src/components/backgroundImage/BackgroundImage.tsx

diff --git a/client/src/App.tsx b/client/src/App.tsx
index 710d79c..d39ae37 100644
--- a/client/src/App.tsx
+++ b/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 />
     </>
diff --git a/client/src/components/backgroundImage/BackgroundImage.tsx b/client/src/components/backgroundImage/BackgroundImage.tsx
new file mode 100644
index 0000000..6b80770
--- /dev/null
+++ b/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>
+);