jskim/vexplor_dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 전체 프론트엔드 하드코딩 색상 → CSS 변수 일괄 치환

Browse Source 
447+ 파일, 4500+ 줄 변경:
- gray-* → border/bg-muted/text-foreground/text-muted-foreground
- blue-* → primary/ring
- red-* → destructive
- green-* → emerald (일관성)
- indigo-* → primary
- yellow/orange → amber (통일)
- dark mode 변형도 시맨틱 토큰으로 변환

Made-with: Cursor
This commit is contained in:
DDD1542
2026-03-09 14:31:59 +09:00
parent d967cf0a0d
commit 4f10b5e42d
447 changed files with 4520 additions and 4520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
frontend/components/screen/config-panels/ButtonConfigPanel-fixed.tsx
View File

@@ -257,8 +257,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
{/* 모달 열기 액션 설정 */}
{localSelects.actionType === "modal" && (
<div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4">
<h4 className="text-sm font-medium text-gray-700">모달 설정</h4>
<div className="mt-4 space-y-4 rounded-lg border bg-muted p-4">
<h4 className="text-sm font-medium text-foreground">모달 설정</h4>
<div>
<Label htmlFor="modal-title">모달 제목</Label>
@@ -328,15 +328,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
{(() => {
const filteredScreens = filterScreens(modalSearchTerm);
if (screensLoading) {
return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
}
if (filteredScreens.length === 0) {
return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
}
return filteredScreens.map((screen, index) => (
<div
key={`modal-screen-${screen.id}-${index}`}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
onClick={() => {
onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
setModalScreenOpen(false);
@@ -351,7 +351,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
/>
<div className="flex flex-col">
<span className="font-medium">{screen.name}</span>
{screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
{screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
</div>
</div>
));
@@ -366,8 +366,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
{/* 수정 액션 설정 */}
{localSelects.actionType === "edit" && (
<div className="mt-4 space-y-4 rounded-lg border bg-green-50 p-4">
<h4 className="text-sm font-medium text-gray-700">수정 설정</h4>
<div className="mt-4 space-y-4 rounded-lg border bg-emerald-50 p-4">
<h4 className="text-sm font-medium text-foreground">수정 설정</h4>
<div>
<Label htmlFor="edit-screen">수정 폼 화면 선택</Label>
@@ -402,15 +402,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
{(() => {
const filteredScreens = filterScreens(modalSearchTerm);
if (screensLoading) {
return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
}
if (filteredScreens.length === 0) {
return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
}
return filteredScreens.map((screen, index) => (
<div
key={`edit-screen-${screen.id}-${index}`}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
onClick={() => {
onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
setModalScreenOpen(false);
@@ -431,8 +431,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
{/* 복사 액션 설정 */}
{localSelects.actionType === "copy" && (
<div className="mt-4 space-y-4 rounded-lg border bg-blue-50 p-4">
<h4 className="text-sm font-medium text-gray-700">복사 설정 (품목코드 자동 초기화)</h4>
<div className="mt-4 space-y-4 rounded-lg border bg-primary/10 p-4">
<h4 className="text-sm font-medium text-foreground">복사 설정 (품목코드 자동 초기화)</h4>
<div>
<Label htmlFor="copy-screen">복사 폼 화면 선택</Label>
@@ -467,15 +467,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
{(() => {
const filteredScreens = filterScreens(modalSearchTerm);
if (screensLoading) {
return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
}
if (filteredScreens.length === 0) {
return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
}
return filteredScreens.map((screen, index) => (
<div
key={`edit-screen-${screen.id}-${index}`}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
onClick={() => {
onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
setModalScreenOpen(false);
@@ -490,7 +490,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
/>
<div className="flex flex-col">
<span className="font-medium">{screen.name}</span>
{screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
{screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
</div>
</div>
));
@@ -499,7 +499,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
</div>
</PopoverContent>
</Popover>
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-muted-foreground">
선택된 데이터가 복사되며, 품목코드는 자동으로 초기화됩니다
</p>
</div>
@@ -539,7 +539,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
onUpdateProperty("webTypeConfig.editModalTitle", newValue);
}}
/>
<p className="mt-1 text-xs text-gray-500">비워두면 기본 제목이 표시됩니다</p>
<p className="mt-1 text-xs text-muted-foreground">비워두면 기본 제목이 표시됩니다</p>
</div>
<div>
@@ -555,7 +555,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
onUpdateProperty("webTypeConfig.editModalDescription", newValue);
}}
/>
<p className="mt-1 text-xs text-gray-500">비워두면 설명이 표시되지 않습니다</p>
<p className="mt-1 text-xs text-muted-foreground">비워두면 설명이 표시되지 않습니다</p>
</div>
<div>
@@ -586,8 +586,8 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
{/* 페이지 이동 액션 설정 */}
{localSelects.actionType === "navigate" && (
<div className="mt-4 space-y-4 rounded-lg border bg-gray-50 p-4">
<h4 className="text-sm font-medium text-gray-700">페이지 이동 설정</h4>
<div className="mt-4 space-y-4 rounded-lg border bg-muted p-4">
<h4 className="text-sm font-medium text-foreground">페이지 이동 설정</h4>
<div>
<Label htmlFor="target-screen-nav">이동할 화면 선택</Label>
@@ -622,15 +622,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
{(() => {
const filteredScreens = filterScreens(navSearchTerm);
if (screensLoading) {
return <div className="p-3 text-sm text-gray-500">화면 목록을 불러오는 중...</div>;
return <div className="p-3 text-sm text-muted-foreground">화면 목록을 불러오는 중...</div>;
}
if (filteredScreens.length === 0) {
return <div className="p-3 text-sm text-gray-500">검색 결과가 없습니다.</div>;
return <div className="p-3 text-sm text-muted-foreground">검색 결과가 없습니다.</div>;
}
return filteredScreens.map((screen, index) => (
<div
key={`navigate-screen-${screen.id}-${index}`}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-gray-100"
className="flex cursor-pointer items-center px-3 py-2 hover:bg-muted"
onClick={() => {
onUpdateProperty("componentConfig.action.targetScreenId", screen.id);
setNavScreenOpen(false);
@@ -645,7 +645,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
/>
<div className="flex flex-col">
<span className="font-medium">{screen.name}</span>
{screen.description && <span className="text-xs text-gray-500">{screen.description}</span>}
{screen.description && <span className="text-xs text-muted-foreground">{screen.description}</span>}
</div>
</div>
));
@@ -654,7 +654,7 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
</div>
</PopoverContent>
</Popover>
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-muted-foreground">
선택한 화면으로 /screens/{"{"}화면ID{"}"} 형태로 이동합니다
</p>
</div>
@@ -671,15 +671,15 @@ export const ButtonConfigPanel: React.FC<ButtonConfigPanelProps> = ({ component,
onUpdateProperty("componentConfig.action.targetUrl", newValue);
}}
/>
<p className="mt-1 text-xs text-gray-500">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
<p className="mt-1 text-xs text-muted-foreground">URL을 입력하면 화면 선택보다 우선 적용됩니다</p>
</div>
</div>
)}
{/* 🔥 NEW: 제어관리 기능 섹션 */}
<div className="mt-8 border-t border-gray-200 pt-6">
<div className="mt-8 border-t border-border pt-6">
<div className="mb-4">
<h3 className="text-lg font-medium text-gray-900">🔧 고급 기능</h3>
<h3 className="text-lg font-medium text-foreground">🔧 고급 기능</h3>
<p className="text-muted-foreground mt-1 text-sm">버튼 액션과 함께 실행될 추가 기능을 설정합니다</p>
</div>