Index: vue/src/assets/images/devops/DevSupport/github.png
===================================================================
diff -u -r15b4b56447ef95ed39ac1117497f694fb80df680 -r87e035254196d91407ea9a71e7fed4de45358d82
--- vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision 15b4b56447ef95ed39ac1117497f694fb80df680)
+++ vue/src/assets/images/devops/DevSupport/github.png	(.../github.png)	(revision 87e035254196d91407ea9a71e7fed4de45358d82)
@@ -3953,3 +3953,26 @@
 #tree_bar_container .node--internal .root {
 	transform: translateX(10px);
 }
+
+.chart-footer {
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: flex-start; /* 아이템을 왼쪽으로 정렬 */
+	align-content: flex-start; /* 아이템을 위쪽으로 정렬 */
+	width: 100%;
+}
+.chart-footer .footer-item {
+	border-top: 2px solid;
+	box-sizing: border-box;
+	width: 33.33%; /* 기본 너비 설정 */
+	padding: 1px 2px;
+}
+.chart-footer .footer-item .item-name,
+.chart-footer .footer-item .item-value{
+	text-align: center;
+	width: 100%;
+	margin-top: 2px;
+}
+.chart-footer .footer-item .item-value{
+	font-weight: bold;
+}
\ No newline at end of file
Index: arms/js/analysis/resource/chart/nightingaleRosePieChart.js
===================================================================
diff -u -rc6253ad0d4e9b95b1ffc38330470dea54d6c869a -r87e035254196d91407ea9a71e7fed4de45358d82
--- arms/js/analysis/resource/chart/nightingaleRosePieChart.js	(.../nightingaleRosePieChart.js)	(revision c6253ad0d4e9b95b1ffc38330470dea54d6c869a)
+++ arms/js/analysis/resource/chart/nightingaleRosePieChart.js	(.../nightingaleRosePieChart.js)	(revision 87e035254196d91407ea9a71e7fed4de45358d82)
@@ -53,7 +53,17 @@
         const total = dataArr.reduce((acc, curr) => acc + curr.value, 0);
         return total;
     }
-
+    // 테스트를 위한 mockData -> calculateTotal , drawChartWithFooter 함수 호출에 넣으면 된다.
+    var mockData = [
+        { value: 40, name: 'rose 1' },
+        { value: 38, name: 'rose 2' },
+        { value: 32, name: 'rose 3' },
+        { value: 30, name: 'rose 4' },
+        { value: 28, name: 'rose 5' },
+        { value: 26, name: 'rose 6' },
+        { value: 22, name: 'rose 7' },
+        { value: 18, name: 'rose 8' }
+    ];
     const totalValue = calculateTotal(dataArr);
 
     option = {
@@ -131,6 +141,46 @@
     if(colorArr && colorArr.length > 0) {
         option.series[0]["color"] = colorArr;
     }
+    function drawChartWithFooter(dataArr,total) {
+        const existingChartFooter = document.querySelector('.chart-footer');
+
+        if (existingChartFooter) {
+            existingChartFooter.remove();
+        }
+
+        const chartFooter = document.createElement("div");
+        chartFooter.classList.add("chart-footer");
+
+        dataArr.forEach((data,index) => {
+            const item = document.createElement("div");
+            const portion = (data.value*100/ +total).toFixed(0);
+            item.classList.add("footer-item");
+            item.style.borderColor = colorArr[index];
+            item.innerHTML = `<div class="item-name">${data.name}</div> <div class="item-value">${data.value} (${portion}%)</div>`;
+            chartFooter.appendChild(item);
+        });
+
+        chartDom.appendChild(chartFooter);
+
+        const footerItems = document.querySelectorAll('.footer-item');
+        const itemCount = footerItems.length;
+
+        const remainder = itemCount % 3;
+        const quotient = Math.floor(itemCount / 3);
+
+        footerItems.forEach((item, index) => {
+            if (remainder === 1 && Math.floor(index / 3) === quotient) {
+                item.style.width = '100%';
+            } else if (remainder === 2 && Math.floor(index / 3) >= quotient) {
+                item.style.width = '50%';
+            } else {
+                item.style.width = '33.33%';
+            }
+        });
+    }
+
+    drawChartWithFooter(dataArr,totalValue);
+
     option && myChart.setOption(option, true);
 
     window.addEventListener('resize', function () {