개발 완료

2025-11-27 19:26:01 +09:00
parent d387b97d77
commit bc4056b474
50 changed files with 7276 additions and 272 deletions
--- a/Assets/Resources/SHI/Images/bg_task_cell_18x18.png
+++ b/Assets/Resources/SHI/Images/bg_task_cell_18x18.png
--- a/Assets/Resources/SHI/Images/bg_task_cell_18x18.png.meta
+++ b/Assets/Resources/SHI/Images/bg_task_cell_18x18.png.meta
@@ -0,0 +1,143 @@
+fileFormatVersion: 2
+guid: 493746fbc3e7b294b863c3c3815af746
+TextureImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 13
+  mipmaps:
+    mipMapMode: 0
+    enableMipMap: 0
+    sRGBTexture: 1
+    linearTexture: 0
+    fadeOut: 0
+    borderMipMap: 0
+    mipMapsPreserveCoverage: 0
+    alphaTestReferenceValue: 0.5
+    mipMapFadeDistanceStart: 1
+    mipMapFadeDistanceEnd: 3
+  bumpmap:
+    convertToNormalMap: 0
+    externalNormalMap: 0
+    heightScale: 0.25
+    normalMapFilter: 0
+    flipGreenChannel: 0
+  isReadable: 0
+  streamingMipmaps: 0
+  streamingMipmapsPriority: 0
+  vTOnly: 0
+  ignoreMipmapLimit: 0
+  grayScaleToAlpha: 0
+  generateCubemap: 6
+  cubemapConvolution: 0
+  seamlessCubemap: 0
+  textureFormat: 1
+  maxTextureSize: 2048
+  textureSettings:
+    serializedVersion: 2
+    filterMode: 1
+    aniso: 1
+    mipBias: 0
+    wrapU: 0
+    wrapV: 0
+    wrapW: 0
+  nPOTScale: 0
+  lightmap: 0
+  compressionQuality: 50
+  spriteMode: 1
+  spriteExtrude: 1
+  spriteMeshType: 1
+  alignment: 0
+  spritePivot: {x: 0.5, y: 0.5}
+  spritePixelsToUnits: 100
+  spriteBorder: {x: 0, y: 0, z: 0, w: 0}
+  spriteGenerateFallbackPhysicsShape: 1
+  alphaUsage: 1
+  alphaIsTransparency: 1
+  spriteTessellationDetail: -1
+  textureType: 8
+  textureShape: 1
+  singleChannelComponent: 0
+  flipbookRows: 1
+  flipbookColumns: 1
+  maxTextureSizeSet: 0
+  compressionQualitySet: 0
+  textureFormatSet: 0
+  ignorePngGamma: 0
+  applyGammaDecoding: 0
+  swizzle: 50462976
+  cookieLightType: 0
+  platformSettings:
+  - serializedVersion: 4
+    buildTarget: DefaultTexturePlatform
+    maxTextureSize: 32
+    resizeAlgorithm: 0
+    textureFormat: -1
+    textureCompression: 1
+    compressionQuality: 50
+    crunchedCompression: 0
+    allowsAlphaSplitting: 0
+    overridden: 0
+    ignorePlatformSupport: 0
+    androidETC2FallbackOverride: 0
+    forceMaximumCompressionQuality_BC6H_BC7: 0
+  - serializedVersion: 4
+    buildTarget: Standalone
+    maxTextureSize: 2048
+    resizeAlgorithm: 0
+    textureFormat: -1
+    textureCompression: 1
+    compressionQuality: 50
+    crunchedCompression: 0
+    allowsAlphaSplitting: 0
+    overridden: 0
+    ignorePlatformSupport: 0
+    androidETC2FallbackOverride: 0
+    forceMaximumCompressionQuality_BC6H_BC7: 0
+  - serializedVersion: 4
+    buildTarget: WebGL
+    maxTextureSize: 2048
+    resizeAlgorithm: 0
+    textureFormat: -1
+    textureCompression: 1
+    compressionQuality: 50
+    crunchedCompression: 0
+    allowsAlphaSplitting: 0
+    overridden: 0
+    ignorePlatformSupport: 0
+    androidETC2FallbackOverride: 0
+    forceMaximumCompressionQuality_BC6H_BC7: 0
+  - serializedVersion: 4
+    buildTarget: WindowsStoreApps
+    maxTextureSize: 2048
+    resizeAlgorithm: 0
+    textureFormat: -1
+    textureCompression: 1
+    compressionQuality: 50
+    crunchedCompression: 0
+    allowsAlphaSplitting: 0
+    overridden: 0
+    ignorePlatformSupport: 0
+    androidETC2FallbackOverride: 0
+    forceMaximumCompressionQuality_BC6H_BC7: 0
+  spriteSheet:
+    serializedVersion: 2
+    sprites: []
+    outline: []
+    customData: 
+    physicsShape: []
+    bones: []
+    spriteID: 5e97eb03825dee720800000000000000
+    internalID: 0
+    vertices: []
+    indices: 
+    edges: []
+    weights: []
+    secondaryTextures: []
+    spriteCustomMetadata:
+      entries: []
+    nameFileIdTable: {}
+  mipmapLimitGroupName: 
+  pSDRemoveMatte: 0
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
--- a/Assets/Resources/SHI/Modal/ISOP/ISOPChart.uss
+++ b/Assets/Resources/SHI/Modal/ISOP/ISOPChart.uss
@@ -1,3 +1,38 @@
+/*
+ * ISOPChart.uss - ISOP 간트 차트 스타일시트
+ *
+ * [개요]
+ * 간트 차트(Gantt Chart)의 스타일을 정의합니다.
+ * 작업 행, 타임라인 셀, 호버 효과 등의 스타일을 포함합니다.
+ *
+ * [스타일 구조]
+ * 1. :root - 루트 요소 기본 설정
+ * 2. #gantt-container - 간트 차트 전체 컨테이너
+ * 3. .task-row - 작업 행 스타일 (호버 효과 포함)
+ * 4. .task-txt - 작업 레벨(L1~L8) 셀 스타일
+ *
+ * [색상 팔레트]
+ * - 배경: rgb(250, 250, 250) - 밝은 회색
+ * - 작업 행: rgb(136, 190, 230) - 하늘색 (테두리)
+ * - 레벨 셀: rgb(228, 236, 255) - 연한 파랑 (배경)
+ * - 호버: rgb(228, 236, 255) - 연한 파랑
+ * - 텍스트: rgb(34, 34, 34) - 진한 회색
+ *
+ * [레이아웃]
+ * - 작업 행 높이: 49px (40px 컨텐츠 + 테두리)
+ * - 레벨 셀 너비: 40px (L1~L8 각각)
+ * - 일 셀 너비: 18px (pixelsPerDay와 일치)
+ *
+ * [연관 파일]
+ * - ISOPChart.uxml : 메인 레이아웃
+ * - ISOPChartRow.uxml : 작업 행 템플릿
+ * - ISOPChart.cs : C# 컨트롤러
+ */
+
+/* ===================================
+   루트 요소 기본 설정
+   Flexbox 레이아웃 초기화
+   =================================== */
 :root {
    flex-grow: 1;
    flex-shrink: 1;
@@ -6,20 +41,28 @@
    overflow: hidden;
 }

+/* ===================================
+   간트 차트 메인 컨테이너
+   세로 방향 Flexbox 레이아웃
+   =================================== */
 #gantt-container {
    flex-grow: 1;
    flex-shrink: 1;
    flex-direction: column;
-    background-color: rgb(250, 250, 250);
+    background-color: rgb(250, 250, 250);  /* 밝은 회색 배경 */
    min-width: 0;
    overflow: hidden;
 }

+/* ===================================
+   작업 행 스타일
+   각 작업(Task)을 표시하는 행
+   =================================== */
 .task-row {
    flex-direction: row;
    height: 49px;
    width: 390px;
-    background-color: rgb(136, 190, 230);
+    background-color: rgb(136, 190, 230);  /* 하늘색 (테두리용) */
    border-top-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
@@ -34,27 +77,33 @@
    box-sizing: border-box;
    -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');
    font-size: 10px;
-    color: rgb(34, 34, 34);
+    color: rgb(34, 34, 34);                /* 진한 회색 텍스트 */
 }

+/* 첫 번째 행: 상단 테두리 추가 */
 .task-row:first-child {
    border-top-width: 1px;
    border-top-color: rgb(136, 190, 230);
 }

+/* 호버 상태: 연한 파란색 배경 */
 .task-row:hover {
    background-color: rgb(228, 236, 255);
 }

+/* ===================================
+   작업 레벨 셀 스타일
+   L1~L8 각 레벨의 텍스트 셀
+   =================================== */
 .task-txt {
-    width: 40px;
+    width: 40px;                           /* 고정 너비 40px */
    height: 40px;
    flex-grow: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
-    -unity-text-align: middle-center;
+    -unity-text-align: middle-center;      /* 텍스트 중앙 정렬 */
    font-size: 10px;
    color: rgb(34, 34, 34);
    border-left-width: 0;
@@ -63,7 +112,7 @@
    box-sizing: border-box;
    -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');
    border-top-width: 0;
-    border-right-width: 1px;
+    border-right-width: 1px;               /* 오른쪽 구분선 */
    border-bottom-width: 0;
    margin-top: 0;
    margin-right: 0;
@@ -74,9 +123,10 @@
    padding-bottom: 0;
    padding-left: 0;
    flex-direction: row;
-    border-right-color: rgb(255, 255, 255);
+    border-right-color: rgb(255, 255, 255); /* 흰색 구분선 */
 }

+/* 첫 번째 레벨 셀: 왼쪽 테두리 없음 */
 .task-txt:first-child {
    border-left-width: 0;
 }
