refactor: 메모이제이션 리팩토링

Author: ssi02014

src/components/Accordion/index.tsx

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import * as S from './styled';
 import { arrowBottom, arrowTop } from '@assets/icons';
 import Icon from '../../components/Icon';
@@ -13,7 +13,7 @@ const Accordion = ({ title, children, maxHeight = 200 }: AccordionProps) => {
   const panelRef = useRef<HTMLDivElement>(null);
   const [isOpenPanel, setIsOpenPanel] = useState(false);
 
-  const handleToggle = () => {
+  const handleToggle = useCallback(() => {
     setIsOpenPanel(!isOpenPanel);
 
     if (!panelRef.current) return;
@@ -26,7 +26,7 @@ const Accordion = ({ title, children, maxHeight = 200 }: AccordionProps) => {
       if (!panelRef.current) return;
       panelRef.current.style.overflow = 'visible';
     }, 300);
-  };
+  }, [isOpenPanel]);
 
   return (
     <S.AccordionWrapper>

src/components/Canvas/index.tsx

@@ -1,5 +1,5 @@
 import useDragAndDropText from '../../hooks/useDragAndDropText';
-import React, { useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { CanvasStateWithColors } from '../../types/canvas';
 import * as S from './styled';
 
@@ -19,6 +19,7 @@ const Canvas = React.forwardRef(({ canvasState }: CanvasProps, ref: any) => {
     fontFamily,
     angle,
     isBlur,
+    textAlign,
     isBlockEvent,
     bgColor,
     fontColor,
@@ -44,30 +45,51 @@ const Canvas = React.forwardRef(({ canvasState }: CanvasProps, ref: any) => {
     return strokeObj[fontStrokeType];
   };
 
-  const getMultiLinePosition = (
-    linesLength: number,
-    lineHeight: number,
-    idx: number
-  ) => {
-    const { offsetX, offsetY } = dragAndDropTextData;
-    const centerX = +canvasWidth / 2;
-    const centerY = +canvasHeight / 2;
-
-    const x = offsetX ? offsetX : centerX;
-    const y = offsetY
-      ? offsetY - ((linesLength - 1) * lineHeight) / 2 + idx * lineHeight
-      : centerY - ((linesLength - 1) * lineHeight) / 2 + idx * lineHeight;
+  const getCenterX = useCallback(
+    (lineMaxWidth: number) => {
+      switch (textAlign) {
+        case 'center':
+          return +canvasWidth / 2;
+        case 'end':
+          return +canvasWidth / 2 + lineMaxWidth / 2;
+        default:
+          return +canvasWidth / 2 + (lineMaxWidth / 2) * -1;
+      }
+    },
+    [textAlign, canvasWidth]
+  );
 
-    return { x, y };
-  };
+  const getMultiLinePosition = useCallback(
+    (
+      linesLength: number,
+      lineHeight: number,
+      lineMaxWidth: number,
+      idx: number
+    ) => {
+      const { offsetX, offsetY } = dragAndDropTextData;
+      const centerY = +canvasHeight / 2;
+      const centerX = getCenterX(lineMaxWidth);
+
+      const x = offsetX ? offsetX : centerX;
+      const y = offsetY
+        ? offsetY - ((linesLength - 1) * lineHeight) / 2 + idx * lineHeight
+        : centerY - ((linesLength - 1) * lineHeight) / 2 + idx * lineHeight;
+
+      return { x, y };
+    },
+    [dragAndDropTextData, canvasHeight]
+  );
 
-  const setFontStroke = (ctx: CanvasRenderingContext2D, line: string) => {
-    if (fontStrokeType === 'None') return;
+  const setFontStroke = useCallback(
+    (ctx: CanvasRenderingContext2D, line: string) => {
+      if (fontStrokeType === 'None') return;
 
-    ctx.lineWidth = getLineWidthByStrokeType();
-    ctx.strokeStyle = `${strokeColor.hex}`;
-    ctx.strokeText(line, 0, 0);
-  };
+      ctx.lineWidth = getLineWidthByStrokeType();
+      ctx.strokeStyle = `${strokeColor.hex}`;
+      ctx.strokeText(line, 0, 0);
+    },
+    [fontStrokeType, strokeColor]
+  );
 
   const rotateCanvas = (ctx: CanvasRenderingContext2D) => {
     const { offsetX, offsetY } = dragAndDropTextData;
@@ -87,9 +109,19 @@ const Canvas = React.forwardRef(({ canvasState }: CanvasProps, ref: any) => {
   ) => {
     const size = +fontSize.replace('px', '');
     const fontLineHeight = size + +lineHeight;
+    let lineMaxWidth = 0;
+
+    lines.forEach((line) => {
+      lineMaxWidth = Math.max(lineMaxWidth, ctx.measureText(line).width);
+    });
 
     lines.forEach((line, idx) => {
-      const { x, y } = getMultiLinePosition(lines.length, fontLineHeight, idx);
+      const { x, y } = getMultiLinePosition(
+        lines.length,
+        fontLineHeight,
+        lineMaxWidth,
+        idx
+      );
 
       ctx.save();
       ctx.translate(x, y);
@@ -107,7 +139,7 @@ const Canvas = React.forwardRef(({ canvasState }: CanvasProps, ref: any) => {
     const size = +fontSize.replace('px', '');
 
     ctx.font = `${size}px ${fontFamily}`;
-    ctx.textAlign = 'center';
+    ctx.textAlign = textAlign;
     ctx.textBaseline = 'middle';
 
     ctx.save();

src/components/ColorPicker/index.tsx

@@ -1,14 +1,22 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { ColorPickerWrapper } from './styled';
+import React, {
+  CSSProperties,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { Color, ColorPicker as PaletteColorPicker } from 'react-color-palette';
 import { IconButton } from '../Icon/styled';
+import './style.css';
 
 interface ColorPickerPickerProps {
   children: React.ReactNode;
   color: Color;
   setColor: (color: Color) => void;
   toggleIsBlockEvent: () => void;
 }
+
 const ColorPickerPicker = ({
   children,
   color,
@@ -18,21 +26,24 @@ const ColorPickerPicker = ({
   const [isOpenColorPicker, setIsOpenColorPicker] = useState(false);
   const colorRef = useRef<HTMLDivElement>(null);
 
-  const handleCloseColorPicker = (e: any) => {
-    if (isOpenColorPicker) {
-      if (colorRef && colorRef.current) {
-        if (!colorRef.current.contains(e.target)) {
-          setIsOpenColorPicker(false);
-          toggleIsBlockEvent();
+  const handleCloseColorPicker = useCallback(
+    (e: any) => {
+      if (isOpenColorPicker) {
+        if (colorRef.current) {
+          if (!colorRef.current.contains(e.target)) {
+            setIsOpenColorPicker(false);
+            toggleIsBlockEvent();
+          }
         }
       }
-    }
-  };
+    },
+    [isOpenColorPicker, toggleIsBlockEvent]
+  );
 
-  const handleOpenColorPicker = () => {
-    setIsOpenColorPicker(!isOpenColorPicker);
+  const handleOpenColorPicker = useCallback(() => {
+    setIsOpenColorPicker((prev) => !prev);
     toggleIsBlockEvent();
-  };
+  }, [toggleIsBlockEvent]);
 
   useEffect(() => {
     document.addEventListener('mousedown', handleCloseColorPicker);
@@ -42,16 +53,31 @@ const ColorPickerPicker = ({
     };
   }, [handleCloseColorPicker]);
 
+  const wrapperStyle: CSSProperties = useMemo(() => {
+    return {
+      position: 'relative',
+    };
+  }, []);
+
+  const colorPickerWrapperStyle: CSSProperties = useMemo(() => {
+    return {
+      position: 'absolute',
+      left: '50%',
+      bottom: '40px',
+      transform: 'translateX(-50%)',
+    };
+  }, []);
+
   return (
-    <ColorPickerWrapper>
+    <div style={wrapperStyle}>
       <IconButton
         isOpenColorPicker={isOpenColorPicker}
         onClick={handleOpenColorPicker}
         isBorder={true}>
         {children}
       </IconButton>
       {isOpenColorPicker && (
-        <div ref={colorRef}>
+        <div ref={colorRef} style={colorPickerWrapperStyle}>
           <PaletteColorPicker
             width={250}
             height={150}
@@ -63,7 +89,7 @@ const ColorPickerPicker = ({
           />
         </div>
       )}
-    </ColorPickerWrapper>
+    </div>
   );
 };