Index: arms/html/jiraConnection/content-header.html
===================================================================
diff -u -rb3161b599f1a45aafa51ceb3280a80580cae4991 -rba5f510f5beac16f2e21f099abb37263fa8241ba
--- arms/html/jiraConnection/content-header.html	(.../content-header.html)	(revision b3161b599f1a45aafa51ceb3280a80580cae4991)
+++ arms/html/jiraConnection/content-header.html	(.../content-header.html)	(revision ba5f510f5beac16f2e21f099abb37263fa8241ba)
@@ -1,5 +1,5 @@
 <h3 class="page-title font16">
-	JIRA
+	ALM
 	<small>Server Connect</small>
 	<ol class="breadcrumb pull-right hidden-xs font12">
 		<li>
@@ -8,7 +8,7 @@
 				Home
 			</a>
 		</li>
-		<li class="active">JIRA</li>
+		<li class="active">ALM</li>
 		<li class="active">Server Connect</li>
 	</ol>
 </h3>
Index: arms/html/mapping/content-container.html
===================================================================
diff -u
--- arms/html/mapping/content-container.html	(revision 0)
+++ arms/html/mapping/content-container.html	(revision ba5f510f5beac16f2e21f099abb37263fa8241ba)
@@ -0,0 +1,825 @@
+<!--<div class="col-lg-12">
+	<section class="widget">
+		<header>
+			<h4>
+				<span
+					class="font13"
+					style="font-weight: bold">
+					<i class="fa fa-sort-amount-asc"></i>
+					연결된 Jira 조회
+				</span>
+			</h4>
+			<div class="widget-controls">
+				<a
+					data-widgster="toleft"
+					title="change width to left"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-left"></i>
+				</a>
+				<a
+					data-widgster="expand"
+					title="Expand"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-up"></i>
+				</a>
+				<a
+					data-widgster="collapse"
+					title="Collapse"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-down"></i>
+				</a>
+				<a
+					data-widgster="toright"
+					title="change width to right"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-right"></i>
+				</a>
+				<a
+					data-widgster="restore"
+					title="Restore"
+					href="#">
+					<span class="glyphicon glyphicon-repeat"></span>
+				</a>
+				<a
+					data-widgster="fullscreen"
+					title="Fullscreen"
+					href="#">
+					<i
+						class="glyphicon glyphicon-fullscreen"
+						style="font-size: 11px"></i>
+				</a>
+			</div>
+		</header>
+		<div class="body">
+			<div
+				class="gradient_middle_border"
+				style="width: 100%; height: 2px"></div>
+			<blockquote
+				class="font13"
+				style="margin-top: 5px">
+				0. 제품(서비스) 로부터 연결된 Version 을 표시하고, 각 Version 에 연결된 ALM 서버의 Project 를 표시합니다.
+				<div style="float: right">
+					<button
+						class="btn btn-transparent btn-xs"
+						style="margin-top: -3px; color: #acacac; background: rgba(51, 51, 51, 0.2); padding: 1px 9px"
+						onclick="window.open('/php/gnuboard5/bbs/board.php?bo_table=manual&wr_id=18')">
+						Help
+						<i
+							class="fa fa-question"
+							style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
+					</button>
+				</div>
+			</blockquote>
+			<div class="clearfix widget-content">
+				<div style="float: left">
+					<button
+						type="button"
+						id="copychecker" onClick="tourGuideStart()"
+						class="btn btn-default btn-sm">
+						Copy
+					</button>
+					<button
+						type="button"
+						id="csvchecker"
+						class="btn btn-default btn-sm hidden">
+						CSV
+					</button>
+					<button
+						type="button"
+						id="excelchecker"
+						class="btn btn-default btn-sm hidden">
+						Excel
+					</button>
+					<button
+						type="button"
+						id="printchecker"
+						class="btn btn-default btn-sm hidden">
+						Print
+					</button>
+					<button
+						type="button"
+						id="pdfchecker"
+						class="btn btn-default btn-sm hidden">
+						PDF
+					</button>
+				</div>
+				<div style="float: right">
+					<button
+						class="btn btn-primary btn-block btn-sm"
+						id="imageDownload"
+						type="button">
+						이미지 다운로드
+					</button>
+				</div>
+			</div>
+			<div id="tree_container" class="darkBack" style="margin-top: 10px; height: 100%"></div>
+		</div>
+	</section>
+</div>-->
+
+<div class="col-lg-4 col-layer">
+	<section class="widget">
+		<header>
+			<h4>
+				<span
+					class="font13"
+					style="font-weight: bold">
+					<i class="fa fa-sort-amount-asc"></i>
+					ARMS 상태 카테고리 조회 및 선택
+				</span>
+			</h4>
+			<div class="widget-controls">
+				<a
+					data-widgster="toleft"
+					title="change width to left"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-left"></i>
+				</a>
+				<a
+					data-widgster="expand"
+					title="Expand"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-up"></i>
+				</a>
+				<a
+					data-widgster="collapse"
+					title="Collapse"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-down"></i>
+				</a>
+				<a
+					data-widgster="toright"
+					title="change width to right"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-right"></i>
+				</a>
+				<a
+					data-widgster="restore"
+					title="Restore"
+					href="#">
+					<span class="glyphicon glyphicon-repeat"></span>
+				</a>
+				<a
+					data-widgster="fullscreen"
+					title="Fullscreen"
+					href="#">
+					<i
+						class="glyphicon glyphicon-fullscreen"
+						style="font-size: 11px"></i>
+				</a>
+			</div>
+		</header>
+		<div class="body">
+			<div
+				class="gradient_middle_border"
+				style="width: 100%; height: 2px"></div>
+			<blockquote
+				class="font13"
+				style="margin-top: 5px">
+				1. 상태 카테고리 선택
+				<div style="float: right">
+					<button
+						class="btn btn-transparent btn-xs"
+						style="margin-top: -3px; color: #acacac; background: rgba(51, 51, 51, 0.2); padding: 1px 9px"
+						onclick="window.open('docs/guide.html#jira_service_version_inquiry_selection')">
+						Help
+						<i
+							class="fa fa-question"
+							style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
+					</button>
+				</div>
+			</blockquote>
+			<div class="clearfix widget-content">
+				<div
+					style="float: left"
+					class="btn-group">
+					<button
+						class="btn btn-default btn-sm dropdown-toggle"
+						data-toggle="dropdown">
+						&nbsp; Export &nbsp;
+						<i class="fa fa-caret-down"></i>
+					</button>
+					<ul
+						class="dropdown-menu"
+						style="background: rgba(51, 51, 51, 0.9) !important">
+						<li>
+							<a
+								id="copychecker"
+								onclick="copychecker();"
+								style="color: white">
+								Copy
+							</a>
+						</li>
+						<li>
+							<a
+								id="csvchecker"
+								onclick="csvchecker();"
+								style="color: white">
+								CSV
+							</a>
+						</li>
+						<li>
+							<a
+								id="excelchecker"
+								onclick="excelchecker();"
+								style="color: white">
+								Excel
+							</a>
+						</li>
+						<li>
+							<a
+								id="printchecker"
+								onclick="printchecker();"
+								style="color: white">
+								Print
+							</a>
+						</li>
+						<li>
+							<a
+								id="pdfchecker"
+								onclick="pdfchecker();"
+								style="color: white">
+								PDF
+							</a>
+						</li>
+					</ul>
+				</div>
+				<div style="float: right">
+					<button class="btn btn-primary btn-block btn-sm"
+							data-target="#my_modal1"
+							data-toggle="modal"
+							id="modal_popup_id"
+							type="button"
+							onClick="modalPopup('modal_popup_regist')">
+						상태 등록
+					</button>
+				</div>
+			</div>
+			<div
+				class="box box-primary"
+				style="
+					background: rgba(51, 51, 51, 0.225);
+					margin-bottom: 5px !important;
+					border: dashed;
+					border-width: thin;
+					border-color: lightsteelblue;
+				">
+				<div class="box-body">
+					<table
+						class="display"
+						style="width: 100%; overflow: hidden; border-top: 1px dashed rgba(51, 51, 51, 0.3)"
+						id="pdservice_table"></table>
+				</div>
+			</div>
+		</div>
+	</section>
+</div>
+
+<div class="col-lg-3 col-layer">
+	<div class="row">
+		<section class="widget">
+			<header>
+				<h4>
+					<span
+						class="font13"
+						style="font-weight: bold">
+						<i
+							class="fa fa-sort-amount-asc"
+							style="vertical-align: middle; font-size: 14px"></i>
+						제품(서비스) Version 조회
+					</span>
+				</h4>
+				<div class="widget-controls">
+					<a
+						data-widgster="toleft"
+						title="change width to left"
+						href="#">
+						<i class="glyphicon glyphicon-chevron-left"></i>
+					</a>
+					<a
+						data-widgster="expand"
+						title="Expand"
+						href="#">
+						<i class="glyphicon glyphicon-chevron-up"></i>
+					</a>
+					<a
+						data-widgster="collapse"
+						title="Collapse"
+						href="#">
+						<i class="glyphicon glyphicon-chevron-down"></i>
+					</a>
+					<a
+						data-widgster="toright"
+						title="change width to right"
+						href="#">
+						<i class="glyphicon glyphicon-chevron-right"></i>
+					</a>
+					<a
+						data-widgster="restore"
+						title="Restore"
+						href="#">
+						<span class="glyphicon glyphicon-repeat"></span>
+					</a>
+					<a
+						data-widgster="fullscreen"
+						title="Fullscreen"
+						href="#">
+						<i
+							class="glyphicon glyphicon-fullscreen"
+							style="font-size: 11px"></i>
+					</a>
+				</div>
+			</header>
+			<div class="body">
+				<div
+					class="gradient_middle_border"
+					style="width: 100%; height: 2px"></div>
+				<blockquote
+					class="font13"
+					style="margin-top: 5px">
+					2. 버전 선택 및 등록
+					<div style="float: right">
+						<button
+							class="btn btn-transparent btn-xs"
+							style="margin-top: -3px; color: #acacac; background: rgba(51, 51, 51, 0.2); padding: 1px 9px"
+							onclick="window.open('docs/guide.html#jira_version_inquiry_selection')">
+							Help
+							<i
+								class="fa fa-question"
+								style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
+						</button>
+					</div>
+				</blockquote>
+				<div class="clearfix widget-content">
+					<div style="float: left">
+						<!-- 제품(서비스) Version 조회   -->
+						<div id="selected_info">
+							<div
+								class="panel-group json-menu"
+								style="margin-bottom: 0px !important">
+								<div
+									class="list-group-item json-menu-header"
+									style="padding: 0px">
+									<div class="chat-message">
+										<div
+											class="chat-message-body"
+											style="margin-left: 0px !important; border-left: 2px solid #a4c6ff">
+											<span
+												class="arrow"
+												style="top: 10px !important; border-right: 5px solid #a4c6ff"></span>
+											<div
+												class="sender"
+												style="padding-bottom: 5px; padding-top: 5px">
+												선택된 제품(서비스) :
+												<span
+													id="select_Service"
+													style="color: #a4c6ff">
+													선택되지 않음
+												</span>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div style="float: right">
+						<button
+							class="btn btn-warning btn-sm"
+							type="button"
+							onclick="goToTemplatePage('pdServiceVersion')">
+							버전 관리
+						</button>
+					</div>
+				</div>
+
+				<div
+					class="panel-group"
+					id="version_accordion"></div>
+			</div>
+		</section>
+	</div>
+</div>
+
+<div class="col-lg-5 col-layer">
+	<section class="widget">
+		<header>
+			<h4>
+				<span
+					class="font13"
+					style="font-weight: bold">
+					<i
+						class="fa fa-edit"
+						style="vertical-align: middle; font-size: 14px"></i>
+					ALM 프로젝트 목록
+				</span>
+			</h4>
+			<div class="widget-controls">
+				<a
+					data-widgster="toleft"
+					title="change width to left"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-left"></i>
+				</a>
+				<a
+					data-widgster="expand"
+					title="Expand"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-up"></i>
+				</a>
+				<a
+					data-widgster="collapse"
+					title="Collapse"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-down"></i>
+				</a>
+				<a
+					data-widgster="toright"
+					title="change width to right"
+					href="#">
+					<i class="glyphicon glyphicon-chevron-right"></i>
+				</a>
+				<a
+					data-widgster="restore"
+					title="Restore"
+					href="#">
+					<span class="glyphicon glyphicon-repeat"></span>
+				</a>
+				<a
+					data-widgster="fullscreen"
+					title="Fullscreen"
+					href="#">
+					<i
+						class="glyphicon glyphicon-fullscreen"
+						style="font-size: 11px"></i>
+				</a>
+			</div>
+		</header>
+		<div class="body">
+			<div
+				class="gradient_middle_border"
+				style="width: 100%; height: 2px"></div>
+			<blockquote
+				class="font13"
+				style="margin-top: 5px">
+				3. 연결할 ALM 프로젝트 선택
+				<div style="float: right">
+					<button
+						class="btn btn-transparent btn-xs"
+						style="margin-top: -3px; color: #acacac; background: rgba(51, 51, 51, 0.2); padding: 1px 9px"
+						onclick="window.open('docs/guide.html#jira_list')">
+						Help
+						<i
+							class="fa fa-question"
+							style="font-size: 14px; vertical-align: middle; color: #acacac"></i>
+					</button>
+				</div>
+			</blockquote>
+			<div class="clearfix widget-content">
+				<div style="float: left">
+					<div
+						style="float: left"
+						class="btn-group">
+						<div class="clearfix widget-content">
+							<!-- jira list -->
+							<div id="selected_info">
+								<div
+									class="panel-group json-menu"
+									style="margin-bottom: 0px !important">
+									<div
+										class="list-item json-menu-header"
+										style="padding: 0px">
+										<div class="chat-message">
+											<div
+												class="chat-message-body"
+												style="margin-left: 0px !important; border-left: 2px solid #a4c6ff">
+												<span
+													class="arrow"
+													style="top: 10px !important; border-right: 5px solid #a4c6ff"></span>
+												<div
+													class="sender"
+													style="padding-bottom: 5px; padding-top: 3px">
+													<i class="fa fa-check"></i>
+													선택된 제품
+													<sup>서비스</sup>
+													:
+													<span
+														id="select_PdService"
+														style="color: #a4c6ff">
+														선택되지 않음
+													</span>
+												</div>
+												<div
+													class="sender"
+													style="padding-bottom: 5px; padding-top: 3px">
+													<i class="fa fa-check"></i>
+													선택된 버전 :
+													<span
+														id="select_Version"
+														style="color: #a4c6ff">
+														선택되지 않음
+													</span>
+												</div>
+											</div>
+										</div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div style="float: right">
+					<button
+						type="button"
+						id="pdservice_connect"
+						class="btn btn-primary btn-sm pdservice_version_alm_connect"
+						style="width: 100% !important">
+						제품(서비스)-버전-ALM 연결 등록
+					</button>
+				</div>
+			</div>
+			<div
+				class="box box-primary"
+				style="background: rgba(51, 51, 51, 0.225); margin-bottom: 5px !important">
+				<div class="span12">
+					<select
+						multiple
+						class="searchable"
+						name="searchable[]"
+						id="multiselect"></select>
+				</div>
+			</div>
+		</div>
+	</section>
+</div>
+
+<!-- 신규 -->
+<div
+		id="my_modal1"
+		class="modal fade"
+		role="dialog"
+		aria-labelledby="myModalLabel"
+		aria-hidden="true"
+		style="display: none; border-radius: 10px">
+	<div    class="modal-dialog"
+			style="width: 80%; height: 80%">
+		<div class="modal-content modalDarkBack">
+			<div    class="modal-header"
+					style="padding: 0px; border-bottom: 1px">
+				<h4 class="modal-title font14"
+					id="my_modal_label1"
+					style="color: #f8f8f8; text-align: left; padding: 5px">
+					<span   class="font13"
+							style="font-weight: bold"
+							id="my_modal1_title">
+                            <i class="fa fa-edit"></i>
+                            ARMS 상태 등록 팝업
+					</span>
+					<blockquote    class="search-result"
+								   style="border-left: 5px solid #e5603b">
+						<p
+								style="font-size: 13px; margin: 10px 0px 10px 0px; padding-left: 10px"
+								id="my_modal1_description">
+							A-RMS 요구사항의 상태를 등록합니다.
+						</p>
+					</blockquote>
+				</h4>
+				<div    class="widget-controls"
+						style="padding-top: 10px">
+					<a  title="Options" class="hidden"
+						href="#">
+						<i class="glyphicon glyphicon-cog"></i>
+					</a>
+					<a  data-widgster="expand" class="hidden"
+						title="Expand"
+						href="#">
+						<i class="glyphicon glyphicon-chevron-up"></i>
+					</a>
+					<a  data-widgster="collapse" class="hidden"
+						title="Collapse"
+						href="#">
+						<i class="glyphicon glyphicon-chevron-down"></i>
+					</a>
+					<a  data-widgster="close"
+						title="Close"
+						href="#"
+						data-dismiss="modal"
+						aria-hidden="true">
+						<i class="glyphicon glyphicon-remove"></i>
+					</a>
+				</div>
+			</div>
+			<div    class="modal-body"
+					style="padding: 5px; border-top: 1px solid rgba(51, 51, 51, 0.3); padding-top: 5px">
+				<form   class="form-horizontal"
+						method="post">
+					<fieldset>
+						<div    class="control-group"
+								for="popup_view_state_name">
+							<label class="control-label font13">상태 이름 :</label>
+							<div    class="controls form-group input-group"
+									style="margin-left: 180px">
+								<span class="input-group-addon">
+									<i class="glyphicon glyphicon-gift"></i>
+								</span>
+								<input  type="text"
+										id="popup_view_state_name"
+										name="popup_view_state_name"
+										class="form-control parsley-validated font13 darkBack"
+										data-placement="top"
+										data-original-title="ALM(서버) 이름은 중복될 수 없습니다."
+										required="required"
+										placeholder="Requirement State Name" />
+								<span class="input-group-addon font11">INFO : ALM(서버) 이름은 중복될 수 없습니다.</span>
+							</div>
+						</div>
+						<div    class="control-group">
+							<label
+									class="control-label font13"
+									for="popup_view_state_category">상태 카테고리 :</label>
+							<div    class="controls form-group input-group"
+									style="margin-left: 180px">
+                                <span class="input-group-addon">
+                                    <i class="glyphicon glyphicon-globe"></i>
+                                </span>
+								<div style="display: flex; align-items: center; gap: 10px; padding: 0">
+									<div
+											id="popup_editview_jira_server_type_div"
+											data-toggle="buttons">
+										<label class="btn edit-grey">
+											<input
+													type="radio"
+													name="popup_editview_jira_server_type_options"
+													value="클라우드" />
+											<img src="./img/jira/mark-gradient-white-jira.svg"
+												 id="side_jira_white_icon"
+												 width="17px"
+												 style="margin-right: 3px"></img>
+											클라우드 지라
+										</label>
+										<label class="btn edit-blue">
+											<input
+													type="radio"
+													name="popup_editview_jira_server_type_options"
+													value="온프레미스" />
+											<img src="./img/jira/mark-gradient-blue-jira.svg"
+												 id="side_jira_blue_icon"
+												 width="17px"
+												 style="margin-right: 3px"></img>
+											온프레미스 지라
+										</label>
+										<label class="btn edit-red" >
+											<input
+													type="radio"
+													name="popup_editview_jira_server_type_options"
+													id="popup_editview_server_redmine_check"
+													value="레드마인_온프레미스" />
+											<img src="./img/redmine/logo.png"
+												 id="side_jira_white_icon"
+												 width="17px"
+												 style="margin-right: 3px"></img>
+											레드마인
+										</label>
+									</div>
+									<span class=" font11" id="redmine_info" style="display:none;">INFO : 레드마인 서버는 관리자 계정으로 등록해야합니다.</span>
+								</div>
+							</div>
+						</div>
+						<div    class="control-group"
+								for="popup_editview_jira_server_base_url">
+							<label class="control-label font13">ALM URL :</label>
+							<div    class="controls form-group input-group"
+									style="margin-left: 180px">
+								<span class="input-group-addon">
+									<i class="glyphicon glyphicon-share"></i>
+								</span>
+								<input  type="text"
+										id="popup_editview_jira_server_base_url"
+										name="popup_editview_jira_server_base_url"
+										class="form-control parsley-validated font13 darkBack"
+										data-placement="top"
+										data-original-title="jira_server_url"
+										required="required"
+										placeholder="ALM BASE URL" />
+								<span class="input-group-addon font11">INFO : 등록할 ALM URL을 입력</span>
+							</div>
+						</div>
+						<div    class="control-group"
+								for="popup_editview_jira_server_connect_id">
+							<label class="control-label font13">ALM 아이디 :</label>
+							<div    class="controls form-group input-group"
+									style="margin-left: 180px">
+								<span class="input-group-addon">
+									<i class="glyphicon glyphicon-gift"></i>
+								</span>
+								<input  type="text"
+										id="popup_editview_jira_server_connect_id"
+										name="popup_editview_jira_server_connect_id"
+										class="form-control parsley-validated font13 darkBack"
+										data-placement="top"
+										data-original-title="JIRA ID"
+										required="required"
+										placeholder="ALM SERVER CONNECT ID" />
+								<span class="input-group-addon font11">INFO : 등록할 ALM 아이디를 입력</span>
+							</div>
+						</div>
+						<div    class="control-group"
+								for="popup_editview_jira_pass_token">
+							<label class="control-label font13">ALM 암호 또는 토큰 :</label>
+							<div    class="controls form-group input-group"
+									style="margin-left: 180px">
+								<span class="input-group-addon">
+									<i class="glyphicon glyphicon-indent-left"></i>
+								</span>
+								<input  type="text"
+										id="popup_editview_jira_pass_token"
+										name="popup_editview_jira_pass_token"
+										class="form-control parsley-validated font13 darkBack"
+										data-placement="top"
+										data-original-title="ALM(서버) 이름은 중복될 수 없습니다."
+										required="required"
+										placeholder="ALM Pass or Token" />
+								<span class="input-group-addon font11">INFO : ALM 암호 또는 토큰 입력</span>
+							</div>
+						</div>
+						<div
+								class="control-group"
+								style="display: none;"
+								id="popup_editview_text_formatting_div">
+							<label
+									class="control-label font13"
+									for="popup_editview_text_formatting">
+								ALM 서버 본문 형식 :
+							</label>
+							<div    class="controls form-group input-group"
+									style="margin-left: 180px">
+								<span class="input-group-addon">
+									<i class="glyphicon glyphicon-indent-left"></i>
+								</span>
+								<select
+										id="popup_editview_text_formatting"
+										name="popup_editview_text_formatting"
+										class="select-block-level darkBack select_text_formatting"
+										tabIndex="-1">
+									<option value="text">text</option>
+									<option value="html">html</option>
+									<option value="markdown">markdown</option>
+								</select>
+								<span class="input-group-addon font11">INFO : ALM 서버 본문 형식 선택</span>
+							</div>
+						</div>
+						<div class="control-group">
+							<button type="button"
+									id="verify_account"
+									data-style="contract"
+									style = "float:right;"
+									class="ladda btn btn-success">
+								계증 검증 하기
+							</button><br>
+						</div>
+						<div class="control-group">
+							<label  class="control-label"
+									style="color: #f8f8f8">
+								ALM 서버 내용 :
+							</label>
+							<div class="controls form-group">
+								<div    class="col-sm-12"
+										style="padding-top: 10px">
+									<div    id="modal_editor"
+											class="darkBack">
+										<p>등록한 ALM(서버) 관련 특이사항 등을 기록합니다.</p>
+									</div>
+								</div>
+							</div>
+						</div>
+					</fieldset>
+				</form>
+			</div>
+			<div    class="modal-footer"
+					style="background-color: transparent; padding: 5px; text-align: right; border-top: 0px">
+				<button
+						type="button"
+						id="close_modal_popup"
+						class="btn btn-default"
+						data-dismiss="modal">
+					Close
+				</button>
+				<button
+						type="button"
+						id="regist_alm_server"
+						class="btn btn-primary">
+					신규 서버 등록
+				</button>
+				<button
+						type="button"
+						id="extendupdate_jira_server"
+						class="btn btn-success">
+					ALM(서버) 변경내용 저장
+				</button>
+			</div>
+		</div>
+		<!-- /.modal-content -->
+	</div>
+	<!-- /.modal-dialog -->
+</div>
\ No newline at end of file
Index: arms/html/mapping/content-header.html
===================================================================
diff -u
--- arms/html/mapping/content-header.html	(revision 0)
+++ arms/html/mapping/content-header.html	(revision ba5f510f5beac16f2e21f099abb37263fa8241ba)
@@ -0,0 +1,14 @@
+<h3 class="page-title font16">
+	ALM
+	<small>Status Mapping</small>
+	<ol class="breadcrumb pull-right hidden-xs font12">
+		<li>
+			<a href="#">
+				<i class="fa fa-sitemap"></i>
+				Home
+			</a>
+		</li>
+		<li class="active">ALM</li>
+		<li class="active">Status Mapping</li>
+	</ol>
+</h3>
Index: arms/html/template/page-sidebar.html
===================================================================
diff -u -r73381460b02e52641a2dec12ad10f0dfd65712dc -rba5f510f5beac16f2e21f099abb37263fa8241ba
--- arms/html/template/page-sidebar.html	(.../page-sidebar.html)	(revision 73381460b02e52641a2dec12ad10f0dfd65712dc)
+++ arms/html/template/page-sidebar.html	(.../page-sidebar.html)	(revision ba5f510f5beac16f2e21f099abb37263fa8241ba)
@@ -78,6 +78,10 @@
                 id="sidebar_menu_jira_manage">
                 <a href="/arms/template.html?page=jiraServer" data-locale="nav.alm.s">서버 관리</a>
             </li>
