[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>(
+  const response = await fetch(
-    `${ENDPOINT.CMS_SERVICE.SITES}/${siteId}`,
+    `${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,30 +135,36 @@ export function Header({ viewOnly }: { viewOnly?: boolean }) {
           </span>
         </h1>
       </div>
-      <DropdownMenu>
+      {mounted ? (
-        <DropdownMenuTrigger asChild>
+        isLoggedIn && (
-          <Button
+          <DropdownMenu>
-            className="group m-0 flex h-[3rem] items-center !bg-background px-4 py-0 text-label"
+            <DropdownMenuTrigger asChild>
-            data-trigger="dropdown"
+              <Button
-          >
+                className="group m-0 flex h-[3rem] items-center !bg-background px-4 py-0 text-label"
-            <i className="diveicon di-account-circle static translate-y-0.5 pr-2 text-3xl" />
+                data-trigger="dropdown"
-            {userInfo?.userName}
+              >
-            <i className="diveicon di-chevron-down static p-0 transition-transform group-data-[state=open]:rotate-180" />
+                <i className="diveicon di-account-circle static translate-y-0.5 pr-2 text-3xl" />
-          </Button>
+                {userInfo?.userName}
-        </DropdownMenuTrigger>
+                <i className="diveicon di-chevron-down static p-0 transition-transform group-data-[state=open]:rotate-180" />
-        <DropdownMenuContent>
+              </Button>
-          <DropdownMenuItem>프로필 설정</DropdownMenuItem>
+            </DropdownMenuTrigger>
-          <div className="flex flex-col items-start gap-0 px-4 py-3">
+            <DropdownMenuContent>
-            <p className="text-base text-label">최종접속일</p>
+              <DropdownMenuItem>프로필 설정</DropdownMenuItem>
-            <p>{userInfo?.lastLoginDate}</p>
+              <div className="flex flex-col items-start gap-0 px-4 py-3">
-          </div>
+                <p className="text-base text-label">최종접속일</p>
-          <div className="flex flex-col items-start gap-0 px-4 py-3">
+                <p>{userInfo?.lastLoginDate}</p>
-            <p className="text-base text-label">접속 IP</p>
+              </div>
-            <p></p>
+              <div className="flex flex-col items-start gap-0 px-4 py-3">
-          </div>
+                <p className="text-base text-label">접속 IP</p>
-          <DropdownMenuItem onClick={logout}>로그아웃</DropdownMenuItem>
+                <p></p>
-        </DropdownMenuContent>
+              </div>
-      </DropdownMenu>
+              <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 ?? appSiteId;
-  const siteId = propSiteId ?? cookieSiteId;
 
   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;