[2024 동계모각코] 4회차 회고

import { useEffect, useRef, useState } from "react";

const Footer = () => {
    const canvasTopRef =  useRef<HTMLCanvasElement | null>(null);
    const canvasBottomRef =  useRef<HTMLCanvasElement | null>(null);
    const [isScaled, setScaled] = useState(false);

    useEffect(() => {
        const canvas = canvasTopRef.current;


        if (canvas) {
            const context = canvas.getContext("2d");

            if (context){
                // 캔버스 크기를 레티나 디스플레이에 맞게 설정
                if (!isScaled){
                    const scaleFactor = window.devicePixelRatio;
                    canvas.width = canvas.width * scaleFactor;
                    canvas.height = canvas.height * scaleFactor;
                    context.scale(scaleFactor, scaleFactor);
                    setScaled(true);
                }
                context.clearRect(0, 0, canvas.width, canvas.height);

                // 그림자 설정
                context.shadowColor = "rgba(0, 0, 0, 1)";
                context.shadowBlur = 5;
                context.shadowOffsetX = 0;
                context.shadowOffsetY = -2;

                // 곡선 그리기
                context.beginPath();
                context.moveTo(0, 20);
                context.quadraticCurveTo(canvas.width / 4, 100, canvas.width / 2, 20);

                // 라인 그리기
                context.lineTo(canvas.width / 2, canvas.height / 2);
                context.lineTo(0, canvas.height / 2);
                context.lineTo(0, 20);

                context.closePath(); // 시작점과 끝점을 연결하여 닫힌 도형으로 만듭니다.

                context.fillStyle = "#b92629";
                context.fill(); // 채우기
            }
        }
    }, [])

    useEffect(() => {
        const canvas = canvasBottomRef.current;


        if (canvas) {
            const context = canvas.getContext("2d");

            if (context){
                // 캔버스 크기를 레티나 디스플레이에 맞게 설정
                if (!isScaled){
                    const scaleFactor = window.devicePixelRatio;
                    canvas.width = canvas.width * scaleFactor;
                    canvas.height = canvas.height * scaleFactor;
                    context.scale(scaleFactor, scaleFactor);
                    setScaled(true);
                }
                context.clearRect(0, 0, canvas.width, canvas.height);

                // 그림자 설정
                context.shadowColor = "rgba(0, 0, 0, 0.6)";
                context.shadowBlur = 20;
                context.shadowOffsetX = 0;
                context.shadowOffsetY = -5;

                // 곡선 그리기
                context.beginPath();
                context.moveTo(0, 150);
                context.quadraticCurveTo(canvas.width / 4, 50, canvas.width / 2, 150);

                // 라인 그리기
                context.lineTo(canvas.width / 2, canvas.height / 2);
                context.lineTo(0, canvas.height / 2);
                context.lineTo(0, 150);

                context.closePath(); // 시작점과 끝점을 연결하여 닫힌 도형으로 만듭니다.

                context.fillStyle = "#b34b47";
                context.fill(); // 채우기
            }
        }
    }, [])
}

위 모양은 캔버스로 해결할 수 있었다.

 

우선 레티나 디스플레이에 맞게 만들려고, 캔버스의 크기를 키웠다.

 

또한 quadraticCurveTo를 통해 곡선과 그에 대한 그림자를 생성했다.

 

 

---

양 옆으로 뭔짓을 해도 계속 수직 스크롤바의 너비만큼 커지는 문제가 발생했었다.

 

이는 body 태그의 css부분에 "overflow-x: hidden" 을 넣으니 해결할 수 있었다.