feat: ai Modal 구현

#20

Author: pipisebastian

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

@@ -0,0 +1,36 @@
+import { css, cx } from "@styled-system/css";
+import { glassContainer } from "@styled-system/recipes";
+
+export const popoverContainer = cx(
+  glassContainer({ border: "md" }),
+  css({
+    position: "absolute",
+    right: "0",
+    bottom: "100%",
+    width: "480px",
+    marginBottom: "24px",
+  }),
+);
+
+export const inputContainer = css({
+  display: "flex",
+  justifyContent: "space-between",
+  borderRadius: "xl",
+  margin: "10px",
+  padding: "10px",
+  backgroundColor: "white/80",
+});
+
+export const inputBox = css({
+  outline: "none",
+  width: "full",
+  backgroundColor: "transparent",
+});
+
+export const iconBox = css({
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "36px",
+  cursor: "pointer",
+});

client/src/features/ai/AIModal.tsx

@@ -0,0 +1,43 @@
+import { useState, KeyboardEvent } from "react";
+import { motion } from "framer-motion";
+import * as style from "./AIModal.style";
+import { animation } from "./AiModal.animation";
+import { FaLocationArrow } from "react-icons/fa";
+
+const AIModal = ({ onCloseButton }: { onCloseButton: () => void }) => {
+  const [text, setText] = useState("");
+
+  const handleSubmit = () => {};
+
+  const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      handleSubmit();
+    }
+  };
+
+  return (
+    <motion.div
+      initial={animation.initial}
+      animate={animation.animate}
+      transition={animation.transition}
+    >
+      <div className={style.popoverContainer}>
+        <div className={style.inputContainer}>
+          <input
+            type="text"
+            value={text}
+            onChange={(e) => setText(e.target.value)}
+            onKeyPress={handleKeyPress}
+            placeholder="문서 작성해줘"
+            className={style.inputBox}
+          />
+          <div className={style.iconBox} onClick={handleSubmit}>
+            <FaLocationArrow />
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};
+
+export default AIModal;

client/src/features/ai/AiModal.animation.ts

@@ -0,0 +1,16 @@
+export const animation = {
+  initial: {
+    y: 100,
+    opacity: 0,
+  },
+  animate: {
+    y: 0,
+    opacity: 1,
+  },
+  transition: {
+    type: "spring",
+    stiffness: 300,
+    damping: 30,
+    duration: 0.5,
+  },
+};