@bwg-ui/core 1.1.32 → 1.2.0

package/dist/provider/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),O=require("../stores/index.cjs"),l=require("react/jsx-runtime"),M=require("antd"),U=require("../utils/index.cjs"),E={AUTH_BTNS:"SCMSIGN00202",AUTH_MENU:"SCMSIGN00201",SRCH_CODE:"SCMSIGN00301",SRCH_POPU:"SCMPOPU00101",AUTH_BMRK:"SCMBMRK00101"},B=n.createContext(null),_=({children:e,serviceCodes:t={}})=>{n.useEffect(()=>{U.setServiceCodeOverrides(t)},[t]);const s={serviceCodes:t,getServiceCode:r=>{if(t[r]&&t[r].trim()!=="")return console.log(`🔧 Provider 설정 사용: ${r} = ${t[r]}`),t[r];const c=E[r];return console.log(`🔧 기본값 사용: ${r} = ${c}`),c}};return l.jsx(B.Provider,{value:s,children:e})},y=()=>{const e=n.useContext(B);if(!e)throw new Error("useServiceCode must be used within a ServiceCodeProvider");return e},G=e=>{const{getServiceCode:t}=y();return t(e)},V=()=>{const{getServiceCode:e}=y(),t={};for(const o of Object.keys(E))t[o]=e(o);return t},$=()=>{const{getServiceCode:e}=y();console.log("🔧 bwg-core 서비스코드 설정:"),console.log("📋 Provider 설정 > 기본값 순서로 확인");for(const t of Object.keys(E)){const o=e(t);console.log(`  ${t}: ${o}`)}},A=n.createContext(null),q=({children:e})=>{const t=n.useRef(null),C={searchBoxRef:t,getFormData:()=>t.current?.getFormData()||{},setFormData:a=>{t.current?.setFormData(a)},resetForm:()=>{t.current?.resetForm()},validateForm:async()=>await t.current?.validateForm()||{success:!1,error:null}};return l.jsx(A.Provider,{value:C,children:e})},H=()=>{const e=n.useContext(A);if(!e)throw new Error("useSearchBox must be used within a SearchBoxProvider");return e},I=n.createContext(null),W=()=>{const e=n.useContext(I);if(!e)throw new Error("useAuth must be used within AuthProvider");return e},z=({children:e})=>{const[t,o]=n.useState(!1),[s,r]=n.useState(!1),c=async i=>{const u=(await i.text()).trim().toLowerCase();try{const d=JSON.parse(u);if(typeof d=="object"&&d&&(d.ok===!0||d.success===!0))return!0}catch{}return!!["true","ok","1","y"].includes(u)},C=async i=>{r(!0);try{const u=await fetch("/serviceEndpoint/sso_check.jsp",{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:"token="+encodeURIComponent(i)}),d=u.ok&&await c(u);return o(d),d}catch{return!1}finally{r(!1)}},a=async i=>{r(!0);try{const u=await fetch("/serviceEndpoint/sso_reauth.jsp",{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:"pin="+encodeURIComponent(i)});return u.ok&&await c(u)?(o(!0),!0):!1}catch{return!1}finally{r(!1)}},m=()=>{o(!1)},h=n.useMemo(()=>({authed:t,busy:s,verifyWithToken:C,reauthWithPin:a,logout:m}),[t,s]);return l.jsx(I.Provider,{value:h,children:e})},F=n.createContext(null),J=()=>{const e=n.useContext(F);if(!e)throw new Error("useLock must be used within ScreenProtectProvider");return e},Q=({children:e,idleMs:t=1e4,onUnlock:o,persistLocked:s=!0,storageKey:r="inactivityLocked",eventTarget:c,overlayScope:C="global",overlayId:a="lock-overlay-root",overlayPosition:m="fixed"})=>{const h=s&&typeof window<"u"&&window.localStorage.getItem(r)==="1",[i,u]=n.useState(h),[d,k]=n.useState(t),P=Number.isFinite(d)&&d>0,w=n.useRef(null),T=()=>{try{s&&window.localStorage.setItem(r,"1")}catch{}u(!0)},b=async v=>{if(!(o&&!await o(v))){try{s&&window.localStorage.removeItem(r)}catch{}u(!1),P&&L()}},R=()=>{try{s&&window.localStorage.setItem(r,"1")}catch{}u(!0)},L=()=>{P&&(w.current&&window.clearTimeout(w.current),w.current=window.setTimeout(()=>{R()},d))};n.useEffect(()=>{if(!P)return;const v=()=>{i||L()},x={passive:!0},S=["pointermove","pointerdown","keydown","wheel","touchstart"],g=c??window;return S.forEach(p=>g.addEventListener(p,v,x)),L(),()=>{w.current&&window.clearTimeout(w.current),S.forEach(p=>g.removeEventListener(p,v))}},[d,i,c,P]),n.useEffect(()=>{if(!i)return;const v=p=>{const j=document.getElementById(a);j&&j.contains(p.target)||(p.stopPropagation(),p.preventDefault())},x={capture:!0},S=["pointerdown","pointerup","pointermove","click","wheel","keydown","keyup","touchstart","touchmove"],g=C==="scoped"?c??window:window;return S.forEach(p=>g.addEventListener(p,v,x)),()=>S.forEach(p=>g.removeEventListener(p,v,x))},[i,C,a,c]);const D=n.useMemo(()=>({locked:i,lock:T,unlock:b,setIdleMs:k}),[i]);return l.jsxs(F.Provider,{value:D,children:[l.jsx("div",{style:{width:"100%",height:"100%"},...i?{inert:""}:{},...i?{"aria-hidden":!0}:{},children:e}),i&&l.jsx(X,{onUnlock:b,overlayId:a,overlayPosition:m})]})},X=({onUnlock:e,overlayId:t="lock-overlay-root",overlayPosition:o="fixed"})=>{const[s]=n.useState(4),[r,c]=n.useState("");return l.jsx("div",{id:t,"aria-modal":"true",role:"dialog","aria-label":"Locked screen",style:{position:o,inset:0,background:"rgba(12, 14, 18, 0.85)",backdropFilter:"blur(4px)",display:"grid",placeItems:"center",zIndex:9999},children:l.jsxs("div",{className:"lockscreen-form",style:{width:420,maxWidth:"92vw"},children:[l.jsx("div",{className:"lock-icon-wrap",children:l.jsx("span",{className:"lock-icon-box"})}),l.jsx("h2",{children:"잠금됨"}),l.jsx("p",{children:"PIN 번호를 입력하세요"}),l.jsx("div",{className:"lock-ipt-wrap",style:{display:"flex",justifyContent:"center"},children:l.jsx(M.Input.OTP,{mask:"*",autoFocus:!0,length:s,value:r,onChange:C=>{const a=(C??"").replace(/\D/g,"").slice(0,s);c(a),a.length===s&&e(a)}})})]})})},N=n.createContext(void 0),Y=({children:e})=>{const{codeData:t,isLoading:o,error:s,lastUpdated:r,getCodeList:c,getCodeListByOption:C,getCodeName:a,getCodeColor:m,getCodeByOption:h,getAvailableGroupCodes:i,getGridLookup:u,fetchCommonCodes:d}=O.useCodeStore(),k={codeData:t,isLoading:o,error:s,lastUpdated:r,getCodeList:c,getCodeListByOption:C,getCodeName:a,getCodeColor:m,getCodeByOption:h,getAvailableGroupCodes:i,getGridLookup:u,refreshCodes:d};return l.jsx(N.Provider,{value:k,children:e})},f=()=>{const e=n.useContext(N);if(e===void 0)throw new Error("useCommonCode must be used within a CommonCodeProvider");return e},Z=()=>{const{getCodeList:e,isLoading:t,error:o}=f();return{getCodeList:e,isLoading:t,error:o}},K=()=>{const{getCodeName:e,isLoading:t,error:o}=f();return{getCodeName:e,isLoading:t,error:o}},ee=()=>{const{getCodeColor:e,isLoading:t,error:o}=f();return{getCodeColor:e,isLoading:t,error:o}},te=()=>{const{getCodeListByOption:e,isLoading:t,error:o}=f();return{getCodeListByOption:e,isLoading:t,error:o}},oe=()=>{const{getGridLookup:e,isLoading:t,error:o}=f();return{getGridLookup:e,isLoading:t,error:o}},re=()=>!1,ne=()=>{const{popups:e,activePopupId:t,setActivePopup:o,closePopup:s,openPopup:r}=O.usePopupStore(),c=n.useCallback(async(C,a,m)=>{try{await r(C,a,m)}catch(h){throw console.error("팝업 열기 실패:",h),h}},[r]);return{popups:e,activePopupId:t,setActivePopup:o,closePopup:s,showPopup:c,isPopup:e.length>0}};exports.AuthProvider=z;exports.CommonCodeProvider=Y;exports.ScreenProtectProvider=Q;exports.SearchBoxProvider=q;exports.ServiceCodeProvider=_;exports.useAllServiceCodes=V;exports.useAuth=W;exports.useCodeColor=ee;exports.useCodeList=Z;exports.useCodeListByOption=te;exports.useCodeName=K;exports.useCommonCode=f;exports.useGridLookup=oe;exports.useLock=J;exports.useLogServiceCodeConfig=$;exports.usePopup=ne;exports.usePopupContext=re;exports.useSearchBox=H;exports.useServiceCode=y;exports.useServiceCodeValue=G;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),O=require("../stores/index.cjs"),l=require("react/jsx-runtime"),M=require("antd"),U=require("../utils/index.cjs"),E={AUTH_BTNS:"SCMSIGN00202",AUTH_MENU:"SCMSIGN00201",SRCH_CODE:"SCMSIGN00301",SRCH_POPU:"SCMPOPU00101",AUTH_BMRK:"SCMBMRK00101"},B=n.createContext(null),_=({children:e,serviceCodes:t={}})=>{n.useEffect(()=>{U.setServiceCodeOverrides(t)},[t]);const s={serviceCodes:t,getServiceCode:r=>{if(t[r]&&t[r].trim()!=="")return console.log(`🔧 Provider 설정 사용: ${r} = ${t[r]}`),t[r];const c=E[r];return console.log(`🔧 기본값 사용: ${r} = ${c}`),c}};return l.jsx(B.Provider,{value:s,children:e})},y=()=>{const e=n.useContext(B);if(!e)throw new Error("useServiceCode must be used within a ServiceCodeProvider");return e},G=e=>{const{getServiceCode:t}=y();return t(e)},V=()=>{const{getServiceCode:e}=y(),t={};for(const o of Object.keys(E))t[o]=e(o);return t},$=()=>{const{getServiceCode:e}=y();console.log("🔧 bwg-core 서비스코드 설정:"),console.log("📋 Provider 설정 > 기본값 순서로 확인");for(const t of Object.keys(E)){const o=e(t);console.log(`  ${t}: ${o}`)}},A=n.createContext(null),q=({children:e})=>{const t=n.useRef(null),C={searchBoxRef:t,getFormData:()=>t.current?.getFormData()||{},setFormData:a=>{t.current?.setFormData(a)},resetForm:()=>{t.current?.resetForm()},validateForm:async()=>await t.current?.validateForm()||{success:!1,error:null}};return l.jsx(A.Provider,{value:C,children:e})},H=()=>{const e=n.useContext(A);if(!e)throw new Error("useSearchBox must be used within a SearchBoxProvider");return e},I=n.createContext(null),W=()=>{const e=n.useContext(I);if(!e)throw new Error("useAuth must be used within AuthProvider");return e},z=({children:e})=>{const[t,o]=n.useState(!1),[s,r]=n.useState(!1),c=async i=>{const u=(await i.text()).trim().toLowerCase();try{const d=JSON.parse(u);if(typeof d=="object"&&d&&(d.ok===!0||d.success===!0))return!0}catch{}return!!["true","ok","1","y"].includes(u)},C=async i=>{r(!0);try{const u=await fetch("/serviceEndpoint/sso_check.jsp",{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:"token="+encodeURIComponent(i)}),d=u.ok&&await c(u);return o(d),d}catch{return!1}finally{r(!1)}},a=async i=>{r(!0);try{const u=await fetch("/serviceEndpoint/sso_reauth.jsp",{method:"POST",headers:{"Content-Type":"application/x-www-form-urlencoded"},body:"pin="+encodeURIComponent(i)});return u.ok&&await c(u)?(o(!0),!0):!1}catch{return!1}finally{r(!1)}},m=()=>{o(!1)},h=n.useMemo(()=>({authed:t,busy:s,verifyWithToken:C,reauthWithPin:a,logout:m}),[t,s]);return l.jsx(I.Provider,{value:h,children:e})},F=n.createContext(void 0),J=({children:e})=>{const{codeData:t,isLoading:o,error:s,lastUpdated:r,getCodeList:c,getCodeListByOption:C,getCodeName:a,getCodeColor:m,getCodeByOption:h,getAvailableGroupCodes:i,getGridLookup:u,fetchCommonCodes:d}=O.useCodeStore(),k={codeData:t,isLoading:o,error:s,lastUpdated:r,getCodeList:c,getCodeListByOption:C,getCodeName:a,getCodeColor:m,getCodeByOption:h,getAvailableGroupCodes:i,getGridLookup:u,refreshCodes:d};return l.jsx(F.Provider,{value:k,children:e})},f=()=>{const e=n.useContext(F);if(e===void 0)throw new Error("useCommonCode must be used within a CommonCodeProvider");return e},Q=()=>{const{getCodeList:e,isLoading:t,error:o}=f();return{getCodeList:e,isLoading:t,error:o}},X=()=>{const{getCodeName:e,isLoading:t,error:o}=f();return{getCodeName:e,isLoading:t,error:o}},Y=()=>{const{getCodeColor:e,isLoading:t,error:o}=f();return{getCodeColor:e,isLoading:t,error:o}},Z=()=>{const{getCodeListByOption:e,isLoading:t,error:o}=f();return{getCodeListByOption:e,isLoading:t,error:o}},K=()=>{const{getGridLookup:e,isLoading:t,error:o}=f();return{getGridLookup:e,isLoading:t,error:o}},N=n.createContext(null),ee=()=>{const e=n.useContext(N);if(!e)throw new Error("useLock must be used within ScreenProtectProvider");return e},te=({children:e,idleMs:t=1e4,onUnlock:o,persistLocked:s=!0,storageKey:r="inactivityLocked",eventTarget:c,overlayScope:C="global",overlayId:a="lock-overlay-root",overlayPosition:m="fixed"})=>{const h=s&&typeof window<"u"&&window.localStorage.getItem(r)==="1",[i,u]=n.useState(h),[d,k]=n.useState(t),P=Number.isFinite(d)&&d>0,w=n.useRef(null),T=()=>{try{s&&window.localStorage.setItem(r,"1")}catch{}u(!0)},b=async v=>{if(!(o&&!await o(v))){try{s&&window.localStorage.removeItem(r)}catch{}u(!1),P&&L()}},R=()=>{try{s&&window.localStorage.setItem(r,"1")}catch{}u(!0)},L=()=>{P&&(w.current&&window.clearTimeout(w.current),w.current=window.setTimeout(()=>{R()},d))};n.useEffect(()=>{if(!P)return;const v=()=>{i||L()},x={passive:!0},S=["pointermove","pointerdown","keydown","wheel","touchstart"],g=c??window;return S.forEach(p=>g.addEventListener(p,v,x)),L(),()=>{w.current&&window.clearTimeout(w.current),S.forEach(p=>g.removeEventListener(p,v))}},[d,i,c,P]),n.useEffect(()=>{if(!i)return;const v=p=>{const j=document.getElementById(a);j&&j.contains(p.target)||(p.stopPropagation(),p.preventDefault())},x={capture:!0},S=["pointerdown","pointerup","pointermove","click","wheel","keydown","keyup","touchstart","touchmove"],g=C==="scoped"?c??window:window;return S.forEach(p=>g.addEventListener(p,v,x)),()=>S.forEach(p=>g.removeEventListener(p,v,x))},[i,C,a,c]);const D=n.useMemo(()=>({locked:i,lock:T,unlock:b,setIdleMs:k}),[i]);return l.jsxs(N.Provider,{value:D,children:[l.jsx("div",{style:{width:"100%",height:"100%"},...i?{inert:""}:{},...i?{"aria-hidden":!0}:{},children:e}),i&&l.jsx(oe,{onUnlock:b,overlayId:a,overlayPosition:m})]})},oe=({onUnlock:e,overlayId:t="lock-overlay-root",overlayPosition:o="fixed"})=>{const[s]=n.useState(4),[r,c]=n.useState("");return l.jsx("div",{id:t,"aria-modal":"true",role:"dialog","aria-label":"Locked screen",style:{position:o,inset:0,background:"rgba(12, 14, 18, 0.85)",backdropFilter:"blur(4px)",display:"grid",placeItems:"center",zIndex:9999},children:l.jsxs("div",{className:"lockscreen-form",style:{width:420,maxWidth:"92vw"},children:[l.jsx("div",{className:"lock-icon-wrap",children:l.jsx("span",{className:"lock-icon-box"})}),l.jsx("h2",{children:"잠금됨"}),l.jsx("p",{children:"PIN 번호를 입력하세요"}),l.jsx("div",{className:"lock-ipt-wrap",style:{display:"flex",justifyContent:"center"},children:l.jsx(M.Input.OTP,{mask:"*",autoFocus:!0,length:s,value:r,onChange:C=>{const a=(C??"").replace(/\D/g,"").slice(0,s);c(a),a.length===s&&e(a)}})})]})})},re=()=>!1,ne=()=>{const{popups:e,activePopupId:t,setActivePopup:o,closePopup:s,openPopup:r}=O.usePopupStore(),c=n.useCallback(async(C,a,m)=>{try{await r(C,a,m)}catch(h){throw console.error("팝업 열기 실패:",h),h}},[r]);return{popups:e,activePopupId:t,setActivePopup:o,closePopup:s,showPopup:c,isPopup:e.length>0}};exports.AuthProvider=z;exports.CommonCodeProvider=J;exports.ScreenProtectProvider=te;exports.SearchBoxProvider=q;exports.ServiceCodeProvider=_;exports.useAllServiceCodes=V;exports.useAuth=W;exports.useCodeColor=Y;exports.useCodeList=Q;exports.useCodeListByOption=Z;exports.useCodeName=X;exports.useCommonCode=f;exports.useGridLookup=K;exports.useLock=ee;exports.useLogServiceCodeConfig=$;exports.usePopup=ne;exports.usePopupContext=re;exports.useSearchBox=H;exports.useServiceCode=y;exports.useServiceCodeValue=G;