--- a/Assets/Resources/SHI/Modal/ISOP/ISOPChart.uxml
+++ b/Assets/Resources/SHI/Modal/ISOP/ISOPChart.uxml
@@ -1,21 +1,77 @@
+<!--
+    ISOPChart.uxml - ISOP 간트 차트 레이아웃
+
+    [개요]
+    간트 차트(Gantt Chart) UI의 메인 레이아웃을 정의합니다.
+    3단 타임라인 헤더(월/주/일)와 작업 목록을 표시합니다.
+
+    [UI 구조]
+    Root
+    ├── gantt-container - 간트 차트 전체 컨테이너
+    │   ├── header-container - 헤더 영역 (스크롤 시 고정)
+    │   │   └── header - 헤더 내부 (수평 배치)
+    │   │       ├── header-title - 작업 레벨(L1~L8) 컬럼 헤더
+    │   │       └── header-timeline - 타임라인 헤더 (3단)
+    │   │           ├── timeline-months - 월 레이어 (최상단)
+    │   │           ├── timeline-weeks - 주 레이어 (중간)
+    │   │           └── timeline-days - 일 레이어 (최하단)
+    │   └── content-scroll - 스크롤 가능한 작업 목록 영역
+    │       └── content - 작업 행(ISOPChartRow)들이 추가되는 컨테이너
+    └── expand-btn - 차트 확장 버튼 (전체화면)
+
+    [3단 헤더 구조]
+    - timeline-months: "2025년 1월", "2025년 2월" 등 월 단위
+    - timeline-weeks: "1주", "2주" 등 주 단위
+    - timeline-days: "1", "2", "3" 등 일 단위 (각 셀 18px)
+
+    [동적 렌더링]
+    - ISOPChart.cs에서 JSON 데이터 기반으로 content에 행 추가
+    - 스크롤 시 header의 left 위치를 조정하여 타임라인 동기화
+
+    [연관 파일]
+    - ISOPChart.uss : 스타일시트
+    - ISOPChartRow.uxml : 개별 작업 행 템플릿
+    - ISOPChart.cs : C# 컨트롤러
+
+    [사용되는 리소스]
+    - Fonts/Pretendard/Pretendard-Bold : 헤더 제목 폰트
+    - SHI/Images/btn_expand_36 : 확장 버튼 이미지
+-->
 <ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="project://database/Assets/Resources/SHI/Modal/ISOP/ISOPChart.uss?fileID=7433441132597879392&amp;guid=c17ad7709c5ace142abe32467f16815b&amp;type=3#ISOPChart" />
+
+    <!-- 간트 차트 전체 컨테이너 -->
    <ui:VisualElement name="gantt-container" style="flex-grow: 1; height: 100%; flex-direction: column; min-width: 0; overflow: hidden;">
+
+        <!-- 헤더 영역: 스크롤해도 상단에 고정됨 -->
        <ui:VisualElement name="header-container" style="flex-grow: 0; height: 56px; min-height: 56px; flex-shrink: 0; overflow: hidden;">
+            <!-- 헤더 내부: 작업 컬럼 + 타임라인 수평 배치 -->
            <ui:VisualElement name="header" style="flex-grow: 0; height: 56px; flex-direction: row; min-height: 56px; flex-shrink: 0; position: relative;">
