Index: vue/src/assets/images/devops/DevSupport/github.png
===================================================================
diff -u -r7b7a2d240635afdbad71ac6abb7d366e9a1be282 -rb4509f91b0ea8b2000cee1e86873def17c67e67e
--- vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision 7b7a2d240635afdbad71ac6abb7d366e9a1be282)
+++ vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision b4509f91b0ea8b2000cee1e86873def17c67e67e)
@@ -3573,6 +3573,7 @@
 	opacity: 1;
 }
 
+/* vertical timeline chart */
 .timeline-container {
 	margin: 30px 0 50px;
 }
@@ -3581,7 +3582,7 @@
 	margin: 0;
 	list-style: none;
 	position: relative;
-	padding: 1px 0 0 65px;
+	padding: 1px 0 0 75px;
 	color: #fff;
 	font-size: 13px;
 }
@@ -3636,7 +3637,7 @@
 	position: absolute;
 	font-size: 10px;
 	top: 0;
-	left: -65px;
+	left: -74px;
 	font-weight: bold;
 	line-height: normal;
 }
@@ -3646,7 +3647,7 @@
 }
 
 .timeline-container .session-content {
-	margin-left: 10px;
+	/*margin-left: 10px;*/
 }
 
 .timeline-container .session-content .title {
Index: arms/js/analysisTime.js
===================================================================
diff -u -rfe76e3ea328e9aa6e0220df9e98c82fb6ed5d697 -rb4509f91b0ea8b2000cee1e86873def17c67e67e
--- arms/js/analysisTime.js	(.../analysisTime.js)	(revision fe76e3ea328e9aa6e0220df9e98c82fb6ed5d697)
+++ arms/js/analysisTime.js	(.../analysisTime.js)	(revision b4509f91b0ea8b2000cee1e86873def17c67e67e)
@@ -212,6 +212,9 @@
 
 				getRelationJiraIssueByPdServiceAndVersions($("#selected_pdService").val(), selectedVersionId);
 
+				// vertical timeline chart
+				verticalTimeLineChart($("#selected_pdService").val(), selectedVersionId);
+
 				if (data.length > 0) {
 					console.log("display 재설정.");
 				}
@@ -267,6 +270,9 @@
 
 			getRelationJiraIssueByPdServiceAndVersions($("#selected_pdService").val(), selectedVersionId);
 
+			// vertical timeline chart
+			verticalTimeLineChart($("#selected_pdService").val(), selectedVersionId);
+
 			if (checked) {
 				endPointUrl =
 					"/T_ARMS_REQSTATUS_" +
@@ -388,39 +394,12 @@
 						$("#timelineData .label").css("text-align", "left");
 						$("#today_flag").css("left", flagPosition);
 
-                        // versionTimelineChart(versionCustomTimeline);
-
-						makeVerticalTimeline([
-							{
-								title: "BaseVersion",
-								content: "요구 사항 이슈 1",
-								type: "Presentation",
-								date: "2023-11-08"
-							},
-							{
-								title: "",
-								content: "요구 사항 이슈 2",
-								type: "Presentation",
-								date: "2023-11-29"
-							},
-							{
-								title: "1.0",
-								content: "요구 사항 이슈 3",
-								type: "Review",
-								date: "2023-12-01"
-							},
-							{
-								title: "1.1",
-								content: "요구 사항 이슈 4",
-								type: "Review",
-								date: "2023-12-11"
-							}
-						]);
-                    }
-                }
-            }
-        }
-    });
+						// versionTimelineChart(versionCustomTimeline);
+					}
+				}
+			}
+		}
+	});
 }
 
 ////////////////////
@@ -1759,26 +1738,113 @@
     window.addEventListener('resize', myChart.resize);
 }
 
+function verticalTimeLineChart(pdServiceLink, pdServiceVersions) {
+
+	const url = new UrlBuilder()
+		.setBaseUrl("/auth-user/api/arms/analysis/time/weekly-updated-issue-search")
+		.addQueryParam("pdServiceLink", pdServiceLink)
+		.addQueryParam("pdServiceVersionLinks", pdServiceVersions)
+		.addQueryParam("isReqType", "ISSUE")
+		.addQueryParam("크기", 1000)
+		.addQueryParam("하위크기", 1000)
+		.addQueryParam("baseWeek", 2)
+		.addQueryParam("sortField", "updated")
+		.build();
+
+	$.ajax({
+		url: url,
+		type: "GET",
+		contentType: "application/json;charset=UTF-8",
+		dataType: "json",
+		progress: true,
+		statusCode: {
+			200: function (data) {
+
+				let contentSet = {}; // 객체로 선언
+
+				let items = Object.values(data).reduce((acc, versionData) => {
+					let filteredItems = versionData.filter(item => {
+						if (!contentSet[item.summary]) { // 객체의 키로 중복 체크
+							contentSet[item.summary] = true; // 중복 체크를 위해 키에 값을 할당
+							return true;
+						}
+						return false;
+					}).map(item => ({ // 중복이 없는 항목들을 새 객체로 변환
+						title: convertVersionIdToTitle(item.pdServiceVersion),
+						content: item.summary,
+						type: "",
+						date: formatDateTime(item.updated)
+					}));
+
+					return [...acc, ...filteredItems]; // 새로운 객체들을 누적값에 추가
+				}, []);
+
+				makeVerticalTimeline(items);
+			}
+		}
+	});
+
+	// mock data
+	/*
+	makeVerticalTimeline([
+		{
+			title: "BaseVersion",
+			content: "요구 사항 이슈 1",
+			type: "Presentation",
+			date: "2023-11-08"
+		},
+		{
+			title: "",
+			content: "요구 사항 이슈 2",
+			type: "Presentation",
+			date: "2023-11-29"
+		},
+		{
+			title: "1.0",
+			content: "요구 사항 이슈 3",
+			type: "Review",
+			date: "2023-12-01"
+		},
+		{
+			title: "1.1",
+			content: "요구 사항 이슈 4",
+			type: "Review",
+			date: "2023-12-11"
+		}
+	]);
+	 */
+}
+
 function makeVerticalTimeline(data) {
 	const $container = document.querySelector(".timeline-container");
-	const $ul = document.createElement("ul");
 
-	data.forEach(({ title, content, type, date }, index) => {
-		const $li = document.createElement("li");
-		$li.className = "session";
-		$li.innerHTML = `
-        <div class="session-content">
-          <div class="title">${title}</div>
-          <div class="info">${content}</div>
-          <div class="type">${type}</div>
-        </div>
-        <span class="time-range">
-          <span class="date">${date}</span>
-        </span>
-    `;
+	if (data.length == 0) {
+		$container.innerHTML = "<p style='text-align: center;'>데이터가 없습니다.</p>";
+	} else {
+		const $ul = document.createElement("ul");
 
-		$ul.append($li);
-	});
+		data.forEach(({ title, content, type, date }, index) => {
+			const $li = document.createElement("li");
+			$li.className = "session";
+			$li.innerHTML = `
+			<div class="session-content">
+			  <div class="title">${title}</div>
+			  <div class="info">${content}</div>
+			  <div class="type">${type}</div>
+			</div>
+			<span class="time-range">
+			  <span class="date">${date}</span>
+			</span>
+		`;
 
-	$container.append($ul);
+			$ul.append($li);
+		});
+
+		$container.append($ul);
+	}
 }
+
+function formatDateTime(dateTime) {
+	var date = dateTime.split('T')[0];
+	return date;
+}
\ No newline at end of file