diff --git a/apps/cs/src/pages/popup/api/popup-service.ts b/apps/cs/src/pages/popup/api/popup-service.ts index d32c7c0cc..b82d5f473 100644 --- a/apps/cs/src/pages/popup/api/popup-service.ts +++ b/apps/cs/src/pages/popup/api/popup-service.ts @@ -12,26 +12,29 @@ import { import { client } from "@/shared/api"; export class PopupApiService implements PopupService { - async getPopupList(params: PopupParams): Promise { + public async getPopupList(params: PopupParams): Promise { const response = await client.get(ENDPOINT.CMS_SERVICE.POPUPS, { params, }); return response.data; } - async getPopupInfo(popupSn: number): Promise { + public async getPopupInfo(popupSn: number): Promise { const response = await client.get( `${ENDPOINT.CMS_SERVICE.POPUPS}/${popupSn}`, ); return response.data; } - async createPopup(data: PopupFormData): Promise { + public async createPopup(data: PopupFormData): Promise { const validatedData = popupFormSchema.parse(data); await client.post(ENDPOINT.CMS_SERVICE.POPUPS, validatedData); } - async updatePopup(popupSn: number, data: PopupUpdateFormData): Promise { + public async updatePopup( + popupSn: number, + data: PopupUpdateFormData, + ): Promise { const validatedData = popupUpdateFormSchema.parse(data); await client.put( `${ENDPOINT.CMS_SERVICE.POPUPS}/${popupSn}`, diff --git a/apps/cs/src/pages/popup/model/preview-template.ts b/apps/cs/src/pages/popup/model/preview-template.ts new file mode 100644 index 000000000..79bfd8b31 --- /dev/null +++ b/apps/cs/src/pages/popup/model/preview-template.ts @@ -0,0 +1,72 @@ +export const previewTemplate = ( + popupSn: number, + popupTitle: string, + popupCn: string, +) => { + return ` + + + + + 팝업 미리보기 + + + + + + + + +`; +}; diff --git a/apps/cs/src/pages/popup/model/table-columns.tsx b/apps/cs/src/pages/popup/model/table-columns.tsx index b223f689b..09c291c84 100644 --- a/apps/cs/src/pages/popup/model/table-columns.tsx +++ b/apps/cs/src/pages/popup/model/table-columns.tsx @@ -1,7 +1,9 @@ import dayjs from "dayjs"; 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 { Checkbox } from "@common/components"; +import { previewTemplate } from "./preview-template"; export const columns: ColumnDef[] = [ { @@ -62,4 +64,51 @@ export const columns: ColumnDef[] = [ accessorKey: "mdfrNm", header: "최종수정자", }, + { + id: "preview", + header: "미리보기", + cell: ({ row }) => , + }, ]; + +const PreviewButton = ({ popupSn }: { popupSn: number }) => { + const handlePreview = async (e: React.MouseEvent) => { + e.stopPropagation(); + + try { + const cookieName = `cs-popup-hide-for-day-${popupSn}`; + const cookies = document.cookie.split(";"); + const popupCookie = cookies.find((cookie) => + cookie.trim().startsWith(`${cookieName}=`), + ); + if (popupCookie) return; + + const response = await PopupApi.getPopupInfo(popupSn); + if (!response) return; + + 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_${popupSn}`, + `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes,status=no,location=no,menubar=no`, + ); + if (!popupWindow) return; + + popupWindow.document.write( + previewTemplate(popupSn, response.popupTtl, response.popupCn), + ); + popupWindow.document.close(); + } catch (error) { + console.error(error); + } + }; + + return ( + + ); +};