사용한 라이브러리 (v3.6.1 기준) react-zoom-pan-pinch

서론과 본론은 회고록이므로 코드만 확인하고 싶으시면 결론을 보시면 됩니다.

서론

프로젝트 진행 중 이미지 미리보기 모달을 구현할 일이 있었는데, 편집 툴이 아닌 라이브러리 중에서 이미지 확대/축소와 회전 기능을 동시에 제공하는 걸 찾지 못했다.

물론 여러 스타일 프레임워크에서 지원하는 기능이긴 하지만, 이 기능만을 위해 스타일 프레임워크를 도입하는 건 비효율적이라 판단해서 react-zoom-pan-pinch 라이브러리를 조금 손봐서 회전 후에도 확대 기능을 문제없이 사용할 수 있게 해봤다.

본론

문제점1. img 요소를 회전하면 TransformComponent와 축이 어긋남

처음엔 간단하게 img 요소에 rotate 값을 주면 되겠다고 생각했다. 하지만 그렇게 하면 img 요소의 회전만 바뀌고 TransformComponent는 회전하지 않아서, TransformWrapper 영역에 img 요소가 일부 가려지게 된다.

사진이 차지하는 영역이 img 요소이고, 파란 영역은 TransformComponent다.

이렇게 되면 img 요소는 왼쪽에 컨텐츠가 있는데, TransformComponent는 세로 방향으로 고정되어 있어서 TransformWrapper 영역 내에서 img 요소의 일부가 잘리거나 흰 여백이 생긴다.

그래서 두 번째로 생각한 건, TransformComponent도 같이 돌리면 되지 않을까? 하는 거였다.

문제점2. TransformComponent를 회전하면 마우스 이동축도 회전됨

TransformComponent와 img의 방향을 맞추려면 TransformComponent 자체를 회전시키면 해결될 줄 알았다.

문제는 TransformComponent를 회전시키면 마우스 이동축도 함께 회전된다는 거다. 그래서 화면상에서 마우스를 왼쪽으로 드래그해도 회전된 이동축 때문에 img 요소는 위로 이동하게 된다.

이 문제를 해결하려고 회전 각도에 따른 마우스 이동축 보정값을 구해보려 했지만 실패했다.

이 두 문제로 파악한 해결 조건은 다음과 같다.

1. img 요소와 TransformComponent의 방향을 동일하게 맞출 것.
2. TransformComponent는 회전시키지 않을 것.

실패 원인을 고찰하던 중 문득 img 요소만 회전시키되, TransformComponent의 너비와 높이를 회전된 img 요소와 같게 유지하면 되지 않을까? 하는 생각이 들었다.

문제점3. TransformComponent와 img 요소의 위치 불일치

img 요소의 너비와 높이를 상태에 저장하고, TransformComponent의 width와 height 속성에 주입하는 방식으로 이 문제는 쉽게 해결할 수 있었다. img가 회전하면 TransformComponent의 width와 height 값을 반대로 설정해주면 된다.

문제는 이렇게 설정하면 img 요소와 TransformComponent의 위치가 미세하게 어긋나 다시 1번과 같은 문제가 발생한다는 점이었다.

이를 해결하기 위해 TransformComponent에 relative 값을 주고 img 요소에 absolute 값을 주어 강제로 중앙에 위치시켜 문제를 해결했다.

결론

완성 코드

import { useEffect, useRef, useState } from "react";
import { TransformWrapper, TransformComponent, ReactZoomPanPinchRef } from "react-zoom-pan-pinch";

type ImageModalProps = {
  imageUrl: string;
};