+
+                <!-- 작업 레벨 헤더: L1~L8 컬럼 (너비는 C#에서 동적 설정) -->
                <ui:VisualElement name="header-title" style="flex-grow: 0; background-color: rgb(123, 183, 226); flex-shrink: 0; height: 56px; border-bottom-width: 1px; border-bottom-color: rgb(141, 141, 141);">
                    <ui:Label text="BLOCK STRUCTURE" style="margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; -unity-font-definition: resource(&apos;Fonts/Pretendard/Pretendard-Bold&apos;); color: rgb(34, 34, 34); font-size: 12px; -unity-text-align: middle-center; width: 100%; height: 100%;" />
                </ui:VisualElement>
+
+                <!-- 타임라인 헤더: 3단 구조 (월/주/일) -->
                <ui:VisualElement name="header-timeline" style="flex-grow: 0; flex-shrink: 0; background-color: rgb(240, 240, 240); border-left-width: 1px; border-left-color: rgb(255, 255, 255); height: 56px; border-bottom-width: 1px; border-bottom-color: rgb(141, 141, 141);">
+                    <!-- 월 레이어 (최상단, 18px 높이) -->
                    <ui:VisualElement name="timeline-months" style="flex-grow: 0; height: 18px; flex-shrink: 0; flex-direction: row; border-bottom-width: 1px; border-bottom-color: rgb(255, 255, 255);" />
+                    <!-- 주 레이어 (중간, 18px 높이) -->
                    <ui:VisualElement name="timeline-weeks" style="flex-grow: 0; height: 18px; flex-shrink: 0; flex-direction: row; border-bottom-color: rgb(255, 255, 255); border-bottom-width: 1px;" />
+                    <!-- 일 레이어 (최하단, 18px 높이) -->
                    <ui:VisualElement name="timeline-days" style="flex-grow: 0; height: 18px; flex-direction: row; flex-shrink: 0;" />
                </ui:VisualElement>
            </ui:VisualElement>
        </ui:VisualElement>
+
+        <!-- 작업 목록 스크롤 영역: 수평/수직 스크롤 지원 -->
        <ui:ScrollView name="content-scroll" mode="VerticalAndHorizontal" horizontal-scroller-visibility="Auto" vertical-scroller-visibility="Auto" style="flex-grow: 1;">
+            <!-- 작업 행 컨테이너: ISOPChartRow 인스턴스들이 여기에 추가됨 -->
            <ui:VisualElement name="content" style="flex-grow: 0; flex-shrink: 0; flex-direction: column;" />
        </ui:ScrollView>
    </ui:VisualElement>
+
+    <!-- 확장 버튼: 간트 차트를 전체 화면으로 확장 -->
    <ui:Button name="expand-btn" style="position: absolute; top: 20px; left: 10px; width: 36px; height: 36px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: rgba(255, 255, 255, 0); background-image: resource(&apos;SHI/Images/btn_expand_36&apos;);" />
 </ui:UXML>
--- a/Assets/Resources/SHI/Modal/ISOP/ISOPChartRow.uxml
+++ b/Assets/Resources/SHI/Modal/ISOP/ISOPChartRow.uxml
@@ -1,9 +1,52 @@
+<!--
+    ISOPChartRow.uxml - 간트 차트 작업 행 템플릿
+
+    [개요]
+    간트 차트의 개별 작업(Task)을 표시하는 행 템플릿입니다.
+    ISOPChart.cs에서 각 작업마다 이 템플릿을 복제하여 사용합니다.
+
+    [UI 구조]
+    task-row (수평 배치)
+    ├── task-l - 작업 레벨 컨테이너 (L1~L8)
+    │   └── task-txt - 첫 번째 레벨(L1) 라벨
+    │       (L2~L8은 C#에서 동적 추가)
+    └── task-cell - 타임라인 셀 (막대 그래프가 그려지는 영역)
+
+    [동적 렌더링 (ISOPChart.cs)]
+    1. task-l에 L2~L8 라벨 동적 추가 (maxL까지)
+    2. task-cell에 계획/실적 막대 VisualElement 추가
+       - 계획 막대: 파란색, top: 4px
+       - 실적 막대: 연두색, top: 10px
+
+    [배경 이미지]
+    - task-cell의 배경으로 bg_task_cell_18x40.png 사용
+    - 18px × 40px 크기로 반복하여 일 단위 그리드 표시
+
+    [연관 파일]
+    - ISOPChart.uxml : 부모 컨테이너
+    - ISOPChart.uss : 스타일시트 (.task-row, .task-txt 클래스)
+    - ISOPChart.cs : 행 생성 및 막대 렌더링
+
+    [사용되는 리소스]
+    - SHI/Images/bg_task_cell_18x40 : 타임라인 그리드 배경
+-->
 <ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="project://database/Assets/Resources/SHI/Modal/ISOP/ISOPChart.uss?fileID=7433441132597879392&amp;guid=c17ad7709c5ace142abe32467f16815b&amp;type=3#ISOPChart" />
+
+    <!-- 작업 행 컨테이너 -->
    <ui:VisualElement name="task-row" style="flex-grow: 1; height: 40px; flex-direction: row;">
+
+        <!-- 작업 레벨 컨테이너: L1~L8 라벨들을 포함
+             - 배경색: 연한 파란색
+             - 하단 흰색 테두리로 행 구분 -->
        <ui:VisualElement name="task-l" style="flex-grow: 0; background-color: rgb(228, 236, 255); border-bottom-width: 1px; border-bottom-color: rgb(255, 255, 255); flex-direction: row; flex-shrink: 0;">
+            <!-- 첫 번째 레벨(L1) 라벨 (L2~L8은 C#에서 동적 추가) -->
            <ui:Label name="task-txt" class="task-cell task-txt" />
        </ui:VisualElement>
+
+        <!-- 타임라인 셀: 계획/실적 막대가 그려지는 영역
+             - 배경: 18x40px 그리드 이미지 반복
+             - 너비: C#에서 totalDays × pixelsPerDay로 설정 -->
        <ui:VisualElement name="task-cell" style="flex-grow: 0; flex-direction: row; background-image: resource(&apos;SHI/Images/bg_task_cell_18x40&apos;); background-repeat: repeat repeat; background-size: 18px 40px; background-position-x: left 0; background-position-y: top 0; flex-shrink: 0; width: 100%;" />
    </ui:VisualElement>
 </ui:UXML>
--- a/Assets/Resources/SHI/Modal/ISOP/ISOPModal.uss
+++ b/Assets/Resources/SHI/Modal/ISOP/ISOPModal.uss
@@ -1,29 +1,68 @@
+/*
+ * ISOPModal.uss - ISOP 모달 전역 스타일시트
+ *
+ * [개요]
+ * ISOP 모달 창 전체에 적용되는 스타일을 정의합니다.
+ * 주로 스크롤바 커스터마이징과 기본 텍스트 스타일을 포함합니다.
+ *
+ * [스타일 구조]
+ * 1. .unity-text-element : 기본 텍스트 스타일 (Pretendard 폰트, 10px)
+ * 2. .unity-scroller--vertical : 세로 스크롤바 커스터마이징
+ * 3. .unity-scroller--horizontal : 가로 스크롤바 커스터마이징
+ *
+ * [스크롤바 디자인]
+ * - 너비/높이: 6px (슬림한 디자인)
+ * - 트랙: 흰색 배경 (#FFFFFF)
+ * - 드래거: 밝은 회색 (#D8D8D8), 둥근 모서리 (3px)
+ * - 화살표 버튼: 숨김 처리
+ *
+ * [폰트 설정]
+ * - 기본 폰트: Pretendard-Regular
+ * - 기본 색상: rgb(34, 34, 34) - 진한 회색
+ * - 기본 크기: 10px
+ *
+ * [연관 파일]
+ * - ISOPModal.uxml : 메인 레이아웃
+ * - ISOPChart.uss : 간트 차트 스타일
+ * - ISOPModelView.uss : 모델 뷰 스타일
+ */
+
+/* ===================================
+   기본 텍스트 스타일
+   모달 내 모든 텍스트 요소에 적용
+   =================================== */
 .unity-text-element {
    -unity-font: url('project://database/Assets/Fonts/Pretendard-Regular.otf');
    -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');
-    color: rgb(34, 34, 34);
+    color: rgb(34, 34, 34);      /* 진한 회색 텍스트 */
    font-size: 10px;
 }

-/* 세로 스크롤바 */
+/* ===================================
+   세로 스크롤바 스타일
+   슬림한 6px 너비의 커스텀 스크롤바
+   =================================== */
 .unity-scroller--vertical {
-    width: 6px;
+    width: 6px;                   /* 슬림한 너비 */
    margin-right: 4px;
    margin-bottom: 0px;
 }

+/* 세로 스크롤바 트랙 (배경) */
 .unity-scroller--vertical .unity-base-slider__tracker {
-    background-color: rgb(255, 255, 255);
+    background-color: rgb(255, 255, 255);  /* 흰색 배경 */
    border-width: 0;
 }

+/* 세로 스크롤바 드래거 (핸들) */
 .unity-scroller--vertical .unity-base-slider__dragger {
-    background-color: rgb(216, 216, 216);
+    background-color: rgb(216, 216, 216);  /* 밝은 회색 */
    border-width: 0;
-    border-radius: 3px;
+    border-radius: 3px;                     /* 둥근 모서리 */
    width: 6px;
 }

+/* 세로 스크롤바 화살표 버튼 숨김 */
 .unity-scroller--vertical .unity-repeat-button {
    display: none;
    width: 0;
@@ -32,29 +71,36 @@
    min-height: 0;
 }

+/* 세로 스크롤바 슬라이더 마진 제거 */
 .unity-scroller--vertical .unity-slider {
    margin: 0;
 }

-/* 가로 스크롤바 */
+/* ===================================
+   가로 스크롤바 스타일
+   슬림한 6px 높이의 커스텀 스크롤바
+   =================================== */
 .unity-scroller--horizontal {
-    height: 6px;
+    height: 6px;                  /* 슬림한 높이 */
    margin-bottom: 4px;
    margin-right: 0px;
 }

+/* 가로 스크롤바 트랙 (배경) */
 .unity-scroller--horizontal .unity-base-slider__tracker {
-    background-color: rgb(255, 255, 255);
+    background-color: rgb(255, 255, 255);  /* 흰색 배경 */
    border-width: 0;
 }

+/* 가로 스크롤바 드래거 (핸들) */
 .unity-scroller--horizontal .unity-base-slider__dragger {
-    background-color: rgb(216, 216, 216);
+    background-color: rgb(216, 216, 216);  /* 밝은 회색 */
    border-width: 0;
-    border-radius: 3px;
+    border-radius: 3px;                     /* 둥근 모서리 */
    height: 6px;
 }

+/* 가로 스크롤바 화살표 버튼 숨김 */
 .unity-scroller--horizontal .unity-repeat-button {
    display: none;
    width: 0;
@@ -63,6 +109,7 @@
    min-height: 0;
 }

+/* 가로 스크롤바 슬라이더 마진 제거 */
 .unity-scroller--horizontal .unity-slider {
    margin: 0;
 }
--- a/Assets/Resources/SHI/Modal/ISOP/ISOPModal.uxml
+++ b/Assets/Resources/SHI/Modal/ISOP/ISOPModal.uxml
@@ -1,14 +1,72 @@
+<!--
+    ISOPModal.uxml - ISOP(조선소 공정 계획) 모달 메인 레이아웃
+
+    [개요]
+    ISOP 모달 창의 전체 레이아웃을 정의합니다.
+    TreeList(모델 계층), ISOPModelView(3D 뷰어), ISOPChart(간트 차트) 세 가지 뷰를
+    수평으로 배치합니다.
+
+    [UI 구조]
+    Root
+    ├── topbar - 상단 헤더 바 (제목, 닫기 버튼)
+    │   ├── title - 모달 제목 라벨
+    │   └── closeButton - 모달 닫기 버튼
+    └── content - 메인 컨텐츠 영역 (수평 배치)
+        ├── TreeList - 모델 계층 구조 (왼쪽 사이드바)
+        ├── ISOPModelView - 3D 모델 뷰어 (중앙)
+        ├── ISOPChart - 간트 차트 (오른쪽)
+        ├── show-tree-btn - TreeList 표시 버튼 (숨겨진 상태일 때)
+        └── drag-btn - ModelView/Chart 크기 조절 드래그 버튼
+
+    [커스텀 컴포넌트]
+    - SHI.Modal.TreeList : 모델 계층 트리뷰
+    - SHI.Modal.ISOP.ISOPModelView : 3D 모델 렌더링 뷰
+    - SHI.Modal.ISOP.ISOPChart : 간트 차트 뷰
+
+    [레이아웃 특징]
+    - 수평(Horizontal) 레이아웃: TreeList | ModelView | Chart
+    - flex-basis: 0으로 ModelView와 Chart가 동일한 공간 차지
+    - drag-btn으로 ModelView/Chart 비율 조절 가능
+
+    [연관 파일]
+    - ISOPModal.uss : 스타일시트 (스크롤바 커스터마이징)
+    - ISOPModal.cs : C# 컨트롤러 (뷰 간 연동 처리)
+
+    [사용되는 리소스]
+    - Fonts/Pretendard/Pretendard-Bold : 제목 폰트
+    - SHI/Images/btn_close_24 : 닫기 버튼 이미지
+    - SHI/Images/btn_show_explorer_40x41 : TreeList 표시 버튼 이미지
+    - SHI/Images/btn_drag_40 : 드래그 버튼 이미지
+-->
 <ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="project://database/Assets/Resources/SHI/Modal/ISOP/ISOPModal.uss?fileID=7433441132597879392&amp;guid=b798684be75686146a13288df44a17a3&amp;type=3#ISOPModal" />
+
+    <!-- 상단 헤더 바: 제목과 닫기 버튼 -->
    <ui:VisualElement name="topbar" style="flex-grow: 0; width: 100%; height: 60px; background-color: rgb(9, 24, 53); flex-shrink: 0; align-items: center; align-self: auto; align-content: auto; flex-direction: row; justify-content: center;">
+        <!-- 모달 제목 (중앙 정렬) -->
        <ui:Label text="블록2 상세" name="title" style="-unity-font-definition: url(&quot;project://database/Assets/Resources/Fonts/Pretendard/Pretendard-Bold.otf?fileID=12800000&amp;guid=f9a95f3332ad9a9468b4eaa89f125b35&amp;type=3#Pretendard-Bold&quot;); font-size: 24px; color: rgb(255, 255, 255); flex-basis: auto; justify-content: center; align-items: center; -unity-text-align: middle-center; width: 500px;" />
+        <!-- 닫기 버튼 (오른쪽 상단) -->
        <ui:Button name="closeButton" style="width: 24px; height: 24px; background-image: url(&quot;project://database/Assets/Resources/SHI/Images/btn_close_24.png?fileID=21300000&amp;guid=461a84aa7f4a0104bb7a41e1f9d15f86&amp;type=3#btn_close_24&quot;); background-color: rgba(255, 255, 255, 0); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; position: absolute; right: 18px;" />
    </ui:VisualElement>
+
+    <!-- 메인 컨텐츠 영역: TreeList, ModelView, Chart 수평 배치 -->
    <ui:VisualElement name="content" style="flex-grow: 1; flex-shrink: 1; align-self: stretch; align-content: auto; align-items: stretch; width: 100%; flex-direction: row; overflow: hidden;">
+        <!-- TreeList: 모델 계층 구조 트리뷰 (왼쪽 사이드바) -->
        <SHI.Modal.TreeList name="treeList" style="bottom: 0; left: 0; flex-direction: column; flex-wrap: nowrap; height: 100%; flex-shrink: 0;" />
+
+        <!-- ISOPModelView: 3D 모델 렌더링 뷰어 (중앙)
+             flex-basis: 0으로 Chart와 동일한 공간 분할 -->
        <SHI.Modal.ISOP.ISOPModelView style="flex-grow: 1; flex-shrink: 1; flex-basis: 0; flex-direction: column; min-width: 0; overflow: hidden;" />
+
+        <!-- ISOPChart: 간트 차트 뷰 (오른쪽)
+             flex-basis: 0으로 ModelView와 동일한 공간 분할 -->
        <SHI.Modal.ISOP.ISOPChart style="flex-grow: 1; flex-shrink: 1; flex-basis: 0; height: 100%; min-width: 0; overflow: hidden;" />
+
+        <!-- TreeList 표시 버튼: TreeList가 숨겨졌을 때 나타남 -->
        <ui:Button text="&#10;" name="show-tree-btn" style="position: absolute; left: 0; top: 26px; width: 40px; height: 41px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: rgba(255, 255, 255, 0); background-image: resource(&apos;SHI/Images/btn_show_explorer_40x41&apos;);" />
+
+        <!-- 드래그 버튼: ModelView/Chart 크기 비율 조절
+             HorizontalDragManipulator에서 처리 -->
        <ui:Button text="&#10;" name="drag-btn" style="position: absolute; left: 60%; top: auto; width: 40px; height: 40px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: rgba(255, 255, 255, 0); background-image: resource(&apos;SHI/Images/btn_drag_40&apos;); bottom: 40px; align-items: center; align-self: center;" />
    </ui:VisualElement>
 </ui:UXML>
--- a/Assets/Resources/SHI/Modal/ISOP/ISOPModelView.uss
+++ b/Assets/Resources/SHI/Modal/ISOP/ISOPModelView.uss
@@ -1,7 +1,36 @@
+/*
+ * ISOPModelView.uss - 3D 모델 뷰어 스타일시트
+ *
+ * [개요]
+ * ISOPModelView 컴포넌트의 루트 요소 스타일을 정의합니다.
+ * 주로 Flexbox 레이아웃 설정을 포함합니다.
+ *
+ * [스타일 구조]
+ * - :root - 루트 요소 Flexbox 설정
+ *
+ * [레이아웃]
+ * - flex-grow: 1, flex-shrink: 1, flex-basis: 0
+ *   → ISOPModal에서 ISOPChart와 동일한 비율로 공간 분할
+ * - min-width: 0 → Flexbox에서 컨텐츠 오버플로우 방지
+ * - overflow: hidden → 자식 요소 잘림 처리
+ *
+ * [참고]
+ * 3D 렌더링은 C#에서 RenderTexture를 통해 처리되므로
+ * 이 스타일시트는 레이아웃 설정만 담당합니다.
+ *
+ * [연관 파일]
+ * - ISOPModelView.uxml : UI 레이아웃
+ * - ISOPModelView.cs : C# 컨트롤러 (렌더링 처리)
+ */
+
+/* ===================================
+   루트 요소 기본 설정
+   ISOPChart와 동일한 비율로 공간 분할
+   =================================== */
 :root {
-    flex-grow: 1;
-    flex-shrink: 1;
-    flex-basis: 0;
-    min-width: 0;
-    overflow: hidden;
-}
+    flex-grow: 1;          /* 남은 공간 채우기 */
+    flex-shrink: 1;        /* 공간 부족 시 축소 허용 */
+    flex-basis: 0;         /* 초기 크기 0 (grow로 분배) */
+    min-width: 0;          /* Flexbox 오버플로우 방지 */
+    overflow: hidden;      /* 자식 요소 잘림 처리 */
+}
--- a/Assets/Resources/SHI/Modal/ISOP/ISOPModelView.uxml
+++ b/Assets/Resources/SHI/Modal/ISOP/ISOPModelView.uxml
@@ -1,5 +1,43 @@
+<!--
+    ISOPModelView.uxml - 3D 모델 뷰어 레이아웃
+
+    [개요]
+    glTF/glb 3D 모델을 렌더링하는 뷰어의 UI 레이아웃입니다.
+    RenderTexture로 오프스크린 렌더링된 3D 모델을 배경으로 표시합니다.
+
+    [UI 구조]
+    Root
+    ├── render-container - 3D 렌더링이 표시되는 영역
+    │   (RenderTexture가 이 요소의 배경으로 설정됨)
+    └── expand-btn - 모델 뷰 확장 버튼 (전체화면)
+
+    [렌더링 방식]
+    1. ISOPModelView.cs에서 전용 카메라(ISOPModelViewCamera) 생성
+    2. 카메라가 Layer 6의 3D 모델을 RenderTexture로 렌더링
+    3. RenderTexture를 render-container의 배경으로 설정
+    4. 매 프레임 MarkDirtyRepaint()로 UI 갱신
+
+    [마우스 조작]
+    - 가운데 버튼 드래그: 카메라 이동 (Pan)
+    - 오른쪽 버튼 드래그: 모델 회전 (Orbit)
+    - 마우스 휠: 확대/축소 (Zoom)
+
+    [연관 파일]
+    - ISOPModelView.uss : 스타일시트
+    - ISOPModelView.cs : C# 컨트롤러 (렌더링, 마우스 조작)
+
+    [사용되는 리소스]
+    - SHI/Images/btn_expand_36 : 확장 버튼 이미지
+-->
 <ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="project://database/Assets/Resources/SHI/Modal/ISOP/ISOPModelView.uss?fileID=7433441132597879392&amp;guid=d8f71926a38e1884c96841b7f9eb7fd2&amp;type=3#ISOPModelView" />
+
+    <!-- 3D 렌더링 컨테이너: RenderTexture가 배경으로 표시됨
+         - flex-grow: 1로 부모 영역 전체 채움
+         - overflow: hidden으로 내용 잘림 방지 -->
    <ui:VisualElement name="render-container" style="flex-grow: 1; height: 100%; min-width: 0; overflow: hidden;" />
+
+    <!-- 확장 버튼: 모델 뷰를 전체 화면으로 확장
+         - 오른쪽 상단에 위치 -->
    <ui:Button name="expand-btn" style="position: absolute; top: 20px; right: 10px; width: 36px; height: 36px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: rgba(255, 255, 255, 0); background-image: resource(&apos;SHI/Images/btn_expand_36&apos;);" />
 </ui:UXML>
--- a/Assets/Resources/SHI/Modal/ISOP/ISOPModalSetting.asset
+++ b/Assets/Resources/SHI/Modal/ISOP/ISOPModalSetting.asset
@@ -10,7 +10,7 @@ MonoBehaviour:
  m_Enabled: 1
  m_EditorHideFlags: 0
  m_Script: {fileID: 19101, guid: 0000000000000000e000000000000000, type: 0}
-  m_Name: ISOPModalSetting
+  m_Name: ModalSetting
  m_EditorClassIdentifier: UnityEngine.dll::UnityEngine.UIElements.PanelSettings
  themeUss: {fileID: -4733365628477956816, guid: 7f6362c1cd0b3074ab0f0f88dd27536b, type: 3}
  m_DisableNoThemeWarning: 0
--- a/Assets/Resources/SHI/Modal/ISOP/ISOPModalSetting.asset.meta
+++ b/Assets/Resources/SHI/Modal/ISOP/ISOPModalSetting.asset.meta
--- a/Assets/Resources/SHI/Modal/NW.meta
+++ b/Assets/Resources/SHI/Modal/NW.meta
@@ -0,0 +1,8 @@
+fileFormatVersion: 2
+guid: a0883edd2b7ff3b439985de5d8021231
+folderAsset: yes
+DefaultImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
--- a/Assets/Resources/SHI/Modal/NW/NWChart.uss
+++ b/Assets/Resources/SHI/Modal/NW/NWChart.uss
@@ -0,0 +1,246 @@
+/*
+ * NWChart.uss - NW 네트워크 다이어그램 스타일시트
+ *
+ * [개요]
+ * 네트워크 다이어그램(Network Diagram)의 스타일을 정의합니다.
+ * 노드, 연결선, 타임라인 헤더 등의 스타일을 포함합니다.
+ *
+ * [스타일 구조]
+ * 1. 레이아웃 기본 설정
+ *    - :root, .nw-container, .header-container, .header, .header-timeline
+ * 2. 네트워크 캔버스
+ *    - .network-canvas, .grid-layer, .lines-layer, .nodes-layer
+ * 3. 노드 스타일
+ *    - .nw-node (기본), .nw-node-end (종료), .nw-node-critical (크리티컬)
+ *    - .nw-node-completed (완료), .nw-node-dragging (드래그 중)
+ * 4. 연결선 스타일
+ *    - .connection-line, .connection-arrow
+ * 5. 버튼 스타일
+ *    - .expand-btn
+ *
+ * [색상 팔레트]
+ * - 배경: rgb(245, 245, 245) - 밝은 회색
+ * - 기본 노드: rgb(51, 153, 230) - 파란색
+ * - 종료 노드: rgb(230, 204, 51) - 노란색
+ * - 크리티컬 노드: rgb(230, 80, 80) - 빨간색
+ * - 완료 노드: rgb(80, 180, 80) - 초록색
+ * - 연결선: rgb(80, 80, 80) - 진한 회색
+ *
+ * [노드 상태]
+ * - 기본: 파란색 배경, 호버 시 밝아짐
+ * - 드래그 중: 1.1배 확대, 흰색 테두리, cursor: move
+ * - 종료/크리티컬/완료: 각각 다른 색상
+ *
+ * [연관 파일]
+ * - NWChart.uxml : UI 레이아웃
+ * - NWChart.cs : C# 컨트롤러 (노드 생성, 연결선 렌더링)
+ */
+
+/* ===================================
+   루트 요소 기본 설정
+   Flexbox 레이아웃 초기화
+   =================================== */
+:root {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 0;
+    min-width: 0;
+    overflow: hidden;
+}
+
+/* ===================================
+   네트워크 다이어그램 메인 컨테이너
+   세로 방향 Flexbox 레이아웃
+   =================================== */
+.nw-container {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-direction: column;
+    background-color: rgb(245, 245, 245);  /* 밝은 회색 배경 */
+    min-width: 0;
+    overflow: hidden;
+    height: 100%;
+}
+
+/* ===================================
+   헤더 영역 스타일
+   타임라인 헤더를 담는 컨테이너
+   =================================== */
+.header-container {
+    flex-grow: 0;
+    height: 56px;                          /* 2단 헤더 높이 (36 + 18 + 2px 테두리) */
+    min-height: 56px;
+    flex-shrink: 0;
+    overflow: hidden;
+}
+
+.header {
+    flex-grow: 0;
+    height: 56px;
+    flex-direction: row;
+    min-height: 56px;
+    flex-shrink: 0;
+    position: relative;
+}
+
+.header-timeline {
+    flex-grow: 0;
+    flex-shrink: 0;
+    background-color: rgb(240, 240, 240);  /* 밝은 회색 배경 */
+    height: 56px;
+    border-bottom-width: 1px;
+    border-bottom-color: rgb(141, 141, 141);
+}
+
+/* 타임라인 행 (월, 일) */
+.timeline-row {
+    flex-grow: 0;
+    height: 18px;                          /* 기본 높이 (일 레이어) */
+    flex-shrink: 0;
+    flex-direction: row;
+    border-bottom-width: 1px;
+    border-bottom-color: rgb(255, 255, 255);
+}
+
+/* ===================================
+   스크롤 영역 스타일
+   =================================== */
+.content-scroll {
+    flex-grow: 1;
+}
+
+/* ===================================
+   네트워크 캔버스 스타일
+   노드와 연결선이 그려지는 영역
+   =================================== */
+.network-canvas {
+    flex-grow: 0;
+    flex-shrink: 0;
+    position: relative;                    /* 자식 요소의 절대 위치 기준 */
+    background-image: resource('SHI/Images/bg_task_cell_18x18');  /* 그리드 배경 */
+    background-repeat: repeat repeat;
+    background-size: 18px 18px;            /* 일 단위 그리드 */
+}
+
+/* 그리드 레이어 (가장 아래) */
+.grid-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/* 연결선 레이어 (중간) */
+.lines-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/* 노드 레이어 (최상단) */
+.nodes-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+/* ===================================
+   확장 버튼 스타일
+   전체 화면으로 확장하는 버튼
+   =================================== */
+.expand-btn {
+    position: absolute;
+    top: 20px;
+    left: 10px;
+    width: 36px;
+    height: 36px;
+    margin: 0;
+    padding: 0;
+    border-width: 0;
+    background-color: rgba(255, 255, 255, 0);  /* 투명 배경 */
+    background-image: resource('SHI/Images/btn_expand_36');
+}
+
+/* ===================================
+   노드 스타일
+   네트워크 다이어그램의 작업 노드
+   =================================== */
+.nw-node {
+    background-color: rgb(51, 153, 230);   /* 파란색 (기본) */
+    border-radius: 4px;                     /* 둥근 모서리 */
+    border-width: 1px;
+    border-color: rgba(51, 51, 51, 0.5);   /* 반투명 회색 테두리 */
+    justify-content: center;
+    align-items: center;
+    cursor: link;                           /* 클릭 가능 커서 */
+    transition-duration: 0.15s;             /* 호버 애니메이션 */
+}
+
+/* 노드 호버 상태 */
+.nw-node:hover {
+    background-color: rgb(71, 173, 250);   /* 밝은 파란색 */
+}
+
+/* 노드 드래그 중 상태 */
+.nw-node-dragging {
+    scale: 1.1;                             /* 10% 확대 */
+    border-width: 2px;
+    border-color: rgb(255, 255, 255);      /* 흰색 테두리 */
+    cursor: move;                           /* 이동 커서 */
+}
+
+/* 노드 라벨 스타일 */
+.nw-node-label {
+    -unity-text-align: middle-center;
+    font-size: 9px;
+    color: rgb(255, 255, 255);             /* 흰색 텍스트 */
+    -unity-font-style: bold;
+    margin: 0;
+    padding: 2px;
+    overflow: hidden;
+    text-overflow: ellipsis;                /* 긴 텍스트 말줄임 */
+    white-space: nowrap;
+    -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Bold');
+}
+
+/* ===================================
+   연결선 스타일
+   노드 간 의존성을 표시하는 선
+   =================================== */
+.connection-line {
+    background-color: rgb(80, 80, 80);     /* 진한 회색 */
+}
+
+.connection-arrow {
+    background-color: transparent;          /* 화살표 머리 (투명) */
+}
+
+/* ===================================
+   노드 상태별 색상
+   =================================== */
+
+/* 종료 노드 (노란색) */
+.nw-node-end {
+    background-color: rgb(230, 204, 51);
+}
+
+.nw-node-end:hover {
+    background-color: rgb(250, 224, 71);
+}
+
+/* 크리티컬 노드 (빨간색) - 일정이 촉박한 작업 */
+.nw-node-critical {
+    background-color: rgb(230, 80, 80);
+}
+
+.nw-node-critical:hover {
+    background-color: rgb(250, 100, 100);
+}
+
+/* 완료 노드 (초록색) */
+.nw-node-completed {
+    background-color: rgb(80, 180, 80);
+}
+
+.nw-node-completed:hover {
+    background-color: rgb(100, 200, 100);
+}
--- a/Assets/Resources/SHI/Modal/NW/NWChart.uss.meta
+++ b/Assets/Resources/SHI/Modal/NW/NWChart.uss.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: cd76aa40483871140a3bc357d1a40c1a
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
--- a/Assets/Resources/SHI/Modal/NW/NWChart.uxml
+++ b/Assets/Resources/SHI/Modal/NW/NWChart.uxml
@@ -0,0 +1,80 @@
+<!--
+    NWChart.uxml - NW 네트워크 다이어그램 레이아웃
+
+    [개요]
+    네트워크 다이어그램(Network Diagram) UI의 메인 레이아웃을 정의합니다.
+    노드(작업)와 연결선(의존성)을 타임라인 위에 시각화합니다.
+
+    [UI 구조]
+    Root
+    ├── nw-container - 네트워크 다이어그램 전체 컨테이너
+    │   ├── header-container - 헤더 영역 (스크롤 시 고정)
+    │   │   └── header - 헤더 내부
+    │   │       └── header-timeline - 타임라인 헤더 (2단)
+    │   │           ├── timeline-months - 월 레이어 (36px 높이)
+    │   │           └── timeline-days - 일 레이어 (18px 높이)
+    │   └── content-scroll - 스크롤 가능한 네트워크 영역
+    │       └── network-canvas - 네트워크 캔버스 (상대 위치 기준)
+    │           ├── grid-layer - 그리드 배경 레이어
+    │           ├── lines-layer - 연결선 레이어 (노드 아래)
+    │           └── nodes-layer - 노드 레이어 (최상단)
+    └── expand-btn - 차트 확장 버튼 (전체화면)
+
+    [레이어 구조]
+    - grid-layer: 18x18px 그리드 배경 (일 단위)
+    - lines-layer: 노드 간 연결선 (화살표 포함)
+    - nodes-layer: 작업 노드들 (드래그 가능)
+
+    [ISOP Chart와의 차이점]
+    - ISOP: 간트 차트 (행 기반, 막대 그래프)
+    - NW: 네트워크 다이어그램 (노드 기반, 연결선)
+    - ISOP: 3단 헤더 (월/주/일)
+    - NW: 2단 헤더 (월/일)
+
+    [연관 파일]
+    - NWChart.uss : 스타일시트 (노드, 연결선 스타일)
+    - NWChart.cs : C# 컨트롤러 (노드 배치, 연결선 렌더링)
+
+    [사용되는 리소스]
+    - SHI/Images/bg_task_cell_18x18 : 그리드 배경 이미지
+    - SHI/Images/btn_expand_36 : 확장 버튼 이미지
+-->
+<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
+    <Style src="project://database/Assets/Resources/SHI/Modal/NW/NWChart.uss?fileID=7433441132597879392&amp;guid=cd76aa40483871140a3bc357d1a40c1a&amp;type=3#NWChart" />
+
+    <!-- 네트워크 다이어그램 전체 컨테이너 -->
+    <ui:VisualElement name="nw-container" class="nw-container">
+
+        <!-- 헤더 영역: 스크롤해도 상단에 고정됨 -->
+        <ui:VisualElement name="header-container" class="header-container">
+            <!-- 헤더 내부: 타임라인만 포함 (ISOP과 달리 작업 컬럼 없음) -->
+            <ui:VisualElement name="header" class="header">
+                <!-- 타임라인 헤더: 2단 구조 (월/일) -->
+                <ui:VisualElement name="header-timeline" class="header-timeline">
+                    <!-- 월 레이어 (상단, 36px 높이) -->
+                    <ui:VisualElement name="timeline-months" class="timeline-row" style="height: 36px;" />
+                    <!-- 일 레이어 (하단, 18px 높이) -->
+                    <ui:VisualElement name="timeline-days" class="timeline-row" />
+                </ui:VisualElement>
+            </ui:VisualElement>
+        </ui:VisualElement>
+
+        <!-- 네트워크 영역 스크롤 뷰: 수평/수직 스크롤 지원 -->
+        <ui:ScrollView name="content-scroll" mode="VerticalAndHorizontal" horizontal-scroller-visibility="Auto" vertical-scroller-visibility="Auto" class="content-scroll">
+            <!-- 네트워크 캔버스: 노드와 연결선이 그려지는 영역
+                 - 배경: 18x18px 그리드 이미지 반복
+                 - position: relative로 자식 요소들의 절대 위치 기준 -->
+            <ui:VisualElement name="network-canvas" class="network-canvas">
+                <!-- 그리드 레이어: 배경 그리드 (가장 아래) -->
+                <ui:VisualElement name="grid-layer" class="grid-layer" />
+                <!-- 연결선 레이어: 노드 간 연결선 (중간) -->
+                <ui:VisualElement name="lines-layer" class="lines-layer" />
+                <!-- 노드 레이어: 작업 노드들 (최상단, 드래그 가능) -->
+                <ui:VisualElement name="nodes-layer" class="nodes-layer" />
+            </ui:VisualElement>
+        </ui:ScrollView>
+    </ui:VisualElement>
+
+    <!-- 확장 버튼: 네트워크 다이어그램을 전체 화면으로 확장 -->
+    <ui:Button name="expand-btn" class="expand-btn" />
+</ui:UXML>
--- a/Assets/Resources/SHI/Modal/NW/NWChart.uxml.meta
+++ b/Assets/Resources/SHI/Modal/NW/NWChart.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: 548c90f1544b68c46b8a3a35bdb49a3f
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
--- a/Assets/Resources/SHI/Modal/NW/NWModal.uss
+++ b/Assets/Resources/SHI/Modal/NW/NWModal.uss
@@ -0,0 +1,116 @@
+/*
+ * NWModal.uss - NW 모달 전역 스타일시트
+ *
+ * [개요]
+ * NW 모달 창 전체에 적용되는 스타일을 정의합니다.
+ * ISOPModal.uss와 동일한 스타일을 사용합니다.
+ * 주로 스크롤바 커스터마이징과 기본 텍스트 스타일을 포함합니다.
+ *
+ * [스타일 구조]
+ * 1. .unity-text-element : 기본 텍스트 스타일 (Pretendard 폰트, 10px)
+ * 2. .unity-scroller--vertical : 세로 스크롤바 커스터마이징
+ * 3. .unity-scroller--horizontal : 가로 스크롤바 커스터마이징
+ *
+ * [스크롤바 디자인]
+ * - 너비/높이: 6px (슬림한 디자인)
+ * - 트랙: 흰색 배경 (#FFFFFF)
+ * - 드래거: 밝은 회색 (#D8D8D8), 둥근 모서리 (3px)
+ * - 화살표 버튼: 숨김 처리
+ *
+ * [폰트 설정]
+ * - 기본 폰트: Pretendard-Regular
+ * - 기본 색상: rgb(34, 34, 34) - 진한 회색
+ * - 기본 크기: 10px
+ *
+ * [연관 파일]
+ * - NWModal.uxml : 메인 레이아웃
+ * - NWChart.uss : 네트워크 다이어그램 스타일
+ * - NWModalView.uss : 모델 뷰 스타일
+ */
+
+/* ===================================
+   기본 텍스트 스타일
+   모달 내 모든 텍스트 요소에 적용
+   =================================== */
+.unity-text-element {
+    -unity-font: url('project://database/Assets/Fonts/Pretendard-Regular.otf');
+    -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');
+    color: rgb(34, 34, 34);      /* 진한 회색 텍스트 */
+    font-size: 10px;
+}
+
+/* ===================================
+   세로 스크롤바 스타일
+   슬림한 6px 너비의 커스텀 스크롤바
+   =================================== */
+.unity-scroller--vertical {
+    width: 6px;                   /* 슬림한 너비 */
+    margin-right: 4px;
+    margin-bottom: 0px;
+}
+
+/* 세로 스크롤바 트랙 (배경) */
+.unity-scroller--vertical .unity-base-slider__tracker {
+    background-color: rgb(255, 255, 255);  /* 흰색 배경 */
+    border-width: 0;
+}
+
+/* 세로 스크롤바 드래거 (핸들) */
+.unity-scroller--vertical .unity-base-slider__dragger {
+    background-color: rgb(216, 216, 216);  /* 밝은 회색 */
+    border-width: 0;
+    border-radius: 3px;                     /* 둥근 모서리 */
+    width: 6px;
+}
+
+/* 세로 스크롤바 화살표 버튼 숨김 */
+.unity-scroller--vertical .unity-repeat-button {
+    display: none;
+    width: 0;
+    height: 0;
+    min-width: 0;
+    min-height: 0;
+}
+
+/* 세로 스크롤바 슬라이더 마진 제거 */
+.unity-scroller--vertical .unity-slider {
+    margin: 0;
+}
+
+/* ===================================
+   가로 스크롤바 스타일
+   슬림한 6px 높이의 커스텀 스크롤바
+   =================================== */
+.unity-scroller--horizontal {
+    height: 6px;                  /* 슬림한 높이 */
+    margin-bottom: 4px;
+    margin-right: 0px;
+}
+
+/* 가로 스크롤바 트랙 (배경) */
+.unity-scroller--horizontal .unity-base-slider__tracker {
+    background-color: rgb(255, 255, 255);  /* 흰색 배경 */
+    border-width: 0;
+}
+
+/* 가로 스크롤바 드래거 (핸들) */
+.unity-scroller--horizontal .unity-base-slider__dragger {
+    background-color: rgb(216, 216, 216);  /* 밝은 회색 */
+    border-width: 0;
+    border-radius: 3px;                     /* 둥근 모서리 */
+    height: 6px;
+}
+
+/* 가로 스크롤바 화살표 버튼 숨김 */
+.unity-scroller--horizontal .unity-repeat-button {
+    display: none;
+    width: 0;
+    height: 0;
+    min-width: 0;
+    min-height: 0;
+}
+
+/* 가로 스크롤바 슬라이더 마진 제거 */
+.unity-scroller--horizontal .unity-slider {
+    margin: 0;
+}
--- a/Assets/Resources/SHI/Modal/NW/NWModal.uss.meta
+++ b/Assets/Resources/SHI/Modal/NW/NWModal.uss.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 067929ea94907c248a545d139eb77664
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
--- a/Assets/Resources/SHI/Modal/NW/NWModal.uxml
+++ b/Assets/Resources/SHI/Modal/NW/NWModal.uxml
@@ -0,0 +1,76 @@
+<!--
+    NWModal.uxml - NW(네트워크 다이어그램) 모달 메인 레이아웃
+
+    [개요]
+    NW 모달 창의 전체 레이아웃을 정의합니다.
+    TreeList(모델 계층), NWModelView(3D 뷰어), NWChart(네트워크 다이어그램)를
+    수직으로 배치합니다. (ISOP과 달리 ModelView가 위, Chart가 아래)
+
+    [UI 구조]
+    Root
+    ├── topbar - 상단 헤더 바 (제목, 닫기 버튼)
+    │   ├── title - 모달 제목 라벨
+    │   └── closeButton - 모달 닫기 버튼
+    └── content - 메인 컨텐츠 영역 (수평 배치)
+        ├── TreeList - 모델 계층 구조 (왼쪽 사이드바)
+        ├── right-panel - 오른쪽 패널 (수직 배치)
+        │   ├── NWModelView - 3D 모델 뷰어 (상단)
+        │   ├── NWChart - 네트워크 다이어그램 (하단)
+        │   └── drag-btn - ModelView/Chart 크기 조절 드래그 버튼
+        └── show-tree-btn - TreeList 표시 버튼 (숨겨진 상태일 때)
+
+    [ISOP과의 차이점]
+    - ISOP: TreeList | ModelView | Chart (수평 3분할)
+    - NW: TreeList | (ModelView / Chart) (수평 2분할 + 수직 2분할)
+    - 드래그 버튼: ISOP=수평, NW=수직 (90도 회전)
+
+    [커스텀 컴포넌트]
+    - SHI.Modal.TreeList : 모델 계층 트리뷰
+    - SHI.Modal.NW.NWModelView : 3D 모델 렌더링 뷰
+    - SHI.Modal.NW.NWChart : 네트워크 다이어그램 뷰
+
+    [연관 파일]
+    - NWModal.uss : 스타일시트 (스크롤바 커스터마이징)
+    - NWModal.cs : C# 컨트롤러 (뷰 간 연동 처리)
+
+    [사용되는 리소스]
+    - Fonts/Pretendard/Pretendard-Bold : 제목 폰트
+    - SHI/Images/btn_close_24 : 닫기 버튼 이미지
+    - SHI/Images/btn_show_explorer_40x41 : TreeList 표시 버튼 이미지
+    - SHI/Images/btn_drag_40 : 드래그 버튼 이미지 (90도 회전)
+-->
+<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
+    <Style src="project://database/Assets/Resources/SHI/Modal/NW/NWModal.uss?fileID=7433441132597879392&amp;guid=067929ea94907c248a545d139eb77664&amp;type=3#NWModal" />
+
+    <!-- 상단 헤더 바: 제목과 닫기 버튼 -->
+    <ui:VisualElement name="topbar" style="flex-grow: 0; width: 100%; height: 60px; background-color: rgb(9, 24, 53); flex-shrink: 0; align-items: center; align-self: auto; align-content: auto; flex-direction: row; justify-content: center;">
+        <!-- 모달 제목 (중앙 정렬) -->
+        <ui:Label text="블록2 상세" name="title" style="-unity-font-definition: url(&quot;project://database/Assets/Resources/Fonts/Pretendard/Pretendard-Bold.otf?fileID=12800000&amp;guid=f9a95f3332ad9a9468b4eaa89f125b35&amp;type=3#Pretendard-Bold&quot;); font-size: 24px; color: rgb(255, 255, 255); flex-basis: auto; justify-content: center; align-items: center; -unity-text-align: middle-center; width: 500px;" />
+        <!-- 닫기 버튼 (오른쪽 상단) -->
+        <ui:Button name="closeButton" style="width: 24px; height: 24px; background-image: url(&quot;project://database/Assets/Resources/SHI/Images/btn_close_24.png?fileID=21300000&amp;guid=461a84aa7f4a0104bb7a41e1f9d15f86&amp;type=3#btn_close_24&quot;); background-color: rgba(255, 255, 255, 0); border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; position: absolute; right: 18px;" />
+    </ui:VisualElement>
+
+    <!-- 메인 컨텐츠 영역: TreeList + 오른쪽 패널 -->
+    <ui:VisualElement name="content" style="flex-grow: 1; flex-shrink: 1; align-self: stretch; align-content: auto; align-items: stretch; width: 100%; flex-direction: row; overflow: hidden;">
+        <!-- TreeList: 모델 계층 구조 트리뷰 (왼쪽 사이드바) -->
+        <SHI.Modal.TreeList name="treeList" style="bottom: 0; left: 0; flex-direction: column; flex-wrap: nowrap; height: 100%; flex-shrink: 0;" />
+
+        <!-- 오른쪽 패널: ModelView(상단) + Chart(하단) 수직 배치 -->
+        <ui:VisualElement name="right-panel" style="flex-grow: 1; flex-shrink: 1; flex-direction: column; min-width: 0; overflow: hidden;">
+            <!-- NWModelView: 3D 모델 렌더링 뷰어 (상단)
+                 flex-basis: 0으로 Chart와 동일한 공간 분할 -->
+            <SHI.Modal.NW.NWModelView style="flex-grow: 1; flex-shrink: 1; flex-basis: 0; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden;" />
+
+            <!-- NWChart: 네트워크 다이어그램 뷰 (하단)
+                 flex-basis: 0으로 ModelView와 동일한 공간 분할 -->
+            <SHI.Modal.NW.NWChart style="flex-grow: 1; flex-shrink: 1; flex-basis: 0; min-width: 0; min-height: 0; overflow: hidden;" />
+
+            <!-- 드래그 버튼: ModelView/Chart 크기 비율 조절 (수직)
+                 rotate: 90deg로 수직 드래그용으로 회전 -->
+            <ui:Button text="&#10;" name="drag-btn" style="position: absolute; width: 40px; height: 40px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: -20px; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: rgba(255, 255, 255, 0); background-image: resource(&apos;SHI/Images/btn_drag_40&apos;); align-items: center; align-self: center; right: 10px; top: 47%; rotate: 90deg;" />
+        </ui:VisualElement>
+
+        <!-- TreeList 표시 버튼: TreeList가 숨겨졌을 때 나타남 -->
+        <ui:Button text="&#10;" name="show-tree-btn" style="position: absolute; left: 0; top: 26px; width: 40px; height: 41px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: rgba(255, 255, 255, 0); background-image: resource(&apos;SHI/Images/btn_show_explorer_40x41&apos;);" />
+    </ui:VisualElement>
+</ui:UXML>
--- a/Assets/Resources/SHI/Modal/NW/NWModal.uxml.meta
+++ b/Assets/Resources/SHI/Modal/NW/NWModal.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: bf6f1e10aef6efd4fb9ac771b0a2c1c2
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
--- a/Assets/Resources/SHI/Modal/NW/NWModalView.uss
+++ b/Assets/Resources/SHI/Modal/NW/NWModalView.uss
@@ -0,0 +1,37 @@
+/*
+ * NWModalView.uss - NW 3D 모델 뷰어 스타일시트
+ *
+ * [개요]
+ * NWModelView 컴포넌트의 루트 요소 스타일을 정의합니다.
+ * ISOPModelView.uss와 동일한 스타일을 사용합니다.
+ * 주로 Flexbox 레이아웃 설정을 포함합니다.
+ *
+ * [스타일 구조]
+ * - :root - 루트 요소 Flexbox 설정
+ *
+ * [레이아웃]
+ * - flex-grow: 1, flex-shrink: 1, flex-basis: 0
+ *   → NWModal에서 NWChart와 동일한 비율로 공간 분할
+ * - min-width: 0 → Flexbox에서 컨텐츠 오버플로우 방지
+ * - overflow: hidden → 자식 요소 잘림 처리
+ *
+ * [참고]
+ * 3D 렌더링은 C#에서 RenderTexture를 통해 처리되므로
+ * 이 스타일시트는 레이아웃 설정만 담당합니다.
+ *
+ * [연관 파일]
+ * - NWModelView.uxml : UI 레이아웃
+ * - NWModelView.cs : C# 컨트롤러 (렌더링 처리)
+ */
+
+/* ===================================
+   루트 요소 기본 설정
+   NWChart와 동일한 비율로 공간 분할
+   =================================== */
+:root {
+    flex-grow: 1;          /* 남은 공간 채우기 */
+    flex-shrink: 1;        /* 공간 부족 시 축소 허용 */
+    flex-basis: 0;         /* 초기 크기 0 (grow로 분배) */
+    min-width: 0;          /* Flexbox 오버플로우 방지 */
+    overflow: hidden;      /* 자식 요소 잘림 처리 */
+}
--- a/Assets/Resources/SHI/Modal/NW/NWModalView.uss.meta
+++ b/Assets/Resources/SHI/Modal/NW/NWModalView.uss.meta
@@ -0,0 +1,11 @@
+fileFormatVersion: 2
+guid: 1560514d54fae614c95172346d95c812
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 12385, guid: 0000000000000000e000000000000000, type: 0}
+  disableValidation: 0
--- a/Assets/Resources/SHI/Modal/NW/NWModelView.uxml
+++ b/Assets/Resources/SHI/Modal/NW/NWModelView.uxml
@@ -0,0 +1,48 @@
+<!--
+    NWModelView.uxml - NW 3D 모델 뷰어 레이아웃
+
+    [개요]
+    glTF/glb 3D 모델을 렌더링하는 뷰어의 UI 레이아웃입니다.
+    ISOPModelView.uxml과 동일한 구조를 가지며, NWModal에서 사용됩니다.
+    RenderTexture로 오프스크린 렌더링된 3D 모델을 배경으로 표시합니다.
+
+    [UI 구조]
+    Root
+    ├── render-container - 3D 렌더링이 표시되는 영역
+    │   (RenderTexture가 이 요소의 배경으로 설정됨)
+    └── expand-btn - 모델 뷰 확장 버튼 (전체화면)
+
+    [ISOPModelView와의 차이점]
+    - expand-btn 위치: ISOP=오른쪽 상단, NW=왼쪽 하단
+    - 사용 모달: ISOP=ISOPModal, NW=NWModal (수직 레이아웃)
+
+    [렌더링 방식]
+    1. NWModelView.cs에서 전용 카메라(NWModelViewCamera) 생성
+    2. 카메라가 Layer 6의 3D 모델을 RenderTexture로 렌더링
+    3. RenderTexture를 render-container의 배경으로 설정
+    4. 매 프레임 MarkDirtyRepaint()로 UI 갱신
+
+    [마우스 조작]
+    - 가운데 버튼 드래그: 카메라 이동 (Pan)
+    - 오른쪽 버튼 드래그: 모델 회전 (Orbit)
+    - 마우스 휠: 확대/축소 (Zoom)
+
+    [연관 파일]
+    - NWModalView.uss : 스타일시트
+    - NWModelView.cs : C# 컨트롤러 (렌더링, 마우스 조작)
+
+    [사용되는 리소스]
+    - SHI/Images/btn_expand_36 : 확장 버튼 이미지
+-->
+<ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
+    <Style src="project://database/Assets/Resources/SHI/Modal/NW/NWModalView.uss?fileID=7433441132597879392&amp;guid=1560514d54fae614c95172346d95c812&amp;type=3#NWModalView" />
+
+    <!-- 3D 렌더링 컨테이너: RenderTexture가 배경으로 표시됨
+         - flex-grow: 1로 부모 영역 전체 채움
+         - overflow: hidden으로 내용 잘림 방지 -->
+    <ui:VisualElement name="render-container" style="flex-grow: 1; height: 100%; min-width: 0; overflow: hidden;" />
+
+    <!-- 확장 버튼: 모델 뷰를 전체 화면으로 확장
+         - 왼쪽 하단에 위치 (ISOPModelView는 오른쪽 상단) -->
+    <ui:Button name="expand-btn" style="position: absolute; width: 36px; height: 36px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: rgba(255, 255, 255, 0); background-image: resource(&apos;SHI/Images/btn_expand_36&apos;); bottom: 20px; left: 10px;" />
+</ui:UXML>
--- a/Assets/Resources/SHI/Modal/NW/NWModelView.uxml.meta
+++ b/Assets/Resources/SHI/Modal/NW/NWModelView.uxml.meta
@@ -0,0 +1,10 @@
+fileFormatVersion: 2
+guid: 4436869137226ee45a379ecc6b4696a2
+ScriptedImporter:
+  internalIDToNameTable: []
+  externalObjects: {}
+  serializedVersion: 2
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 
+  script: {fileID: 13804, guid: 0000000000000000e000000000000000, type: 0}
--- a/Assets/Resources/SHI/Modal/TreeList.uss
+++ b/Assets/Resources/SHI/Modal/TreeList.uss
@@ -1,18 +1,53 @@
+/*
+ * TreeList.uss - TreeList 컴포넌트 스타일시트
+ *
+ * [개요]
+ * TreeList.uxml과 TreeListItem.uxml에서 사용하는 스타일을 정의합니다.
+ * 어두운 테마(Dark Theme)에 맞춰 디자인되었습니다.
+ *
+ * [스타일 구조]
+ * 1. .tree-menu-container : 메인 컨테이너 (어두운 배경, 240px 너비)
+ * 2. .search-field : 검색 입력 필드 (흰색 배경, 둥근 모서리)
+ * 3. #main-tree-view : TreeView 기본 설정 (들여쓰기 10px)
+ * 4. .unity-tree-view__item-toggle : 펼침/접기 토글 버튼
+ * 5. .unity-collection-view__item : 항목 배경색 (기본/호버/선택)
+ * 6. .visibility-toggle : 가시성 토글 버튼 (눈 아이콘)
+ *
+ * [색상 팔레트]
+ * - 배경: rgb(40, 44, 52) - 어두운 회색
+ * - 호버: rgba(0, 10, 37, 0.25) - 반투명 파랑
+ * - 선택: rgba(0, 10, 37, 0.5) - 더 진한 반투명 파랑
+ * - 텍스트: rgb(255, 255, 255) - 흰색
+ *
+ * [연관 파일]
+ * - TreeList.uxml : 메인 레이아웃
+ * - TreeListItem.uxml : 개별 항목 템플릿
+ * - TreeList.cs : C# 컨트롤러
+ */
+
+/* ===================================
+   메인 컨테이너 스타일
+   사이드 패널 전체를 감싸는 컨테이너
+   =================================== */
 .tree-menu-container {
-    background-color: rgb(40, 44, 52);
-    flex-grow: 1;
+    background-color: rgb(40, 44, 52);   /* 어두운 회색 배경 */
+    flex-grow: 1;                         /* 부모 영역 채우기 */
    padding: 5px;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 20px;
    padding-right: 20px;
-    width: 240px;
+    width: 240px;                         /* 고정 너비 */
 }

+/* ===================================
+   검색 입력 필드 스타일
+   흰색 배경의 둥근 입력창
+   =================================== */
 .search-field {
    margin-bottom: 20px;
-    background-color: rgb(255, 255, 255);
-    border-radius: 4px;
+    background-color: rgb(255, 255, 255); /* 흰색 배경 */
+    border-radius: 4px;                    /* 둥근 모서리 */
    height: 30px;
    width: auto;
    margin-top: 0;
@@ -21,54 +56,75 @@
    -unity-font-definition: resource('Fonts/Pretendard/Pretendard-Regular');
 }

+/* 검색 필드 내부 텍스트 입력 영역 */
 #search-field > #unity-text-input {
    padding-top: 4px;
-    padding-right: 24px;
+    padding-right: 24px;                   /* 오른쪽 아이콘 공간 확보 */
    padding-bottom: 4px;
    padding-left: 4px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
-    border-top-width: 0;
+    border-top-width: 0;                   /* 테두리 제거 */
    border-right-width: 0;
    border-bottom-width: 0;
    border-left-width: 0;
 }

