Next.js 스크린 사이즈에 맞게 배경 사진 변경하기

Next.js 로 제작된 홈페이지 템플릿을 수정하고 있다. 디자인 품을 줄이기 위해 템플릿을 구매해서 사용하는 것인데, 내용에 맞게 컴포넌트를 커스텀 하다보니 그냥 새로 만드는 게 좋은가 의문이 들기도 하지만, 다시 다 만든다고 생각하면 또 아니지 싶고. 일단은 하나씩 찾아보며 수정하고 있다. 현업에서는 레거시 코드를 수정하는 일이 많다고 했는데, 이것도 결국 남이 만든 코드를 이해하고 수정하는 일이니 그런 연습이 되는 것 같다. 돈을 받고 팔 정도니 나보다는 더 잘 만들었겠지 싶다.

아무튼 스타일을 수정하다보니 반응형으로 동작하는 코드가 깨져서 손보고 있는데, 지금 정리할 내용은 스크린 사이즈가 변경될 때, 웹에서 모바일로 바뀔 때 커버의 이미지를 교체하는 코드다. 스크린의 가로 크기를 확인해 이미지를 교체해주면 되는데, Next.js 에서 그냥 window 로 가로 너비를 바로 확인할 수 없어서 관련 훅을 찾아서 적용했다. (훅이 맞나? 찾아보니 다른 방법들도 더 있는 것 같긴 함)

// getWindowSize.js

import { useEffect, useState } from "react";

export const getWindowSize = () => {
  const [windowSize, setWindowSize] = useState({
    width: 0,
    height: 0,
  });

  useEffect(() => {
    if (typeof window !== "undefined") { // 윈도우 타입이 언디파인드가 아닐때 실행
      const handleResize = () => { 
        setWindowSize({
          width: window.innerWidth,
          height: window.innerHeight,
        });
      };

      window.addEventListener("resize", handleResize);
      handleResize();
      return () => window.removeEventListener("resize", handleResize); // 클린업
    } else {
      return;
    }
  }, []);
  return windowSize;
};

이렇게 해당 window 객체가 있을 때 사이즈를 받아오는 훅을 만들어 두고, 활용은 아래 처럼 했다.

import { getWindowSize } from "../hooks/getWindowSize";

const headerBG_web = "img/hero3.png";
const headerBG_mobile = "img/hero4.png";

..

export default function Index4() {
  const { width } = getWindowSize(); // 가로 길이만 가져옴
  const headerBG = width >= 545 ? headerBG_web : headerBG_mobile; // 가로 길이에 따라 이미지 교체

..

  <div
    className="o_img"
    style={{
      background: `url(${headerBG})`, // 이렇게 적용
    }}
  ></div>

그리고 왜 인지 모르겠으나, background-size: cover 와 같은 속성값이 반응형에 따라 적용이 안되는 부분이 있어서.. 그냥 important 를 넣어버렸다. important 는 부득이한 경우만 쓰라고 봤던 것 같은데 일단은 이렇게 해결 했다.

.fn_cs_hero_header .o_img {
  position: absolute;
  top: 0px;
  right: 0px;
  left: 0px;
  bottom: 0px;
  z-index: 2;
  background-size: cover !important; // 여기 사용! 
}