코드 에디터 (아래에 실행영역)이 있는 것 처럼 아래 위 두개의 영역이 있고,
중간을 마우스로 드래그하면서 둘 사이의 비율을 조절하고 싶을때
다음과 같은 방식으로 가능하다.
동작 원리
- 상단 div의 높이 조절:
- onMouseDown: 마우스 조절 시작을 감지.
- onMouseMove: 마우스의 Y축 좌표(e.clientY)를 기준으로 height 상태를 업데이트.
- onMouseUp: 조절 종료.
- 하단 div의 크기 계산:
- 상단 div의 높이를 기준으로 나머지 공간을 자동으로 차지하도록 flex 사용.
- 유저 경험:
- 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;
}
