refactor: MonitorBG 컴포넌트를 IndexCanvas로 이름 변경 및 사용처 수정

Author: chamchi0809

src/components/MonitorBG.tsx src/components/IndexCanvas.tsxsrc/components/MonitorBG.tsx renamed to src/components/IndexCanvas.tsx

@@ -7,9 +7,9 @@ import {Suspense, useState} from "react";
 
 const CAM_DISTANCE = 5;
 
-export default function MonitorBG() {
+export default function IndexCanvas() {
 
-    return <div className={"absolute inset-0"}>
+    return <div className={"absolute inset-0 z-50"}>
         <Canvas className={"animate-fadeIn"} resize={{debounce: 0}} eventPrefix={"client"} shadows dpr={[1, 2]} style={{width: '100%', height: '100%'}} camera={[0, 0, CAM_DISTANCE, {fov: 50}] as any}>
             <Suspense fallback={<Loader/>}>
                 <ambientLight color={"#dadacf"} intensity={1.2}/>

src/components/SideNav.astro

@@ -22,7 +22,7 @@ const menuItems: MenuItem[] = [
 ];
 ---
 
-<div transition:name="header" class="w-70 h-full flex flex-col bg-[#1e1e1e] border-r border-gray-800 p-8 gap-9 z-50">
+<div transition:name="header" class="w-70 h-full flex flex-col bg-[#1e1e1e] border-r border-bright/50 p-8 gap-9 z-40">
     <div class="w-full flex flex-row items-center">
         <div class="rounded-full w-12 h-12 bg-[url(/images/anvy_profile.png)] bg-center bg-cover"/>
         <div class="ml-4">

src/pages/index.astro

@@ -1,5 +1,5 @@
 ---
-import MonitorBG from '../components/MonitorBG';
+import IndexCanvas from '../components/IndexCanvas';
 import Layout from '../layouts/Layout.astro';
 
 // Welcome to Astro! Wondering what to do next? Check out the Astro documentation at https://docs.astro.build
@@ -8,7 +8,7 @@ import Layout from '../layouts/Layout.astro';
 
 <Layout>
     <div class="w-full h-full">
-        <MonitorBG client:load>
+        <IndexCanvas client:load>
             <Fragment slot="fallback">
                 <div class="w-full h-full text-bright text-3xl flex flex-col gap-2 justify-center items-center">
                     <div class="loader">
@@ -19,7 +19,7 @@ import Layout from '../layouts/Layout.astro';
                     Loading 3D...
                 </div>
             </Fragment>
-        </MonitorBG>
+        </IndexCanvas>
     </div>
 </Layout>