package/dist/provider/index.js

@@ -124,12 +124,85 @@ const I = {
     [t, n]
   );
   return /* @__PURE__ */ d(R.Provider, { value: m, children: e });
-}, U = y(null), ue = () => {
+}, U = y(
+  void 0
+), ue = ({
+  children: e
+}) => {
+  const {
+    codeData: t,
+    isLoading: o,
+    error: n,
+    lastUpdated: r,
+    getCodeList: s,
+    getCodeListByOption: l,
+    getCodeName: u,
+    getCodeColor: f,
+    getCodeByOption: m,
+    getAvailableGroupCodes: c,
+    getGridLookup: i,
+    fetchCommonCodes: a
+  } = H(), L = {
+    codeData: t,
+    isLoading: o,
+    error: n,
+    lastUpdated: r,
+    getCodeList: s,
+    getCodeListByOption: l,
+    getCodeName: u,
+    getCodeColor: f,
+    getCodeByOption: m,
+    getAvailableGroupCodes: c,
+    getGridLookup: i,
+    refreshCodes: a
+  };
+  return /* @__PURE__ */ d(U.Provider, { value: L, children: e });
+}, k = () => {
   const e = P(U);
+  if (e === void 0)
+    throw new Error("useCommonCode must be used within a CommonCodeProvider");
+  return e;
+}, ae = () => {
+  const { getCodeList: e, isLoading: t, error: o } = k();
+  return {
+    getCodeList: e,
+    isLoading: t,
+    error: o
+  };
+}, de = () => {
+  const { getCodeName: e, isLoading: t, error: o } = k();
+  return {
+    getCodeName: e,
+    isLoading: t,
+    error: o
+  };
+}, le = () => {
+  const { getCodeColor: e, isLoading: t, error: o } = k();
+  return {
+    getCodeColor: e,
+    isLoading: t,
+    error: o
+  };
+}, pe = () => {
+  const { getCodeListByOption: e, isLoading: t, error: o } = k();
+  return {
+    getCodeListByOption: e,
+    isLoading: t,
+    error: o
+  };
+}, me = () => {
+  const { getGridLookup: e, isLoading: t, error: o } = k();
+  return {
+    getGridLookup: e,
+    isLoading: t,
+    error: o
+  };
+}, j = y(null), fe = () => {
+  const e = P(j);
   if (!e)
     throw new Error("useLock must be used within ScreenProtectProvider");
   return e;
-}, ae = ({
+}, he = ({
   children: e,
   idleMs: t = 1e4,
   onUnlock: o,
@@ -201,7 +274,7 @@ const I = {
     () => ({ locked: c, lock: _, unlock: F, setIdleMs: L }),
     [c]
   );
-  return /* @__PURE__ */ T(U.Provider, { value: V, children: [
+  return /* @__PURE__ */ T(j.Provider, { value: V, children: [
     /* @__PURE__ */ d(
       "div",
       {
@@ -269,79 +342,6 @@ const I = {
       ] })
     }
   );
-}, j = y(
-  void 0
-), de = ({
-  children: e
-}) => {
-  const {
-    codeData: t,
-    isLoading: o,
-    error: n,
-    lastUpdated: r,
-    getCodeList: s,
-    getCodeListByOption: l,
-    getCodeName: u,
-    getCodeColor: f,
-    getCodeByOption: m,
-    getAvailableGroupCodes: c,
-    getGridLookup: i,
-    fetchCommonCodes: a
-  } = H(), L = {
-    codeData: t,
-    isLoading: o,
-    error: n,
-    lastUpdated: r,
-    getCodeList: s,
-    getCodeListByOption: l,
-    getCodeName: u,
-    getCodeColor: f,
-    getCodeByOption: m,
-    getAvailableGroupCodes: c,
-    getGridLookup: i,
-    refreshCodes: a
-  };
-  return /* @__PURE__ */ d(j.Provider, { value: L, children: e });
-}, k = () => {
-  const e = P(j);
-  if (e === void 0)
-    throw new Error("useCommonCode must be used within a CommonCodeProvider");
-  return e;
-}, le = () => {
-  const { getCodeList: e, isLoading: t, error: o } = k();
-  return {
-    getCodeList: e,
-    isLoading: t,
-    error: o
-  };
-}, pe = () => {
-  const { getCodeName: e, isLoading: t, error: o } = k();
-  return {
-    getCodeName: e,
-    isLoading: t,
-    error: o
-  };
-}, me = () => {
-  const { getCodeColor: e, isLoading: t, error: o } = k();
-  return {
-    getCodeColor: e,
-    isLoading: t,
-    error: o
-  };
-}, fe = () => {
-  const { getCodeListByOption: e, isLoading: t, error: o } = k();
-  return {
-    getCodeListByOption: e,
-    isLoading: t,
-    error: o
-  };
-}, he = () => {
-  const { getGridLookup: e, isLoading: t, error: o } = k();
-  return {
-    getGridLookup: e,
-    isLoading: t,
-    error: o
-  };
 }, we = () => !1, Ce = () => {
   const { popups: e, activePopupId: t, setActivePopup: o, closePopup: n, openPopup: r } = W(), s = $(
     async (l, u, f) => {
@@ -364,19 +364,19 @@ const I = {
 };
 export {
   ie as AuthProvider,
-  de as CommonCodeProvider,
-  ae as ScreenProtectProvider,
+  ue as CommonCodeProvider,
+  he as ScreenProtectProvider,
   ne as SearchBoxProvider,
   ee as ServiceCodeProvider,
   oe as useAllServiceCodes,
   ce as useAuth,
-  me as useCodeColor,
-  le as useCodeList,
-  fe as useCodeListByOption,
-  pe as useCodeName,
+  le as useCodeColor,
+  ae as useCodeList,
+  pe as useCodeListByOption,
+  de as useCodeName,
   k as useCommonCode,
-  he as useGridLookup,
-  ue as useLock,
+  me as useGridLookup,
+  fe as useLock,
   re as useLogServiceCodeConfig,
   Ce as usePopup,
   we as usePopupContext,

package/dist/styles/layout-test.css

@@ -0,0 +1,354 @@
+/* 메인 레이아웃 스타일 */
+.main-layout {
+  min-height: 100vh;
+  overflow: hidden;
+  min-width: 1280px;
+}
+
+/* 헤더 스타일 */
+.header-wrapper {
+  background: var(--header-bg);
+  padding: 0 30px 0 20px;
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  z-index: 1000;
+  gap: 24px;
+  color: var(--header-text);
+}
+
+/**
+* 헤더 좌측
+*/
+.header-left {
+  display: flex;
+  align-items: center;
+  min-width: 200px;
+
+  .logo-container {
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+}
+
+/**
+* 헤더 우측
+*/
+.header-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+
+  .logout-btn {
+    cursor: pointer;
+  }
+  .theme-btn {
+    cursor: pointer;
+  }
+  .alarm-btn {
+    cursor: pointer;
+  }
+  .avatar {
+    cursor: pointer;
+  }
+}
+
+.side-wrapper {
+  height: calc(100vh - 50px); /* 헤더 높이(50px)를 제외 */
+  overflow: visible; /* 토글 버튼이 짤리지 않도록 visible로 변경 */
+  display: flex;
+  flex-direction: column;
+  background-color: var(--sidebar-bg) !important;
+  position: relative; /* 토글 버튼의 absolute 포지셔닝을 위해 */
+  border-right: 1px solid var(--border-color);
+
+  .sider-toggle-btn {
+    position: absolute;
+    top: 9px;
+    right: -25px;
+    z-index: 1000;
+    width: 25px;
+    height: 41px;
+    background-color: #ffffff;
+    border: 1px solid #dddddd;
+    border-radius: 0 10px 10px 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05);
+    transition: all 0.3s ease;
+  }
+  
+  .sider-toggle-btn .ant-btn {
+    border-radius: 0 10px 10px 0;
+    font-size: 12px;
+    color: #787878;
+    padding: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .sider-search-ipt {
+    background: var(--sidebar-search-bg);
+    border-radius: var(--border-radius-xl);
+    border: 0;
+    color: var(--sidebar-search-text);
+    font-size: 13px;
+    font-weight: var(--font-weight-medium);
+      .anticon-search svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .sider-segmented {
+    padding: 5px;
+    background-color: var(--sidebar-segmented-bg);
+    border-radius: var(--border-radius-sm);
+    font-size: 13px;
+    color: var(--sidebar-segmented-text);
+    width: 100%;
+
+    .sider-segmented-item {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+    .ant-segmented-group {
+      gap: 5px;
+    }
+    .ant-segmented-item-selected {
+      color: var(--text-high);
+      font-weight: var(--font-weight-semibold);
+    }
+  }
+
+  .sider-content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+
+    /* 사이드바 로딩 스타일 */
+    .sider-loading {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      z-index: 10;
+    }
+
+    .sider-loading-text {
+      font-size: 13px;
+      color: var(--text-secondary);
+      font-weight: var(--font-weight-medium);
+      letter-spacing: -0.2px;
+    }
+
+    /* 사이드바 에러 스타일 */
+    .sider-error {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 16px;
+      background: rgba(255, 77, 79, 0.1);
+      border: 1px solid rgba(255, 77, 79, 0.2);
+      border-radius: var(--border-radius-md);
+      z-index: 10;
+      max-width: 200px;
+      text-align: center;
+    }
+
+    .sider-error-icon {
+      font-size: 20px;
+      color: #ff4d4f;
+    }
+
+    .sider-error-text {
+      font-size: 12px;
+      color: #ff4d4f;
+      font-weight: var(--font-weight-medium);
+      line-height: 1.4;
+    }
+
+    .sider-menu-container {
+      padding-right: 17px;
+      margin-right: -17px;
+      height: 100%;
+      overflow-y: auto;
+    }
+
+    /* 사이드바 스크롤바 스타일링 */
+    .sider-menu::-webkit-scrollbar,
+    .sider-menu-container::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .sider-menu::-webkit-scrollbar-track,
+    .sider-menu-container::-webkit-scrollbar-track {
+      background: transparent;
+      border-radius: 3px;
+    }
+
+    .sider-menu::-webkit-scrollbar-thumb,
+    .sider-menu-container::-webkit-scrollbar-thumb {
+      background: #d9d9d9;
+      border-radius: 3px;
+      border: 1px solid #f0f0f0;
+    }
+
+    .sider-menu::-webkit-scrollbar-thumb:hover,
+    .sider-menu-container::-webkit-scrollbar-thumb:hover {
+      background: #bfbfbf;
+    }
+
+    /* Firefox 스크롤바 스타일링 */
+    .sider-menu {
+      scrollbar-width: thin;
+      scrollbar-color: #d9d9d9 #f0f0f0;
+    }
+
+    /* Ant Design 메뉴 스타일 오버라이드 */
+    .sider-menu .ant-menu-item {
+      height: 30px;
+      transition: all 0.3s ease;
+    }
+
+    .sider-menu .ant-menu-submenu-title {
+      height: 30px !important;
+      line-height: 30px !important;
+    }
+
+    .sider-menu .ant-menu-submenu-title:hover {
+      background-color: unset !important;
+    }
+  }
+}
+
+/**
+* 메뉴 탭 스타일
+*/
+.menu-tab-wrapper {
+  background: var(--bg-primary);
+
+  .menu-tabs.ant-tabs .ant-tabs-nav {
+    margin: 0;
+    padding: 10px 34px 0 29px;
+    height: 45px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+  .ant-tabs-nav::before {
+    left: 29px;
+    bottom: 0;
+    border-bottom: 1px solid var(--border-color);
+  }
+  .menu-tabs.ant-tabs .ant-tabs-nav-wrap {
+    height: 35px;
+    flex: 1 !important;
+    align-items: flex-end;
+  }
+  .menu-tabs.ant-tabs .ant-tabs-nav-list {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    flex-wrap: nowrap;
+  }
+  .menu-tabs.ant-tabs .ant-tabs-tab {
+    height: 100%;
+    border-radius: 10px 10px 0 0;
+    transition: all 0.3s ease;
+    padding: 0 10px 0 24px;
+    position: relative ;
+    background: #E7E9F4;
+    margin: 0 4px 0 0;
+    font-size: var(--font-size-sm);
+    color: #777;
+    border: 0;
+    .ant-tabs-tab-remove {
+      width: 20px;
+      height: 20px;
+      margin-right: 0;
+      margin-left: 10px;
+      color: #A1A1A1;
+    }
+  }
+  .menu-tabs.ant-tabs .ant-tabs-tab:not(.ant-tabs-tab-active):hover {
+    background: #dbdeec;
+    color: var(--text-secondary);
+  }
+  .menu-tabs.ant-tabs .ant-tabs-tab-active {
+    background: var(--bg-primary);
+    border: 2px solid var(--primary-color);
+    border-bottom: none;
+    .ant-tabs-tab-btn {
+      color:var(--primary-color);
+    }
+  }
+  .menu-tabs.ant-tabs .ant-tabs-content-holder {
+    display: none !important;
+  }
+  .menu-tabs.ant-tabs .ant-tabs-extra-content {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    flex-shrink: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    padding-bottom: 13px;
+  }
+  .menu-tabs.ant-tabs .ant-tabs-extra-content > div {
+    display: flex !important;
+    align-items: center !important;
+    gap: 4px !important;
+    flex-wrap: nowrap !important;
+  }
+  .menu-tabs.ant-tabs .ant-tabs-extra-content .ant-btn {
+    height: 20px !important;
+    width: 20px !important;
+    font-size: 12px !important;
+  }
+  .menu-tabs.ant-tabs .ant-tabs-extra-content .ant-btn:hover {
+    color: #5E5E5E;
+  }
+  .menu-tabs.ant-tabs .ant-tabs-extra-content .ant-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: none;
+  }
+  .menu-tabs.ant-tabs .ant-tabs-extra-content .menu-tabs-close-btn {
+    margin-left: 11px;
+  }
+
+  .menu-nav-wrapper {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    .menu-nav-buttons {
+    }
+    .menu-nav-tooltip {
+    }
+  }
+}