Responsive Web

• 게임 플랫폼이기 때문에 사용자들이 화면을 보았을 때, 정보가 한 눈에 들어올 수 있도록 컴포넌트들이 모두 한 화면에 들어오게끔 만들어야한다고 생각했습니다.

• 가로 100rem, 세로 62rem을 기준으로 컴포넌트들이 화면 내에 모두 들어올 수 있도록 html의 font-size를 뷰 포트의 상대 크기로 설정하였습니다.

  * {
  	font-family: "LINESeed KR";
  	font-size: max(8px, min(1vw, 100vh / 62));
  }
  

  화면 크기에 따라 동적으로 변경되는 컴포넌트 크기

  

• 이렇게 했을 때, 캐치마인드의 canvas 크기 또한 반응형으로 바꾸어주어야했습니다.

  • resize 이벤트가 일어날 때, canvas 사이즈를 부모 요소의 사이즈로 맞추어 canvas의 크기 또한 조정하였습니다.

    const resizeCanvas = () => {
      if (!canvasRef.current) return;
      const canvas = canvasRef.current;
    
      if (canvas.parentElement) {
        canvas.width = canvas.parentElement.clientWidth;
        canvas.height = canvas.parentElement.clientHeight;
      }
    };
    

  • 근데 여기서, canvas의 사이즈를 변경하면 캔버스 안의 그림들이 모두 사라진 문제가 있었습니다. 그래서 임의의 캔버스 하나를 생성하여 해당 캔버스에 현재 그림 이미지를 저장하고, 기존 캔버스의 사이즈 변경한 뒤, 다시 옮기는 식으로 로직을 작성하여 해결하였습니다.

    

    const resizeCanvas = () => {
      if (!canvasRef.current) return;
      const canvas = canvasRef.current;
    
      const ctx = getContextObject();
    
      const canvasBack = document.createElement("canvas");
      canvasBack.width = canvas.width;
      canvasBack.height = canvas.height;
      const ctxBack = canvasBack.getContext("2d");
      ctxBack?.drawImage(canvas, 0, 0);
    
      if (canvas.parentElement) {
        canvas.width = canvas.parentElement.clientWidth;
        canvas.height = canvas.parentElement.clientHeight;
    
        ctx.drawImage(canvasBack, 0, 0, canvas.width, canvas.height);
      }
    
    	...
    };
    

    화면 크기가 변경되어도 유지되는 캔버스의 그림