[#31] “Code 하이라이팅” 코드 품질 개선 (#36)

* 🔨 refactor: 변수 유틸함수로 분리

* 🔨 refactor: 애니메이션 코드 커스텀 훅으로 분리

* 🙀 chore: 훅에 주석 처리

* 🔨 refactor: 애니메이션 지속 시간 (매직넘버) 상수화

* 🙀 chore: 오타 수정

* 🔨 refactor: 클래스명 계산 로직 추상화

* 🔨 refactor: 마우스 호버 이벤트 훅 관리 + 라인클래스이름 추상화

* 🔨 refactor: 파싱 코드 추상화 + 함수 설명 주석 추가

* 🔨 refactor: Props Drilling이 나타나는 컴포넌트를 삭제하고 부모 컴포넌트로 이전.

* 🔨 refactor: viewer 클래스명 생성 함수 분리

* 🔨 refactor: 타입 분리 + index.ts로 import 문 간소화하여 가독성 개선

Author: inhachoi

apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.stories.tsx

@@ -1,19 +1,10 @@
-import { CodeContent } from '../CodeContent/CodeContent';
-import { LineNumbers } from '../LineNumbers/LineNumbers';
-import { parseHighlightCss } from '../../utils/parseHighlightCss';
-import { parseHighlightHtml } from '../../utils/parseHighlightHtml';
 import styles from '../../styles/CodeViewer.module.css';
+import { LineNumbers } from '../../components';
+import { useDiffCodeAnimate } from '../../hooks';
+import { getParsedCodeLineList, getClassNames, getViewerClassNames } from '../../utils';
+import { CodeViewerProps } from '../../types';
 import { useCoachMarkStore } from '@/shared/store/useCoachMarkStore';
 
-type CodeViewerProps = {
-  code: string;
-  type: 'html' | 'css';
-  theme?: 'light' | 'dark';
-  selectedBlockStartLine?: number;
-  selectedBlockLength?: number;
-  selectedBlockType?: string | null;
-};
-
 /**
  *
  * @description
@@ -27,27 +18,36 @@ export const CodeViewer = ({
   selectedBlockLength,
   selectedBlockType,
 }: CodeViewerProps) => {
-  const parsedCode =
-    type === 'html'
-      ? parseHighlightHtml(code, styles, selectedBlockType!)
-      : parseHighlightCss(code, styles, selectedBlockType!);
-  const codeLineList = parsedCode.split('\n').filter((line) => line.trim() !== '');
+  const codeLineList = getParsedCodeLineList({ code, type, styles, selectedBlockType });
+  const highlightedLines = useDiffCodeAnimate({ code, codeLineList });
   const { currentStep } = useCoachMarkStore();
 
   return (
-    <div
-      className={`${styles.viewer} ${theme === 'dark' ? styles.dark : styles.light} ${currentStep === 3 ? 'z-[200] bg-white' : ''}`}
-    >
+    <div className={getViewerClassNames({ styles, theme, currentStep })}>
       <div className={styles.scrollContainer}>
         <LineNumbers codeLineList={codeLineList} />
 
-        <CodeContent
-          code={code}
-          codeLineList={codeLineList}
-          selectedBlockLength={selectedBlockLength}
-          selectedBlockStartLine={selectedBlockStartLine}
-          selectedBlockType={selectedBlockType}
-        />
+        <pre className={styles.codeContent}>
+          <code>
+            {codeLineList.map((line, index) => {
+              return (
+                <div
+                  key={index}
+                  className={getClassNames({
+                    styles,
+                    index,
+                    line,
+                    highlightedLines,
+                    selectedBlockStartLine,
+                    selectedBlockLength,
+                    selectedBlockType,
+                  })}
+                  dangerouslySetInnerHTML={{ __html: line }}
+                />
+              );
+            })}
+          </code>
+        </pre>
       </div>
     </div>
   );

apps/client/src/shared/code-highlighter/components/CodeContent/CodeContent.tsx

@@ -1,26 +1,15 @@
 import styles from '../../styles/CodeViewer.module.css';
-import { useState } from 'react';
-
-type LineNumbersProps = {
-  codeLineList: string[];
-};
+import { useHoverLineNumber } from '../../hooks';
+import { getLineNumberClass } from '../../utils';
+import { LineNumbersProps } from '../../types';
 
 /**
  *
  * @description
  * 코드의 줄 수를 표시하는 컴포넌트
  */
 export const LineNumbers = ({ codeLineList }: LineNumbersProps) => {
-  const [hoveredLineNumber, setHoveredLineNumber] = useState<number | null>(null);
-
-  // 마우스 enter, leave 색상 변화
-  const handleMouseEnter = (lineNumber: number) => {
-    setHoveredLineNumber(lineNumber);
-  };
-
-  const handleMouseLeave = () => {
-    setHoveredLineNumber(null);
-  };
+  const { hoveredLineNumber, handleMouseEnter, handleMouseLeave } = useHoverLineNumber();
 
   return (
     <div className={styles.lineNumbers}>
@@ -29,7 +18,12 @@ export const LineNumbers = ({ codeLineList }: LineNumbersProps) => {
           key={index}
           onMouseEnter={() => handleMouseEnter(index + 1)}
           onMouseLeave={handleMouseLeave}
-          className={`${styles.lineNumber} ${hoveredLineNumber === index + 1 ? styles.lineHighlight : ''}`}
+          className={getLineNumberClass(
+            styles.lineNumber,
+            styles.lineHighlight,
+            index + 1,
+            hoveredLineNumber
+          )}
         >
           {index + 1}
         </div>

apps/client/src/shared/code-highlighter/components/CodeViewer/CodeViewer.tsx

@@ -0,0 +1,2 @@
+export { CodeViewer } from './CodeViewer/CodeViewer';
+export { LineNumbers } from './LineNumbers/LineNumbers';

apps/client/src/shared/code-highlighter/components/LineNumbers/LineNumbers.tsx

@@ -0,0 +1,6 @@
+/**
+ *
+ * @description
+ * 애니메이션 지속 시간 (1초)
+ */
+export const ANIMATION_DURATION_MS = 1000;

apps/client/src/shared/code-highlighter/components/index.ts

@@ -0,0 +1,2 @@
+export { useDiffCodeAnimate } from './useDiffCodeAnimate';
+export { useHoverLineNumber } from './useHoverLineNumber';

apps/client/src/shared/code-highlighter/constants/index.ts

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+
+import { ANIMATION_DURATION_MS } from '../constants';
+import { useDiffCodeAnimateProps } from '../types';
+
+/**
+ *
+ * @description
+ * 변환된 HTML 코드에서 바뀐 코드 라인을 애니메이션 주면서 할당
+ */
+export const useDiffCodeAnimate = ({ code, codeLineList }: useDiffCodeAnimateProps) => {
+  const [previousCodeLines, setPreviousCodeLines] = useState<string[]>([]);
+  const [highlightedLines, setHighlightedLines] = useState<number[]>([]);
+
+  useEffect(() => {
+    const newLineList: number[] = [];
+
+    codeLineList.forEach((line, index) => {
+      if (!previousCodeLines[index] || previousCodeLines[index] !== line) {
+        newLineList.push(index);
+      }
+    });
+
+    setHighlightedLines(newLineList);
+    const timeout = setTimeout(() => setHighlightedLines([]), ANIMATION_DURATION_MS);
+    setPreviousCodeLines(codeLineList);
+
+    return () => clearTimeout(timeout);
+  }, [code]);
+
+  return highlightedLines;
+};

apps/client/src/shared/code-highlighter/hooks/index.ts

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+
+/**
+ *
+ * @description
+ * 마우스 호버한 라인넘버의 색상을 변경하는 함수
+ */
+export const useHoverLineNumber = () => {
+  const [hoveredLineNumber, setHoveredLineNumber] = useState<number | null>(null);
+
+  const handleMouseEnter = (lineNumber: number) => {
+    setHoveredLineNumber(lineNumber);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredLineNumber(null);
+  };
+
+  return { hoveredLineNumber, handleMouseEnter, handleMouseLeave };
+};

apps/client/src/shared/code-highlighter/hooks/useDiffCodeAnimate.ts

@@ -0,0 +1,43 @@
+// components 타입
+export type CodeViewerProps = {
+  code: string;
+  type: 'html' | 'css';
+  theme?: 'light' | 'dark';
+  selectedBlockStartLine?: number;
+  selectedBlockLength?: number;
+  selectedBlockType?: string | null;
+};
+
+export type LineNumbersProps = {
+  codeLineList: string[];
+};
+
+// hooks 타입
+export type useDiffCodeAnimateProps = {
+  code: string;
+  codeLineList: string[];
+};
+
+// utils 타입
+export type getClassNamesProps = {
+  styles: { [key: string]: string };
+  index: number;
+  line: string;
+  highlightedLines: number[];
+  selectedBlockStartLine?: number;
+  selectedBlockLength?: number;
+  selectedBlockType?: string | null;
+};
+
+export type getParsedCodeLineListProps = {
+  code: string;
+  type: 'html' | 'css';
+  styles: { [key: string]: string };
+  selectedBlockType?: string | null;
+};
+
+export type getViewerClassNamesProps = {
+  styles: any;
+  theme: string | undefined;
+  currentStep: number;
+};