arrow 기능 렌더링 최적화

Author: seroak

src/pages/Visualization/components/RightSection/RightSection.tsx

@@ -14,6 +14,7 @@ import { usePreprocessedCodesProcessor } from "./hooks/usePreprocessedCodesProce
 import { useResizeObserver } from "./hooks/useResizeObserver";
 import { useTutorialPosition } from "./hooks/useTutorialPosition";
 import { useScrollHandlers } from "./hooks/useScrollHandlers";
+import { useArrowPosition } from "./hooks/useArrowPosition";
 
 // 컴포넌트
 import { VisualizationControls } from "./components/VisualizationControls";
@@ -73,6 +74,12 @@ const RightSection = ({ onboardingStep, setTutorialPosition }: RightSectionProps
     },
   });
 
+  useArrowPosition({
+    stepIdx,
+    codeFlowScrollTop,
+    structuresScrollTop,
+  });
+
   // Location 변경 시 stepIdx 초기화
   useEffect(() => {
     return () => {
@@ -124,15 +131,11 @@ const RightSection = ({ onboardingStep, setTutorialPosition }: RightSectionProps
             stepIdx={stepIdx}
             width={width}
             height={height}
-            codeFlowScrollTop={codeFlowScrollTop}
             onScroll={handleScrollCodeFlow}
           />
           <CallStackView
             StructuresList={StructuresList}
             stepIdx={stepIdx}
-            width={width}
-            height={height}
-            structuresScrollTop={structuresScrollTop}
             onScroll={handleScrollStructures}
             ref={rightSection2Ref}
           />

src/pages/Visualization/components/RightSection/components/CallStackView.tsx

@@ -6,27 +6,19 @@ import { WrapperDataStructureItem } from "@/pages/Visualization/types/dataStruct
 interface CallStackViewProps {
   StructuresList: AllDataStructureItem;
   stepIdx: number;
-  width: number;
-  height: number;
-  structuresScrollTop: number;
   onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
 }
 
 export const CallStackView = React.forwardRef<HTMLDivElement, CallStackViewProps>(
-  ({ StructuresList, stepIdx, width, height, structuresScrollTop, onScroll }, ref) => {
+  ({ StructuresList, stepIdx, onScroll }, ref) => {
     return (
       <div id="split-2-2" className="view-section2-2" ref={ref}>
         <div className="view-data" onScroll={onScroll}>
           <p className="data-name">콜스택</p>
           <ul className="var-list">
             {StructuresList?.length > 0 &&
               stepIdx >= 0 &&
-              renderingStructure(
-                StructuresList[stepIdx] as WrapperDataStructureItem,
-                width,
-                height,
-                structuresScrollTop
-              )}
+              renderingStructure(StructuresList[stepIdx] as WrapperDataStructureItem)}
           </ul>
         </div>
       </div>

src/pages/Visualization/components/RightSection/components/CodeFlowView.tsx

@@ -7,29 +7,20 @@ interface CodeFlowViewProps {
   stepIdx: number;
   width: number;
   height: number;
-  codeFlowScrollTop: number;
   onScroll: (e: React.UIEvent<HTMLDivElement>) => void;
 }
 
-export const CodeFlowView: React.FC<CodeFlowViewProps> = ({
-  codeFlowList,
-  stepIdx,
-  width,
-  height,
-  codeFlowScrollTop,
-  onScroll,
-}) => {
+export const CodeFlowView: React.FC<CodeFlowViewProps> = ({ codeFlowList, stepIdx, width, height, onScroll }) => {
   return (
     <div id="split-2-1" className="view-section2-1">
       <div className="view-data" onScroll={onScroll}>
         <p className="data-name">코드흐름</p>
         <div style={{ width: "600px", display: "flex", flexDirection: "column", flex: 1 }}>
           {codeFlowList?.length > 0 &&
             stepIdx >= 0 &&
-            renderingCodeFlow(codeFlowList[stepIdx].objects[0].child, width, height, codeFlowScrollTop)}
+            renderingCodeFlow(codeFlowList[stepIdx].objects[0].child, width, height)}
         </div>
       </div>
     </div>
   );
 };
-

src/pages/Visualization/components/RightSection/hooks/useArrowPosition.ts

@@ -0,0 +1,37 @@
+import { useEffect, useCallback } from "react";
+import { useArrowStore } from "@/store/arrow";
+
+interface UseArrowPositionProps {
+  stepIdx: number;
+  codeFlowScrollTop: number;
+  structuresScrollTop: number;
+}
+
+export const useArrowPosition = ({ stepIdx, codeFlowScrollTop, structuresScrollTop }: UseArrowPositionProps) => {
+  const setTop = useArrowStore((state) => state.setTop);
+  const setRight = useArrowStore((state) => state.setRight);
+
+  const updatePosition = useCallback(() => {
+    // Try to find the highlighted code flow item
+    const codeFlowElement = document.getElementById("highlighted-code-flow");
+    if (codeFlowElement) {
+      const rect = codeFlowElement.getBoundingClientRect();
+
+      setTop(rect.top);
+      setRight(rect.right);
+      return;
+    }
+
+    const structureElement = document.getElementById("highlighted-structure-item");
+    if (structureElement) {
+      const rect = structureElement.getBoundingClientRect();
+      setTop(rect.top);
+      setRight(rect.right);
+      return;
+    }
+  }, [stepIdx, codeFlowScrollTop, structuresScrollTop, setTop, setRight]);
+
+  useEffect(() => {
+    updatePosition();
+  }, [updatePosition]);
+};