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] =?UTF-8?q?feat:=20picture=ED=83=9C=EA=B7=B8=EB=A5=BC=20?=
 =?UTF-8?q?=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>
+);