+/* ===================================
+   체크박스 스타일
+   =================================== */
 #unity-checkmark {
    -unity-background-image-tint-color: rgb(255, 255, 255);
 }

+/* ===================================
+   TreeView 기본 설정
+   =================================== */
 #main-tree-view {
-    --unity-item-indent-width: 10;
+    --unity-item-indent-width: 10;         /* 계층별 들여쓰기 너비 */
 }

+/* 펼침/접기 토글 아이콘 컨테이너 */
 #unity-tree-view__item-toggle > VisualElement > VisualElement {
    margin-left: 0;
    margin-right: 0;
-    width: 22px;
+    width: 22px;                           /* 토글 아이콘 너비 */
 }

+/* 펼침/접기 토글 버튼 */
 .unity-tree-view__item-toggle {
-    margin-right: 5px;
+    margin-right: 5px;                     /* 라벨과의 간격 */
 }

+/* ===================================
+   항목 배경색 스타일
+   기본, 호버, 선택 상태별 배경색
+   =================================== */
+
+/* 기본 상태: 투명 배경 */
 .unity-collection-view__item {
    background-color: rgba(50, 50, 50, 0);
 }

+/* 호버 상태: 반투명 파란색 배경 */
 .unity-collection-view__item:hover {
    background-color: rgba(0, 10, 37, 0.25);
 }

