diff --git a/packages/common/components/src/api/menu.ts b/packages/common/components/src/api/menu.ts index 8d58a3499..82d48815f 100644 --- a/packages/common/components/src/api/menu.ts +++ b/packages/common/components/src/api/menu.ts @@ -1,5 +1,6 @@ import { getApiClient } from "./client"; import { ENDPOINT } from "../config"; +import { getConfig } from "@common/config"; export interface MenuItem { menuCd: number; @@ -26,6 +27,8 @@ export interface TreeMenu extends MenuItem { } const client = getApiClient(); +const { PROXY_HOST } = getConfig(); +const BASE_URL = `${PROXY_HOST}/server`; export const getMenuList = async (siteId: string) => { const response = await client.get( @@ -40,3 +43,18 @@ export const getPreviewTreeMenuList = async (siteId: string) => { ); return response.data; }; + +export const getAnonymouseMenuList = async ( + siteId: string, +): Promise => { + const response = await fetch( + `${BASE_URL}/${ENDPOINT.CMS_SERVICE.MENU_ANONYMOUS}/user/${siteId}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }, + ); + return response.json(); +}; diff --git a/packages/common/components/src/api/site.ts b/packages/common/components/src/api/site.ts index 8d8109571..da4de293f 100644 --- a/packages/common/components/src/api/site.ts +++ b/packages/common/components/src/api/site.ts @@ -1,4 +1,4 @@ -import { getApiClient } from "./client"; +import { getConfig } from "@common/config"; import { ENDPOINT } from "../config"; export interface SiteInfo { @@ -23,11 +23,18 @@ export interface SiteInfo { mdfrNm: string; } -const client = getApiClient(); +const { PROXY_HOST } = getConfig(); +const BASE_URL = `${PROXY_HOST}/server`; export const getSiteInfo = async (siteId: string) => { - const response = await client.get( - `${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`, + const response = await fetch( + `${BASE_URL}/${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`, + { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }, ); - return response.data; + return response.json(); }; diff --git a/packages/common/components/src/config/api.ts b/packages/common/components/src/config/api.ts index 0ead6b0bc..6772182fb 100644 --- a/packages/common/components/src/config/api.ts +++ b/packages/common/components/src/config/api.ts @@ -2,6 +2,7 @@ export const ENDPOINT = { CMS_SERVICE: { MENUS: "/cms-service/api/v1/menus", MENU_ROLES: "/cms-service/api/v1/menu-roles", + MENU_ANONYMOUS: "/cms-service/api/v1/menu/anonymous", SITES: "/cms-service/api/v1/sites", POPUPS: "/cms-service/api/v1/popups", IPS: "/cms-service/api/v1/site-ips", diff --git a/packages/common/components/src/ui/header/index.tsx b/packages/common/components/src/ui/header/index.tsx index 433435009..f7637b7f0 100644 --- a/packages/common/components/src/ui/header/index.tsx +++ b/packages/common/components/src/ui/header/index.tsx @@ -3,6 +3,7 @@ import "./header.css"; import { useEffect, useCallback, useState } from "react"; import { useQuery } from "@tanstack/react-query"; import { images } from "@common/assets"; +import { getConfig } from "@common/config"; import { ENDPOINT } from "../../config"; import { setCookie, getCookie } from "../../lib"; import { @@ -22,7 +23,10 @@ import { Button } from "../button"; import { SidebarTrigger } from "../sidebar"; import { Skeleton } from "../skeleton"; -const siteId = getCookie("site-id-key") ?? ""; +const appConfig = getConfig(); +const siteId = appConfig.SITE_ID ?? ""; +const userId = getCookie(appConfig.AUTH_USER_ID ?? ""); +const isLoggedIn = !!userId; export function Header({ viewOnly }: { viewOnly?: boolean }) { const [mounted, setMounted] = useState(false); @@ -30,7 +34,7 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) { const { data: userInfo } = useQuery({ queryKey: [ENDPOINT.USER_SERVICE.USERS], queryFn: () => getUserInfo(), - enabled: !viewOnly, + enabled: isLoggedIn && !viewOnly, }); const { data: siteInfo } = useQuery({ @@ -50,6 +54,7 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) { const { data: userPopupList } = useQuery({ queryKey: [ENDPOINT.CMS_SERVICE.POPUPS], queryFn: () => getUserPopupList(), + enabled: isLoggedIn && !viewOnly, }); const logout = async () => { @@ -130,30 +135,36 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) { - - - - - - 프로필 설정 -
-

최종접속일

-

{userInfo?.lastLoginDate}

-
-
-

접속 IP

-

-
- 로그아웃 -
-
+ {mounted ? ( + isLoggedIn && ( + + + + + + 프로필 설정 +
+

최종접속일

+

{userInfo?.lastLoginDate}

+
+
+

접속 IP

+

+
+ 로그아웃 +
+
+ ) + ) : ( + + )} ); } diff --git a/packages/common/components/src/ui/lnb/index.tsx b/packages/common/components/src/ui/lnb/index.tsx index 75edc2e1e..8f63a08f3 100644 --- a/packages/common/components/src/ui/lnb/index.tsx +++ b/packages/common/components/src/ui/lnb/index.tsx @@ -3,6 +3,7 @@ import { useState, useEffect, useRef } from "react"; import { useQuery } from "@tanstack/react-query"; import { ChevronRight } from "lucide-react"; +import { getConfig } from "@common/config"; import { getParentIds } from "./lib"; import { Sidebar, @@ -22,7 +23,17 @@ import { } from "../collapsible"; import { ENDPOINT } from "../../config"; import { cn, getCookie, setCookie } from "../../lib"; -import { getMenuList, getPreviewTreeMenuList, type MenuItem } from "../../api"; +import { + getAnonymouseMenuList, + getMenuList, + getPreviewTreeMenuList, + type MenuItem, +} from "../../api"; + +const appConfig = getConfig(); +const appSiteId = appConfig.SITE_ID ?? ""; +const userId = getCookie(appConfig.AUTH_USER_ID ?? ""); +const isLoggedIn = !!userId; export function LNB({ viewOnly, @@ -45,22 +56,31 @@ export function LNB({ const [currentMenuCode, setCurrentMenuCode] = useState(null); const prevPathRef = useRef(currentPath); - const cookieSiteId = getCookie("site-id-key") ?? ""; - const siteId = propSiteId ?? cookieSiteId; + const siteId = propSiteId ?? appSiteId; const { data: menuListData } = useQuery({ queryKey: [ENDPOINT.CMS_SERVICE.MENU_ROLES], queryFn: () => getMenuList(siteId), - enabled: !viewOnly && !previewMode, + enabled: isLoggedIn && !viewOnly && !previewMode, }); const { data: previewTreeMenuListData } = useQuery({ queryKey: [ENDPOINT.CMS_SERVICE.MENUS, siteId, "preview"], queryFn: () => getPreviewTreeMenuList(siteId), - enabled: previewMode, + enabled: isLoggedIn && previewMode, }); - const menuList = previewMode ? previewTreeMenuListData : menuListData; + const { data: anonymousMenuListData } = useQuery({ + queryKey: [ENDPOINT.CMS_SERVICE.MENU_ANONYMOUS, siteId], + queryFn: () => getAnonymouseMenuList(siteId), + enabled: !isLoggedIn, + }); + + const menuList = isLoggedIn + ? previewMode + ? previewTreeMenuListData + : menuListData + : anonymousMenuListData; function isPathMatched(path: string) { if (!path) return false;