// HTML 요소를 가져옵니다.
var imageElement = document.getElementById('touchImage');

// 초기 이미지 크기를 설정합니다.
var currentScale = 1;
var lastTouchX, lastTouchY;

// 터치 시작 이벤트 리스너를 추가합니다.
imageElement.addEventListener('touchstart', function(event) {
    if (event.touches.length === 1) {
        lastTouchX = event.touches[0].clientX;
        lastTouchY = event.touches[0].clientY;
    }
});

// 터치 이동 이벤트 리스너를 추가합니다.
imageElement.addEventListener('touchmove', function(event) {
    if (event.touches.length === 2) {
        // 두 손가락으로 터치하는 경우 이미지를 확대 또는 축소합니다.
        var currentX = event.touches[0].clientX;
        var currentY = event.touches[0].clientY;
        var distance = Math.sqrt((currentX - event.touches[1].clientX) ** 2 + (currentY - event.touches[1].clientY) ** 2);
        var scaleChange = distance / 100; // 이미지 크기를 조절하기 위한 요인을 계산합니다.

        // 이미지를 확대 또는 축소합니다.
        if (distance > 10) { // 일정 거리 이상에서만 확대/축소 작업을 수행합니다.
            if (currentScale * scaleChange >= 1 && currentScale * scaleChange <= 3) {
                currentScale *= scaleChange;
                imageElement.style.transform = 'scale(' + currentScale + ')';
            }
        }
    } else if (event.touches.length === 1) {
        // 한 손가락으로 터치하는 경우 이미지를 이동합니다.
        var touchDeltaX = event.touches[0].clientX - lastTouchX;
        var touchDeltaY = event.touches[0].clientY - lastTouchY;
        // 이미지의 위치를 조정합니다.
        imageElement.style.left = (imageElement.offsetLeft + touchDeltaX) + 'px';
        imageElement.style.top = (imageElement.offsetTop + touchDeltaY) + 'px';
        lastTouchX = event.touches[0].clientX;
        lastTouchY = event.touches[0].clientY;
    }
});

// 터치 종료 이벤트 리스너를 추가합니다.
imageElement.addEventListener('touchend', function(event) {
    // 작업 완료 후 필요한 정리 작업을 수행합니다.
});