Merge branch 'main' of http://39.117.244.52:3000/kjs/ERP-node into feature/v2-unified-renewal
This commit is contained in:
kjs
@@ -54,6 +54,19 @@ export default function ScreenManagementPage() {
|
||||
loadScreens();
|
||||
}, [loadScreens]);
|
||||
|
||||
// 화면 목록 새로고침 이벤트 리스너
|
||||
useEffect(() => {
|
||||
const handleScreenListRefresh = () => {
|
||||
console.log("🔄 화면 목록 새로고침 이벤트 수신");
|
||||
loadScreens();
|
||||
};
|
||||
|
||||
window.addEventListener("screen-list-refresh", handleScreenListRefresh);
|
||||
return () => {
|
||||
window.removeEventListener("screen-list-refresh", handleScreenListRefresh);
|
||||
};
|
||||
}, [loadScreens]);
|
||||
|
||||
// URL 쿼리 파라미터로 화면 디자이너 자동 열기
|
||||
useEffect(() => {
|
||||
const openDesignerId = searchParams.get("openDesigner");
|
||||
@@ -247,5 +260,3 @@ export default function ScreenManagementPage() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -34,7 +34,7 @@ function ScreenViewPage() {
|
||||
|
||||
// URL 쿼리에서 menuObjid 가져오기 (메뉴 스코프)
|
||||
const menuObjid = searchParams.get("menuObjid") ? parseInt(searchParams.get("menuObjid")!) : undefined;
|
||||
|
||||
|
||||
// URL 쿼리에서 프리뷰용 company_code 가져오기
|
||||
const previewCompanyCode = searchParams.get("company_code");
|
||||
|
||||
@@ -115,7 +115,7 @@ function ScreenViewPage() {
|
||||
// 편집 모달 이벤트 리스너 등록
|
||||
useEffect(() => {
|
||||
const handleOpenEditModal = (event: CustomEvent) => {
|
||||
// console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
|
||||
console.log("🎭 편집 모달 열기 이벤트 수신:", event.detail);
|
||||
|
||||
setEditModalConfig({
|
||||
screenId: event.detail.screenId,
|
||||
@@ -327,8 +327,8 @@ function ScreenViewPage() {
|
||||
newScale = Math.min(scaleX, scaleY, 1); // 최대 1배율
|
||||
} else {
|
||||
// 일반 모드: 가로 기준 스케일 (좌우 여백 16px씩 고정)
|
||||
const MARGIN_X = 32;
|
||||
const availableWidth = containerWidth - MARGIN_X;
|
||||
const MARGIN_X = 32;
|
||||
const availableWidth = containerWidth - MARGIN_X;
|
||||
newScale = availableWidth / designWidth;
|
||||
}
|
||||
|
||||
@@ -408,10 +408,9 @@ function ScreenViewPage() {
|
||||
|
||||
{/* 절대 위치 기반 렌더링 (화면관리와 동일한 방식) */}
|
||||
{layoutReady && layout && layout.components.length > 0 ? (
|
||||
<ScreenMultiLangProvider components={layout.components} companyCode={companyCode}>
|
||||
<div
|
||||
className="bg-background relative"
|
||||
style={{
|
||||
<div
|
||||
className="bg-background relative"
|
||||
style={{
|
||||
width: `${screenWidth}px`,
|
||||
height: `${screenHeight}px`,
|
||||
minWidth: `${screenWidth}px`,
|
||||
@@ -854,8 +853,7 @@ function ScreenViewPage() {
|
||||
</>
|
||||
);
|
||||
})()}
|
||||
</div>
|
||||
</ScreenMultiLangProvider>
|
||||
</div>
|
||||
) : (
|
||||
// 빈 화면일 때
|
||||
<div className="bg-background flex items-center justify-center" style={{ minHeight: screenHeight }}>
|
||||
|
||||
@@ -388,237 +388,6 @@ select {
|
||||
border-spacing: 0 !important;
|
||||
}
|
||||
|
||||
/* ===== POP (Production Operation Panel) Styles ===== */
|
||||
|
||||
/* POP 전용 다크 테마 변수 */
|
||||
.pop-dark {
|
||||
/* 배경 색상 */
|
||||
--pop-bg-deepest: 8 12 21;
|
||||
--pop-bg-deep: 10 15 28;
|
||||
--pop-bg-primary: 13 19 35;
|
||||
--pop-bg-secondary: 18 26 47;
|
||||
--pop-bg-tertiary: 25 35 60;
|
||||
--pop-bg-elevated: 32 45 75;
|
||||
|
||||
/* 네온 강조색 */
|
||||
--pop-neon-cyan: 0 212 255;
|
||||
--pop-neon-cyan-bright: 0 240 255;
|
||||
--pop-neon-cyan-dim: 0 150 190;
|
||||
--pop-neon-pink: 255 0 102;
|
||||
--pop-neon-purple: 138 43 226;
|
||||
|
||||
/* 상태 색상 */
|
||||
--pop-success: 0 255 136;
|
||||
--pop-success-dim: 0 180 100;
|
||||
--pop-warning: 255 170 0;
|
||||
--pop-warning-dim: 200 130 0;
|
||||
--pop-danger: 255 51 51;
|
||||
--pop-danger-dim: 200 40 40;
|
||||
|
||||
/* 텍스트 색상 */
|
||||
--pop-text-primary: 255 255 255;
|
||||
--pop-text-secondary: 180 195 220;
|
||||
--pop-text-muted: 100 120 150;
|
||||
|
||||
/* 테두리 색상 */
|
||||
--pop-border: 40 55 85;
|
||||
--pop-border-light: 55 75 110;
|
||||
}
|
||||
|
||||
/* POP 전용 라이트 테마 변수 */
|
||||
.pop-light {
|
||||
--pop-bg-deepest: 245 247 250;
|
||||
--pop-bg-deep: 240 243 248;
|
||||
--pop-bg-primary: 250 251 253;
|
||||
--pop-bg-secondary: 255 255 255;
|
||||
--pop-bg-tertiary: 245 247 250;
|
||||
--pop-bg-elevated: 235 238 245;
|
||||
|
||||
--pop-neon-cyan: 0 122 204;
|
||||
--pop-neon-cyan-bright: 0 140 230;
|
||||
--pop-neon-cyan-dim: 0 100 170;
|
||||
--pop-neon-pink: 220 38 127;
|
||||
--pop-neon-purple: 118 38 200;
|
||||
|
||||
--pop-success: 22 163 74;
|
||||
--pop-success-dim: 21 128 61;
|
||||
--pop-warning: 245 158 11;
|
||||
--pop-warning-dim: 217 119 6;
|
||||
--pop-danger: 220 38 38;
|
||||
--pop-danger-dim: 185 28 28;
|
||||
|
||||
--pop-text-primary: 15 23 42;
|
||||
--pop-text-secondary: 71 85 105;
|
||||
--pop-text-muted: 148 163 184;
|
||||
|
||||
--pop-border: 226 232 240;
|
||||
--pop-border-light: 203 213 225;
|
||||
}
|
||||
|
||||
/* POP 배경 그리드 패턴 */
|
||||
.pop-bg-pattern::before {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background:
|
||||
repeating-linear-gradient(90deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
|
||||
repeating-linear-gradient(0deg, rgba(0, 212, 255, 0.03) 0px, transparent 1px, transparent 60px),
|
||||
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 212, 255, 0.08) 0%, transparent 60%);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.pop-light .pop-bg-pattern::before {
|
||||
background:
|
||||
repeating-linear-gradient(90deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
|
||||
repeating-linear-gradient(0deg, rgba(0, 122, 204, 0.02) 0px, transparent 1px, transparent 60px),
|
||||
radial-gradient(ellipse 80% 50% at 50% 0%, rgba(0, 122, 204, 0.05) 0%, transparent 60%);
|
||||
}
|
||||
|
||||
/* POP 글로우 효과 */
|
||||
.pop-glow-cyan {
|
||||
box-shadow:
|
||||
0 0 20px rgba(0, 212, 255, 0.5),
|
||||
0 0 40px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.pop-glow-cyan-strong {
|
||||
box-shadow:
|
||||
0 0 10px rgba(0, 212, 255, 0.8),
|
||||
0 0 30px rgba(0, 212, 255, 0.5),
|
||||
0 0 50px rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.pop-glow-success {
|
||||
box-shadow: 0 0 15px rgba(0, 255, 136, 0.5);
|
||||
}
|
||||
|
||||
.pop-glow-warning {
|
||||
box-shadow: 0 0 15px rgba(255, 170, 0, 0.5);
|
||||
}
|
||||
|
||||
.pop-glow-danger {
|
||||
box-shadow: 0 0 15px rgba(255, 51, 51, 0.5);
|
||||
}
|
||||
|
||||
/* POP 펄스 글로우 애니메이션 */
|
||||
@keyframes pop-pulse-glow {
|
||||
0%,
|
||||
100% {
|
||||
box-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 20px rgba(0, 212, 255, 0.8),
|
||||
0 0 30px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.pop-animate-pulse-glow {
|
||||
animation: pop-pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* POP 프로그레스 바 샤인 애니메이션 */
|
||||
@keyframes pop-progress-shine {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
}
|
||||
|
||||
.pop-progress-shine::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 20px;
|
||||
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
|
||||
animation: pop-progress-shine 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* POP 스크롤바 스타일 */
|
||||
.pop-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.pop-scrollbar::-webkit-scrollbar-track {
|
||||
background: rgb(var(--pop-bg-secondary));
|
||||
}
|
||||
|
||||
.pop-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgb(var(--pop-border-light));
|
||||
border-radius: 9999px;
|
||||
}
|
||||
|
||||
.pop-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgb(var(--pop-neon-cyan-dim));
|
||||
}
|
||||
|
||||
/* POP 스크롤바 숨기기 */
|
||||
.pop-hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pop-hide-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
/* ===== Marching Ants Animation (Excel Copy Border) ===== */
|
||||
@keyframes marching-ants-h {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 16px 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes marching-ants-v {
|
||||
0% {
|
||||
background-position: 0 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-marching-ants-h {
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
hsl(var(--primary)) 0,
|
||||
hsl(var(--primary)) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
background-size: 16px 2px;
|
||||
animation: marching-ants-h 0.4s linear infinite;
|
||||
}
|
||||
|
||||
.animate-marching-ants-v {
|
||||
background: repeating-linear-gradient(
|
||||
180deg,
|
||||
hsl(var(--primary)) 0,
|
||||
hsl(var(--primary)) 4px,
|
||||
transparent 4px,
|
||||
transparent 8px
|
||||
);
|
||||
background-size: 2px 16px;
|
||||
animation: marching-ants-v 0.4s linear infinite;
|
||||
}
|
||||
|
||||
/* ===== 저장 테이블 막대기 애니메이션 ===== */
|
||||
@keyframes saveBarDrop {
|
||||
0% {
|
||||
|
||||
Reference in New Issue
Block a user