+<!--			<li class=""
+				id="sidebar_menu_product_mapping">
+				<a href="/arms/template.html?page=mapping" data-locale="nav.alm.m">매핑 관리</a>
+			</li>-->
             <li class=""
                 id="sidebar_menu_product_jira_connect">
                 <a href="/arms/template.html?page=jiraConnection" data-locale="nav.alm.c">연결 관리</a>
Index: arms/js/mapping.js
===================================================================
diff -u
--- arms/js/mapping.js	(revision 0)
+++ arms/js/mapping.js	(revision ba5f510f5beac16f2e21f099abb37263fa8241ba)
@@ -0,0 +1,838 @@
+var selectId; // 제품 아이디
+var selectName; // 제품 이름
+var selectedIndex; // 데이터테이블 선택한 인덱스
+var selectedPage; // 데이터테이블 선택한 인덱스
+var selectVersion; // 선택한 버전 아이디
+var selectVersionName; // 선택한 버전 이름
+var dataTableRef; // 데이터테이블 참조 변수
+var selectConnectID; // 제품(서비스) - 버전 - 지라 연결 정보 아이디
+var versionList;
+
+function execDocReady() {
+
+    var pluginGroups = [
+        [	"../reference/lightblue4/docs/lib/slimScroll/jquery.slimscroll.min.js",
+            "../reference/lightblue4/docs/lib/d3/d3.min.js",
+            "../reference/lightblue4/docs/lib/nvd3/build/nv.d3.min.js",
+            "../reference/jquery-plugins/unityping-0.1.0/dist/jquery.unityping.min.js",
+            "../reference/lightblue4/docs/lib/widgster/widgster.js",
+            "../reference/jquery-plugins/html2canvas-1.4.1/html2canvas.js"],
+
+        [	"../reference/jquery-plugins/select2-4.0.2/dist/css/select2_lightblue4.css",
+            "../reference/jquery-plugins/lou-multi-select-0.9.12/css/multiselect-lightblue4.css",
+            "../reference/jquery-plugins/multiple-select-1.5.2/dist/multiple-select-bluelight.css",
+            "../reference/jquery-plugins/select2-4.0.2/dist/js/select2.min.js",
+            "../reference/jquery-plugins/lou-multi-select-0.9.12/js/jquery.quicksearch.js",
+            "../reference/jquery-plugins/lou-multi-select-0.9.12/js/jquery.multi-select.js",
+            "../reference/jquery-plugins/multiple-select-1.5.2/dist/multiple-select.min.js"],
+
+        [	"../reference/jquery-plugins/dataTables-1.10.16/media/css/jquery.dataTables_lightblue4.css",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Responsive/css/responsive.dataTables_lightblue4.css",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Select/css/select.dataTables_lightblue4.css",
+            "../reference/jquery-plugins/dataTables-1.10.16/media/js/jquery.dataTables.min.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Responsive/js/dataTables.responsive.min.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Select/js/dataTables.select.min.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/RowGroup/js/dataTables.rowsGroup.min.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/dataTables.buttons.min.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/buttons.html5.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/buttons.print.js",
+            "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/jszip.min.js"
+        ]
+    ];
+
+    loadPluginGroupsParallelAndSequential(pluginGroups)
+        .then(function() {
+
+            console.log('모든 플러그인 로드 완료');
+
+            //vfs_fonts 파일이 커서 defer 처리 함.
+            setTimeout(function () {
+                var script = document.createElement("script");
+                script.src = "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/vfs_fonts.js";
+                script.defer = true; // defer 속성 설정
+                document.head.appendChild(script);
+            }, 5000); // 5초 후에 실행됩니다.
+
+            //pdfmake 파일이 커서 defer 처리 함.
+            setTimeout(function () {
+                var script = document.createElement("script");
+                script.src = "../reference/jquery-plugins/dataTables-1.10.16/extensions/Buttons/js/pdfmake.min.js";
+                script.defer = true; // defer 속성 설정
+                document.head.appendChild(script);
+            }, 5000); // 5초 후에 실행됩니다.
+
+            //사이드 메뉴 처리
+            $('.widget').widgster();
+            setSideMenu("sidebar_menu_jira", "sidebar_menu_product_mapping");
+
+            // 데이터 테이블 로드 함수
+            var waitDataTable = setInterval(function () {
+                try {
+                    if (!$.fn.DataTable.isDataTable("#pdservice_table")) {
+                        dataTableLoad();
+                        clearInterval(waitDataTable);
+                    }
+                } catch (err) {
+                    console.log("서비스 데이터 테이블 로드가 완료되지 않아서 초기화 재시도 중...");
+                }
+            }, 313 /*milli*/);
+
+
+            setdata_for_multiSelect();//멀티셀렉트 세팅
+            connect_pdservice_jira(); //제품서비스와 지라프로젝트 연결 실행
+            init_versionList();   	  //버전 요소 생성
+            downloadChartImage();     //차트 이미지 다운로드
+
+            //d3Chart 그리기
+            $.getScript("./js/pdServiceVersion/initD3Chart.js").done(function (script, textStatus) {
+                initD3Chart("/auth-user/api/arms/pdService/getD3ChartData.do");
+            });
+
+            //스크립트 실행 로직을 이곳에 추가합니다.
+            var 라따적용_클래스이름_배열 = ['.pdservice_version_alm_connect'];
+            laddaBtnSetting(라따적용_클래스이름_배열);
+
+        })
+        .catch(function() {
+            console.error('플러그인 로드 중 오류 발생');
+        });
+
+}
+////////////////////////////////////////////////////////////////////////////////////////
+// --- 데이터 테이블 설정 --- //
+////////////////////////////////////////////////////////////////////////////////////////
+function dataTableLoad() {
+    // 데이터 테이블 컬럼 및 열그룹 구성
+    var columnList = [
+        { name: "c_id", title: "제품(서비스) 아이디", data: "c_id", visible: false },
+        {
+            name: "c_title",
+            title: "제품(서비스) 이름",
+            data: "c_title",
+            render: function (data, type, row, meta) {
+                if (type === "display") { //// 렌더링 시 이름을 라벨로 감싸서 표시
+                    return '<label style="color: #a4c6ff">' + data + "</label>";
+                }
+
+                return data;
+            },
+            className: "dt-body-left",  // 좌측 정렬
+            visible: true
+        }
+    ];
+    var rowsGroupList = [];
+    var columnDefList = [];
+    var selectList = {};
+    var orderList = [[0, "asc"]];
+    var buttonList = [
+        "copy",
+        "excel",
+        "print",
+        {
+            extend: "csv",
+            text: "Export csv",
+            charset: "utf-8",
+            extension: ".csv",
+            fieldSeparator: ",",
+            fieldBoundary: "",
+            bom: true
+        },
+        {
+            extend: "pdfHtml5",
+            orientation: "landscape",
+            pageSize: "LEGAL"
+        }
+    ];
+
+    var jquerySelector = "#pdservice_table";
+    var ajaxUrl = "/auth-user/api/arms/pdService/getPdServiceMonitor.do";
+    var jsonRoot = "response";
+    var isServerSide = false;
+    console.log("jsonRoot:", jsonRoot);
+
+    dataTableRef = dataTable_build(
+        jquerySelector,
+        ajaxUrl,
+        jsonRoot,
+        columnList,
+        rowsGroupList,
+        columnDefList,
+        selectList,
+        orderList,
+        buttonList,
+        isServerSide
+    );
+
+}
+
+function copychecker() {
+    dataTableRef.button(".buttons-copy").trigger();
+}
+function printchecker() {
+    dataTableRef.button(".buttons-print").trigger();
+}
+function csvchecker() {
+    dataTableRef.button(".buttons-csv").trigger();
+}
+function excelchecker() {
+    dataTableRef.button(".buttons-excel").trigger();
+}
+function pdfchecker() {
+    dataTableRef.button(".buttons-pdf").trigger();
+}
+
+
+// 데이터 테이블 구성 이후 꼭 구현해야 할 메소드 : 열 클릭시 이벤트
+function dataTableClick(tempDataTable, selectedData) {
+    $("#version_contents").html("");  //// 버전 상세 명세 초기화
+
+    selectedIndex = selectedData.selectedIndex;
+    selectedPage = selectedData.selectedPage;
+    selectId = selectedData.c_id;
+    selectName = selectedData.c_title;
+    pdServiceDataTableClick(selectedData.c_id);
+
+    // console.log("selectedIndex:::::" + selectedIndex);
+    // console.log("dataTableClick:: dataTableClick -> " + selectedData.c_id);
+
+
+    $(".searchable").multiSelect("deselect_all");  // // 멀티셀렉트에서 모든 선택 해제
+    $("#pdservice_connect").removeClass("btn-success");
+    $("#pdservice_connect").addClass("btn-primary");
+    $("#pdservice_connect").text("제품(서비스)-버전-ALM 연결 등록");
+
+    //초기 태그 삭제
+    $("#initDefaultVersion").remove();
+
+    // //버전 리스트 로드
+    dataLoad(selectedData.c_id, selectedData.c_title);
+
+
+
+    // D3 업데이트
+    // updateD3ByDataTable();
+
+}
+
+function dataTableDrawCallback(tableInfo) {
+    $("#" + tableInfo.sInstance)
+        .DataTable()
+        .columns.adjust()
+        .responsive.recalc();
+}
+
+//데이터 테이블 ajax load 이후 콜백.
+function dataTableCallBack(settings, json) {}
+
+////////////////////////////////////////////////////////////////////////////////////////
+// 버전 리스트를 재로드하는 함수 ( 버전 추가, 갱신, 삭제 시 호출 )
+////////////////////////////////////////////////////////////////////////////////////////
+function dataLoad(getSelectedText, selectedText) {
+    // ajax 처리 후 에디터 바인딩.
+    console.log("dataLoad :: getSelectedID → " + getSelectedText);
+
+    $.ajax("/auth-user/api/arms/pdService/getVersionList.do?c_id=" + getSelectedText).done(function (json) {
+        console.log("dataLoad :: success → ", json);
+        versionList = json.response;
+        console.log("dataLoad :: versionList → ", versionList);
+        $("#version_accordion").jsonMenu("set", json.response, { speed: 5000 });
+
+        var selectedHtml =
+            ` 
+ 			<div class="chat-message">
+				<div    class="chat-message-body"
+						style="margin-left: 0px !important; padding:!important;  border-left: 2px solid #a4c6ff; border-right: 2px solid #e5603b;">
+					 <span  id="toRight"
+							class="arrow"
+							style="top: 10px !important; right: -7px; border-top: 5px solid transparent;
+							border-bottom: 5px solid transparent;
+							border-left: 5px solid #e5603b; border-right: 0px; left:unset;"></span>
+					<span   class="arrow"
+							style="top: 10px !important; border-right: 5px solid #a4c6ff;"></span>
+					<div    class="sender"
+							style="padding-bottom: 5px; padding-top: 5px">
+						선택된 제품(서비스) :
+						<span style="color: #a4c6ff;">
+							` +  selectedText + `
+						</span>
+					</div>
+				</div>
+			</div>
+			`;
+
+        $(".list-group-item").html(selectedHtml);
+
+        $("#tooltip_enabled_service_name").val(selectedText);
+        // $("#select_PdService").text(selectedText); // sender 이름 바인딩
+
+
+        //updateD3ByVersionList();
+        setTimeout(function () {
+            $("#pdService_Version_First_Child").trigger("click");
+        }, 500);
+    });
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
+// versionlist 이니셜라이즈
+////////////////////////////////////////////////////////////////////////////////////////
+function init_versionList() {
+    let menu;
+    $.fn.jsonMenu = function (action, items, options) {
+        $(this).addClass("json-menu");
+        if (action == "add") {
+            menu.body.push(items);
+            draw($(this), menu);
+        } else if (action == "set") {
+            menu = items;
+            draw($(this), menu);
+        }
+        return this;
+    };
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
+// version list html 삽입
+////////////////////////////////////////////////////////////////////////////////////////
+function draw(main, menu) {
+    console.log("menu :: " + JSON.stringify(menu));
+    console.table(menu);
+    console.log("test data:: " + selectName);
+
+
+    main.html("");
+    var data ="";
+
+    for (let i = 0; i < menu.length; i++) {
+
+        if (i == 0) {  // select version\
+            data += `
+			   <div class="panel">
+				   <div class="panel-heading">
+					   <a class="accordion-toggle collapsed"
+					   			data-toggle="collapse"
+					   			id="pdService_Version_First_Child"
+					   			name="versionLink_List"
+					   			style="color: #a4c6ff; text-decoration: none; cursor: pointer;  "
+           						onclick="versionClicks(this, ${menu[i].c_id}, '${menu[i].c_title}')">
+						    ${menu[i].c_title}
+ 					   </a>
+				   </div>
+			   </div>`;
+        } else {  // basic version
+            data += `
+			   <div class="panel">
+				   <div class="panel-heading">
+					   <a class="accordion-toggle collapsed"
+					   			data-toggle="collapse"
+					   			name="versionLink_List"
+					   			style="color: #a4c6ff; text-decoration: none; cursor: pointer; "
+           						onclick="versionClicks(this, ${menu[i].c_id}, '${menu[i].c_title}')">
+						   ${menu[i].c_title}
+					   </a>
+				   </div>
+			   </div>`;
+        }
+    }
+
+    main.html(data);
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
+//버전 클릭할 때 동작하는 함수
+////////////////////////////////////////////////////////////////////////////////////////
+function versionClicks(element, c_id, c_title) {
+    $("a[name='versionLink_List']").each(function () {
+        this.style.background = "";
+    });
+    if (element == null) {
+        console.log("element is empty");
+    } else {
+        element.style.background = "rgba(229, 96, 59, 0.3)";
+        console.log("element is = " + element);
+    }
+
+    selectVersion = c_id;  // version c_id
+
+    var coloredTitleHtml =
+        `<div class="chat-message">
+				<div class="chat-message-body" style="margin-left: 0px !important; border-left: 2px solid #e5603b;  ">
+					<span 	class="arrow"
+							style="top: 17px !important; border-right: 5px solid #e5603b;">
+					</span>
+					 <div    class="sender"
+							style="padding-bottom: 5px; padding-top: 3px">
+						<i class="fa fa-check"></i>
+							선택된 제품
+						<sup>서비스</sup> :
+						<span   id="select_PdService"
+								style="color: #a4c6ff">
+								 ` +  selectName + `
+						</span>
+					</div>
+					<div    class="sender"
+							style="padding-bottom: 5px; padding-top: 3px">
+						<i class="fa fa-check"></i> 선택된 버전 :
+						<span   id="select_Version"
+								style="color: #a4c6ff">
+							   ` +  c_title + `
+						</span>
+					</div>
+				</div>
+			</div>`;
+    //console.log("dataLoad :: coloredTitleHtml - >", coloredTitleHtml);
+
+    $(".list-item").html(coloredTitleHtml);
+
+    console.log("click :: C_ID ->  " + c_id);
+    $(".searchable").multiSelect("deselect_all");  //선택된 항목들을 모두 선택 해제(해당 요소들에서 선택을 없애는)하는 코드
+    // console.log("pdservice_link -> " +   $("#pdservice_table").DataTable().rows(".selected").data()[0].c_id);
+    // console.log("pdserviceversion_link -> " +  c_id );
+
+    // 이미 등록된 제품(서비스)-버전-지라 연결 정보가 있는지 확인
+    console.log("선택한 버전의 제품서비스 아이디 : " + $("#pdservice_table").DataTable().rows(".selected").data()[0].c_id);
+    $.ajax({
+        url: "/auth-user/api/arms/globaltreemap/getConnectInfo/pdService/pdServiceVersion/jiraProject.do",
+        type: "GET",
+        data: {
+            pdserviceversion_link: c_id
+        },
+        contentType: "application/json;charset=UTF-8",
+        dataType: "json",
+        progress: true
+    })
+        .done(function (data) {
+            var versionClickData = [];
+
+            var multiSelectData = [];
+            for (var k in data.response) {
+
+                var obj = data.response[k];
+                console.log("response data check:: obj ->   " + JSON.stringify(obj));
+                console.table(obj);
+                console.log("push obj.jiraproject_link :: => " + obj.jiraproject_link);
+
+                multiSelectData.push(obj.jiraproject_link);
+                console.log("push jiraproject :: => " + multiSelectData.push(obj.jiraproject_link));
+
+                versionClickData.push(obj);
+            }
+
+            if (versionClickData.length == 0) {
+                $("#pdservice_connect").removeClass("btn-success");
+                $("#pdservice_connect").addClass("btn-primary");
+                $("#pdservice_connect").text("제품(서비스)-버전-ALM 연결 등록");
+            } else {
+                $("#pdservice_connect").removeClass("btn-primary");
+                $("#pdservice_connect").addClass("btn-success");
+                $("#pdservice_connect").text("제품(서비스)-버전-ALM 연결 변경");
+
+                $("#multiselect").multiSelect("select", multiSelectData.toString().split(","));
+            }
+        })
+        .fail(function (e) {
+            console.log("fail call");
+        })
+        .always(function () {
+            console.log("always call");
+        });
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
+// 제품(서비스)-버전-지라 저장
+////////////////////////////////////////////////////////////////////////////////////////
+function connect_pdservice_jira(){
+    // console.log("pdservice_jira::: pdservice_version_id -> " + selectVersion);
+    $("#pdservice_connect").click(function () {
+        if ($("#pdservice_connect").hasClass("btn-primary") == true) {
+            // data가 존재하지 않음.
+            $.ajax({
+                url: "/auth-user/api/arms/globaltreemap/setConnectInfo/pdService/pdServiceVersion/jiraProject.do",
+                type: "POST",
+                data: {
+                    pdservice_link: $("#pdservice_table").DataTable().rows(".selected").data()[0].c_id,
+                    pdserviceversion_link: selectVersion,
+                    c_pdservice_jira_ids: JSON.stringify($("#multiselect").val())
+                },
+                progress: true
+            })
+                .done(function (data) {
+                    //versionClick(null, selectVersion);
+                    jSuccess("제품(서비스) - 버전 - JiraProject 가 연결되었습니다.");
+                    initD3Chart("/auth-user/api/arms/pdService/getD3ChartData.do");
+                })
+                .fail(function (e) {
+                    console.log("fail call");
+                })
+                .always(function (data) {
+                    console.log("always call");
+                    console.log("데이터 연결 등록  완료!");
+                    console.log('multiselect data -> ' + JSON.stringify($("#multiselect").val()));
+
+                });
+        } else if ($("#pdservice_connect").hasClass("btn-success") == true) {
+            // data가 이미 있음
+            $.ajax({
+                url: "/auth-user/api/arms/globaltreemap/setConnectInfo/pdService/pdServiceVersion/jiraProject.do",
+                type: "POST",
+                data: {
+                    pdservice_link: $("#pdservice_table").DataTable().rows(".selected").data()[0].c_id,
+                    pdserviceversion_link: selectVersion,
+                    c_pdservice_jira_ids: JSON.stringify($("#multiselect").val())
+                },
+                progress: true
+            })
+                .done(function (data) {
+                    //versionClick(null, selectVersion);
+                    jSuccess("제품(서비스) - 버전 - JiraProject 가 연결되었습니다.");
+                    console.log('connect data -> ' + data);
+                })
+                .fail(function (e) {
+                    console.log("fail call");
+                })
+                .always(function (data) {
+                    // 변경이 되면 그래프에도 변화가 있어야한다.
+                    console.log("이미 있는 데이터 변경 완료 !");
+                    initD3Chart("/auth-user/api/arms/pdService/getD3ChartData.do");
+                });
+        } else {
+            jError("who are you?");
+        }
+    });
+}
+
+
+////////////////////////////////////////////////////////////////////////////////////////
+// JIRA 프로젝트 데이터 로드 후 멀티 셀렉트 빌드 하고 슬림스크롤 적용
+////////////////////////////////////////////////////////////////////////////////////////
+/* --------------------------- multi select & slim scroll ---------------------------------- */
+function setdata_for_multiSelect() {
+    $.ajax({
+        url: "/auth-user/api/arms/jiraServerProjectPure/getChildNodeWithoutSoftDelete.do?c_id=2",
+        type: "GET",
+        contentType: "application/json;charset=UTF-8",
+        dataType: "json",
+        progress: true
+    })
+        .done(function (data) {
+            console.log(data);
+            let option_data = [];
+            for (let i in data) {
+                let alm_server = data[i];
+                let server_name = alm_server.c_jira_server_name;
+                let server_type = alm_server.c_jira_server_type;
+
+                for (let j in alm_server.jiraProjectIssueTypePureEntities) {
+                    let alm_project = alm_server.jiraProjectIssueTypePureEntities[j];
+                    let alm_project_name = alm_project.c_jira_name;
+                    let alm_project_c_id = alm_project.c_id;
+
+                    let issue_type_entities = server_type === "온프레미스" ?
+                                                                alm_server.jiraIssueTypeEntities : alm_project.jiraIssueTypeEntities;
+
+                    const issue_type = find_checked_true_entity(issue_type_entities);
+
+                    let is_add_option = issue_type && (server_type === "클라우드" || server_type === "온프레미스");
+
+                    if (server_type === "레드마인_온프레미스") {
+                        const issue_priority = find_checked_true_entity(alm_server.jiraIssuePriorityEntities);
+                        is_add_option = issue_type && issue_priority;
+                    }
+
+                    if (is_add_option) {
+                        option_data.push(`<option data-server-type='${server_type}' value='${alm_project_c_id}'>[${server_name}] ${alm_project_name}</option>`);
+                    }
+                }
+            }
+
+            //프로젝트 목록 추가
+            $(".searchable").html(option_data.join(""));
+
+            ////////////////////////////////////////////////
+            // 멀티 셀렉트 빌드
+            buildMultiSelect();
+            ////////////////////////////////////////////////
+        })
+        .fail(function (e) {
+            console.log("fail call");
+        })
+        .always(function () {
+            console.log("always call");
+        });
+}
+
+function find_checked_true_entity(entities) {
+    return entities && entities.length > 0 ? entities.find(entity => entity.c_check === "true") : null;
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
+// 멀티 셀렉트 초기화 함수
+////////////////////////////////////////////////////////////////////////////////////////
+function buildMultiSelect() {
+    //multiselect
+    $(".searchable").multiSelect({
+        selectableHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Search Jira Project'>",
+        selectionHeader: "<input type='text' class='search-input' autocomplete='off' placeholder='Selected Jira Project'>",
+        afterInit: function (ms) {
+            var that = this,
+                $selectableSearch = that.$selectableUl.prev(),
+                $selectionSearch = that.$selectionUl.prev(),
+                selectableSearchString = "#" + that.$container.attr("id") + " .ms-elem-selectable:not(.ms-selected)",
+                selectionSearchString = "#" + that.$container.attr("id") + " .ms-elem-selection.ms-selected";
+
+            that.qs1 = $selectableSearch.quicksearch(selectableSearchString).on("keydown", function (e) {
+                if (e.which === 40) {
+                    that.$selectableUl.focus();
+                    return false;
+                }
+            });
+
+            that.qs2 = $selectionSearch.quicksearch(selectionSearchString).on("keydown", function (e) {
+                if (e.which == 40) {
+                    that.$selectionUl.focus();
+                    return false;
+                }
+            });
+
+            //slim scroll
+            $(".ms-list").slimscroll({
+                //size: '8px',
+                //width: '100%',
+                //height: 'fit-content',
+                height: "450px"
+                //color: '#ff4800',
+                //allowPageScroll: true,
+                //alwaysVisible: false,
+                //railVisible: true,
+                // scroll amount applied to each mouse wheel step
+                //wheelStep: 20,
+                // scroll amount applied when user is using gestures
+                //touchScrollStep: 200,
+                // distance in pixels between the side edge and the scrollbar
+                //distance: '10px',
+            });
+        },
+        afterSelect: function (value, text) {
+            this.qs1.cache();
+            this.qs2.cache();
+            //d3Update();
+        },
+        afterDeselect: function (value, text) {
+            this.qs1.cache();
+            this.qs2.cache();
+            //d3Update();
+        }
+    });
+}
+
+
+////////////////////////////////////////////////////////////////////////////////////////
+//제품(서비스) 클릭할 때 동작하는 함수
+//1. 상세보기 데이터 바인딩
+//2. 편집하기 데이터 바인딩
+////////////////////////////////////////////////////////////////////////////////////////
+function pdServiceDataTableClick(c_id) {
+    // selectVersion = c_id;
+    // console.log("pdSerivceDataTableClick:: selectVersion -> " + selectVersion);
+    // console.log("pdSerivceDataTableClick:: c_id -> " + c_id);
+
+    $.ajax({
+        url: "/auth-user/api/arms/pdService/getNodeWithVersionOrderByCidDesc.do", // 클라이언트가 HTTP 요청을 보낼 서버의 URL 주소
+        data: { c_id: c_id }, // HTTP 요청과 함께 서버로 보낼 데이터
+        method: "GET", // HTTP 요청 메소드(GET, POST 등)
+        dataType: "json", // 서버에서 보내줄 데이터의 타입
+        beforeSend: function () {
+            $(".loader").removeClass("hide");
+        }
+    })
+        // HTTP 요청이 성공하면 요청한 데이터가 done() 메소드로 전달됨.
+        .done(function (json) {
+            $("#detailview_pdservice_name").val(json.c_title);
+
+            var selectedHtml =
+                ` <div class="chat-message">
+					<div    class="chat-message-body"
+							style="margin-left: 0px !important; padding:!important;  border-left: 2px solid #a4c6ff; border-right: 2px solid #e5603b;">
+						 <span  id="toRight"
+								class="arrow"
+								style="top: 10px !important; right: -7px; border-top: 5px solid transparent;
+								border-bottom: 5px solid transparent;
+								border-left: 5px solid #e5603b; border-right: 0px; left:unset;"></span>
+						<span   class="arrow"
+								style="top: 10px !important; border-right: 5px solid #a4c6ff;"></span>
+						<div    class="sender"
+								style="padding-bottom: 5px; padding-top: 5px">
+							선택된 제품(서비스) :
+							<span style="color: #a4c6ff;">
+								` + json.c_title + `
+							</span>
+						</div>
+					</div>
+				</div>`;
+
+            $(".list-group-item").html(selectedHtml);
+            // $("#select_Version").text(json.c_title);
+
+
+            $("#detailview_pdservice_name").val(json.c_title);
+            if (isEmpty(json.c_pdservice_owner) || json.c_pdservice_owner == "none") {
+                $("#detailview_pdservice_owner").val("책임자가 존재하지 않습니다.");
+            } else {
+                $("#detailview_pdservice_owner").val(json.c_pdservice_owner);
+            }
+
+            if (isEmpty(json.c_pdservice_reviewer01) || json.c_pdservice_reviewer01 == "none") {
+                $("#detailview_pdservice_reviewer01").val("리뷰어(연대책임자)가 존재하지 않습니다.");
+            } else {
+                $("#detailview_pdservice_reviewer01").val(json.c_pdservice_reviewer01);
+            }
+
+            if (isEmpty(json.c_pdservice_reviewer02) || json.c_pdservice_reviewer02 == "none") {
+                $("#detailview_pdservice_reviewer02").val("2번째 리뷰어(연대책임자) 없음");
+            } else {
+                $("#detailview_pdservice_reviewer02").val(json.c_pdservice_reviewer02);
+            }
+
+            if (isEmpty(json.c_pdservice_reviewer03) || json.c_pdservice_reviewer03 == "none") {
+                $("#detailview_pdservice_reviewer03").val("3번째 리뷰어(연대책임자) 없음");
+            } else {
+                $("#detailview_pdservice_reviewer03").val(json.c_pdservice_reviewer03);
+            }
+
+            if (isEmpty(json.c_pdservice_reviewer04) || json.c_pdservice_reviewer04 == "none") {
+                $("#detailview_pdservice_reviewer04").val("4번째 리뷰어(연대책임자) 없음");
+            } else {
+                $("#detailview_pdservice_reviewer04").val(json.c_pdservice_reviewer04);
+            }
+
+            if (isEmpty(json.c_pdservice_reviewer05) || json.c_pdservice_reviewer05 == "none") {
+                $("#detailview_pdservice_reviewer05").val("5번째 리뷰어(연대책임자) 없음");
+            } else {
+                $("#detailview_pdservice_reviewer05").val(json.c_pdservice_reviewer05);
+            }
+            $("#detailview_pdservice_contents").html(json.c_pdservice_contents);
+
+            $("#editview_pdservice_name").val(json.c_title);
+
+            //clear
+            $("#editview_pdservice_owner").val(null).trigger("change");
+
+            if (json.c_pdservice_owner == null || json.c_pdservice_owner == "none") {
+                console.log("pdServiceDataTableClick :: json.c_pdservice_owner empty");
+            } else {
+                var newOption = new Option(json.c_pdservice_owner, json.c_pdservice_owner, true, true);
+                $("#editview_pdservice_owner").append(newOption).trigger("change");
+            }
+            // -------------------- reviewer setting -------------------- //
+            //reviewer clear
+            $("#editview_pdservice_reviewers").val(null).trigger("change");
+
+            var selectedReviewerArr = [];
+            if (json.c_pdservice_reviewer01 == null || json.c_pdservice_reviewer01 == "none") {
+                console.log("pdServiceDataTableClick :: json.c_pdservice_reviewer01 empty");
+            } else {
+                selectedReviewerArr.push(json.c_pdservice_reviewer01);
+                // Set the value, creating a new option if necessary
+                if ($("#editview_pdservice_reviewers").find("option[value='" + json.c_pdservice_reviewer01 + "']").length) {
+                    console.log('option[value=\'" + json.c_pdservice_reviewer01 + "\']"' + "already exist");
+                } else {
+                    // Create a DOM Option and pre-select by default
+                    var newOption01 = new Option(json.c_pdservice_reviewer01, json.c_pdservice_reviewer01, true, true);
+                    // Append it to the select
+                    $("#editview_pdservice_reviewers").append(newOption01).trigger("change");
+                }
+            }
+            if (json.c_pdservice_reviewer02 == null || json.c_pdservice_reviewer02 == "none") {
+                console.log("pdServiceDataTableClick :: json.c_pdservice_reviewer02 empty");
+            } else {
+                selectedReviewerArr.push(json.c_pdservice_reviewer02);
+                // Set the value, creating a new option if necessary
+                if ($("#editview_pdservice_reviewers").find("option[value='" + json.c_pdservice_reviewer02 + "']").length) {
+                    console.log('option[value=\'" + json.c_pdservice_reviewer02 + "\']"' + "already exist");
+                } else {
+                    // Create a DOM Option and pre-select by default
+                    var newOption02 = new Option(json.c_pdservice_reviewer02, json.c_pdservice_reviewer02, true, true);
+                    // Append it to the select
+                    $("#editview_pdservice_reviewers").append(newOption02).trigger("change");
+                }
+            }
+            if (json.c_pdservice_reviewer03 == null || json.c_pdservice_reviewer03 == "none") {
+                console.log("pdServiceDataTableClick :: json.c_pdservice_reviewer03 empty");
+            } else {
+                selectedReviewerArr.push(json.c_pdservice_reviewer03);
+                // Set the value, creating a new option if necessary
+                if ($("#editview_pdservice_reviewers").find("option[value='" + json.c_pdservice_reviewer03 + "']").length) {
+                    console.log('option[value=\'" + json.c_pdservice_reviewer03 + "\']"' + "already exist");
+                } else {
+                    // Create a DOM Option and pre-select by default
+                    var newOption03 = new Option(json.c_pdservice_reviewer03, json.c_pdservice_reviewer03, true, true);
+                    // Append it to the select
+                    $("#editview_pdservice_reviewers").append(newOption03).trigger("change");
+                }
+            }
+            if (json.c_pdservice_reviewer04 == null || json.c_pdservice_reviewer04 == "none") {
+                console.log("pdServiceDataTableClick :: json.c_pdservice_reviewer04 empty");
+            } else {
+                selectedReviewerArr.push(json.c_pdservice_reviewer04);
+                // Set the value, creating a new option if necessary
+                if ($("#editview_pdservice_reviewers").find("option[value='" + json.c_pdservice_reviewer04 + "']").length) {
+                    console.log('option[value=\'" + json.c_pdservice_reviewer04 + "\']"' + "already exist");
+                } else {
+                    // Create a DOM Option and pre-select by default
+                    var newOption04 = new Option(json.c_pdservice_reviewer04, json.c_pdservice_reviewer04, true, true);
+                    // Append it to the select
+                    $("#editview_pdservice_reviewers").append(newOption04).trigger("change");
+                }
+            }
+            if (json.c_pdservice_reviewer05 == null || json.c_pdservice_reviewer05 == "none") {
+                console.log("pdServiceDataTableClick :: json.c_pdservice_reviewer05 empty");
+            } else {
+                selectedReviewerArr.push(json.c_pdservice_reviewer05);
+                // Set the value, creating a new option if necessary
+                if ($("#editview_pdservice_reviewers").find("option[value='" + json.c_pdservice_reviewer05 + "']").length) {
+                    console.log('option[value=\'" + json.c_pdservice_reviewer05 + "\']"' + "already exist");
+                } else {
+                    // Create a DOM Option and pre-select by default
+                    var newOption05 = new Option(json.c_pdservice_reviewer05, json.c_pdservice_reviewer05, true, true);
+                    // Append it to the select
+                    $("#editview_pdservice_reviewers").append(newOption05).trigger("change");
+                }
+            }
+            $("#editview_pdservice_reviewers").val(selectedReviewerArr).trigger("change");
+
+            // ------------------------- reviewer end --------------------------------//
+
+            // CKEDITOR.instances.input_pdservice_editor.setData(json.c_pdservice_contents);
+        })
+        // HTTP 요청이 실패하면 오류와 상태에 관한 정보가 fail() 메소드로 전달됨.
+        .fail(function (xhr, status, errorThrown) {
+            console.log(xhr + status + errorThrown);
+        })
+        //
+        .always(function (xhr, status) {
+            console.log(xhr + status);
+            $(".loader").addClass("hide");
+        });
+
+    $("#delete_text").text($("#pdservice_table").DataTable().rows(".selected").data()[0].c_title);
+}
+
+////////////////////////////////////////////////////////////////////////////////////////
+// 이미지 다운로드
+////////////////////////////////////////////////////////////////////////////////////////
+function downloadChartImage() {
+    $("#imageDownload").click( function () {
+        // html2canvas 라이브러리를 사용하여 이미지로 렌더링
+        html2canvas($(".darkBack")[0], {
+            backgroundColor: null, // 기본 백그라운드 색상을 유지하기 위해 null로 설정
+        }).then(function (canvas) {
+            // 이미지 다운로드 링크 생성
+            var downloadLink = document.createElement("a");
+            downloadLink.download = "darkBack_image.png";
+            downloadLink.href = canvas.toDataURL("image/png");
+
+            // 이미지 다운로드
+            downloadLink.click();
+        });
+    });
+}
\ No newline at end of file