+/* 선택 상태: 더 진한 반투명 파란색 배경 */
 .unity-collection-view__item--selected {
    background-color: rgba(0, 10, 37, 0.5);
 }

+/* ===================================
+   가시성 토글 버튼 스타일
+   눈 아이콘으로 3D 모델 가시성 제어
+   =================================== */
 .visibility-toggle {
-    background-color: rgba(0, 0, 0, 0);
-    border-width: 0;
+    background-color: rgba(0, 0, 0, 0);    /* 투명 배경 */
+    border-width: 0;                        /* 테두리 없음 */
    width: 16px;
    height: 16px;
    margin-top: 0;
@@ -81,14 +137,16 @@
    padding-right: 0;
    padding-left: 0;
    margin-left: 0;
-    flex-shrink: 0;
-    background-image: resource('SHI/Images/icon_visibility_on_64');
+    flex-shrink: 0;                         /* 크기 축소 방지 */
+    background-image: resource('SHI/Images/icon_visibility_on_64');  /* 기본: 보이는 상태 */
 }

+/* 가시성 켜짐 상태 (눈 열린 아이콘) */
 .visibility-on {
    background-image: resource('SHI/Images/icon_visibility_on_64');
 }

+/* 가시성 꺼짐 상태 (눈 닫힌 아이콘) */
 .visibility-off {
    background-image: resource('SHI/Images/icon_visibility_off_64');
 }