export const ImageModal = ({ imageUrl }: ImageModalProps) => {
  const [imgRotateDeg, setImgRotateDeg] = useState(0); // 이미지 회전각도
  const [zoomScale, setZoomScale] = useState(1); // 현재 줌 배율
  const [contentDimensions, setContentDimensions] = useState<{
    width: number;
    height: number;
  }>({ width: 0, height: 0 });
  const [isImageEmpty, setIsImageEmpty] = useState(false); // 이미지 액박 확인
  const zoomInRef = useRef<() => void>();
  const zoomOutRef = useRef<() => void>();
  const resetTransformRef = useRef<() => void>();
  const imgRef = useRef<HTMLImageElement>(null); // img 요소 참조 생성
  const transformRef = useRef<ReactZoomPanPinchRef | null>(null);

  // 이미지 로드 시 크기 업데이트
  useEffect(() => {
    if (imgRef.current && !isImageEmpty) {
      const { naturalWidth, naturalHeight } = imgRef.current;
      setContentDimensions({
        width: naturalWidth,
        height: naturalHeight,
      });
    }
  }, [imageUrl, imgRotateDeg, zoomScale]);

  // 줌 변경 시 호출되는 함수
  const handleZoomChange = (ref: ReactZoomPanPinchRef) => {
    setZoomScale(ref.state.scale);
  };

  const contentStyle: React.CSSProperties = {
    width:
      imgRotateDeg % 180 === 0 && contentDimensions.width !== 0
        ? `${contentDimensions.width}px`
        : contentDimensions.height !== 0
        ? `${contentDimensions.height}px`
        : "auto",
    height:
      imgRotateDeg % 180 === 0 && contentDimensions.height !== 0
        ? `${contentDimensions.height}px`
        : contentDimensions.width !== 0
        ? `${contentDimensions.width}px`
        : "auto",
    position: "relative",
  };

  return (
    <div style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
      <TransformWrapper
        initialScale={1}
        minScale={0.5}
        maxScale={10}
        centerOnInit
        onInit={(ref) => {
        // 줌 기능 버튼을 외부에 구현하기 위해 함수를 외부에 선언하고 주입함
          zoomInRef.current = ref.zoomIn;
          zoomOutRef.current = ref.zoomOut;
          resetTransformRef.current = ref.resetTransform;
          transformRef.current = ref;
        }}
        onZoom={(ref) => handleZoomChange(ref)}
        onZoomStop={(ref) => handleZoomChange(ref)}
      >
        <TransformComponent wrapperStyle={{ width: "100%", height: "100%" }} contentStyle={contentStyle}>
          <img
            ref={imgRef}
            src={imageUrl}
            style={{
              position: "absolute",
              top: "50%",
              left: "50%",
              transform: `translate(-50%, -50%) rotate(${imgRotateDeg}deg)`,
              transformOrigin: "center center",
              transition: "transform 200ms",
            }}
            onError={() => setIsImageEmpty(true)} // 액박 체크
          />
        </TransformComponent>
      </TransformWrapper>
      // 이미지 액박 시 예외처리
      {isImageEmpty && <div>이미지를 불러올 수 없습니다.</div>}
    </div>
  );
};

img 요소의 너비와 높이를 contentDimensions에 초기화하고, 이미지 회전 상태(imgRotateDeg)에 따라 TransformComponent에 주입할 스타일 값을 contentStyle에 정의했다.

3번 문제를 해결하기 위해 img 요소는 TransformComponent에서 중앙에 정렬되도록 스타일 값을 추가했다.

이렇게 해서 이미지 회전 후 확대를 해도 TransformWrapper의 경계를 벗어나지 않고 잘림 없이 영역 내에서 상호작용할 수 있게 되었다.

추가적으로 보완하고 싶은 부분은 이미지가 회전한 후 TransformComponent가 바로 중앙에 정렬되도록 하는 것이다. 이 부분은 적용 후에 포스팅을 업데이트할 예정이다.

끝!

오랜만에 프로젝트 확인하려고 사이트에 들어갔더니 데이터를 가져오지 못하고 무한 로딩이 되고있었다 ,,

[에러 이미지]

구글에 검색해보니 코드 문제는 아닌거같고 firebase문제인거 같아서 firebase에 들어가보니 알림이 와있었다 !

Firebase 보안규칙

[알림 이미지]

보안 규칙을 업데이트하지 않으면 실시간 데이터베이스가 클라이언트 요청을 거부한다고 한다 ,,

해당 알림을 클릭하면 해결하는 방법을 알려주는 페이지로 이동된다.

firebase 보안규칙페이지

해결

[firebase 페이지내 해결법]

나는 해당 방법을 참고했다 ! 오픈 액세스로 누구다 데이터를 수정, 삭제할 수 있도록 설정했다.

권장되지 않는 방법이라 써있긴 하지만 ,,

