Skip to content

[Feat] - 바텀 시트 포지션 정리 / 해당 컴포넌트 공통 훅으로 분리 #387

@kyungchan3007

Description

@kyungchan3007

📄 이슈 내용

  • 바텀 시트 포지션 정리 / 해당 컴포넌트 공통 훅으로 분리

📝 상세 내용

homeFullSheet.tsx

HomeSheet를 absolute 시트 구조로 유지하면서, createPortal + usePortalTarget("mobile-overlay-root") 패턴으로 바꿨습니다.
useScrollLock({ locked: open, anchorRef })를 붙여 시트 열릴 때 배경 스크롤 잠금도 유지되게 정리했습니다.

infraSheet.tsx

InfraSheet도 HomeSheet와 동일하게 createPortal + usePortalTarget("mobile-overlay-root")로 렌더 위치를 분리했습니다.
absolute 포지션 유지, useScrollLock 적용, overlay/sheet에 pointer-events-auto를 명시했습니다.

useScrollLock.ts

공통 스크롤 잠금 훅 추가했습니다.
locked가 true일 때 스크롤 가능한 조상과 html/body overflow를 잠그고, 해제 시 이전 상태로 복구하도록 구현했습니다.

useScrollLock/index.ts

useScrollLock 배럴 export 추가했습니다.

usePortalTarget.ts

document.getElementById(targetId) 조회 로직을 공통 훅으로 분리했습니다.
const portalRoot = usePortalTarget("mobile-overlay-root") 형태로 재사용 가능하게 만들었습니다.

usePortalTarget/index.ts

usePortalTarget 배럴 export 추가했습니다.

roomTypeDetail.tsx

"use client" 오타 수정, 일부 깨진 태그/문구 정리, 레이아웃 안정화를 위해 min-h-0 포함 형태로 정리했습니다.

globalRender.tsx

모바일 프레임 내부에 mobile-overlay-root를 추가하려고 작업했는데, 중간에 인코딩/문자 깨짐 이력이 있어 이 파일은 내일 시작 전에 상태 점검이 필요합니다.

✅ 체크리스트

  • 빌드 테스트
  • 스크롤 테스트
  • 시트별 포지션 테스트

Metadata

Metadata

Assignees

Labels

FeatFeature 작업 상황을 입력해주세요.StyleUI/UX 컴포넌트 스타일 추가 및 변경 관련(글로벌 포함)

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions