[common/components] feat: Header, LNB 컴포넌트 비로그인 상태 분기처리

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<MenuItem[]>(
@@ -40,3 +43,18 @@ export const getPreviewTreeMenuList = async (siteId: string) => {
   );
   return response.data;
 };
+
+export const getAnonymouseMenuList = async (
+  siteId: string,
+): Promise<MenuItem[]> => {
+  const response = await fetch(
+    `${BASE_URL}/${ENDPOINT.CMS_SERVICE.MENU_ANONYMOUS}/user/${siteId}`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    },
+  );
+  return response.json();
+};

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<SiteInfo>(
-    `${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();
 };

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",

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,6 +135,8 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
           </span>
         </h1>
       </div>
+      {mounted ? (
+        isLoggedIn && (
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
               <Button
@@ -154,6 +161,10 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
               <DropdownMenuItem onClick={logout}>로그아웃</DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
+        )
+      ) : (
+        <Skeleton className="mx-4 h-[3rem] w-[15rem]" />
+      )}
     </header>
   );
 }

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<number | null>(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;