diff --git a/apps/web/src/assets/svgs/common/ic_letter.svg b/apps/web/src/assets/svgs/common/ic_letter.svg new file mode 100644 index 00000000..38580413 --- /dev/null +++ b/apps/web/src/assets/svgs/common/ic_letter.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/web/src/assets/svgs/common/index.ts b/apps/web/src/assets/svgs/common/index.ts index 850af9d0..53f97b2f 100644 --- a/apps/web/src/assets/svgs/common/index.ts +++ b/apps/web/src/assets/svgs/common/index.ts @@ -43,3 +43,4 @@ export { default as ic_info_transparent } from "./ic_info_transparent.svg?react" export { default as ic_apple_logo } from "./ic_apple_logo.svg?react"; export { default as ic_twoMan_blue } from "./ic_twoMan_blue.svg?react"; export { default as ic_minus } from "./ic_minus.svg?react"; +export { default as ic_letter } from "./ic_letter.svg?react"; diff --git a/apps/web/src/layout/GlobalLayout.tsx b/apps/web/src/layout/GlobalLayout.tsx index 6f53e5da..4e84e3bd 100644 --- a/apps/web/src/layout/GlobalLayout.tsx +++ b/apps/web/src/layout/GlobalLayout.tsx @@ -1,21 +1,35 @@ import { css } from "@emotion/react"; import Hotjar from "@hotjar/browser"; +import Cookies from "js-cookie"; import { useEffect } from "react"; import { Outlet } from "react-router-dom"; +import { BottomSheet } from "@/component/BottomSheet"; +import { ButtonProvider } from "@/component/common/button"; +import { Icon } from "@/component/common/Icon"; import { Modal } from "@/component/common/Modal"; +import { Spacing } from "@/component/common/Spacing"; +import { Typography } from "@/component/common/typography"; +import { useBottomSheet } from "@/hooks/useBottomSheet"; +import { useToast } from "@/hooks/useToast"; import { useBridge } from "@/lib/provider/bridge-provider"; const siteId = import.meta.env.VITE_HOTJAR_KEY as number; const hotjarVersion = import.meta.env.VITE_HOTJAR_VERSION as number; +const SHEET_ID = "ANNOUNCEMENT"; +const SHOW_ANNOUNCEMENT_KEY = "announce-9-12-checked"; + export default function GlobalLayout() { const { safeAreaHeight } = useBridge(); + const { openBottomSheet, closeBottomSheet } = useBottomSheet(); useEffect(() => { Hotjar.init(siteId, hotjarVersion); + openBottomSheet({ id: SHEET_ID }); }, []); + const hideAnnouncement = Cookies.get(SHOW_ANNOUNCEMENT_KEY); return (
+ {!hideAnnouncement && ( + { + Cookies.set(SHOW_ANNOUNCEMENT_KEY, "true"); + closeBottomSheet(); + }} + /> + } + sheetHeight={620} + /> + )}
); } + +const Announcement = ({ onConfirm }: { onConfirm: () => void }) => { + const { toast } = useToast(); + const EMAIL = "gentlemonster77@likelion.org"; + + return ( +
+
+ + + {"데이터 손실 안내"} + +
+
+ + {`안녕하세요. Layer 입니다. + +현재 시스템 오류로 인해 일부 데이터가 손실되는 +문제가 발생하였습니다. 이에 따라 회원님의 +일부 정보가 정상적으로 표시되지 않거나 삭제될 수 +있음을 안내드립니다. + +저희는 최대한 빠르게 복구 작업을 진행 중이며, +일부 데이터는 복구가 어려울 수 있다는 점 양해 부탁드립니다. 향후 이러한 문제가 재발하지 않도록 +철저한 대책을 마련하겠습니다. + +이용에 불편을 드린 점 진심으로 사과드리며, +추가 문의 사항은 [고객센터 연락처 또는 이메일]로 +연락 주시기 바랍니다. + +고객센터`} + +
+ + 이메일 : + + { + try { + await navigator.clipboard.writeText(EMAIL); + toast.success("이메일이 클립보드에 복사되었습니다"); + } catch (e) { + toast.success("다시 시도해주세요"); + } + }} + > + {EMAIL} + +
+ + + 감사합니다. + +
+ + 확인 +
+ ); +};