diff --git a/apps/cs/app/(without-base-layout)/view-popup/[popupSn]/page.tsx b/apps/cs/app/(without-base-layout)/view-popup/[popupSn]/page.tsx new file mode 100644 index 000000000..fd6705fb7 --- /dev/null +++ b/apps/cs/app/(without-base-layout)/view-popup/[popupSn]/page.tsx @@ -0,0 +1,10 @@ +import { ViewPopupPage as VViewPopupPage } from "@/pages/popup"; + +export default async function ViewPopupPage({ + params, +}: { + params: Promise<{ popupSn: string }>; +}) { + const { popupSn } = await params; + return ; +} diff --git a/apps/cs/src/pages/popup/index.ts b/apps/cs/src/pages/popup/index.ts index a320768bd..571c01e24 100644 --- a/apps/cs/src/pages/popup/index.ts +++ b/apps/cs/src/pages/popup/index.ts @@ -1,3 +1,4 @@ export { CreatePage } from "./ui/create-page"; export { ModifyPage } from "./ui/modify-page"; export { PopupPage } from "./ui/popup-page"; +export { ViewPopupPage } from "./ui/view-popup-page"; diff --git a/apps/cs/src/pages/popup/model/preview-template.ts b/apps/cs/src/pages/popup/model/preview-template.ts deleted file mode 100644 index 79bfd8b31..000000000 --- a/apps/cs/src/pages/popup/model/preview-template.ts +++ /dev/null @@ -1,72 +0,0 @@ -export const previewTemplate = ( - popupSn: number, - popupTitle: string, - popupCn: string, -) => { - return ` - - - - - 팝업 미리보기 - - - -
-
-

${popupTitle || "팝업 미리보기"}

-
-
- 
${popupCn || ""}
-
-
- -
-
- -
-
-
- - - - -`; -}; diff --git a/apps/cs/src/pages/popup/model/table-columns.tsx b/apps/cs/src/pages/popup/model/table-columns.tsx index 04920f201..ce6da9072 100644 --- a/apps/cs/src/pages/popup/model/table-columns.tsx +++ b/apps/cs/src/pages/popup/model/table-columns.tsx @@ -3,7 +3,6 @@ import { type ColumnDef } from "@tanstack/react-table"; import { Button, Checkbox } from "@common/components"; import { PopupApi } from "../api/popup-service"; import type { Popup } from "./popup-interface"; -import { previewTemplate } from "./preview-template"; export const columns: ColumnDef[] = [ { @@ -83,17 +82,11 @@ const PreviewButton = ({ popupSn }: { popupSn: number }) => { const height = response.popupHgt; const left = response.popupHrzntltyPstn + window.screenX; const top = response.popupVtclPstn + window.screenY; - const popupWindow = window.open( + window.open( + `/view-popup/${popupSn}`, "", - `popup_preview_${popupSn}`, - `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,status=no,location=no,menubar=no`, + `width=${width},height=${height},left=${left},top=${top}`, ); - if (!popupWindow) return; - - popupWindow.document.write( - previewTemplate(popupSn, response.popupTtl, response.popupCn), - ); - popupWindow.document.close(); } catch (error) { console.error(error); } diff --git a/apps/cs/src/pages/popup/ui/view-popup-page.tsx b/apps/cs/src/pages/popup/ui/view-popup-page.tsx new file mode 100644 index 000000000..bcf7f8de3 --- /dev/null +++ b/apps/cs/src/pages/popup/ui/view-popup-page.tsx @@ -0,0 +1,74 @@ +"use client"; + +import { useQuery } from "@tanstack/react-query"; +import { Button, Checkbox, Label } from "@common/components"; +import { ENDPOINT } from "@/shared/config"; +import { PopupApi } from "../api/popup-service"; +import { useEffect, useRef } from "react"; +import { setCookie, getCookie } from "@/shared/lib/cookie"; + +function ViewPopupPage({ popupSn }: { popupSn: string }) { + const doNotShowTodayRef = useRef(false); + + const { data: popupInfo } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.POPUPS, popupSn], + queryFn: () => PopupApi.getPopupInfo(parseInt(popupSn)), + }); + + const handleClose = () => { + if (doNotShowTodayRef.current) { + const expireDate = new Date(); + expireDate.setHours(23, 59, 59, 999); + + setCookie(`cs-popup-hide-for-day-${popupSn}`, "true", { + expires: expireDate, + path: "/", + }); + } + + window.close(); + }; + + const handleCheckboxChange = (checked: boolean) => { + doNotShowTodayRef.current = checked; + }; + + useEffect(() => { + const cookieName = `cs-popup-hide-for-day-${popupSn}`; + const hasCookie = getCookie(cookieName); + + if (hasCookie) { + window.close(); + } + }, [popupSn]); + + return ( +
+
+
+

+ {popupInfo?.popupTtl} +

+
+
+
+
+
+ + +
+ +
+
+ ); +} + +export { ViewPopupPage }; diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx index 5f51d2c43..fb3026af2 100644 --- a/packages/common/components/src/ui/header/index.tsx +++ b/packages/common/components/src/ui/header/index.tsx @@ -1,16 +1,17 @@ import "./header.css"; -import { useEffect } from "react"; +import { useEffect, useCallback } from "react"; import { useQuery } from "@tanstack/react-query"; import { images } from "@common/assets"; import { getConfig } from "@common/config"; import { ENDPOINT } from "../../config"; -import { setCookie } from "../../lib"; +import { setCookie, getCookie } from "../../lib"; import { getPopupInfo, getPopupList, getSiteInfo, getUserInfo, + type PopupInfo, } from "../../api"; import { DropdownMenu, @@ -48,46 +49,45 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) { queryFn: () => getPopupList(), }); + const openPopup = useCallback(async (popup: PopupInfo) => { + try { + const cookieName = `cs-popup-hide-for-day-${popup.popupSn}`; + const hasCookie = getCookie(cookieName); + if (hasCookie) return; + + const response = await getPopupInfo(popup.popupSn); + if (!response) return; + + const width = response.popupWdth || 400; + const height = response.popupHgt || 300; + const left = (response.popupHrzntltyPstn || 0) + window.screenX; + const top = (response.popupVtclPstn || 0) + window.screenY; + + const popupWindow = window.open( + `/view-popup/${popup.popupSn}`, + "", + `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,status=no,location=no,menubar=no`, + ); + + if (popupWindow) { + popupWindow.focus(); + } + } catch (error) { + console.error(`Failed to open popup ${popup.popupSn}:`, error); + } + }, []); + useEffect(() => { if (!popupList?.content.length) return; - const openPopups = async () => { - for (const popup of popupList.content) { - try { - const cookieName = `cs-popup-hide-for-day-${popup.popupSn}`; - const cookies = document.cookie.split(";"); - const popupCookie = cookies.find((cookie) => - cookie.trim().startsWith(`${cookieName}=`), - ); - if (popupCookie) continue; + const timer = setTimeout(() => { + popupList.content.forEach((popup) => { + openPopup(popup); + }); + }, 500); - const response = await getPopupInfo(popup.popupSn); - if (!response) continue; - - const width = response.popupWdth; - const height = response.popupHgt; - const left = response.popupHrzntltyPstn + window.screenX; - const top = response.popupVtclPstn + window.screenY; - const popupWindow = window.open( - "", - `popup_preview_${popup.popupSn}`, - `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,status=no,location=no,menubar=no`, - ); - if (!popupWindow) continue; - - popupWindow.document.write( - previewTemplate(popup.popupSn, response.popupTtl, response.popupCn), - ); - popupWindow.document.close(); - } catch (error) { - console.error("Failed to open popup:", error); - continue; - } - } - }; - - openPopups(); - }, [popupList]); + return () => clearTimeout(timer); + }, [popupList, openPopup]); return (
@@ -129,76 +129,3 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
); } - -const previewTemplate = ( - popupSn: number, - popupTitle: string, - popupCn: string, -) => { - return ` - - - - - 팝업 미리보기 - - - -
-
-

${popupTitle || "팝업 미리보기"}

-
-
- 
${popupCn || ""}
-
-
- -
-
- -
-
-
- - - - -`; -};