Merge branch 'release/1.1.1'

Author: pipisebastian

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

@@ -48,7 +48,7 @@ export const loadingOverlay = css({
   display: "flex",
   zIndex: 10,
   position: "absolute",
-  top: 0,
+  top: "50%",
   left: 0,
   right: 0,
   bottom: 0,

client/src/features/ai/AIModal.tsx

@@ -49,16 +49,16 @@ export const AIModal = ({ onCloseButton }: { onCloseButton: () => void }) => {
               className={style.inputBox}
               disabled={isLoading}
             />
-            {isLoading && (
+          </div>
+          <div className={style.iconBox} onClick={!isLoading ? handleSubmit : undefined}>
+            {isLoading ? (
               <div className={style.loadingOverlay}>
                 <LoadingSpinner size={50} />
               </div>
+            ) : (
+              <FaLocationArrow />
             )}
           </div>
-          <div className={style.iconBox} onClick={!isLoading ? handleSubmit : undefined}>
-            {isLoading && <div className={style.loadingOverlay}></div>}
-            <FaLocationArrow />
-          </div>
         </div>
       </div>
     </motion.div>

client/src/features/editor/components/block/Block.tsx

@@ -288,7 +288,7 @@ export const Block: React.FC<BlockProps> = memo(
       if (blockRef.current) {
         setInnerHTML({ element: blockRef.current, block });
       }
-    }, [getTextAndStylesHash(block)]);
+    }, [virtualIndex, getTextAndStylesHash(block)]);
 
     // useEffect(() => {
     //   console.log(block.crdt);

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

@@ -60,9 +60,14 @@ const getClassNames = (state: TextStyleState): string => {
 };
 export const setInnerHTML = ({ element, block }: SetInnerHTMLProps): void => {
   const chars = block.crdt.LinkedList.spread();
+
+  let caretNode: Node | undefined;
+
   const selection = window.getSelection();
-  const range = selection?.getRangeAt(0);
-  let caretNode = range?.startContainer;
+  if (selection && selection.rangeCount > 0) {
+    const range = selection.getRangeAt(0);
+    caretNode = range.startContainer;
+  }
 
   if (chars.length === 0) {
     while (element.firstChild) {

client/src/features/workSpace/components/OnboardingOverlay.tsx

@@ -1,5 +1,5 @@
 import { motion } from "framer-motion";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import CloseIcon from "@assets/icons/close.svg?react";
 import {
   overlayContainer,
@@ -28,7 +28,7 @@ interface OnboardingOverlayProps {
 export const OnboardingOverlay = ({ isShow }: OnboardingOverlayProps) => {
   const [isVisible, setIsVisible] = useState(false);
   const [currentStep, setCurrentStep] = useState(0);
-
+  const overlayRef = useRef<HTMLDivElement>(null);
   const steps: Step[] = [
     {
       target: '[data-onboarding="menu-button"]',
@@ -69,7 +69,6 @@ export const OnboardingOverlay = ({ isShow }: OnboardingOverlayProps) => {
   ];
   useEffect(() => {
     const hasCompletedOnboarding = sessionStorage.getItem("hasCompletedOnboarding");
-
     if (isShow && hasCompletedOnboarding === null) {
       // 요소들이 렌더링될 시간을 주기 위해 약간의 딜레이 추가
       const timer = setTimeout(() => {
@@ -80,6 +79,16 @@ export const OnboardingOverlay = ({ isShow }: OnboardingOverlayProps) => {
     }
   }, [isShow]);
 
+  useEffect(() => {
+    if (isVisible) {
+      const focusTimer = setTimeout(() => {
+        overlayRef.current?.focus();
+      }, 50);
+
+      return () => clearTimeout(focusTimer);
+    }
+  }, [isVisible]);
+
   const handleClose = () => {
     if (currentStep < steps.length - 1) {
       setCurrentStep((prev) => prev + 1);
@@ -88,6 +97,11 @@ export const OnboardingOverlay = ({ isShow }: OnboardingOverlayProps) => {
       sessionStorage.setItem("hasCompletedOnboarding", "true");
     }
   };
+  const handleEnter = (e: React.KeyboardEvent<HTMLDivElement>) => {
+    if (e.key === "Enter") {
+      handleClose();
+    }
+  };
   const handlePrevious = () => {
     if (currentStep > 0) {
       setCurrentStep((prev) => prev - 1);
@@ -145,10 +159,13 @@ export const OnboardingOverlay = ({ isShow }: OnboardingOverlayProps) => {
 
   return (
     <motion.div
+      ref={overlayRef}
+      tabIndex={0}
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       exit={{ opacity: 0 }}
       className={overlayContainer}
+      onKeyDown={(e) => handleEnter(e)}
     >
       {targetPosition && (
         <motion.div

client/src/features/workSpace/hooks/usePagesManage.ts

@@ -53,6 +53,9 @@ export const usePagesManage = (workspace: WorkSpace | null, clientId: number | n
           clientId: operation.clientId,
         });
         addPage(newPage);
+        if (operation.clientId === clientId) {
+          setPageDataReady(newPage.id, true);
+        }
       },
       onRemotePageDelete: (operation) => {
         addToast(`${operation.clientId}번 유저가 페이지(${operation.pageTitle})를 삭제하였습니다.`);

server/src/ai/ai.controller.ts

@@ -49,13 +49,7 @@ export class AiController {
     @Body() body: { clientId: number; workspaceId: string; message: string },
     @Response({ passthrough: true }) res: ExpressResponse,
   ): Promise<void> {
-    const message = await this.aiService.requestAI(body.message);
-    const operations = await this.aiService.generateDocumentToCRDT(
-      body.workspaceId,
-      body.clientId,
-      message,
-    );
-    this.aiService.emitOperations(body.workspaceId, operations);
+    await this.aiService.requestAI(body.message, body.workspaceId, body.clientId);
     res.status(200).send();
   }
 }