separate out windows me wallpaper container

components/Wallpaper/Wallpaper.module.css

@@ -0,0 +1,14 @@
+.wallpaper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.5em 0;
+  width: 100%;
+  min-height: 400px;
+  box-sizing: content-box;
+}
+
+.tile {
+  background-repeat: repeat;
+  background-position: center;
+}

components/Wallpaper/Wallpaper.tsx

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from "react";
+import classNames from "classnames/bind";
+import type { ReactNode } from "react";
+
+import styles from "./Wallpaper.module.css";
+const cx = classNames.bind(styles);
+
+type Props = {
+  image: string;
+  tile?: boolean;
+  className?: string;
+  children: ReactNode;
+};
+
+const Wallpaper = ({ image, tile, className, ...rest }: Props) => {
+  const bgRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    bgRef.current.style.backgroundImage = `url(${image})`;
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return <div ref={bgRef} className={cx(styles.wallpaper, { tile: !!tile }, className)} {...rest} />;
+};
+
+export default Wallpaper;