5.4 KiB
현재 구현 계획: POP 뷰어 스크롤 수정
작성일: 2026-02-09 상태: 계획 완료, 코딩 대기 목적: 뷰어에서 화면 높이를 초과하는 컴포넌트가 잘리지 않고 스크롤 가능하도록 수정
1. 문제 요약
설계(디자이너)에서 컴포넌트를 아래로 배치하면 캔버스가 늘어나고 스크롤이 되지만,
뷰어(/pop/screens/4114)에서는 화면 높이를 초과하는 컴포넌트가 잘려서 안 보임.
근본 원인: CSS 컨테이너 구조가 스크롤을 차단
| # | 컨테이너 (라인) | 현재 클래스 | 문제 |
|---|---|---|---|
| 1 | 최외곽 (185) | h-screen ... overflow-hidden |
넘치는 콘텐츠를 잘라냄 |
| 2 | 컨텐츠 영역 (266) | 일반 모드에 overflow-auto 없음 |
스크롤 불가 |
| 3 | 백색 배경 (275) | 일반 모드에 min-h-full 없음 |
짧은 콘텐츠 시 배경 불완전 |
2. 수정 대상 파일 (1개)
frontend/app/(pop)/pop/screens/[screenId]/page.tsx
변경 유형: CSS 클래스 문자열 수정 3곳 (새 변수/함수/타입 추가 없음)
변경 1: 라인 185 - 최외곽 컨테이너
현재 코드:
<div className="h-screen bg-gray-100 flex flex-col overflow-hidden">
변경 코드:
<div className="h-screen bg-gray-100 flex flex-col">
변경 내용: overflow-hidden 제거
이유: 이 div는 프리뷰 툴바 + 컨텐츠의 flex 컨테이너 역할만 하면 됨. overflow-hidden이 자식의 스크롤까지 차단하므로 제거
변경 2: 라인 266 - 컨텐츠 영역
현재 코드:
<div className={`flex-1 flex flex-col ${isPreviewMode ? "py-4 overflow-auto items-center" : ""}`}>
변경 코드:
<div className={`flex-1 flex flex-col overflow-auto ${isPreviewMode ? "py-4 items-center" : ""}`}>
변경 내용: overflow-auto를 조건문 밖으로 이동 (공통 적용)
이유: 프리뷰/일반 모드 모두 스크롤이 필요함
변경 3: 라인 275 - 백색 배경 컨테이너
현재 코드:
className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-gray-800" : "w-full"}`}
변경 코드:
className={`bg-white transition-all duration-300 ${isPreviewMode ? "shadow-2xl rounded-3xl overflow-auto border-8 border-gray-800" : "w-full min-h-full"}`}
변경 내용: 일반 모드에 min-h-full 추가
이유: 컴포넌트가 적어 콘텐츠가 짧을 때에도 흰색 배경이 화면 전체를 채우도록 보장
3. 구현 순서 (의존성 기반)
| 순서 | 작업 | 라인 | 의존성 | 상태 |
|---|---|---|---|---|
| 1 | 라인 185: overflow-hidden 제거 |
185 | 없음 | [x] 완료 |
| 2 | 라인 266: overflow-auto 공통 적용 |
266 | 순서 1 | [x] 완료 |
| 3 | 라인 275: 일반 모드 min-h-full 추가 |
275 | 순서 2 | [x] 완료 |
| 4 | 린트 검사 | - | 순서 1~3 | [x] 통과 |
| 5 | 브라우저 검증 | - | 순서 4 | [ ] 대기 |
4. 사전 충돌 검사 결과
새로 추가할 변수/함수/타입: 없음
이번 수정은 기존 Tailwind CSS 클래스 문자열만 변경합니다. 새로운 식별자(변수, 함수, 타입)를 추가하지 않으므로 충돌 검사 대상이 없습니다.
5. 에러 함정 경고
함정 1: 순서 1만 하고 순서 2를 빼먹으면
overflow-hidden만 제거하면 콘텐츠가 화면 밖으로 넘쳐 보이지만 스크롤은 안 됨.
부모는 열었지만 자식에 스크롤 속성이 없는 상태.
함정 2: 순서 2만 하고 순서 1을 빼먹으면
자식에 overflow-auto를 넣어도 부모가 overflow-hidden으로 잘라내므로 여전히 스크롤 안 됨.
반드시 순서 1과 2를 함께 적용해야 함.
함정 3: 프리뷰 모드 영향
프리뷰 모드는 이미 자체적으로 overflow-auto가 있으므로 이 수정에 영향 없음.
overflow-auto가 중복 적용되어도 CSS에서 문제 없음.
6. 검증 방법
localhost:9771/pop/screens/4114접속 (iPhone SE 375px 기준)- 화면 아래로 스크롤 가능한지 확인
- 맨 아래에 이미지(pop-text 5, 6)가 보이는지 확인
- 프리뷰 모드(
?preview=true)에서도 기존처럼 정상 동작하는지 확인 - 컴포넌트가 적은 화면에서 흰색 배경이 화면 전체를 채우는지 확인
이전 완료 계획 (아카이브)
POP 뷰어 실제 컴포넌트 렌더링 (완료)
- 뷰어 페이지에 레지스트리 초기화 import 추가
renderActualComponent()실제 컴포넌트 렌더링으로 교체- 린트 검사 통과
- 브라우저 검증: 컴포넌트 표시 정상, 스크롤 문제 발견 -> 별도 수정
V2/V2 컴포넌트 설정 스키마 정비 (완료)
- 레거시 컴포넌트 스키마 제거
- V2 컴포넌트 overrides 스키마 정의 (16개)
- V2 컴포넌트 overrides 스키마 정의 (9개)
- componentConfig.ts 한 파일에서 통합 관리
화면 복제 기능 개선 (진행 중)
- [완료] DB 구조 개편 (menu_objid 의존성 제거)
- [완료] 복제 옵션 정리
- [완료] 화면 간 연결 복제 버그 수정
- [대기] 화면 간 연결 복제 테스트
- [대기] 제어관리 복제 테스트
- [대기] 추가 옵션 복제 테스트