feat: MenuIcon 컴포넌트 생성

client/src/components/sidebar/components/menuButton/MenuButton.tsx

@@ -1,13 +1,14 @@
 import { useUserInfo } from "@stores/useUserStore";
 import { menuItemWrapper, imageBox, textBox } from "./MenuButton.style";
+import { MenuIcon } from "./components/MenuIcon";
 
 export const MenuButton = () => {
   const { name } = useUserInfo();
 
   return (
     <>
       <button className={menuItemWrapper}>
-        <div className={imageBox}></div>
+        <MenuIcon />
         <p className={textBox}>{name ?? "Nocta"}</p>
       </button>
     </>

client/src/components/sidebar/components/menuButton/components/MenuIcon.style.ts

@@ -0,0 +1,10 @@
+import { css } from "@styled-system/css";
+
+export const iconContainer = css({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "40px",
+  height: "40px",
+  overflow: "hidden",
+});

client/src/components/sidebar/components/menuButton/components/MenuIcon.tsx

@@ -0,0 +1,29 @@
+import NoctaDayIcon from "@assets/icons/noctaDayIcon.svg?react";
+// import { noctaNightIcon } from "@assets/icons/noctaNightIcon.svg";
+import { iconContainer } from "./MenuIcon.style";
+
+export const MenuIcon = () => {
+  // const { isDarkMode } = useThemeStore();
+
+  // const [isSystemDark, setIsSystemDark] = useState(() =>
+  //   window.matchMedia('(prefers-color-scheme: dark)').matches
+  // );
+
+  // useEffect(() => {
+  //   const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+  //   const handleChange = (e: MediaQueryListEvent) => {
+  //     setIsSystemDark(e.matches);
+  //   };
+
+  //   mediaQuery.addEventListener('change', handleChange);
+  //   return () => mediaQuery.removeEventListener('change', handleChange);
+  // }, []);
+
+  // const currentIcon = (isDarkMode ?? isSystemDark) ? noctaNightIcon : noctaDayIcon;
+
+  return (
+    <div className={iconContainer}>
+      <NoctaDayIcon />
+    </div>
+  );
+};