해당 영역에서만 가로로 스와이프 스크롤 되는 컴포넌트

"use client";

import React, { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Mousewheel } from "swiper/modules";
import { GuestsevicePageData } from "@/app/components/guestservice/GuestsevicePageData";
import "swiper/css";

export default function ScrollSwiperTest({ selectedRoom, setSelectedRoom }) {
	const wrapperRef = useRef(null);
	const router = useRouter();
	const swiperRef = useRef(null);

	// 스와이퍼 호버 시 세로스크롤 방지
	useEffect(() => {
		const el = wrapperRef.current;
		if (!el) return;

		const preventScroll = (e) => {
			if (el.matches(":hover")) {
				e.preventDefault(); // Swiper 위에서는 body 세로 스크롤 막기
			}
		};

		window.addEventListener("wheel", preventScroll, { passive: false });
		return () => window.removeEventListener("wheel", preventScroll);
	}, []);

	useEffect(() => {
		if (swiperRef.current) {
			swiperRef.current.slideTo(selectedRoom - 1);
		}
	}, [selectedRoom]);

	return (
		<div ref={wrapperRef} className="h-[550px] w-full overflow-hidden lg:h-[900px]">
			<Swiper
				modules={[Mousewheel]}
				direction="horizontal"
				slidesPerView={1}
				mousewheel={{
					sensitivity: 1, // 휠 감도 (기본값 1, 작을수록 덜 민감)
					thresholdDelta: 0, // 이벤트 발생 임계값 (픽셀 단위, 기본 0)
					releaseOnEdges: false,
				}}
				speed={600}
				preloadImages={true}
				watchSlidesProgress={true}
				onSwiper={(swiper) => (swiperRef.current = swiper)}
				onSlideChange={(swiper) => setSelectedRoom(swiper.activeIndex + 1)}
				className="h-full"
			>
				{GuestsevicePageData.map((item) => (
					<SwiperSlide key={item.title}>
						<div className="relative mb-6 lg:mb-10 min-h-[240px] w-full min-w-[320px] lg:h-[540px] lg:max-w-[1200px]">
							{item.id === selectedRoom && (
								<Image
									src={item.image}
									alt={item.title}
									fill
									className="h-full w-full object-cover will-change-transform"
								/>
							)}
						</div>

						<div className="lg:px-50 p-0">
							<div className="mx-auto flex max-w-[800px] flex-1 flex-col gap-5">
								<h3 className="font-chap text-f20 text-themeBlack lg:text-f36">{item.title}</h3>

								<div className="grid grid-cols-2 gap-5 overflow-hidden">
									{item.items.map((sub) => (
										<div key={sub.semiTitle} className="flex flex-col gap-1">
											<p className="text-f14 font-bold text-themeBlack lg:text-f18">
												{sub.semiTitle}
											</p>
											<p className="whitespace-pre-line text-f12 font-light text-themeBlack lg:text-f16">
												{sub.content}
											</p>
										</div>
									))}
								</div>

								{item.showBtn && (
									<div className="grid w-full grid-cols-2">
										<button
											onClick={() => router.push(item.path)}
											className="col-start-2 hidden h-[40px] w-[80px] rounded-[5px] bg-themeBlack p-1 text-f12 text-themeWhite lg:block lg:text-f14"
										>
											예약하기
										</button>
										<button
											onClick={() => router.push(item.path)}
											className="col-start-2 block h-[34px] w-[90px] rounded-[5px] bg-themeBlack p-1 text-f12 text-themeWhite lg:hidden lg:h-[40px] lg:w-[80px] lg:text-f14"
										>
											방문 예약하기
										</button>
									</div>
								)}
							</div>
						</div>
					</SwiperSlide>
				))}
			</Swiper>
		</div>
	);
}