From d60bf27778fcd7a84b8aa0dcf5c5acbdd0832248 Mon Sep 17 00:00:00 2001
From: ysCha <yscha@interplug.co.kr>
Date: Thu, 14 May 2026 14:49:41 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/ModalTracker.jsx | 88 ++++++++++++++++++++++++++
 src/components/common/PageTracker.jsx  | 28 ++++++++
 2 files changed, 116 insertions(+)
 create mode 100644 src/components/common/ModalTracker.jsx
 create mode 100644 src/components/common/PageTracker.jsx

diff --git a/src/components/common/ModalTracker.jsx b/src/components/common/ModalTracker.jsx
new file mode 100644
index 00000000..4ea2957c
--- /dev/null
+++ b/src/components/common/ModalTracker.jsx
@@ -0,0 +1,88 @@
+'use client'
+
+// [MODAL-TRACKER 2026-05-14] QModal / PopupManager / contextPopup 의 atom 을 구독해
+// 모달·팝업이 열리고 닫힐 때 콘솔에 컴포넌트명/id 를 출력. 모달 컴포넌트 개별 수정 없음.
+import { useEffect, useRef } from 'react'
+import { useRecoilValue } from 'recoil'
+import { modalState, modalContent } from '@/store/modalAtom'
+import { popupState, contextPopupState } from '@/store/popupAtom'
+import { logger } from '@/util/logger'
+
+const TRACK_ENABLED = process.env.NEXT_PUBLIC_ENABLE_LOGGING === 'true'
+
+const BADGE_OPEN = 'background:#7b1fa2;color:#fff;padding:2px 8px;border-radius:3px;font-weight:bold'
+const BADGE_CLOSE = 'background:#9e9e9e;color:#fff;padding:2px 8px;border-radius:3px'
+const BADGE_POPUP = 'background:#00897b;color:#fff;padding:2px 8px;border-radius:3px;font-weight:bold'
+const BADGE_CTX = 'background:#ef6c00;color:#fff;padding:2px 8px;border-radius:3px;font-weight:bold'
+
+function describeNode(node) {
+  if (!node) return 'null'
+  if (Array.isArray(node)) return `Array(${node.length})`
+  const t = node?.type
+  if (!t) return typeof node
+  return typeof t === 'string' ? t : t.displayName || t.name || 'Anonymous'
+}
+
+export default function ModalTracker() {
+  const open = useRecoilValue(modalState)
+  const content = useRecoilValue(modalContent)
+  const popup = useRecoilValue(popupState)
+  const ctx = useRecoilValue(contextPopupState)
+
+  const firstModal = useRef(true)
+  const prevPopupIds = useRef({ config: [], other: [] })
+  const prevCtx = useRef(null)
+
+  // QModal open/close
+  useEffect(() => {
+    if (!TRACK_ENABLED) return
+    if (firstModal.current) {
+      firstModal.current = false
+      return
+    }
+    if (open) {
+      logger.info(`%c[MODAL OPEN] ${describeNode(content)}`, BADGE_OPEN)
+    } else {
+      logger.info(`%c[MODAL CLOSE]`, BADGE_CLOSE)
+    }
+  }, [open])
+
+  // PopupManager push/pop (config + other 두 버킷)
+  useEffect(() => {
+    if (!TRACK_ENABLED) return
+    const prev = prevPopupIds.current
+    for (const bucket of ['config', 'other']) {
+      const cur = popup?.[bucket] || []
+      const curIds = cur.map((p) => p.id)
+      const prevIds = prev[bucket] || []
+      curIds
+        .filter((id) => !prevIds.includes(id))
+        .forEach((id) => {
+          const item = cur.find((p) => p.id === id)
+          logger.info(`%c[POPUP+ ${bucket}] ${describeNode(item?.component)} (id=${id})`, BADGE_POPUP)
+        })
+      prevIds
+        .filter((id) => !curIds.includes(id))
+        .forEach((id) => {
+          logger.info(`%c[POPUP- ${bucket}] (id=${id})`, BADGE_CLOSE)
+        })
+    }
+    prevPopupIds.current = {
+      config: (popup?.config || []).map((p) => p.id),
+      other: (popup?.other || []).map((p) => p.id),
+    }
+  }, [popup])
+
+  // contextPopup (우클릭 메뉴 등)
+  useEffect(() => {
+    if (!TRACK_ENABLED) return
+    if (ctx && !prevCtx.current) {
+      logger.info(`%c[CTX POPUP+] ${describeNode(ctx)}`, BADGE_CTX)
+    } else if (!ctx && prevCtx.current) {
+      logger.info(`%c[CTX POPUP-]`, BADGE_CLOSE)
+    }
+    prevCtx.current = ctx
+  }, [ctx])
+
+  return null
+}
diff --git a/src/components/common/PageTracker.jsx b/src/components/common/PageTracker.jsx
new file mode 100644
index 00000000..19eb99d9
--- /dev/null
+++ b/src/components/common/PageTracker.jsx
@@ -0,0 +1,28 @@
+'use client'
+
+// [PAGE-TRACKER 2026-05-14] 라우트 변경마다 콘솔 + document.title 에 현재 경로 표시.
+// production 에서는 NEXT_PUBLIC_ENABLE_LOGGING=false 라 logger.info 가 무음.
+import { useEffect } from 'react'
+import { usePathname } from 'next/navigation'
+import { logger } from '@/util/logger'
+
+const TRACK_ENABLED = process.env.NEXT_PUBLIC_ENABLE_LOGGING === 'true'
+
+export default function PageTracker() {
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (!TRACK_ENABLED || !pathname) return
+
+    logger.info(
+      `%c[PAGE] ${pathname}`,
+      'background:#1e88e5;color:#fff;padding:2px 8px;border-radius:3px;font-weight:bold',
+    )
+
+    if (typeof document !== 'undefined') {
+      document.title = `${pathname} · HANASYS DESIGN`
+    }
+  }, [pathname])
+
+  return null
+}
-- 
2.47.2