chore: fix js demo

Author: cjw783

debug/reactive/index.html

@@ -59,19 +59,6 @@
       .pagination-num.active {
         background-color: yellowgreen;
       }
-      #progress-bar {
-        width: 600px;
-        height: 20px;
-        border-radius: 20px;
-        background-color: #e0e0e0;
-        overflow: hidden;
-      }
-      #progress-fill {
-        height: 100%;
-        width: 0%; /* 초기에는 0% 채워짐 */
-        background-color: #4caf50; /* 채워지는 색 */
-        transition: width 0.3s ease; /* 부드럽게 변화 */
-      }
       #scroll-progress-bar {
         width: 600px;
         height: 20px;
@@ -103,9 +90,6 @@
         <button class="navigation-btn" id="next">Next</button>
       </div>
       <div id="pagination"></div>
-      <div id="progress-bar">
-        <div id="progress-fill"></div>
-      </div>
       <div id="scroll-progress-bar">
         <div id="scroll-progress-fill"></div>
       </div>
@@ -128,6 +112,9 @@
         const flicking = new Flicking(".flicking-viewport", {
           renderOnlyVisible: true,
           // circular: true
+          // horizontal: false
+          // align: 'center',
+          defaultIndex: 2,
         });
         const { connectFlickingReactiveAPI } = Flicking;
         const reactiveObj = connectFlickingReactiveAPI(flicking);
@@ -137,6 +124,7 @@
           totalPanelCount,
           currentPanelIndex,
           moveTo,
+          progress,
         } = reactiveObj;
 
         // Navigation buttons
@@ -204,7 +192,6 @@
           flicking.remove(0);
         });
 
-        // active panel을 지우는 경우 포커스가 가장 처음으로 돌아가는 현상이 있음.
         removeLastButton.addEventListener("click", () => {
           flicking.remove(flicking.panelCount - 1);
         });
@@ -214,7 +201,6 @@
         });
 
         const paginationElement = document.getElementById("pagination");
-        const progressFillElement = document.getElementById("progress-fill");
 
         const pageNums = Array.from({ length: totalPanelCount }, (_, i) => {
           const div = document.createElement("div");
@@ -243,6 +229,8 @@
         const scrollProgressFillElement = document.getElementById(
           "scroll-progress-fill"
         );
+        scrollProgressFillElement.style.width = `${progress}%`;
+
         reactiveObj.subscribe("progress", (nextValue) => {
           scrollProgressFillElement.style.width = `${nextValue}%`;
         });