Merge branch 'release/1.0.10'

Author: pipisebastian

.github/workflows/deploy.yml

@@ -28,4 +28,4 @@ jobs:
 
       # 3. Clean up Old Images
       - name: Remove Dangling Images
-        run: docker image prune -a -f
+        run: docker image prune -f

client/Dockerfile

@@ -1,5 +1,5 @@
 # 1. Node.js 20 기반 빌드 이미지
-FROM node:20
+FROM node:20 AS build
 WORKDIR /app
 
 # 2. 모노레포 루트에서 필요한 파일 복사

client/src/apis/ai.ts

@@ -3,7 +3,15 @@ import { unAuthorizationFetch } from "./axios";
 
 // TODO 실패 시 예외처리
 export const useCreateAIDocumentMutation = (onSuccess: () => void) => {
-  const fetcher = ({ text }: { text: string }) => unAuthorizationFetch.post("/ai", { text });
+  const fetcher = ({
+    clientId,
+    workspaceId,
+    message,
+  }: {
+    clientId: number | null;
+    workspaceId: string | undefined;
+    message: string;
+  }) => unAuthorizationFetch.post("/ai/chat", { clientId, workspaceId, message });
 
   return useMutation({
     mutationFn: fetcher,

client/src/components/Toast/Toast.style.ts

@@ -12,6 +12,7 @@ export const ToastWrapper = css({
   color: "white",
   backgroundColor: "gray.700",
   boxShadow: "lg",
+  overflow: "hidden",
   // overflow: "hidden", // progress bar가 넘치지 않도록
   transition: "all",
   transitionDuration: "300ms",

client/src/components/Toast/Toast.tsx

@@ -48,6 +48,9 @@ export const Toast = ({ message, duration = 3000, onClose }: ToastProps) => {
         animate={{ width: "100%" }}
         transition={{ duration: duration / 1000, ease: "easeOut" }}
         className={ToastProgress}
+        style={{
+          backgroundColor: message === "올바른 명령을 작성해주세요" ? "#E25D68" : "#6293E5",
+        }}
       />
 
       <span className="text-sm">{message}</span>

client/src/features/ai/AIButton.tsx

@@ -1,13 +1,15 @@
 import { useState, useRef, useEffect } from "react";
+import { useToastStore } from "@src/stores/useToastStore";
 import * as style from "./AIButton.style";
 import { AIModal } from "./AIModal";
 
 export const AIButton = () => {
   const [isOpen, setIsOpen] = useState(false);
   const modalRef = useRef<HTMLDivElement>(null);
-
+  const { addToast } = useToastStore();
   const handleClose = () => {
     setIsOpen(false);
+    addToast("AI 문서 페이지가 생성되었습니다.");
   };
 
   useEffect(() => {
@@ -24,7 +26,7 @@ export const AIButton = () => {
   }, []);
 
   return (
-    <div className={style.floatingButtonContainer}>
+    <div className={style.floatingButtonContainer} data-onboarding="ai-button">
       <div ref={modalRef}>
         {isOpen && <AIModal onCloseButton={handleClose} />}
         <button onClick={() => setIsOpen((prev) => !prev)} className={style.buttonContainer}>

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

@@ -21,6 +21,11 @@ export const inputContainer = css({
   backgroundColor: "white/80",
 });
 
+export const inputWrapper = css({
+  position: "relative",
+  flex: 1,
+});
+
 export const inputBox = css({
   outline: "none",
   width: "full",
@@ -29,8 +34,25 @@ export const inputBox = css({
 
 export const iconBox = css({
   display: "flex",
+  position: "relative",
   justifyContent: "center",
   alignItems: "center",
   width: "36px",
+  transition: "filter 0.3s ease",
   cursor: "pointer",
+  "&:hover": {
+    scale: 1.1,
+  },
+});
+export const loadingOverlay = css({
+  display: "flex",
+  zIndex: 10,
+  position: "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  justifyContent: "center",
+  alignItems: "center",
+  backgroundColor: "rgba(255, 255, 255, 0.8)",
 });

client/src/features/ai/AIModal.tsx

@@ -1,16 +1,28 @@
-import { useState, KeyboardEvent } from "react";
 import { motion } from "framer-motion";
-import * as style from "./AIModal.style";
-import { animation } from "./AiModal.animation";
+import { useState, KeyboardEvent } from "react";
 import { FaLocationArrow } from "react-icons/fa";
 import { useCreateAIDocumentMutation } from "@src/apis/ai";
+import { LoadingSpinner } from "@src/components/lotties/LoadingSpinner";
+import { useSocketStore } from "@src/stores/useSocketStore";
+import { useToastStore } from "@src/stores/useToastStore";
+import * as style from "./AIModal.style";
+import { animation } from "./AiModal.animation";
 
 export const AIModal = ({ onCloseButton }: { onCloseButton: () => void }) => {
-  const [text, setText] = useState("");
-  const { mutate: createAIDocument } = useCreateAIDocumentMutation(onCloseButton);
+  const { clientId, workspace } = useSocketStore();
+  const [message, setMessage] = useState("");
+  const { mutate: createAIDocument, status } = useCreateAIDocumentMutation(onCloseButton);
+  const isLoading = status === "pending";
 
+  const { addToast } = useToastStore();
   const handleSubmit = () => {
-    createAIDocument({ text });
+    if (!message.trim()) {
+      addToast("올바른 명령을 작성해주세요");
+      return;
+    }
+    if (!isLoading) {
+      createAIDocument({ clientId, workspaceId: workspace?.id, message });
+    }
   };
 
   const handleKeyPress = (e: KeyboardEvent<HTMLInputElement>) => {
@@ -27,15 +39,24 @@ export const AIModal = ({ onCloseButton }: { onCloseButton: () => void }) => {
     >
       <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}>
+          <div className={style.inputWrapper}>
+            <input
+              type="message"
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              onKeyPress={handleKeyPress}
+              placeholder="문서 작성해줘"
+              className={style.inputBox}
+              disabled={isLoading}
+            />
+            {isLoading && (
+              <div className={style.loadingOverlay}>
+                <LoadingSpinner size={50} />
+              </div>
+            )}
+          </div>
+          <div className={style.iconBox} onClick={!isLoading ? handleSubmit : undefined}>
+            {isLoading && <div className={style.loadingOverlay}></div>}
             <FaLocationArrow />
           </div>
         </div>

client/src/features/editor/utils/domSyncUtils.ts

@@ -188,76 +188,6 @@ const nodesAreEqual = (node1: Node, node2: Node): boolean => {
   return false;
 };
 
-// export const setInnerHTML = ({ element, block }: SetInnerHTMLProps): void => {
-//   const chars = block.crdt.LinkedList.spread();
-//   if (chars.length === 0) {
-//     element.innerHTML = "";
-//     return;
-//   }
-
-//   // 각 위치별 모든 적용된 스타일을 추적
-//   const positionStyles: TextStyleState[] = chars.map((char) => {
-//     const styleSet = new Set<string>();
-
-//     // 현재 문자의 스타일 수집
-//     char.style.forEach((style) => styleSet.add(TEXT_STYLES[style]));
-
-//     return {
-//       styles: styleSet,
-//       color: char.color,
-//       backgroundColor: char.backgroundColor,
-//     };
-//   });
-
-//   let html = "";
-//   let currentState: TextStyleState = {
-//     styles: new Set<string>(),
-//     color: "black",
-//     backgroundColor: "transparent",
-//   };
-//   let spanOpen = false;
-
-//   chars.forEach((char, index) => {
-//     const targetState = positionStyles[index];
-
-//     // 스타일, 색상, 배경색 변경 확인
-//     const styleChanged =
-//       !setsEqual(currentState.styles, targetState.styles) ||
-//       currentState.color !== targetState.color ||
-//       currentState.backgroundColor !== targetState.backgroundColor;
-
-//     // 변경되었으면 현재 span 태그 닫기
-//     if (styleChanged && spanOpen) {
-//       html += "</span>";
-//       spanOpen = false;
-//     }
-
-//     // 새로운 스타일 조합으로 span 태그 열기
-//     if (styleChanged) {
-//       const className = getClassNames(targetState);
-//       html += `<span class="${className}" style="white-space: pre;">`;
-//       spanOpen = true;
-//     }
-
-//     // 텍스트 추가
-//     html += sanitizeText(char.value);
-
-//     // 다음 문자로 넘어가기 전에 현재 상태 업데이트
-//     currentState = targetState;
-
-//     // 마지막 문자이고 span이 열려있으면 닫기
-//     if (index === chars.length - 1 && spanOpen) {
-//       html += "</span>";
-//       spanOpen = false;
-//     }
-//   });
-
-//   // DOM 업데이트
-//   if (element.innerHTML !== html) {
-//     element.innerHTML = html;
-//   }
-// };
-
 // Set 비교 헬퍼 함수
 const setsEqual = (a: Set<string>, b: Set<string>): boolean => {
   if (a.size !== b.size) return false;

client/src/features/workSpace/components/OnboardingOverlay.style.ts

@@ -9,7 +9,7 @@ export const overlayContainer = css({
 export const highlightBox = css({
   position: "absolute",
   borderColor: "rgba(168, 85, 247, 0.5)", // purple-400 with 50% opacity
-  borderRadius: "xl",
+  borderRadius: "0",
   borderWidth: "2px",
   backgroundColor: "rgba(255, 255, 255, 0.1)",
   pointerEvents: "none",