--- a/Assets/Resources/SHI/Modal/TreeList.uxml
+++ b/Assets/Resources/SHI/Modal/TreeList.uxml
@@ -1,14 +1,57 @@
+<!--
+    TreeList.uxml - 계층 구조 트리 뷰 메인 레이아웃
+
+    [개요]
+    3D 모델의 계층 구조를 표시하는 TreeList 컴포넌트의 UI 레이아웃입니다.
+    검색 기능과 가시성 토글을 지원합니다.
+
+    [UI 구조]
+    container (tree-menu-container)
+    ├── header - 상단 헤더 영역
+    │   ├── Label "모델 검색" - 제목
+    │   └── hide-btn - TreeList 패널 숨기기 버튼
+    ├── search-field - 검색 입력 필드
+    │   ├── clear-btn - 검색어 지우기 버튼
+    │   └── VisualElement - 검색 아이콘
+    └── main-tree-view - Unity TreeView (항목들이 여기에 렌더링됨)
+
+    [연관 파일]
+    - TreeList.uss : 스타일시트
+    - TreeListItem.uxml : 개별 항목 템플릿
+    - TreeList.cs : C# 컨트롤러 (SHI.Modal 네임스페이스)
+
+    [사용되는 리소스]
+    - Fonts/Pretendard/Pretendard-Bold : 제목 폰트
+    - SHI/Images/btn_close_explorer_22 : 닫기 버튼 이미지
+    - SHI/Images/btn_cancel_64 : 검색어 지우기 버튼 이미지
+    - SHI/Images/icon_search_16x17 : 검색 아이콘
+-->
 <ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
    <Style src="project://database/Assets/Resources/SHI/Modal/TreeList.uss?fileID=7433441132597879392&amp;guid=a1b1f50d423b463408e1f540fb4acfe9&amp;type=3#TreeList" />
