From 8ee10e411e2cdef802b3c1d154112e98abd01732 Mon Sep 17 00:00:00 2001 From: SeongHyun Kim Date: Mon, 16 Mar 2026 12:09:37 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20POP=20=EB=B7=B0=EC=96=B4=20=ED=97=A4?= =?UTF-8?q?=EB=8D=94=20=EC=A0=9C=EA=B1=B0=20+=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B4=EB=84=88-=EB=B7=B0=EC=96=B4=20=EA=B7=B8=EB=A6=AC?= =?UTF-8?q?=EB=93=9C=20=EC=B9=B8=20=EC=88=98=20=EB=B6=88=EC=9D=BC=EC=B9=98?= =?UTF-8?q?=20=EC=88=98=EC=A0=95=20POP=20=ED=99=94=EB=A9=B4=20=EC=83=81?= =?UTF-8?q?=EB=8B=A8=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EB=B0=94(POP=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C/PC=20?= =?UTF-8?q?=EB=AA=A8=EB=93=9C=20=EC=A0=84=ED=99=98)=EB=A5=BC=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0=ED=95=98=EA=B3=A0,=20=EB=94=94=EC=9E=90=EC=9D=B4?= =?UTF-8?q?=EB=84=88=EC=99=80=20=EB=B7=B0=EC=96=B4=EC=9D=98=20=EA=B7=B8?= =?UTF-8?q?=EB=A6=AC=EB=93=9C=20=EC=B9=B8=20=EC=88=98=EA=B0=80=20=EB=8B=AC?= =?UTF-8?q?=EB=9D=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=B0?= =?UTF-8?q?=EC=B9=98=EA=B0=80=20=EC=96=B4=EA=B8=8B=EB=82=98=EB=8A=94=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=9C?= =?UTF-8?q?=EB=8B=A4.=20[=ED=97=A4=EB=8D=94=20=EC=A0=9C=EA=B1=B0]=20-=20"P?= =?UTF-8?q?OP=20=EB=8C=80=EC=8B=9C=EB=B3=B4=EB=93=9C=20|=20=ED=99=94?= =?UTF-8?q?=EB=A9=B4=EC=9D=B4=EB=A6=84=20|=20PC=20=EB=AA=A8=EB=93=9C"=20?= =?UTF-8?q?=EB=B0=94=20=EC=82=AD=EC=A0=9C=20(pop-profile=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A1=9C=20=EB=8C=80=EC=B2=B4)=20-?= =?UTF-8?q?=20=EB=AF=B8=EC=82=AC=EC=9A=A9=20import=20=EC=A0=95=EB=A6=AC=20?= =?UTF-8?q?(LayoutGrid,=20Monitor,=20GAP=5FPRESETS,=20GRID=5FBREAKPOINTS)?= =?UTF-8?q?=20[=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EB=B6=88=EC=9D=BC=EC=B9=98?= =?UTF-8?q?=20=EC=88=98=EC=A0=95]=20-=20=EB=AC=B8=EC=A0=9C:=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B4=EB=84=88=20=ED=83=9C=EB=B8=94=EB=A6=BF=20?= =?UTF-8?q?=EA=B0=80=EB=A1=9C=3D1024px(38=EC=B9=B8),=20=EB=B7=B0=EC=96=B4?= =?UTF-8?q?=20window.innerWidth=3D1366px(52=EC=B9=B8)=20-=20=EC=88=98?= =?UTF-8?q?=EC=A0=95:=20=EB=B7=B0=EC=96=B4=EC=97=90=EC=84=9C=20=EB=AA=A8?= =?UTF-8?q?=EB=93=9C=EB=B3=84=20=EA=B8=B0=EC=A4=80=20=EB=84=88=EB=B9=84=20?= =?UTF-8?q?=EA=B3=A0=EC=A0=95=20(tablet=5Flandscape=3D1024,=20tablet=5Fpor?= =?UTF-8?q?trait=3D820,=20=20=20mobile=5Flandscape=3D600,=20mobile=5Fportr?= =?UTF-8?q?ait=3D375)=20-=20rawWidth=EB=8A=94=20=EB=AA=A8=EB=93=9C=20?= =?UTF-8?q?=EA=B0=90=EC=A7=80=20=EC=9A=A9=EB=8F=84=EB=A1=9C=EB=A7=8C=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9,=20viewportWidth=EB=8A=94=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B4=EB=84=88=EC=99=80=20=EB=8F=99=EC=9D=BC?= =?UTF-8?q?=ED=95=9C=20=EA=B8=B0=EC=A4=80=20=EB=84=88=EB=B9=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../app/(pop)/pop/screens/[screenId]/page.tsx | 57 ++++++++----------- 1 file changed, 24 insertions(+), 33 deletions(-) diff --git a/frontend/app/(pop)/pop/screens/[screenId]/page.tsx b/frontend/app/(pop)/pop/screens/[screenId]/page.tsx index c7933033..dee674f1 100644 --- a/frontend/app/(pop)/pop/screens/[screenId]/page.tsx +++ b/frontend/app/(pop)/pop/screens/[screenId]/page.tsx @@ -3,7 +3,7 @@ import React, { useEffect, useState } from "react"; import { useParams, useSearchParams } from "next/navigation"; import { Button } from "@/components/ui/button"; -import { Loader2, ArrowLeft, Smartphone, Tablet, RotateCcw, RotateCw, LayoutGrid, Monitor } from "lucide-react"; +import { Loader2, ArrowLeft, Smartphone, Tablet, RotateCcw, RotateCw } from "lucide-react"; import { screenApi } from "@/lib/api/screen"; import { ScreenDefinition } from "@/types/screen"; import { useRouter } from "next/navigation"; @@ -21,8 +21,6 @@ import { GridMode, isPopLayout, createEmptyLayout, - GAP_PRESETS, - GRID_BREAKPOINTS, BLOCK_GAP, BLOCK_PADDING, detectGridMode, @@ -86,26 +84,32 @@ function PopScreenViewPage() { const [loading, setLoading] = useState(true); const [error, setError] = useState(null); - // 뷰포트 너비 (클라이언트 사이드에서만 계산, 최대 1366px) - const [viewportWidth, setViewportWidth] = useState(1024); // 기본값: 태블릿 가로 - - // 모드 결정: - // - 프리뷰 모드: 수동 선택한 device/orientation 사용 - // - 일반 모드: 화면 너비 기준으로 자동 결정 (GRID_BREAKPOINTS와 일치) - const currentModeKey = isPreviewMode - ? getModeKey(deviceType, isLandscape) - : detectGridMode(viewportWidth); + // 실제 브라우저 너비 (모드 감지용) + const [rawWidth, setRawWidth] = useState(1024); useEffect(() => { - const updateViewportWidth = () => { - setViewportWidth(Math.min(window.innerWidth, 1366)); - }; - - updateViewportWidth(); - window.addEventListener("resize", updateViewportWidth); - return () => window.removeEventListener("resize", updateViewportWidth); + const updateWidth = () => setRawWidth(window.innerWidth); + updateWidth(); + window.addEventListener("resize", updateWidth); + return () => window.removeEventListener("resize", updateWidth); }, []); + // 모드 결정 + const currentModeKey = isPreviewMode + ? getModeKey(deviceType, isLandscape) + : detectGridMode(rawWidth); + + // 디자이너와 동일한 기준 너비 사용 (모드별 고정 너비) + const MODE_REFERENCE_WIDTH: Record = { + mobile_portrait: 375, + mobile_landscape: 600, + tablet_portrait: 820, + tablet_landscape: 1024, + }; + const viewportWidth = isPreviewMode + ? DEVICE_SIZES[deviceType][isLandscape ? "landscape" : "portrait"].width + : MODE_REFERENCE_WIDTH[currentModeKey]; + // 화면 및 POP 레이아웃 로드 useEffect(() => { const loadScreen = async () => { @@ -288,20 +292,7 @@ function PopScreenViewPage() { )} - {/* 일반 모드 네비게이션 바 */} - {!isPreviewMode && ( -
- - {screen.screenName} - -
- )} + {/* 일반 모드 네비게이션 바 제거 (프로필 컴포넌트에서 PC 모드 전환 가능) */} {/* POP 화면 컨텐츠 */}