일단은 해결하는게 우선이니 오픈 액세스로 적용하였다.

페이지를 잘 읽어보면 firebase가 제안하는 안전한 규칙으로 설정할 수 있는듯 하다. 시간나면 수정해봐야겠다.

아무튼 위의 내용대로 보안규칙을 수정했다.

[❗보안규칙 수정전] : 읽기 쓰기에 뭔가 적혀있는데 아마도 5/27 이후부터 데이터가 불러와지지 않은듯 하다. (지금은 6/4)

이 코드를 아래처럼 수정했다.

[✔️보안규칙 수정후] : 저장하니 경고메시지가 뜬다 ! 하지만 프로젝트는 이제 데이터가 잘 불러와진다.

데이터를 보호하기 위한 Firebase 보안 규칙을 더 공부해서 적절한 규칙으로 수정이 필요해 보인다.

일단 급한 불만 끈걸로 만족 ..

1. 원하는 svg파일 저장하기

무료 다운로드 추천 사이트 flaticon react-icons

원하는 svg가 파일은 없고 코드로만 존재한다면 메모장(혹은 vscode)에 붙여넣고 확장자를 .svg로 저장하면 됩니다.

• svg파일 예시

fill속성에 원하는 색상코드를 입력할 수 있음

2. 변환 사이트에서 파일 변환하기

아무데서나 가능하지만 아래 사이트 추천 무료 변환 사이트

svg파일을 선택/드래그 앤 드롭하여 사이트에 올리고 ico파일로 변환한다.

변환된 파일을 다운로드받으면 끝 !

• 변환된 파일 예시

3. ❗아무것도 안보이는 오류

간혹 파일을 변환하여 다운로드 받았는데 ico파일을 열면 아무것도 보이지 않는 오류가 있다.

그럴때 변환전 svg파일의 width와 height속성을 512정도로 조절하면 정상적으로 잘 보인다.

4. favicon 적용하기 (리액트)

변환된 logo.ico파일을 public 경로에 저장한다.

index.html의 head태그 안에

<link rel="icon" href="%PUBLIC_URL%/icon.ico" />

위 코드 입력하면 적용 완료

적용된 모습

파일을 변환하는데 자꾸 아무것도 보이지 않는 오류가 발생했는데 해결법을 찾게되어 글로 정리하였다.

fill속성은 변경하기 전에 svg와 path중 어디에 입력해야 적용이 잘 되는지 미리 확인해보는것을 추천

만약 변환 후 아무것도 보이지 않는다면 svg파일의 크기를 늘려 다시 시도해보길 바란다.

MongoDB Compass Error: an error occurred while loading instance info: invalid utf-8 string in bson document

이 에러다.

로컬 호스트에 연결이 안 되는 ..? 영알못이라 더 괴로웠다.

처음에는 해결법을 몰라서 구 버전을 다운로드해 사용했다. 홈페이지에서 구 버전을 찾을 수 없어서 아래 사이트를 참고했다. 참고 사이트 - 스택오버플로우

구 버전으로는 연결 됨 ..

위 사이트에서 compass 1.21.2버전을 다운로드했더니 연결이 돼서 일단 그냥 사용했는데 최신 버전의 몽고디비랑 호환되지 않는 부분이 있지 않을까 걱정이 됐다.

그래서 다시 구글링을 해보니 pc 이름에 한글, 특수문자, 공백이 들어가면 생길 수 있는 오류라는 것을 알았다! (그때는 왜 못 찾았는지.. 참 .. )

아래는 pc 이름을 변경하는 방법이다. (윈도우 11 기준)

1. 윈도우 시작 버튼 클릭해서 설정으로 들어가기

2. 파란 화살표 옆에 이름 바꾸기 클릭 (해당 부분에 설정된 이름이 pc 이름! pc 이름이 정여름)

3. pc 이름을 영문과 숫자로만 입력 (한글, 특수문자, 공백 금지)

4. 다시 시작하면 설정이 완료 (끝)

위처럼 pc 이름을 영문으로 변경하고 나면!

이렇게 최신 버전에서도 잘 돌아간다.

결론 : pc 이름에 한글, 특문, 공백이 들어가는지 확인하자!