Index: vue/src/assets/images/devops/DevSupport/github.png
===================================================================
diff -u -redae6cb0ecde6563c7052cbbc8ed8270bedd6112 -r73edbe905862cceb90b360a614ec575c1c7f3052
--- vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision edae6cb0ecde6563c7052cbbc8ed8270bedd6112)
+++ vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision 73edbe905862cceb90b360a614ec575c1c7f3052)
@@ -1178,6 +1178,13 @@
 }
 
 /* vertical timeline chart */
+#vertical-timeline {
+	overflow-y: auto;
+	height: 732px;
+	padding-right: 20px;
+	margin: 0px;
+}
+
 .timeline-container {
 	margin-bottom: 20px;
 }
@@ -1186,10 +1193,9 @@
 	margin: 0;
 	list-style: none;
 	position: relative;
-	padding: 1px 0 0 75px;
 	color: #fff;
 	font-size: 13px;
-	padding-top: 15px;
+	padding: 15px 0 0 75px;
 }
 
 .timeline-container ul:before {
@@ -1203,14 +1209,14 @@
 .timeline-container .session {
 	position: relative;
 	margin-left: 30px;
-	background-color: rgba(255, 255, 255, 0.2);
+	background-color: rgba(51, 51, 51, 1);
 	padding: 14px;
 	border-radius: 6px;
 	box-shadow: 0 0 4px rgba(0, 0, 0, 0.12), 0 2px 2px rgba(0, 0, 0, 0.08);
 }
 
 .timeline-container .session:not(:first-child) {
-	margin-top: 60px;
+	margin-top: 40px;
 }
 
 .timeline-container .session > span {
@@ -1229,7 +1235,7 @@
 	border-radius: 50%;
 	border: 2px solid #fff;
 	position: absolute;
-	background: #86b7e7;
+	background: #5470C6FF;
 	left: -4px;
 	top: 0;
 }
@@ -1251,21 +1257,17 @@
 	top: calc(100% - 5px);
 }
 
