feat: ai Button 추가

#20

Author: pipisebastian

client/src/features/ai/AIButton.style.ts

@@ -0,0 +1,21 @@
+import { css, cx } from "@styled-system/css";
+import { glassContainer } from "@styled-system/recipes";
+
+export const glassEffect = cx(glassContainer({ border: "md" }));
+
+export const floatingButtonContainer = css({
+  zIndex: "50",
+  position: "fixed",
+  right: "24px",
+  bottom: "24px",
+});
+
+export const buttonContainer = cx(
+  glassContainer({ border: "md" }),
+  css({
+    padding: "12px",
+    paddingX: "20px",
+    backgroundColor: "white/40",
+    cursor: "pointer",
+  }),
+);

client/src/features/ai/AIButton.tsx

@@ -0,0 +1,38 @@
+import { useState, useRef, useEffect } from "react";
+import * as style from "./AIButton.style";
+import AIModal from "./AIModal";
+
+const AIButton = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const modalRef = useRef<HTMLDivElement>(null);
+
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (modalRef.current && !modalRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+
+  return (
+    <div className={style.floatingButtonContainer}>
+      <div ref={modalRef}>
+        {isOpen && <AIModal onCloseButton={handleClose} />}
+        <button onClick={() => setIsOpen((prev) => !prev)} className={style.buttonContainer}>
+          <span>AI 문서 작성</span>
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default AIButton;