My-world 개발보고서 : 코드블럭 스타일링, 모달창 위치 드래그로 옮기기

코드블럭 스타일링

note application의 코드 메모장에 소스 코드를 저장하면 선택된 언어에 따라 소스 코드가 스타일링 되는 기능을 구현해보자 한다.

예약어로 직접 스타일링

원하는 대로 스타일링 할 수 있지만 지원할 수 있는 언어가 한정되어 있고 계속해서 추가하기엔 코드 길이가 감당불가능 수준이 될 것이다.

라이브러리 이용

highlight.js

npm install react-highlight --save

사용법은 간단하다.
className에 사용하려는 언어를 넣어주고( ex. javascript, kotlin, ... ) 태그 안에 코드 블럭을 입력하면 된다.

code.tsx

import Highlight from "react-highlight";
import "highlight.js/styles/github.css";
...
<Highlight className={lang}>{contentsNow.code}</Highlight>

결과물 캡처

모달창 위치 옮기기

react-use-gesture을 이용했다.

npm i react-use-gesture --save

const [position, setPosition] = useState({ x: 50, y: 550 });
const moveModal = useDrag((params) => {
  setPosition({
    x: params.offset[0],
    y: params.offset[1],
  });
}, []);

여기서 params는 여러가지 속성을 갖는데 그중

offset : 컴포넌트의 position. (0,0)에서 시작.
values : 마우스의 절대적인 position. drag 이벤트 처음 발생 시에 클릭한 부분이 모달의 왼쪽 위 모서리의 위치로 세팅됨.

을 나타낸다.

아래는 position을 { x: 50, y: 550 }으로 시작위치를 설정하고, 시작위치로부터 모달창을 옮기기 위해 modal-top에 클릭하는 상황을 캡처해보았다. 클릭하자마자 파란점에 해당했던 modal-top이 { x: 0, y: 0 }으로 이동했다.

콘솔창을 보면 offset은 (0,0)이고 values는 (241,564)이다. 우선 모달은 offset에 해당하는 (0,0)으로 이동했고 파란점에 해당하는 좌표가 values인 (241,564)와 비슷한 것을 알 수 있다. values가 시작 위치인 (50,550)으로 나오길 기대했으나 드래그를 하려고 잡은 위치에서 모달의 위치가 약간 이동되었다.

문제는 다음과 같은 방법으로 해결했다.

  const [position, setPosition] = useState({ x: 100, y: 100 });
  const moveModal = useDrag((params) => {
    console.log(params.offset, params.values);
    setPosition({ x: params.offset[0] + 100, y: params.offset[1] + 100 });
    //차이만큼 더해줌
  }, []);

전체 코드

export const ModalNow = () => {
  const { modalName } = useSelector((state: RootState) => state.ModalReducer);
  const findModal = ModalComponents.find((modal) => {
    return modal.type === modalName;
  });

  const MODAL_INIT_POS = 100;
  const [position, setPosition] = useState({
    x: MODAL_INIT_POS,
    y: MODAL_INIT_POS,
  });
  const moveModal = useDrag((params) => {
    setPosition({
      x: params.offset[0] + MODAL_INIT_POS,
      y: params.offset[1] + MODAL_INIT_POS,
    });
  }, []);

  const dispatch = useDispatch();
  const handleModal = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
    e.preventDefault();
    dispatch(closeModal(""));
  };
  return (
    <section
      style={{
        position: "relative",
        top: position.y,
        left: position.x,
        display: "inline-block",
      }}
      className=" modal-layout"
    >
      <div className="modal-top" {...moveModal()}>
        <img src={findModal?.img} alt={findModal?.desc} />
        {findModal?.name}
        <button onClick={handleModal}>X</button>
      </div>
      <div>{findModal?.component}</div>
    </section>
  );
};