[Update] Add Window Title bar.

[bugfix] Note: I think this is tauri's bug. When I try to resize the window and hovered dragable area, I could see resize cursor but it work as a dragging the window behavior that should't be.
Updated npm packages but still not work so I  managed it as adding margin-top by referring Discord title bar.

src-ui/app/window_title_bar/WindowTitleBar.jsx

@@ -0,0 +1,50 @@
+// import clsx from "clsx";
+import styles from "./WindowTitleBar.module.scss";
+import XMarkSvg from "@images/cancel.svg?react";
+import SquareSvg from "@images/square.svg?react";
+import LineSvg from "@images/line.svg?react";
+import VrctSvg from "@images/vrct.svg?react";
+
+import { appWindow } from "@tauri-apps/api/window";
+
+export const WindowTitleBar = () => {
+
+    const minimize = () => {
+        appWindow.minimize();
+    };
+
+    const maximize = async () => {
+        const maximizeState = await appWindow.isMaximized();
+        if (!maximizeState) {
+            appWindow.maximize();
+        } else {
+            appWindow.unmaximize();
+        }
+    };
+
+    const close = () => {
+        appWindow.close();
+    };
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.wrapper} data-tauri-drag-region>
+                <div className={styles.title_wrapper}>
+                    <VrctSvg className={styles.title_svg}/>
+                </div>
+
+                <div className={styles.window_control_wrapper}>
+                    <div className={styles.minimize_button} onClick={minimize}>
+                        <LineSvg className={styles.line_svg}/>
+                    </div>
+                    <div className={styles.maximize_button} onClick={maximize}>
+                        <SquareSvg className={styles.square_svg}/>
+                    </div>
+                    <div className={styles.close_button} onClick={close}>
+                        <XMarkSvg className={styles.x_mark_svg}/>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};

src-ui/app/window_title_bar/WindowTitleBar.module.scss

@@ -0,0 +1,84 @@
+.container {
+    width: 100%;
+    background-color: var(--dark_900_color);
+    flex-shrink: 0;
+    display: flex;
+}
+
+.wrapper {
+    flex-shrink: 0;
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+    height: 2rem;
+    margin-top: 0.4rem;
+}
+
+.title_wrapper {
+    padding-left: 1rem;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.title_svg {
+    color: var(--dark_800_color);
+    width: 4rem;
+    height: 100%;
+
+}
+
+.window_control_wrapper {
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.minimize_button, .maximize_button, .close_button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 2.8rem;
+    margin-bottom: 0.4rem;
+
+    cursor: pointer;
+    &:hover {
+        .x_mark_svg, .square_svg, .line_svg  {
+            color: var(--dark_100_color);
+        }
+    }
+}
+.minimize_button, .maximize_button {
+    &:hover {
+        background-color: var(--dark_800_color);
+    }
+    &:active {
+        background-color: var(--dark_950_color);
+    }
+}
+.close_button {
+    &:hover {
+        background-color: #bb4448;
+    }
+    &:active {
+        background-color: #9c3938;
+    }
+}
+
+.x_mark_svg, .square_svg, .line_svg {
+    color: var(--dark_450_color);
+    height: 100%;
+}
+.x_mark_svg {
+    width: 1.8rem;
+}
+.square_svg {
+    width: 1.2rem;
+}
+.line_svg {
+    padding-top: 0.1rem;
+    width: 1.8rem;
+}