5. 프로젝트, 버전 관리하기
Palito는 프로젝트 단위로 데이터를 관리하며, 하나의 프로젝트 내에 여러 버전의 네트워크 구성도를 관리할 수 있습니다.
이번 가이드에서는 먼저
- 프로젝트의 메타데이터를 편집하는 방법
- 새로운 버전을 생성하는 방법에 대해 학습하고
소스코드 레벨에서 프로젝트.json 데이터를
- API 호출을 통해 프로젝트 데이터를 획득하는 방법
- 파라미터를 통해 프로젝트 데이터를 선입력하는 방법
- API 호출을 통해 프로젝트 데이터를 입력하는 방법에 대해 학습합니다.
1. 프로젝트의 메타데이터 편집
Palito 상단의 입력란에서 프로젝트명, 선박명, 회사명에 대한 메타데이터를 편집할 수 있습니다. 메타데이터는 프로젝트 내 모든 버전에 걸쳐 공유됩니다.
또한, 이렇게 작성된 메타데이터는 출력되는 PNG 및 PDF 파일의 우측 하단에도 적용됩니다.
2. 새로운 버전 생성
Palito 상단의 메타데이터 입력란의 하단에는 버전 정보 및 버전 메모에 대한 입력란이 있습니다.
그 아래에는 Version 목록을 확인할 수 있는 Versions 버튼과, Palito의 단축키 및 조작 정보를 나타내는 Help 버튼이 있습니다.
Versions 버튼을 누르고 제일 아래의 + Add New Version 버튼을 누르게 되면,
현재 선택된 버전의 데이터를 그대로 복사하여, 새로운 버전을 생성합니다.
3. 버전 삭제
Versions 버튼을 누르고 목록 내 각 버전 우측에 존재하는 "-" 버튼을 누르면 해당 버전을 삭제합니다. 최소 1개의 버전은 남아있어야 하며, 이러한 경우에 버튼 클릭시 오류 문구가 출력됩니다.
현재 버전을 삭제하게 되는 경우, 남아있는 버전 목록 중 가장 숫자가 큰 버전으로 교체됩니다.
4. API 호출을 통해 프로젝트 데이터를 획득하는 방법
Palito는 프로젝트와 관련된 데이터를 얻기 위한 Get API들을 제공하고 있습니다.
여기서는, Project 전체에 대한 json 데이터를 전달받는 방법을 알아보도록 하겠습니다.
1장에서 소개한 소스코드에서 1줄만 추가하는 것으로, project 데이터를 가져올 수 있습니다.
const project = palitoRef.current.getProjectData();
프로젝트 데이터를 직접 실시간으로, 콘솔에 찍어 확인하기 위해 예제 버튼을 추가해보도록 하겠습니다.
import { useRef } from "react";
import { Palito } from "../palito/Palito.jsx";
const ExamplePage = () => {
const palitoRef = useRef(null);
const LICENSE_KEY = "key-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
const handleGetData = () => {
// palitoRef.current가 null이 아닌지 항상 확인합니다.
if (palitoRef.current) {
const project = palitoRef.current.getProjectData();
console.log("Project:", project);
} else {
console.log("Palito 라이브러리가 아직 준비되지 않았습니다.");
}
};
return (
<div>
<div>
<Palito ref={palitoRef} licenseKey={LICENSE_KEY} />
</div>
{/* 5. API 호출을 테스트하기 위한 버튼 추가 */}
<div
style={{
position: "absolute",
bottom: "40px",
right: "20px",
zIndex: 1000,
}}
>
<button
onClick={handleGetData}
style={{ padding: "10px 20px", fontSize: "16px" }}
>
Get Data from Library
</button>
</div>
</div>
);
};
export default ExamplePage;
이제, 버튼을 눌러 실시간으로 Project 데이터를 콘솔창에 찍어볼 수 있습니다.
5. 파라미터를 통해 프로젝트 데이터를 전달하는 방법
획득한 json 데이터를 입력하는 것으로 네트워크 구성도를 생성해보도록 하겠습니다.
먼저, 별도의 json 파일인 "example.json" 파일을 만들어서 불러오도록 하겠습니다.
예제에 사용된 example.json 파일은 아래와 같습니다.
{
"projectName": "Sample Project",
"shipName": "Sample Ship",
"compName": "Sample Company",
"optionalFields": [
{
"key": "Sample1",
"label": "Sample Property1"
},
{
"key": "Sample2",
"label": "Sample Property2"
},
{
"key": "Sample3",
"label": "Sample Property3"
},
{
"key": "Sample4",
"label": "Sample Property4"
}
],
"versions": [
{
"version": 1,
"versionMemo": "Insert Version Memo",
"editTime": "2025-07-18 01:00:31",
"zones": [
{
"id": "zone-1",
"name": "Zone 1",
"nodes": [
{
"id": "1",
"type": "custom",
"position": {
"x": 320,
"y": 20
},
"data": {
"component_name": "Switch",
"type": "Switch",
"security_zone": "zone-1",
"system_category": "Network",
"other_system_connection": []
},
"measured": {
"width": 80,
"height": 100
},
"style": {},
"selected": false
},
{
"id": "2",
"type": "custom",
"position": {
"x": 120,
"y": 270
},
"data": {
"component_name": "Router",
"type": "Router",
"security_zone": "zone-1",
"system_category": "Network",
"other_system_connection": [
{
"id": "1",
"type": "Default"
}
]
},
"measured": {
"width": 80,
"height": 100
},
"style": {},
"selected": false
},
{
"id": "3",
"type": "custom",
"position": {
"x": 520,
"y": 270
},
"data": {
"component_name": "Router",
"type": "Router",
"security_zone": "zone-1",
"system_category": "Network",
"other_system_connection": [
{
"id": "1",
"type": "Default"
}
],
"Sample1": "Sample..."
},
"measured": {
"width": 80,
"height": 100
},
"style": {},
"dragging": false,
"selected": false
},
{
"id": "4",
"type": "custom",
"position": {
"x": 20,
"y": 520
},
"data": {
"component_name": "CCTV",
"type": "CCTV",
"security_zone": "zone-1",
"system_category": "Other",
"other_system_connection": [
{
"id": "2",
"type": "Default"
}
]
},
"measured": {
"width": 80,
"height": 100
},
"style": {},
"selected": false
},
{
"id": "5",
"type": "custom",
"position": {
"x": 220,
"y": 520
},
"data": {
"component_name": "CCTV",
"type": "CCTV",
"security_zone": "zone-1",
"system_category": "Other",
"other_system_connection": [
{
"id": "2",
"type": "Default"
}
]
},
"measured": {
"width": 80,
"height": 100
},
"style": {},
"selected": false
},
{
"id": "6",
"type": "custom",
"position": {
"x": 420,
"y": 520
},
"data": {
"component_name": "CCTV",
"type": "CCTV",
"security_zone": "zone-1",
"system_category": "Other",
"other_system_connection": [
{
"id": "3",
"type": "Default"
}
]
},
"measured": {
"width": 80,
"height": 100
},
"style": {},
"selected": false
},
{
"id": "7",
"type": "custom",
"position": {
"x": 620,
"y": 520
},
"data": {
"component_name": "CCTV",
"type": "CCTV",
"security_zone": "zone-1",
"system_category": "Other",
"other_system_connection": [
{
"id": "3",
"type": "Default"
}
]
},
"measured": {
"width": 80,
"height": 100
},
"style": {},
"selected": false
}
],
"viewport": {
"x": 0,
"y": 0,
"zoom": 1
}
}
]
}
]
}
이제 아래와 같이 소스코드를 작성해보도록 합시다.
import { useRef } from "react";
import { Palito } from "../palito/Palito.jsx";
import example from "./example.json";
const ExamplePage = () => {
const palitoRef = useRef(null);
const LICENSE_KEY = "key-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
return (
<div>
<Palito
ref={palitoRef}
licenseKey={LICENSE_KEY}
initialProject={example}
/>
</div>
);
};
export default ExamplePage;
위 소스코드와 같이, <Palito>의 파라미터 중 하나인 initialProject에 example.json의 데이터를 입력하는 것으로
초기 렌더링 이전 타이밍에 프로젝트 데이터를 선입력하여 네트워크를 구성할 수 있습니다.
6. API 호출을 통해 프로젝트 데이터를 입력하는 방법
SetProject API를 호출하는 것으로 실시간으로 프로젝트 데이터를 입력하고 네트워크 구성도를 생성할 수 있습니다.
본 예제에서는, 버튼 클릭시 example.json 데이터를 사용하여 SetProject를 호출해보도록 하겠습니다.
import { useRef } from "react";
import { Palito } from "../palito/Palito.jsx";
import example from "./example.json";
const ExamplePage = () => {
const palitoRef = useRef(null);
const LICENSE_KEY = "key-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
const handleInjectData = () => {
if (palitoRef.current) {
palitoRef.current.setProject(example);
}
};
return (
<div>
<div>
<Palito ref={palitoRef} licenseKey={LICENSE_KEY} />
</div>
<div
style={{
position: "absolute",
bottom: "40px",
right: "20px",
zIndex: 1000,
}}
>
<button
onClick={handleInjectData}
style={{ padding: "10px 20px", fontSize: "16px" }}
>
Get Data from Library
</button>
</div>
</div>
);
};
export default ExamplePage;
이제 버튼 클릭을 통해, example.json 파일에 있는 프로젝트 데이터대로 실시간으로 업로드 할 수 있게 되었습니다.
7. 프로젝트 커스텀
Palito에서는 사용자 임의로 프로젝트 테마, 자산 내 항목을 편집하거나 커스텀 노드를 추가할 수 있습니다.
먼저 커스텀 노드의 추가 방법입니다.
import { useRef, useEffect } from "react";
import { Palito } from "../palito/Palito.jsx";
import MyCustomIcon from "../assets/my-custom-icon.svg"; // svg 이미지를 가져와야 합니다.
const ExamplePage = () => {
const palitoRef = useRef(null);
const LICENSE_KEY = "key-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
// === ⭐️ 1. 사용자가 추가할 커스텀 노드 데이터 정의 ===
const userCustomNodes = [
{
label: "Additional Devices", // 새로운 카테고리 이름
nodes: [
{
type: "React Nodes", // 노드의 고유 타입 (드래그 시 식별용)
icon: MyCustomIcon, // 노드의 아이콘 (import한 이미지)
isReactComponent: false, // SVG를 컴포넌트로 import했다면 true
},
{
type: "React Nodes2",
icon: MyCustomIcon,
isReactComponent: false,
},
],
},
];
return (
<div>
<div>
<Palito
ref={palitoRef}
licenseKey={LICENSE_KEY}
customNodes={userCustomNodes}
/>
</div>
</div>
);
};
export default ExamplePage;
사용자 임의의 테 마를 추가하는 방법은 아래와 같습니다.
import { useRef, useEffect } from "react";
import { Palito } from "../palito/Palito.jsx";
const ExamplePage = () => {
const palitoRef = useRef(null);
const LICENSE_KEY = "key-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX";
// === ⭐️ 1. 사용자가 추가할 커스텀 노드 데이터 정의 ===
const themeSample = {
main: "#3757D2",
mainSmooth: "#405FD4",
shadow: "#2C46A9",
contrast: "#ffffff",
contrastSmooth: "#ECEBEB",
point1: "#ffffff",
point2: "#ffffff",
point3: "#0f9",
};
return (
<div>
<div>
<Palito
ref={palitoRef}
licenseKey={LICENSE_KEY}
theme2={themeSample1}
/>
</div>
</div>
);
};
export default ExamplePage;
Optional Properties는 프로젝트의 json 파일에서 관리합니다. 이는 아래와 같은 양식으로 작성되어야 합니다.
{
"projectName": "Sample Project",
"shipName": "Sample Ship",
"compName": "Sample Company",
"optionalFields": [
{
"key": "Sample1",
"label": "Sample Property1"
},
{
"key": "Sample2",
"label": "Sample Property2"
},
{
"key": "Sample3",
"label": "Sample Property3"
},
{
"key": "Sample4",
"label": "Sample Property4"
}
],
"versions": []
}
]
}
이상으로 Palito의 해당 기능에 대한 가이드를 마칩니다. 다양한 기능을 직접 실험해보며, 자신만의 인프라 시각화 도구로 Palito를 확장해보세요!