[FE] fix: UI issues and debug drawing board problems(#143)

src/components/Conversation/SyncButton.tsx

@@ -40,8 +40,12 @@ export const SyncButton = () => {
         "fourth-step rounded-none border-b-2 border-blue-700 text-sm text-slate-800",
         otherUserSelectedCommitFile &&
           selectedCommitFile.filename !== otherUserSelectedCommitFile &&
+<<<<<<< HEAD
+          "animate-pulse bg-blue-500 text-white duration-500",
+=======
           "bg-blue-500 text-white",
         isOpen && "bg-blue-500 text-white",
+>>>>>>> 489bed770948ce94c0c34dba9427789ade586645
       )}
       onClick={navigateToOtherUserFile}
       size="sm"

src/components/File/PrSelectedFileViewer/PrFilePathViewer.tsx

@@ -6,7 +6,7 @@ interface PrFilePathViewerProps {
 
 export const PrFilePathViewer = ({ filePaths }: PrFilePathViewerProps) => {
   return (
-    <span className="flex w-full items-center border-b px-2 py-1 text-sm">
+    <span className="flex w-full items-center border-b py-1 pl-2 text-sm">
       {filePaths.map((filePath, index) => {
         return (
           <span key={index} className="flex items-center">

src/components/Frame/MainFrame.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect } from "react";
 import { fileSysyemStore } from "@/stores/github.store";
-import { MonacoBinding } from "y-monaco";
 import { editor } from "monaco-editor";
 import {
   ResizableHandle,
@@ -9,10 +8,7 @@ import {
 } from "@/components/ui/resizable";
 import FileTreeComponent from "@/components/File/PrFileExplorer";
 import ConversationChatting from "@/components/Conversation/ConversationChatting";
-import { PrFileNameViewer } from "@/components/File/PrSelectedFileViewer/PrFileNameViewer";
-import { PrFilePathViewer } from "@/components/File/PrSelectedFileViewer/PrFilePathViewer";
-import { PRBottomFileExplorer } from "@/components/File/PRBottomFileExplorer";
-import { initFileStructSync, RemoteCursorIndicator } from "@/lib/yjs";
+import { RemoteCursorIndicator } from "@/lib/yjs";
 import { SocketManager } from "@/lib/socketManager";
 import { useCommunicationStore } from "@/stores/communicationState.store";
 import {
@@ -21,31 +17,19 @@ import {
 } from "@/stores/chattingMessage.store";
 import { ChattingSocketResponse } from "@/apis/conversation/dtos";
 import { sectionSelectStore } from "@/stores/chattingRoom.store";
-import SelectedFileViewer from "@/components/File/SelectedFile";
 import useCheckUserQuery from "@/hooks/Users/useCheckUserQuery";
-import { Button } from "@/components/ui/button";
-import { useConvertToImage } from "@/hooks/useConvertToImage";
-import { SyncButton } from "@/components/Conversation/SyncButton";
+import MainTopFrom from "@/components/Frame/MainTopFrame";
 
 export const MainFrame = () => {
   const leftSection = sectionSelectStore((state) => state.leftSection);
-  const bottomSection = sectionSelectStore((state) => state.bottomSection);
   const selectedCommitFile = fileSysyemStore(
     (state) => state.selectedCommitFile,
   );
   const roomId = window.location.pathname.split("/")[1];
-  const commitFileList = fileSysyemStore((state) => state.commitFileList);
-  const clickedFileList = fileSysyemStore((state) => state.clickedFileList);
-  const selectedTotalFilePath = selectedCommitFile.filename.split("/");
+
   const addMessage = chattingMessageStore((state) => state.addMessage);
   const addPreviewMessage = chattingPreviewStore((state) => state.addMessage);
-  const initCommitFileList = fileSysyemStore(
-    (state) => state.initCommitFileList,
-  );
-  const [editor, setEditor] = useState<editor.IStandaloneCodeEditor | null>(
-    null,
-  );
-  const bindingRef = useRef<MonacoBinding | null>(null);
+
   const isSocketManagerReady = useCommunicationStore(
     (state) => state.isSocketManagerReady,
   );
@@ -57,33 +41,13 @@ export const MainFrame = () => {
   const socket = SocketManager.getInstance().socketIOSocket;
   const provider = SocketManager.getInstance().yjsSocket.provider;
   const { checkUser } = useCheckUserQuery();
-  const elementRef = useRef<HTMLDivElement>(null);
-  const [size, setSize] = useState({ width: 0, height: 0 });
-  const { convertToImage } = useConvertToImage({ elementRef, size });
 
   const otherUserSelectedCommitFile = fileSysyemStore(
     (state) => state.otherUserSelectedCommitFile,
   );
   const setOtherUserSelectedCommitFile = fileSysyemStore(
     (state) => state.setOtherUserSelectedCommitFile,
   );
-  useEffect(() => {
-    const element = elementRef.current;
-    if (!element) return;
-
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        setSize({ width, height });
-      }
-    });
-
-    resizeObserver.observe(element);
-
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [selectedCommitFile]);
 
   const removeAllCursorStle = () => {
     const cursorStyles = document.querySelectorAll(
@@ -108,12 +72,6 @@ export const MainFrame = () => {
     };
   }, [socket, addMessage, addPreviewMessage]);
 
-  useEffect(() => {
-    // sync 이벤트 핸들러 내부에서 파일 메타데이터 동기화
-    initFileStructSync(ydoc, provider, commitFileList, initCommitFileList);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [provider, ydoc, roomId]);
-
   useEffect(() => {
     if (!provider || !checkUser?.data) return;
     removeAllCursorStle();
@@ -149,8 +107,7 @@ export const MainFrame = () => {
       });
 
       const totalUserInfo = statesArray.filter(
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ([_, state]) => state?.user && Object.keys(state).length > 0,
+        ([, state]) => state?.user && Object.keys(state).length > 0,
       );
 
       if (totalUserInfo.length < 2) return;
@@ -172,6 +129,7 @@ export const MainFrame = () => {
       removeAllCursorStle();
       provider.awareness.off("change", handleAwarnessChange);
     };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     provider,
     editor,
@@ -186,55 +144,6 @@ export const MainFrame = () => {
     removeAllCursorStle();
   }, [selectedCommitFile.filename]);
 
-  // 파일 내용 초기화
-  useEffect(() => {
-    if (!commitFileList || commitFileList.length === 0) return;
-    commitFileList.forEach((file) => {
-      const ytext = ydoc.getText(`${file.filename}`);
-      if (ytext.length === 0) {
-        ytext.delete(0, ytext.length);
-        ytext.insert(0, file.afterContent);
-      }
-    });
-  }, [commitFileList, ydoc]);
-
-  // 에디터 바인딩
-  useEffect(() => {
-    if (!editor || !selectedCommitFile || !provider) return;
-
-    // 이전 바인딩 정리
-    if (bindingRef.current) {
-      bindingRef.current.destroy();
-      bindingRef.current = null;
-    }
-
-    const model = editor.getModel();
-    if (!model) return;
-
-    const ytext = ydoc.getText(selectedCommitFile.filename);
-    bindingRef.current = new MonacoBinding(
-      ytext,
-      model,
-      new Set([editor]),
-      provider.awareness,
-    );
-    return () => {
-      if (bindingRef.current) {
-        bindingRef.current.destroy();
-        bindingRef.current = null;
-      }
-    };
-  }, [ydoc, editor, selectedCommitFile, provider]);
-
-  const onEditorMount = (editorInstance: editor.IStandaloneCodeEditor) => {
-    setEditor(editorInstance);
-  };
-
-  const onDiffEditorMount = (diffEditor: editor.IStandaloneDiffEditor) => {
-    const modifiedEditor = diffEditor.getModifiedEditor();
-    setEditor(modifiedEditor);
-  };
-
   return (
     <ResizablePanelGroup direction="horizontal" autoSave="main-frame">
       {leftSection !== "" && (
@@ -250,64 +159,7 @@ export const MainFrame = () => {
         </>
       )}
       <ResizablePanel defaultSize={80} order={2}>
-        {selectedCommitFile.filename !== "" && (
-          <div className="relative">
-            <div className="flex items-center justify-between">
-              <div className="flex w-full overflow-x-scroll border-b">
-                {clickedFileList.map((file, index) => {
-                  return (
-                    <PrFileNameViewer key={index} fileName={file.filename} />
-                  );
-                })}
-              </div>
-            </div>
-            <PrFilePathViewer filePaths={selectedTotalFilePath} />
-            <div className="absolute right-0 top-9 z-[100]">
-              <SyncButton />
-              {(selectedCommitFile.status === "added" ||
-                selectedCommitFile.status === "modified" ||
-                selectedCommitFile.status === "removed") && (
-                <Button
-                  onClick={convertToImage}
-                  className="fifth-step rounded-none border-b-2 border-blue-700 text-sm text-slate-800"
-                  size="sm"
-                  variant="ghost"
-                >
-                  코드 이미지로 추출
-                </Button>
-              )}
-            </div>
-          </div>
-        )}
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel
-            defaultSize={70}
-            className="relative z-0 flex items-center justify-center"
-          >
-            <div
-              ref={elementRef}
-              className="flex h-full w-full items-center justify-center"
-            >
-              {selectedCommitFile && (
-                <SelectedFileViewer
-                  status={selectedCommitFile.status}
-                  selectedCommitFile={selectedCommitFile}
-                  commitFileList={commitFileList}
-                  onEditorMount={onEditorMount}
-                  onSplitEditorMount={onDiffEditorMount}
-                />
-              )}
-            </div>
-          </ResizablePanel>
-          {bottomSection !== "" && (
-            <>
-              <ResizableHandle />
-              <ResizablePanel defaultSize={30} className="min-h-[4rem]">
-                <PRBottomFileExplorer />
-              </ResizablePanel>
-            </>
-          )}
-        </ResizablePanelGroup>
+        <MainTopFrom />
       </ResizablePanel>
     </ResizablePanelGroup>
   );