IT & Mobile

코드 에디터 (아래에 실행영역)이 있는 것 처럼 아래 위 두개의 영역이 있고,
중간을 마우스로 드래그하면서  둘 사이의 비율을 조절하고 싶을때
다음과 같은 방식으로 가능하다. 

동작 원리

1. 상단 div의 높이 조절:
   • onMouseDown: 마우스 조절 시작을 감지.
   • onMouseMove: 마우스의 Y축 좌표(e.clientY)를 기준으로 height 상태를 업데이트.
   • onMouseUp: 조절 종료.
2. 하단 div의 크기 계산:
   • 상단 div의 높이를 기준으로 나머지 공간을 자동으로 차지하도록 flex 사용.
3. 유저 경험:
   • resizer 영역에서 마우스 커서가 변경(row-resize).
   • 조절 중 user-select: none을 사용해 텍스트 선택을 방지.

react 코드:

import React, { useState } from "react";
import "./ResizableDiv.css"; // 스타일 관리

const ResizableDiv = () => {
  const [height, setHeight] = useState(300); // 상단 div 초기 높이
  const [isResizing, setIsResizing] = useState(false); // 조절 상태 관리

  const handleMouseDown = () => {
    setIsResizing(true); // 마우스 드래그 시작
  };

  const handleMouseMove = (e) => {
    if (!isResizing) return;
    const newHeight = e.clientY; // 마우스 위치를 기준으로 높이 계산
    setHeight(newHeight);
  };

  const handleMouseUp = () => {
    setIsResizing(false); // 마우스 드래그 종료
  };

  return (
    <div
      className="container"
      onMouseMove={handleMouseMove}
      onMouseUp={handleMouseUp}
      onMouseLeave={handleMouseUp}
    >
      <div className="top-div" style={{ height: `${height}px` }}>
        상단 Div
      </div>
      <div className="resizer" onMouseDown={handleMouseDown}></div>
      <div className="bottom-div">하단 Div</div>
    </div>
  );
};

export default ResizableDiv;

CSS

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  user-select: none; /* 텍스트 선택 방지 */
}

.top-div {
  background-color: #f0f0f0;
  border-bottom: 2px solid #ccc;
  overflow: auto;
}

.resizer {
  height: 10px;
  background-color: #888;
  cursor: row-resize;
}

.bottom-div {
  background-color: #e0e0e0;
  flex: 1;
  overflow: auto;
}