+
+    <!-- 메인 컨테이너: 어두운 배경의 사이드 패널 -->
    <ui:VisualElement name="container" class="tree-menu-container">
+
+        <!-- 헤더 영역: 제목과 숨기기 버튼 -->
        <ui:VisualElement name="header" style="flex-direction: row; margin-bottom: 5px; justify-content: space-between;">
+            <!-- 제목 라벨 -->
            <ui:Label text="모델 검색" style="color: white; -unity-font-style: normal; font-size: 20px; -unity-font-definition: resource(&apos;Fonts/Pretendard/Pretendard-Bold&apos;);" />
+            <!-- TreeList 패널 숨기기 버튼 (X 아이콘) -->
            <ui:Button name="hide-btn" style="width: 22px; height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; background-color: rgba(188, 188, 188, 0); background-image: resource(&apos;SHI/Images/btn_close_explorer_22&apos;); align-self: center; align-items: auto; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0;" />
        </ui:VisualElement>
+
+        <!-- 검색 입력 필드 -->
        <ui:TextField name="search-field" placeholder-text="검색어를 입력하세요." class="search-field">
+            <!-- 검색어 지우기 버튼 (X 아이콘, 입력 필드 오른쪽) -->
            <ui:Button name="clear-btn" style="width: 18px; height: 18px; border-top-width: 0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; background-color: rgba(255, 255, 255, 0); background-image: resource(&apos;SHI/Images/btn_cancel_64&apos;); margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; align-self: center; position: absolute; right: 26px; -unity-background-image-tint-color: rgb(180, 180, 180);" />