-.timeline-container .session-content {
-	/*margin-left: 10px;*/
-}
-
-.timeline-container .session-content .title {
+.timeline-container .session-content .version {
 	font-weight: 600;
-	font-size: 12px;
+	font-size: 14px;
 }
 
-.timeline-container .session-content .info {
+.timeline-container .session-content .summary {
 	margin-top: 5px;
 	font-weight: 300;
 }
 
-.timeline-container .session-content .type {
+.timeline-container .session-content .issuekey {
 	margin-top: 5px;
 	font-weight: 600;
 	font-size: 12px;
Index: arms/html/analysisTime/content-container.html
===================================================================
diff -u -r63f2473664668cff9352a2f224055f7d65e3a561 -r73edbe905862cceb90b360a614ec575c1c7f3052
--- arms/html/analysisTime/content-container.html	(.../content-container.html)	(revision 63f2473664668cff9352a2f224055f7d65e3a561)
+++ arms/html/analysisTime/content-container.html	(.../content-container.html)	(revision 73edbe905862cceb90b360a614ec575c1c7f3052)
@@ -1106,7 +1106,8 @@
 									class="gradient_middle_border"
 									style="width: 100%; margin-top: 8px"></div>
 							</header>
-							<div class="body" style="overflow-y: scroll; height: 732px;">
+							<div class="body" id="vertical-timeline"
+                                 style="min-height:732px;">
 								<div class="timeline-container"></div>
 							</div>
 						</section>
Index: arms/js/analysisTime.js
===================================================================
diff -u -rfe79e451a35796f20cfff595f5ea8efdbfee058b -r73edbe905862cceb90b360a614ec575c1c7f3052
--- arms/js/analysisTime.js	(.../analysisTime.js)	(revision fe79e451a35796f20cfff595f5ea8efdbfee058b)
+++ arms/js/analysisTime.js	(.../analysisTime.js)	(revision 73edbe905862cceb90b360a614ec575c1c7f3052)
@@ -1683,14 +1683,14 @@
 		versionData.forEach(item => {
 			if (!contentSet[item.summary]) { // 중복 체크
 				contentSet[item.summary] = {
-					title: convertVersionIdToTitle(item.pdServiceVersion),
-					content: item.summary,
-					type: [item.key],
+					version: item.pdServiceVersion,
+					summary: item.summary,
+					issuekey: [item.key],
 					date: formatDateTime(item.updated)
 				};
 			} else {
-				contentSet[item.summary].type.push(item.key);
-				contentSet[item.summary].type.sort();
+				contentSet[item.summary].issuekey.push(item.key);
+				contentSet[item.summary].issuekey.sort();
 			}
 		});
 
@@ -1699,9 +1699,12 @@
 
 	items = Object.values(contentSet).map(item => ({
 		...item,
-		type: item.type.join('  |  ')
+		issuekey: item.issuekey.join('  |  ')
 	}));
 
+	// 날짜를 기준으로 오름차순 정렬
+	items.sort((a, b) => new Date(a.date) - new Date(b.date));
+
 	makeVerticalTimeline(items);
 
 	// mock data
@@ -1746,10 +1749,14 @@
 	// $container.append(upIcon);
 
 	if (data.length == 0) {
-		$container.innerHTML +=
-			"<p style='text-align: center; top: 48%;" +
-			"    left: 40%;" +
-			"    position: absolute;'>데이터가 없습니다.</p>";
+		const noDataMessage = document.createElement('p');
+		noDataMessage.textContent = '데이터가 없습니다.';
+		noDataMessage.style.position = 'absolute';
+		noDataMessage.style.top = '50%';
+		noDataMessage.style.left = '50%';
+		noDataMessage.style.transform = 'translate(-50%, -50%)';
+
+		$container.appendChild(noDataMessage);
 	} else {
 		// 날짜별로 데이터 그룹화
 		let groupedData = data.reduce((group, item) => {
@@ -1762,7 +1769,7 @@
 		const $ul = document.createElement("ul");
 
 		Object.entries(groupedData).forEach(([date, items]) => {
-			items.forEach(({title, content, type}, index) => {
+			items.forEach(({version, summary, issuekey}, index) => {
 				const $li = document.createElement("li");
 				$li.className = "session";
 
@@ -1775,9 +1782,9 @@
 				}
 				$li.innerHTML += `
                 <div class="session-content">
-                  <div class="title">${title}</div>
-                  <div class="info">${content}</div>
-                  <div class="type">${type}</div>
+                  <div class="version" style="color: ${getColorByVersion(version)}">${convertVersionIdToTitle(version)}</div>
+                  <div class="summary">${summary}</div>
+                  <div class="issuekey">${issuekey}</div>
                 </div>
                 `;
 
@@ -1788,6 +1795,8 @@
 		$container.append($ul);
 	}
 
+	adjustHeight();
+
 	// const downIcon = document.createElement("i");
 	// downIcon.className = "fa fa-chevron-down vertical-chevron-down";
 	// $container.append(downIcon);
@@ -1826,7 +1835,6 @@
 			.addQueryParam("isReqType", "REQUIREMENT")
     		.addQueryParam("시작일", startDate)
     		.addQueryParam("종료일", endDate)
-    		.addQueryParam("sortField", "updated")
     		.addQueryParam("크기", 1000)
     		.addQueryParam("하위크기", 1000)
     		.addQueryParam("컨텐츠보기여부", true)
@@ -1876,6 +1884,10 @@
         });
     }
     executeAjaxCall(ridgeLineUrl);
+
+	window.addEventListener("resize", function() {
+		adjustHeight();
+	});
 }
 
 function getColorByVersion(version) {
@@ -2052,8 +2064,20 @@
 
         $("#overlapInputDiv").css("display", "flex");
         $('#updateRidgeLine').append(svg.node());
+
+		adjustHeight();
 }
 
+// 차트 높이 조정
+function adjustHeight() {
+	var verticalTimeline = $('#vertical-timeline');
+	var updateRidgeLine = $('#updateRidgeLine');
+
+	if (verticalTimeline && updateRidgeLine) {
+		verticalTimeline.height(updateRidgeLine.height() + 20);
+	}
+}
+
 // 주식차트
 function candleStickChart() {
 	var dom = document.getElementById("candlestick-chart-container");