둘리 & 도우너 어서오고 짤 생성기 회고

import {Welcome, Hoi, Smoke, Over} from '../data/Actors.js';
import BuildMeme from './BuildMeme';

const DoolysWelcome = () => {

  const actors = [Welcome, Hoi, Smoke, Over];

  return (
    <div>
      {actors.map((actor, index) => {
        return <BuildMeme key={`actor-${index}`} actorConst={actor} />;
      })}
    </div>
  );
};

// Actors.js  

const Welcome = {
	title: "어서오고",      // 짤 제목
	source: {
		imageSrc: "bg_1.png", // 배경 이미지 파일
		imageWidth: 519,      // 배경 이미지 가로 크기 
		imageHeight: 606,     // 배경 이미지 세로 크기 

		twoLineTextId: "inputWelcomeStranger", // input name
		threeLineTextId: "inputWelcomeDooly",  // input name

		filename: "doolys-welcome", // 이미지 저장 파일 명
	},
	presets: {
		twoLineConst: { // 최대 2줄을 갖는 화자의 프리셋
			placeholder: "어이 둘리.", // input placeholder
			maxMessageLength: 12, // input에 입력 가능한 max length
			lineLimitLength: { // 2줄 중 각 라인별 최대 글자 수
				first: 7,
				second: 5,
			},
			positions: { // 라인 별 x, y 좌표 값 
				init: {
					x: 100,
					y: 70,
				},
				firstRow: {
					x: 70,
					y: 55,
				},
				secondRow: {
					x: 70,
					y: 90,
				},
			},
			countForMove: 4, // 이 글자수 이상 입력되면 왼쪽으로 메시지 이동을 시작 
			lineHeight: 20,
		},
		threeLineConst: { // 최대 3줄을 갖는 화자의 프리셋
			// twoLineConst의 하위 프리셋과 구조가 동일하여 생략  
		},
	},
}

[
  { text: '메시지1', 
    pos: {
      x: 100, y: 100
  }}
]

  // ThreeLineText.js 중 일부   
    
  // 첫번째 라인의 최대 개수로 메시지 처음을 자르고 
  const messageHead = inputText.slice(0, lineLimitLength.second);
  // 나머지 메시지는 두번째 라인에 넣을 것  
  const messageTail = inputText.slice(lineLimitLength.second);   

  // countForMove는 메시지가 이 숫자 이상 입력되기 시작하면 왼쪽으로 이동하도록 셋팅한 값이다.  
  // 왼쪽으로 이동한다는 것은 x좌표가 점점 줄어드는 것을 의미하므로 늘어나는 개수만큼 x 좌표를 줄여준다. 
  const secondPosX = positions.init.x - lineHeight * (messageTail.length - countForMove < 0 ? 0 : messageTail.length - countForMove);
  const positionMessageTail = {
    // 하지만 말풍선을 넘도록 좌표를 줄일 순 없으므로 셋팅된 x좌표 한계에 다다르면 더 이상 줄이지 않는다.  
    x: secondPosX < positions.thirdRow.x ? positions.thirdRow.x : secondPosX,
    y: positions.secondRow.y + 20,
  };

  // split된 메시지를 배열에 담아 리턴한다.
  let result = [];   
  result.push({
    text: messageHead,
    pos: { x: positions.secondRow.x, y: positions.secondRow.y - lineHeight },
  });
  result.push({ text: messageTail, pos: positionMessageTail });
  return result;

  // ActorsMessage.js 중 일부  
  
  const inputRef = useRef();
  useEffect( () => {
    inputRef.current.addEventListener('keyup', handleChange);
    return () => {
      inputRef.current.removeEventListener('keyup', handleChange);
    };
  });

  const handleChange = (e) => {
    // onKeyUp은 부모의 함수
    props.onKeyUp({'name': e.target.name, 'value': e.target.value});
  };

  return (

    <div>
      <input
        type="text"
        name={inputName}
        ref={inputRef}
        placeholder={placeholder}
        onKeyUp={handleChange}
        maxLength={maxLength}
      />

    </div>

  );

  // DrawingCanvas.js 
 
  const canvasRef = useRef();  
  const initCanvas = () => {
    const canvas = canvasRef.current;  
    const items = props.items; // 좌표를 갖는 split된 메시지 배열
    // 중략   

    const bgImage = new Image();
    bgImage.src = selectBackgroundImg(source.imageSrc);
    bgImage.onload = function () {
      // 이미지가 준비되면 캔버스에 업데이트 한다.
      drawPreviewImage(canvas, bgImage, items);  
    };
  };

  const drawPreviewImage = (canvas, bgImage, items) => {
    // 중략 
    items.forEach((v) => {   
      drawTextWithPostion(ctx, v.text, v.pos);
    });
  };

  const drawTextWithPostion = (ctx, text, position) => {
    // 중략
    ctx.fillText(text, position.x, position.y);
  };

  return (
      <div>
        <canvas ref={canvasRef} 
                width={source.imageWidth} height={source.imageHeight} />
      </div>
  );

src
 ㄴ components
    ㄴ download
       ㄴ DownloadImage.js
    ㄴ draw
       ㄴ ActorMessage.js
       ㄴ DrawingCanvas.js
    ㄴ layout
       ㄴ Footer.js
       ㄴ Header.js
       ㄴ Menu.js
    ㄴ util
       ㄴ ThreeLineText.js
       ㄴ TwoLineText.js
    ㄴ BuildMeme.js
    ㄴ DoolysWelcome.js
 ㄴ data
    ㄴ Actors.js
 ㄴ images
    ㄴ bg_1.png
 ㄴ style
    ㄴ style.scss
App.js