+            <!-- 검색 아이콘 (돋보기, 입력 필드 맨 오른쪽) -->
            <ui:VisualElement style="flex-grow: 1; position: absolute; right: 6px; width: 16px; height: 17px; justify-content: center; align-items: auto; align-self: center; background-image: resource(&apos;SHI/Images/icon_search_16x17&apos;);" />
        </ui:TextField>
+
+        <!-- 메인 트리뷰: 모델 계층 구조를 표시
+             - view-data-key: 상태 저장용 키
+             - fixed-item-height: 항목 높이 32px
+             - auto-expand: 자동 펼치기 활성화 -->
        <ui:TreeView name="main-tree-view" view-data-key="model-tree-view" fixed-item-height="32" auto-expand="true" style="flex-grow: 1;" />
    </ui:VisualElement>
 </ui:UXML>
--- a/Assets/Resources/SHI/Modal/TreeListItem.uxml
+++ b/Assets/Resources/SHI/Modal/TreeListItem.uxml
@@ -1,7 +1,40 @@
+<!--
+    TreeListItem.uxml - TreeView 개별 항목 템플릿
+
+    [개요]
+    TreeList의 각 항목(노드)을 표시하는 템플릿입니다.
+    TreeList.cs의 MakeItem()에서 이 템플릿을 복제하여 사용합니다.
+
+    [UI 구조]
+    item-root (tree-item-container)
+    ├── item-label - 항목 이름 표시 라벨
+    └── visibility-btn - 가시성 토글 버튼 (눈 아이콘)
+
+    [바인딩]
+    - item-label.text : TreeListItemData.name에 바인딩
+    - visibility-btn.class : IsVisible 상태에 따라 visibility-on/off 클래스 토글
+
+    [이벤트]
+    - visibility-btn 클릭 시 해당 항목과 하위 항목의 3D 모델 가시성 토글
+
+    [스타일]
+    - TreeList.uss의 .visibility-toggle 클래스 적용
+    - 높이 32px 고정 (TreeList.uxml의 fixed-item-height와 일치)
+
+    [연관 파일]
+    - TreeList.uxml : 부모 컨테이너
+    - TreeList.uss : 스타일시트
+    - TreeList.cs : 바인딩 및 이벤트 처리
+    - TreeListItemData.cs : 데이터 모델
+-->
 <ui:UXML xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" noNamespaceSchemaLocation="../../../../../UIElementsSchema/UIElements.xsd" editor-extension-mode="False">
-    <Style src="project://database/Assets/Resources/SHI/Modal/TreeList.uss?fileID=7433441132597879392&amp;guid=926fac9b09a47fb4f9577189aeb25de3&amp;type=3#TreeList" />
+    <Style src="project://database/Assets/Resources/SHI/Modal/TreeList.uss?fileID=7433441132597879392&amp;guid=a1b1f50d423b463408e1f540fb4acfe9&amp;type=3#TreeList" />
+
+    <!-- 항목 루트 컨테이너: 가로 배치, 라벨과 버튼 양 끝 정렬 -->
    <ui:VisualElement name="item-root" class="tree-item-container" style="flex-direction: row; justify-content: space-between; height: 32px; padding-left: 0; padding-right: 8px; align-items: center;">
-        <ui:Label name="item-label" text="Item Name" class="item-label-style" style="flex-grow: 1; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-left: 4px; padding-top: 0; padding-bottom: 0; padding-right: 4px; -unity-font-definition: resource(&apos;Fonts/Pretendard/Pretendard-Regular&apos;); color: rgb(255, 255, 255);" />
+        <!-- 항목 이름 라벨: TreeListItemData.name에 바인딩됨 -->
+        <ui:Label name="item-label" text="Item Name" class="item-label-style" style="flex-grow: 1; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-left: 4px; padding-top: 0; padding-bottom: 0; padding-right: 4px; color: rgb(255, 255, 255); font-size: 14px;" />
+        <!-- 가시성 토글 버튼: 클릭 시 3D 모델 표시/숨김 전환 -->
        <ui:Button name="visibility-btn" class="visibility-toggle" />
    </ui:VisualElement>
 </ui:UXML>
--- a/Assets/Resources/SHI/Prefabs/NWModal.prefab
+++ b/Assets/Resources/SHI/Prefabs/NWModal.prefab
@@ -0,0 +1,67 @@
+%YAML 1.1
+%TAG !u! tag:unity3d.com,2011:
+--- !u!1 &4549899540058300928
+GameObject:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  serializedVersion: 6
+  m_Component:
+  - component: {fileID: 2731666058294664743}
+  - component: {fileID: 428273902588860676}
+  - component: {fileID: 429179680282747418}
+  m_Layer: 0
+  m_Name: NWModal
+  m_TagString: Untagged
+  m_Icon: {fileID: 0}
+  m_NavMeshLayer: 0
+  m_StaticEditorFlags: 0
+  m_IsActive: 1
+--- !u!4 &2731666058294664743
+Transform:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 4549899540058300928}
+  serializedVersion: 2
+  m_LocalRotation: {x: 0, y: 0, z: 0, w: 1}
+  m_LocalPosition: {x: 0, y: 0, z: 0}
+  m_LocalScale: {x: 1, y: 1, z: 1}
+  m_ConstrainProportionsScale: 0
+  m_Children: []
+  m_Father: {fileID: 0}
+  m_LocalEulerAnglesHint: {x: 0, y: 0, z: 0}
+--- !u!114 &428273902588860676
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 4549899540058300928}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 19102, guid: 0000000000000000e000000000000000, type: 0}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  m_PanelSettings: {fileID: 11400000, guid: 23c44a2b28cd90c418bdfb0ea56f91e8, type: 2}
+  m_ParentUI: {fileID: 0}
+  sourceAsset: {fileID: 9197481963319205126, guid: bf6f1e10aef6efd4fb9ac771b0a2c1c2, type: 3}
+  m_SortingOrder: 100
+  m_WorldSpaceSizeMode: 1
+  m_WorldSpaceWidth: 1920
+  m_WorldSpaceHeight: 1080
+--- !u!114 &429179680282747418
+MonoBehaviour:
+  m_ObjectHideFlags: 0
+  m_CorrespondingSourceObject: {fileID: 0}
+  m_PrefabInstance: {fileID: 0}
+  m_PrefabAsset: {fileID: 0}
+  m_GameObject: {fileID: 4549899540058300928}
+  m_Enabled: 1
+  m_EditorHideFlags: 0
+  m_Script: {fileID: 11500000, guid: 89260a4496ad3e249b64cfb24481d9fb, type: 3}
+  m_Name: 
+  m_EditorClassIdentifier: 
+  uiDocument: {fileID: 428273902588860676}
--- a/Assets/Resources/SHI/Prefabs/NWModal.prefab.meta
+++ b/Assets/Resources/SHI/Prefabs/NWModal.prefab.meta
@@ -0,0 +1,7 @@
+fileFormatVersion: 2
+guid: 5295f7b9a5b84ae4c8230c52ebdabef2
+PrefabImporter:
+  externalObjects: {}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: