# 현재 구현 계획: 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. 검증 방법

1. `localhost:9771/pop/screens/4114` 접속 (iPhone SE 375px 기준)
2. 화면 아래로 스크롤 가능한지 확인
3. 맨 아래에 이미지(pop-text 5, 6)가 보이는지 확인
4. 프리뷰 모드(`?preview=true`)에서도 기존처럼 정상 동작하는지 확인
5. 컴포넌트가 적은 화면에서 흰색 배경이 화면 전체를 채우는지 확인

---

## 이전 완료 계획 (아카이브)

<details>
<summary>POP 뷰어 실제 컴포넌트 렌더링 (완료)</summary>

- [x] 뷰어 페이지에 레지스트리 초기화 import 추가
- [x] `renderActualComponent()` 실제 컴포넌트 렌더링으로 교체
- [x] 린트 검사 통과
- 브라우저 검증: 컴포넌트 표시 정상, 스크롤 문제 발견 -> 별도 수정

</details>

<details>
<summary>V2/V2 컴포넌트 설정 스키마 정비 (완료)</summary>

- [x] 레거시 컴포넌트 스키마 제거
- [x] V2 컴포넌트 overrides 스키마 정의 (16개)
- [x] V2 컴포넌트 overrides 스키마 정의 (9개)
- [x] componentConfig.ts 한 파일에서 통합 관리

</details>

<details>
<summary>화면 복제 기능 개선 (진행 중)</summary>

- [완료] DB 구조 개편 (menu_objid 의존성 제거)
- [완료] 복제 옵션 정리
- [완료] 화면 간 연결 복제 버그 수정
- [대기] 화면 간 연결 복제 테스트
- [대기] 제어관리 복제 테스트
- [대기] 추가 옵션 복제 테스트

</details>