diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx
index 52028da32..eaf8cc8e5 100644
--- a/packages/common/components/src/ui/header/index.tsx
+++ b/packages/common/components/src/ui/header/index.tsx
@@ -13,16 +13,12 @@ import {
getUserInfo,
type Popup,
} from "../../api";
-import {
- DropdownMenu,
- DropdownMenuTrigger,
- DropdownMenuContent,
- DropdownMenuItem,
-} from "../dropdown-menu";
import { Button } from "../button";
-import { SidebarTrigger } from "../sidebar";
import { Skeleton } from "../skeleton";
+import { SidebarTrigger } from "../sidebar";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
import { SearchForm } from "./search-form";
+import { NoticePopover } from "./notice-popover";
const appConfig = getConfig();
const siteId = appConfig.SITE_ID ?? "";
@@ -140,30 +136,28 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
{mounted ? (
isLoggedIn && (
-
-
-
-
- 프로필 설정
-
-
최종접속일
-
{userInfo?.lastLoginDate}
-
+
+
+
+
+
)
) : (
diff --git a/packages/common/components/src/ui/header/notice-popover.tsx b/packages/common/components/src/ui/header/notice-popover.tsx
new file mode 100644
index 000000000..6ee35371b
--- /dev/null
+++ b/packages/common/components/src/ui/header/notice-popover.tsx
@@ -0,0 +1,141 @@
+import { useEffect, useState } from "react";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { getConfig } from "@common/config";
+import { ENDPOINT } from "../../config";
+import { cn, getCookie } from "../../lib";
+import {
+ getNoticeUserList,
+ getUnreadNoticeCount,
+ readNotice,
+} from "../../api/notice-user";
+import { Label } from "../label";
+import { Badge } from "../badge";
+import { Button } from "../button";
+import { Checkbox } from "../checkbox";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+
+import dayjs from "dayjs";
+import relativeTime from "dayjs/plugin/relativeTime";
+import "dayjs/locale/ko";
+
+dayjs.extend(relativeTime);
+dayjs.locale("ko");
+
+const appConfig = getConfig();
+const userId = getCookie(appConfig.AUTH_USER_ID ?? "");
+
+export function NoticePopover() {
+ const queryClient = useQueryClient();
+
+ const [open, setOpen] = useState(false);
+ const [selectedNoticeIds, setSelectedNoticeIds] = useState
([]);
+
+ const { data: noticeUserList } = useQuery({
+ queryKey: [ENDPOINT.CMS_SERVICE.NOTICE_USER],
+ queryFn: () => getNoticeUserList(userId!),
+ enabled: !!userId,
+ });
+
+ const { data: unreadNoticeCount } = useQuery({
+ queryKey: [ENDPOINT.CMS_SERVICE.NOTICE],
+ queryFn: () => getUnreadNoticeCount(userId!),
+ enabled: !!userId,
+ });
+
+ const handleSelectNotice = (notiId: number) => {
+ setSelectedNoticeIds((prevIds) => {
+ if (prevIds.includes(notiId)) {
+ return prevIds.filter((id) => id !== notiId);
+ } else {
+ return [...prevIds, notiId];
+ }
+ });
+ };
+
+ const handleSelectAll = () => {
+ if (noticeUserList?.content) {
+ if (selectedNoticeIds.length === noticeUserList.content.length) {
+ setSelectedNoticeIds([]);
+ } else {
+ const allIds = noticeUserList.content.map((item) => item.notiId);
+ setSelectedNoticeIds(allIds);
+ }
+ }
+ };
+
+ const handleReadNotice = async () => {
+ if (selectedNoticeIds.length === 0) return;
+ try {
+ await Promise.all(selectedNoticeIds.map((notiId) => readNotice(notiId)));
+ await queryClient.invalidateQueries({
+ queryKey: [ENDPOINT.CMS_SERVICE.NOTICE_USER],
+ });
+ await queryClient.invalidateQueries({
+ queryKey: [ENDPOINT.CMS_SERVICE.NOTICE],
+ });
+ setSelectedNoticeIds([]);
+ } catch (error) {
+ console.error("알림 읽음 처리 중 오류 발생:", error);
+ }
+ };
+
+ const isAllSelected = noticeUserList?.content
+ ? selectedNoticeIds.length === noticeUserList.content.length &&
+ noticeUserList.content.length > 0
+ : false;
+
+ useEffect(() => {
+ if (open) setSelectedNoticeIds([]);
+ }, [open]);
+
+ return (
+
+
+
+ 알림 {unreadNoticeCount ?? 0}
+
+
+
+
+
+
+
+
+ {noticeUserList?.content?.map((item) => (
+ -
+ handleSelectNotice(item.notiId)}
+ />
+
+
{item.notiType}
+
{item.notiTtl}
+
+ {dayjs(item.regDt).fromNow()}
+
+
+ ))}
+
+ setOpen(false)}
+ >
+
+
+
+
+ );
+}
diff --git a/packages/common/components/src/ui/layout/index.ts b/packages/common/components/src/ui/layout/index.ts
index 30c069b90..100f53453 100644
--- a/packages/common/components/src/ui/layout/index.ts
+++ b/packages/common/components/src/ui/layout/index.ts
@@ -1,2 +1,3 @@
export { BaseLayout } from "./base";
export { VBaseLayout } from "./vbase";
+export { NoFooterLayout } from "./nofooter";
\ No newline at end of file
diff --git a/packages/common/components/src/ui/layout/nofooter.tsx b/packages/common/components/src/ui/layout/nofooter.tsx
new file mode 100644
index 000000000..2f398ec57
--- /dev/null
+++ b/packages/common/components/src/ui/layout/nofooter.tsx
@@ -0,0 +1,44 @@
+import type { QueryClient } from "@tanstack/react-query";
+import { QueryProvider } from "../../provider/query-provider";
+import { PopupProvider } from "../../provider/popup-provider";
+import { ClientIpGuard } from "../../lib/client-ip-guard";
+import type { MenuItem } from "../../api";
+import { SidebarProvider } from "../sidebar";
+import { LNB } from "../lnb";
+import { Header } from "../header";
+import "./common.css";
+
+export function NoFooterLayout({
+ children,
+ queryClient,
+ currentPath,
+ handleMenuClick,
+}: {
+ children: React.ReactNode;
+ queryClient?: QueryClient;
+ currentPath?: string;
+ handleMenuClick?: (item: MenuItem) => void;
+}) {
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}