From 2ec34ff3218f1da2f4528bc0d79a19fa8ca01205 Mon Sep 17 00:00:00 2001
From: leejisun9 <leejisun9@gmail.com>
Date: Fri, 12 Sep 2025 11:10:43 +0900
Subject: [PATCH] mearge

---
 pages/test/culture-graph-multi.vue |  413 +++++++
 pages/test/culture-graph-tab.vue   |   32 +
 pages/test/culture-graph.vue       | 1647 ++++++++++++++++++++++++++++
 pages/test/culture_graph.html      | 1038 ++++++++++++++++++
 pages/test/igv2.vue                |  955 ++++++++++++++++
 pages/test/pathway.vue             |  247 +++++
 pages/test/pathway2.vue            |  263 +++++
 pages/test/pathway3.vue            |  254 +++++
 pages/test/pathway4.vue            |  245 +++++
 pages/test/pathwayJson.vue         |  130 +++
 pages/test/test01.vue              |  299 +++++
 pages/test/test02.vue              |  282 +++++
 12 files changed, 5805 insertions(+)
 create mode 100644 pages/test/culture-graph-multi.vue
 create mode 100644 pages/test/culture-graph-tab.vue
 create mode 100644 pages/test/culture-graph.vue
 create mode 100644 pages/test/culture_graph.html
 create mode 100644 pages/test/igv2.vue
 create mode 100644 pages/test/pathway.vue
 create mode 100644 pages/test/pathway2.vue
 create mode 100644 pages/test/pathway3.vue
 create mode 100644 pages/test/pathway4.vue
 create mode 100644 pages/test/pathwayJson.vue
 create mode 100644 pages/test/test01.vue
 create mode 100644 pages/test/test02.vue

diff --git a/pages/test/culture-graph-multi.vue b/pages/test/culture-graph-multi.vue
new file mode 100644
index 0000000..68fada1
--- /dev/null
+++ b/pages/test/culture-graph-multi.vue
@@ -0,0 +1,413 @@
+<template>
+  <div>
+    <PageDescription>
+      <h1>배양 그래프 (멀티)</h1>
+      <div class="box">
+        <h2>1. 그래프 구성 및 기능</h2>
+        <ul>
+          <li>총 30개의 그래프를 한 화면에 동시에 볼 수 있습니다.</li>
+          <li>렌더링 최적화를 위해 최소한의 기능만 제공됩니다.</li>
+        </ul>
+      </div>
+      <div class="box">
+        <h2>2. 출력되는 데이터 개수</h2>
+        <ul>
+          <li>
+            그래프 30개 × 시리즈 12개 × 10분 간격(100시간, 601포인트) =
+            <span class="highlight">216,360개</span>
+          </li>
+          <li>화면 렌더링 시간은 약 600ms ~ 800ms 정도 소요됩니다.</li>
+        </ul>
+      </div>
+      <div class="box">
+        <h2>3. 그래프 복사</h2>
+        <ul>
+          <li>
+            <span class="highlight">그래프 복사</span> 버튼을 클릭하면 그래프가
+            클립보드에 복사됩니다.
+          </li>
+        </ul>
+      </div>
+    </PageDescription>
+    <div class="multi-graph-list">
+      <div v-for="series in seriesList" :key="series.name" class="single-graph">
+        <div class="graph-title">
+          {{ series.name }}<span v-if="series.unit"> {{ series.unit }}</span>
+          <button class="copy-btn" @click="copyChartImage(series.name)">
+            그래프 복사
+          </button>
+        </div>
+        <div
+          :ref="el => setGraphRef(series.name, el as Element | null)"
+          class="echarts-graph"
+        ></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from "vue";
+import * as echarts from "echarts";
+
+// 파스텔 컬러 15개 반복
+const pastelColors = [
+  "#A3D8F4",
+  "#F7B7A3",
+  "#B5EAD7",
+  "#FFDAC1",
+  "#C7CEEA",
+  "#FFF1BA",
+  "#FFB7B2",
+  "#B4A7D6",
+  "#AED9E0",
+  "#FFC3A0",
+  "#E2F0CB",
+  "#FFB347",
+  "#C1C8E4",
+  "#FFFACD",
+  "#FFD1DC",
+];
+
+// 그래프 개수 변수로 분리
+const NUM_GRAPHS = 30;
+
+// 30개 y축 정보 (culture-graph.vue와 동일하게 수정)
+const yAxisList = [
+  { name: "ORP", unit: "", color: pastelColors[0], min: 0, max: 1000 },
+  {
+    name: "Air flow",
+    unit: "(L/min)",
+    color: pastelColors[1],
+    min: 0,
+    max: 30,
+  },
+  { name: "DO", unit: "", color: pastelColors[2], min: 0, max: 200 },
+  { name: "Feed TK1", unit: "(L)", color: pastelColors[3], min: 0, max: 10 },
+  { name: "Feed TK2", unit: "(L)", color: pastelColors[4], min: 0, max: 10 },
+  { name: "pH", unit: "", color: pastelColors[5], min: 6.0, max: 8.0 },
+  { name: "Pressure", unit: "(bar)", color: pastelColors[6], min: 0, max: 2 },
+  { name: "RPM", unit: "", color: pastelColors[7], min: 0, max: 3000 },
+  { name: "CO2", unit: "(%)", color: pastelColors[8], min: 0, max: 10 },
+  { name: "JAR Vol", unit: "(L)", color: pastelColors[9], min: 0, max: 20 },
+  { name: "WEIGHT", unit: "(kg)", color: pastelColors[10], min: 0, max: 100 },
+  { name: "O2", unit: "(%)", color: pastelColors[11], min: 0, max: 100 },
+  { name: "NV", unit: "", color: pastelColors[12], min: 0, max: 10 },
+  { name: "NIR", unit: "", color: pastelColors[13], min: 0, max: 10 },
+  {
+    name: "Temperature",
+    unit: "(℃)",
+    color: pastelColors[14],
+    min: 0,
+    max: 50,
+  },
+  { name: "Humidity", unit: "(%)", color: pastelColors[0], min: 0, max: 100 },
+  {
+    name: "Flow Rate",
+    unit: "(L/min)",
+    color: pastelColors[1],
+    min: 0,
+    max: 60,
+  },
+  {
+    name: "Conductivity",
+    unit: "(μS/cm)",
+    color: pastelColors[2],
+    min: 0,
+    max: 600,
+  },
+  { name: "Turbidity", unit: "(NTU)", color: pastelColors[3], min: 0, max: 12 },
+  {
+    name: "Dissolved Solids",
+    unit: "(mg/L)",
+    color: pastelColors[4],
+    min: 0,
+    max: 250,
+  },
+  {
+    name: "Alkalinity",
+    unit: "(mg/L)",
+    color: pastelColors[5],
+    min: 0,
+    max: 120,
+  },
+  {
+    name: "Hardness",
+    unit: "(mg/L)",
+    color: pastelColors[6],
+    min: 0,
+    max: 100,
+  },
+  { name: "Chlorine", unit: "(mg/L)", color: pastelColors[7], min: 0, max: 6 },
+  { name: "Nitrate", unit: "(mg/L)", color: pastelColors[8], min: 0, max: 25 },
+  {
+    name: "Phosphate",
+    unit: "(mg/L)",
+    color: pastelColors[9],
+    min: 0,
+    max: 12,
+  },
+  { name: "Sulfate", unit: "(mg/L)", color: pastelColors[10], min: 0, max: 60 },
+  { name: "Ammonia", unit: "(mg/L)", color: pastelColors[11], min: 0, max: 18 },
+  { name: "Nitrite", unit: "(mg/L)", color: pastelColors[12], min: 0, max: 6 },
+  { name: "BOD", unit: "(mg/L)", color: pastelColors[13], min: 0, max: 35 },
+  { name: "COD", unit: "(mg/L)", color: pastelColors[14], min: 0, max: 120 },
+];
+// NUM_GRAPHS까지 자동 생성
+if (yAxisList.length < NUM_GRAPHS) {
+  for (let i = yAxisList.length; i < NUM_GRAPHS; i++) {
+    yAxisList.push({
+      name: `Graph ${i + 1}`,
+      unit: "",
+      color: pastelColors[i % pastelColors.length],
+      min: 0,
+      max: 100 + (i % 10) * 100, // 100, 200, ... 1000 반복
+    });
+  }
+}
+
+// x축 간격(초) - 5초 또는 1분(60초) 등으로 변경 가능
+// 예시: const X_INTERVAL = 5;   // 5초 간격
+//      const X_INTERVAL = 60;  // 1분 간격
+const X_INTERVAL = 600; // 필요시 60으로 변경
+// 100시간치, X_INTERVAL 간격
+const xLabels = Array.from(
+  { length: (100 * 60 * 60) / X_INTERVAL + 1 },
+  (_, i) => i * X_INTERVAL
+);
+
+// 부드러운 곡선형 + 구간별 변화 가데이터 생성 함수 (xLabels를 파라미터로 받도록 변경)
+function smoothData(
+  min: number,
+  max: number,
+  xLabels: number[],
+  phase = 0,
+  _amp = 1, // amp는 사용하지 않으므로 _amp로 변경
+  offset = 0,
+  seriesIndex: number
+) {
+  let _prevValue = 0.5;
+  const values = [];
+
+  // 데이터 범위 축소: min+10% ~ max-10%
+  const rangeMin = min + (max - min) * 0.1;
+  const rangeMax = max - (max - min) * 0.1;
+
+  // 시리즈별 패턴 다양화: 증가/감소/진동/트렌드 섞기
+  // 패턴 결정 (시리즈 인덱스에 따라)
+  const trendType = seriesIndex % 4; // 0:증가, 1:감소, 2:진동, 3:랜덤
+
+  // 진동폭(ampVar, randomFactor)은 원복 (더 낮게)
+  const ampVar = 0.2 + (seriesIndex % 5) * 0.1; // 0.2~0.6
+  const randomFactor = 0.01 + 0.01 * (seriesIndex % 4); // 0.01~0.04
+
+  for (let i = 0; i < xLabels.length; i++) {
+    const t = i / (xLabels.length - 1);
+    let base;
+
+    // 오르내림(파동 주기/계수)을 키움 (파동이 더 자주, 더 크게)
+    if (trendType === 0) {
+      base = 0.2 + 0.6 * t + 0.13 * Math.sin(phase + t * Math.PI * ampVar * 8);
+    } else if (trendType === 1) {
+      base = 0.8 - 0.6 * t + 0.13 * Math.cos(phase + t * Math.PI * ampVar * 8);
+    } else if (trendType === 2) {
+      base = 0.5 + 0.22 * Math.sin(phase + t * Math.PI * ampVar * 12);
+    } else {
+      base = 0.5 + 0.08 * Math.sin(phase + t * Math.PI * ampVar * 6) + 0.2 * t;
+    }
+
+    // 노이즈는 낮게
+    const noise = (Math.random() - 0.5) * randomFactor;
+    base += noise;
+
+    base = Math.max(0, Math.min(1, base));
+    const value = +(rangeMin + (rangeMax - rangeMin) * base + offset).toFixed(
+      2
+    );
+    _prevValue = base;
+
+    values.push([xLabels[i], value]);
+  }
+
+  return values;
+}
+
+// 시리즈 데이터 30개 생성 → 각 그래프마다 12개 라인(시리즈)로 확장
+const NUM_LINES_PER_GRAPH = 12;
+
+const seriesList = yAxisList.map((y, idx) => {
+  // 12개 라인(시리즈) 생성
+  const lines = Array.from({ length: NUM_LINES_PER_GRAPH }, (_, lineIdx) => ({
+    name: String(lineIdx + 1), // "1", "2", ... "12"
+    color: pastelColors[lineIdx % pastelColors.length],
+    data: smoothData(
+      y.min,
+      y.max,
+      xLabels,
+      Math.PI / (idx + 1 + lineIdx), // phase를 다르게
+      1,
+      0,
+      idx + lineIdx * 2 // 패턴 다양화
+    ),
+  }));
+  return {
+    name: y.name,
+    unit: y.unit,
+    color: y.color,
+    min: y.min,
+    max: y.max,
+    lines, // 12개 시리즈 배열
+  };
+});
+
+// 차트 렌더링
+const graphRefs = ref<Record<string, HTMLDivElement | null>>({});
+const chartInstances = ref<Record<string, echarts.ECharts | null>>({});
+function setGraphRef(name: string, el: Element | null) {
+  if (el && el instanceof HTMLDivElement) {
+    graphRefs.value[name] = el;
+  }
+}
+
+function renderAllCharts() {
+  nextTick(() => {
+    seriesList.forEach(series => {
+      const el = graphRefs.value[series.name];
+      if (!el) return;
+      if (chartInstances.value[series.name]) {
+        chartInstances.value[series.name]?.dispose();
+      }
+      const chart = echarts.init(el);
+      chart.setOption({
+        grid: { left: 50, right: 20, top: 30, bottom: 40, containLabel: true },
+        xAxis: {
+          type: "value",
+          axisLabel: {
+            fontSize: 11,
+            color: "#666",
+            formatter: (v: number) =>
+              `${Math.floor(v / 3600)}:${String(Math.floor((v % 3600) / 60)).padStart(2, "0")}`,
+          },
+        },
+        yAxis: {
+          type: "value",
+          min: series.min,
+          max: series.max,
+          name: series.unit ? `${series.name} ${series.unit}` : series.name,
+          nameTextStyle: {
+            color: series.color,
+            fontWeight: "bold",
+            fontSize: 12,
+          },
+          axisLabel: { color: series.color, fontWeight: "bold", fontSize: 12 },
+          axisLine: { lineStyle: { color: series.color, width: 2 } },
+        },
+        series: series.lines.map(line => ({
+          name: line.name,
+          data: line.data,
+          type: "line",
+          lineStyle: { color: line.color, width: 1 },
+          symbol: "none",
+        })),
+        animation: false,
+        legend: {
+          show: true,
+          bottom: 8, // 하단에 위치
+          left: "center", // 중앙 정렬
+          orient: "horizontal",
+          itemWidth: 18,
+          itemHeight: 10,
+          icon: "circle",
+          textStyle: { fontSize: 12, padding: [0, 4, 0, 0] },
+        },
+        tooltip: { show: true, trigger: "axis" },
+      });
+      chartInstances.value[series.name] = chart;
+    });
+  });
+}
+
+// 이미지 복사 함수 추가
+async function copyImageToClipboard(dataUrl: string) {
+  const res = await fetch(dataUrl);
+  const blob = await res.blob();
+  await navigator.clipboard.write([
+    new window.ClipboardItem({ [blob.type]: blob }),
+  ]);
+}
+
+async function copyChartImage(name: string) {
+  const chart = chartInstances.value[name];
+  if (!chart) return;
+  const dataUrl = chart.getDataURL({
+    type: "png",
+    pixelRatio: 2,
+    backgroundColor: "#fff",
+  });
+  try {
+    await copyImageToClipboard(dataUrl);
+    alert("그래프가 클립보드에 복사되었습니다!");
+  } catch {
+    alert("클립보드 복사에 실패했습니다. 브라우저 권한을 확인하세요.");
+  }
+}
+
+onMounted(() => {
+  renderAllCharts();
+});
+</script>
+
+<style scoped>
+.multi-graph-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 20px 1.5%;
+  padding: 16px 0;
+  align-content: flex-start;
+  flex-direction: row;
+  background: #fff;
+}
+.single-graph {
+  min-height: 260px;
+  width: 100%;
+  flex: 0 0 100%;
+  max-width: 100%;
+  background: #fff;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  padding: 10px 16px 10px 16px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20px;
+  align-items: flex-start;
+}
+.graph-title {
+  font-weight: bold;
+  font-size: 1.05rem;
+  color: #1976d2;
+  margin-bottom: 6px;
+  width: 100%;
+}
+.echarts-graph {
+  min-height: 200px;
+  height: 200px !important;
+  width: 100%;
+}
+.copy-btn {
+  margin-left: 10px;
+  font-size: 0.9rem;
+  padding: 2px 8px;
+  border: 1px solid #1976d2;
+  background: #e3f2fd;
+  color: #1976d2;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background 0.2s;
+  float: right;
+}
+.copy-btn:hover {
+  background: #bbdefb;
+}
+</style>
diff --git a/pages/test/culture-graph-tab.vue b/pages/test/culture-graph-tab.vue
new file mode 100644
index 0000000..76dff3b
--- /dev/null
+++ b/pages/test/culture-graph-tab.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <PageDescription>
+      <h1>배양 그래프 (탭)</h1>
+      <div class="box">
+        <h2>1. 그래프 구성 및 기능</h2>
+        <ul>
+          <li>여러 개의 배양 그래프를 탭으로 전환하여 볼 수 있습니다.</li>
+          <li>각 탭은 독립적인 그래프를 표시합니다.</li>
+        </ul>
+      </div>
+      <div class="box">
+        <h2>2. 출력되는 데이터 개수</h2>
+        <ul>
+          <li>
+            탭 4개 × 시리즈 30개 × 1분 간격(100시간, 6,001포인트) =
+            <span class="highlight">각 탭당 180,030개</span>
+          </li>
+          <li>전체(4개 탭 합산): <span class="highlight">720,120개</span></li>
+          <li>
+            화면 초기 렌더링 시간은 약 300ms ~ 400ms 정도 소요되며, 탭
+            이동시에는 거의 딜레이 없이 화면이 출력되고 있습니다.
+          </li>
+        </ul>
+      </div>
+    </PageDescription>
+    <BatchTabs />
+  </div>
+</template>
+<script setup lang="ts">
+import BatchTabs from "~/components/BatchTabs.vue";
+</script>
diff --git a/pages/test/culture-graph.vue b/pages/test/culture-graph.vue
new file mode 100644
index 0000000..797bbe3
--- /dev/null
+++ b/pages/test/culture-graph.vue
@@ -0,0 +1,1647 @@
+<template>
+  <div>
+    <PageDescription>
+      <h1>배양 그래프</h1>
+      <div class="box">
+        <h2>1. 그래프 구성 및 기능</h2>
+        <ul>
+          <li>기본 형태의 <strong>배양 그래프</strong>입니다.</li>
+          <li>
+            <code>Real Data</code> 영역의 <strong>체크박스</strong>를 통해
+            시리즈(데이터 라인)의 출력 여부를 선택할 수 있습니다.
+          </li>
+          <li>
+            <strong>Y축에는 최대 2개의 Real Data 시리즈</strong>가 동시에
+            출력됩니다.
+          </li>
+          <li><strong>가로 스크롤</strong>로 시간축을 이동할 수 있습니다.</li>
+          <li>
+            그래프 내에서 <strong>마우스 우클릭 시 컨텍스트 메뉴</strong>가
+            나타납니다.
+          </li>
+          <li>
+            그래프 내에서 <strong>마우스 휠 액션으로 확대/축소</strong>가
+            됩니다.
+          </li>
+          <li>
+            그래프 우측 상단에서 <strong>확대/축소 메뉴</strong>가 있습니다.
+          </li>
+          <li>
+            <strong>세로선(Line Marker)</strong>을 통해 특정 시점의
+            <strong>피드 정보</strong>를 확인할 수 있습니다.
+          </li>
+        </ul>
+      </div>
+      <div class="box">
+        <h2>2. 출력되는 데이터 개수</h2>
+        <h3>Interval 1분 (100시간, 시리즈 30개)</h3>
+        <ul>
+          <li>
+            총 시리즈 30개 × 6,000개 = <span class="highlight">180,000개</span>
+          </li>
+        </ul>
+        <h3>Interval 5초 (100시간, 시리즈 30개)</h3>
+        <ul>
+          <li>
+            총 시리즈 30개 × 72,000개 =
+            <span class="highlight">2,160,000개</span>
+          </li>
+        </ul>
+      </div>
+    </PageDescription>
+    <div
+      class="experiment-graph-page"
+      @contextmenu="onContextMenu"
+      @click="onClickAnywhere"
+    >
+      <div class="info-bar">
+        <div class="info-row">
+          <span class="info-label">Experiment :</span>
+          <span class="info-value">Sample001</span>
+          <span class="info-divider">|</span>
+          <span class="info-label">Strain :</span>
+          <span class="info-value">균주명(Test)</span>
+          <span class="info-divider">|</span>
+          <span class="info-label">Time :</span>
+          <span class="info-value"
+            >2025.07.01 - 00:00 ~ 2025.07.03 - 00:00</span
+          >
+        </div>
+      </div>
+      <div class="realdata-checkbox-bar">
+        <span class="realdata-label">Real Data</span>
+        <span style="font-size: 12px; color: #666; margin-left: 10px">
+          ({{ checkedList.length }}/{{ yAxisList.length }})
+        </span>
+        <label
+          v-for="col in yAxisList"
+          :key="col.name"
+          class="realdata-checkbox-item"
+        >
+          <input
+            :checked="checkedList.includes(col.name)"
+            type="checkbox"
+            :value="col.name"
+            @change="handleCheckboxChange(col.name, $event)"
+          />
+          <span
+            :style="{
+              color: col.color,
+              fontWeight: checkedList.includes(col.name) ? 'bold' : 'normal',
+            }"
+            >{{ col.name }}</span
+          >
+        </label>
+      </div>
+      <!-- interval 입력 행 라디오 버튼으로 변경 -->
+      <div
+        class="interval-bar"
+        style="
+          padding: 8px 32px 8px 32px;
+          background: #fff;
+          border-bottom: 1px solid #e0e0e0;
+          display: flex;
+          align-items: center;
+          gap: 10px;
+        "
+      >
+        <span style="font-weight: bold; color: #444">Interval</span>
+        <label style="margin-right: 10px">
+          <input v-model.number="intervalValue" type="radio" :value="5" /> 5초
+        </label>
+        <label>
+          <input v-model.number="intervalValue" type="radio" :value="60" /> 1분
+        </label>
+      </div>
+      <div class="main-graph-area">
+        <div class="echarts-container">
+          <div class="zoom-controls">
+            <button class="zoom-btn" title="확대" @click="zoomIn">
+              <span>+</span>
+            </button>
+            <button class="zoom-btn" title="축소" @click="zoomOut">
+              <span>−</span>
+            </button>
+            <button class="zoom-btn reset" title="초기화" @click="resetZoom">
+              <span>⟲</span>
+            </button>
+          </div>
+          <div ref="growthChartRef" class="echarts-graph"></div>
+          <div class="yaxis-scroll-bar-overlay">
+            <input
+              v-model.number="yAxisScrollIndex"
+              type="range"
+              min="0"
+              :max="Math.max(0, filteredYAxisList.length - 2)"
+              :disabled="filteredYAxisList.length <= 2"
+            />
+          </div>
+        </div>
+      </div>
+      <CustomContextMenu :visible="menuVisible" :x="menuX" :y="menuY" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, computed, onUnmounted } from "vue";
+import * as echarts from "echarts";
+import CustomContextMenu from "~/components/CustomContextMenu.vue";
+
+// 타입 인터페이스 정의
+interface YAxis {
+  name: string;
+  unit: string;
+  color: string;
+  min: number;
+  max: number;
+  ticks: number[];
+  fontWeight: string;
+}
+
+interface RealTimeData {
+  [key: string]: [number, number][];
+}
+
+const growthChartRef = ref<HTMLDivElement | null>(null);
+let chartInstance: echarts.ECharts | null = null;
+
+const pastelColors = [
+  "#A3D8F4", // 파스텔 블루
+  "#F7B7A3", // 파스텔 오렌지
+  "#B5EAD7", // 파스텔 민트
+  "#FFDAC1", // 파스텔 살구
+  "#C7CEEA", // 파스텔 퍼플
+  "#FFF1BA", // 파스텔 옐로우
+  "#FFB7B2", // 파스텔 핑크
+  "#B4A7D6", // 파스텔 연보라
+  "#AED9E0", // 추가 파스텔 블루
+  "#FFC3A0", // 추가 파스텔 오렌지
+  "#E2F0CB", // 추가 파스텔 민트
+  "#FFB347", // 추가 파스텔 살구
+  "#C1C8E4", // 추가 파스텔 퍼플
+  "#FFFACD", // 추가 파스텔 옐로우
+  "#FFD1DC", // 추가 파스텔 핑크
+];
+
+const yAxisList: YAxis[] = [
+  {
+    name: "ORP",
+    unit: "",
+    color: pastelColors[0],
+    min: 0,
+    max: 1000,
+    ticks: [1000, 800, 600, 400, 200, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Air flow",
+    unit: "(L/min)",
+    color: pastelColors[1],
+    min: 0,
+    max: 30,
+    ticks: [30, 25, 20, 15, 10, 5, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "DO",
+    unit: "",
+    color: pastelColors[2],
+    min: 0,
+    max: 200,
+    ticks: [200, 150, 100, 50, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Feed TK1",
+    unit: "(L)",
+    color: pastelColors[3],
+    min: 0,
+    max: 10,
+    ticks: [10, 8, 6, 4, 2, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Feed TK2",
+    unit: "(L)",
+    color: pastelColors[4],
+    min: 0,
+    max: 10,
+    ticks: [10, 8, 6, 4, 2, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "pH",
+    unit: "",
+    color: pastelColors[5],
+    min: 6.0,
+    max: 8.0,
+    ticks: [8.0, 7.5, 7.0, 6.5, 6.0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Pressure",
+    unit: "(bar)",
+    color: pastelColors[6],
+    min: 0,
+    max: 2,
+    ticks: [2, 1.5, 1, 0.5, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "RPM",
+    unit: "",
+    color: pastelColors[7],
+    min: 0,
+    max: 3000,
+    ticks: [3000, 2400, 1800, 1200, 600, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "CO2",
+    unit: "(%)",
+    color: pastelColors[8],
+    min: 0,
+    max: 10,
+    ticks: [10, 8, 6, 4, 2, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "JAR Vol",
+    unit: "(L)",
+    color: pastelColors[9],
+    min: 0,
+    max: 20,
+    ticks: [20, 16, 12, 8, 4, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "WEIGHT",
+    unit: "(kg)",
+    color: pastelColors[10],
+    min: 0,
+    max: 100,
+    ticks: [100, 80, 60, 40, 20, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "O2",
+    unit: "(%)",
+    color: pastelColors[11],
+    min: 0,
+    max: 100,
+    ticks: [100, 80, 60, 40, 20, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "NV",
+    unit: "",
+    color: pastelColors[12],
+    min: 0,
+    max: 10,
+    ticks: [10, 8, 6, 4, 2, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "NIR",
+    unit: "",
+    color: pastelColors[13],
+    min: 0,
+    max: 10,
+    ticks: [10, 8, 6, 4, 2, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Temperature",
+    unit: "(℃)",
+    color: pastelColors[14],
+    min: 0,
+    max: 50,
+    ticks: [50, 40, 30, 20, 10, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Humidity",
+    unit: "(%)",
+    color: pastelColors[0],
+    min: 0,
+    max: 100,
+    ticks: [100, 80, 60, 40, 20, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Flow Rate",
+    unit: "(L/min)",
+    color: pastelColors[1],
+    min: 0,
+    max: 60,
+    ticks: [60, 50, 40, 30, 20, 10, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Conductivity",
+    unit: "(μS/cm)",
+    color: pastelColors[2],
+    min: 0,
+    max: 600,
+    ticks: [600, 500, 400, 300, 200, 100, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Turbidity",
+    unit: "(NTU)",
+    color: pastelColors[3],
+    min: 0,
+    max: 12,
+    ticks: [12, 10, 8, 6, 4, 2, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Dissolved Solids",
+    unit: "(mg/L)",
+    color: pastelColors[4],
+    min: 0,
+    max: 250,
+    ticks: [250, 200, 150, 100, 50, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Alkalinity",
+    unit: "(mg/L)",
+    color: pastelColors[5],
+    min: 0,
+    max: 120,
+    ticks: [120, 100, 80, 60, 40, 20, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Hardness",
+    unit: "(mg/L)",
+    color: pastelColors[6],
+    min: 0,
+    max: 100,
+    ticks: [100, 80, 60, 40, 20, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Chlorine",
+    unit: "(mg/L)",
+    color: pastelColors[7],
+    min: 0,
+    max: 6,
+    ticks: [6, 5, 4, 3, 2, 1, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Nitrate",
+    unit: "(mg/L)",
+    color: pastelColors[8],
+    min: 0,
+    max: 25,
+    ticks: [25, 20, 15, 10, 5, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Phosphate",
+    unit: "(mg/L)",
+    color: pastelColors[9],
+    min: 0,
+    max: 12,
+    ticks: [12, 10, 8, 6, 4, 2, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Sulfate",
+    unit: "(mg/L)",
+    color: pastelColors[10],
+    min: 0,
+    max: 60,
+    ticks: [60, 50, 40, 30, 20, 10, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Ammonia",
+    unit: "(mg/L)",
+    color: pastelColors[11],
+    min: 0,
+    max: 18,
+    ticks: [18, 15, 12, 9, 6, 3, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "Nitrite",
+    unit: "(mg/L)",
+    color: pastelColors[12],
+    min: 0,
+    max: 6,
+    ticks: [6, 5, 4, 3, 2, 1, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "BOD",
+    unit: "(mg/L)",
+    color: pastelColors[13],
+    min: 0,
+    max: 35,
+    ticks: [35, 30, 25, 20, 15, 10, 5, 0],
+    fontWeight: "bold",
+  },
+  {
+    name: "COD",
+    unit: "(mg/L)",
+    color: pastelColors[14],
+    min: 0,
+    max: 120,
+    ticks: [120, 100, 80, 60, 40, 20, 0],
+    fontWeight: "bold",
+  },
+];
+
+// intervalValue를 라디오 버튼으로 선택 (5초, 1분)
+const intervalValue = ref(60); // 기본값 1분
+const totalSeconds = 100 * 60 * 60; // 100시간 = 360000초
+const pointsPerLine = computed(
+  () => Math.floor(totalSeconds / intervalValue.value) + 1
+);
+const xLabels = computed(() =>
+  Array.from(
+    { length: pointsPerLine.value },
+    (_, i) => i * intervalValue.value // 초 단위
+  )
+);
+
+// 전체 데이터에서 4개의 마커 포인트를 선택
+const globalMarkerPoints: Array<{ seriesIndex: number; timeIndex: number }> =
+  [];
+while (globalMarkerPoints.length < 4) {
+  const seriesIndex = Math.floor(Math.random() * 30); // 0~29 시리즈
+  const timeIndex = Math.floor(Math.random() * 100); // 0~99 시간
+
+  // 중복 체크
+  const exists = globalMarkerPoints.some(
+    p => p.seriesIndex === seriesIndex && p.timeIndex === timeIndex
+  );
+
+  if (!exists) {
+    globalMarkerPoints.push({ seriesIndex, timeIndex });
+  }
+}
+
+// 부드러운 곡선형 + 구간별 변화 가데이터 생성 함수 (xLabels를 파라미터로 받도록 변경)
+function smoothData(
+  min: number,
+  max: number,
+  xLabels: number[],
+  phase = 0,
+  _amp = 1, // amp는 사용하지 않으므로 _amp로 변경
+  offset = 0,
+  seriesIndex: number
+) {
+  let _prevValue = 0.5;
+  const values = [];
+
+  // 데이터 범위 축소: min+10% ~ max-10%
+  const rangeMin = min + (max - min) * 0.1;
+  const rangeMax = max - (max - min) * 0.1;
+
+  // 시리즈별 패턴 다양화: 증가/감소/진동/트렌드 섞기
+  // 패턴 결정 (시리즈 인덱스에 따라)
+  const trendType = seriesIndex % 4; // 0:증가, 1:감소, 2:진동, 3:랜덤
+
+  // 진동폭(ampVar, randomFactor)은 원복 (더 낮게)
+  const ampVar = 0.2 + (seriesIndex % 5) * 0.1; // 0.2~0.6
+  const randomFactor = 0.01 + 0.01 * (seriesIndex % 4); // 0.01~0.04
+
+  for (let i = 0; i < xLabels.length; i++) {
+    const t = i / (xLabels.length - 1);
+    let base;
+
+    // 오르내림(파동 주기/계수)을 키움 (파동이 더 자주, 더 크게)
+    if (trendType === 0) {
+      base = 0.2 + 0.6 * t + 0.13 * Math.sin(phase + t * Math.PI * ampVar * 8);
+    } else if (trendType === 1) {
+      base = 0.8 - 0.6 * t + 0.13 * Math.cos(phase + t * Math.PI * ampVar * 8);
+    } else if (trendType === 2) {
+      base = 0.5 + 0.22 * Math.sin(phase + t * Math.PI * ampVar * 12);
+    } else {
+      base = 0.5 + 0.08 * Math.sin(phase + t * Math.PI * ampVar * 6) + 0.2 * t;
+    }
+
+    // 노이즈는 낮게
+    const noise = (Math.random() - 0.5) * randomFactor;
+    base += noise;
+
+    base = Math.max(0, Math.min(1, base));
+    const value = +(rangeMin + (rangeMax - rangeMin) * base + offset).toFixed(
+      2
+    );
+    _prevValue = base;
+
+    values.push([xLabels[i], value]);
+  }
+
+  return values;
+}
+
+// seriesList를 intervalValue, xLabels에 따라 동적으로 생성
+const seriesList = computed(() => [
+  {
+    name: "ORP",
+    color: pastelColors[0],
+    yAxisIndex: 0,
+    data: smoothData(400, 900, xLabels.value, 0, 1, 0, 0),
+  },
+  {
+    name: "Air flow",
+    color: pastelColors[1],
+    yAxisIndex: 1,
+    data: smoothData(5, 25, xLabels.value, Math.PI / 2, 1, 0, 1),
+  },
+  {
+    name: "DO",
+    color: pastelColors[2],
+    yAxisIndex: 2,
+    data: smoothData(80, 180, xLabels.value, Math.PI / 3, 1, 0, 2),
+  },
+  {
+    name: "Feed TK1",
+    color: pastelColors[3],
+    yAxisIndex: 3,
+    data: smoothData(2, 8, xLabels.value, Math.PI / 4, 1, 0, 3),
+  },
+  {
+    name: "Feed TK2",
+    color: pastelColors[4],
+    yAxisIndex: 4,
+    data: smoothData(2, 8, xLabels.value, Math.PI / 5, 1, 0, 4),
+  },
+  {
+    name: "pH",
+    color: pastelColors[5],
+    yAxisIndex: 5,
+    data: smoothData(6.7, 7.6, xLabels.value, Math.PI / 6, 1, 0, 5),
+  },
+  {
+    name: "Pressure",
+    color: pastelColors[6],
+    yAxisIndex: 6,
+    data: smoothData(0.5, 1.5, xLabels.value, Math.PI / 7, 1, 0, 6),
+  },
+  {
+    name: "RPM",
+    color: pastelColors[7],
+    yAxisIndex: 7,
+    data: smoothData(1000, 2500, xLabels.value, Math.PI / 8, 1, 0, 7),
+  },
+  {
+    name: "CO2",
+    color: pastelColors[8],
+    yAxisIndex: 8,
+    data: smoothData(2, 8, xLabels.value, Math.PI / 9, 1, 0, 8),
+  },
+  {
+    name: "JAR Vol",
+    color: pastelColors[9],
+    yAxisIndex: 9,
+    data: smoothData(5, 18, xLabels.value, Math.PI / 10, 1, 0, 9),
+  },
+  {
+    name: "WEIGHT",
+    color: pastelColors[10],
+    yAxisIndex: 10,
+    data: smoothData(20, 90, xLabels.value, Math.PI / 11, 1, 0, 10),
+  },
+  {
+    name: "O2",
+    color: pastelColors[11],
+    yAxisIndex: 11,
+    data: smoothData(20, 90, xLabels.value, Math.PI / 12, 1, 0, 11),
+  },
+  {
+    name: "NV",
+    color: pastelColors[12],
+    yAxisIndex: 12,
+    data: smoothData(2, 8, xLabels.value, Math.PI / 13, 1, 0, 12),
+  },
+  {
+    name: "NIR",
+    color: pastelColors[13],
+    yAxisIndex: 13,
+    data: smoothData(2, 8, xLabels.value, Math.PI / 14, 1, 0, 13),
+  },
+  {
+    name: "Temperature",
+    color: pastelColors[14],
+    yAxisIndex: 14,
+    data: smoothData(30, 38, xLabels.value, Math.PI / 15, 1, 0, 14),
+  },
+  {
+    name: "Humidity",
+    color: pastelColors[0],
+    yAxisIndex: 15,
+    data: smoothData(40, 80, xLabels.value, Math.PI / 16, 1, 0, 15),
+  },
+  {
+    name: "Flow Rate",
+    color: pastelColors[1],
+    yAxisIndex: 16,
+    data: smoothData(10, 50, xLabels.value, Math.PI / 17, 1, 0, 16),
+  },
+  {
+    name: "Conductivity",
+    color: pastelColors[2],
+    yAxisIndex: 17,
+    data: smoothData(100, 500, xLabels.value, Math.PI / 18, 1, 0, 17),
+  },
+  {
+    name: "Turbidity",
+    color: pastelColors[3],
+    yAxisIndex: 18,
+    data: smoothData(0, 10, xLabels.value, Math.PI / 19, 1, 0, 18),
+  },
+  {
+    name: "Dissolved Solids",
+    color: pastelColors[4],
+    yAxisIndex: 19,
+    data: smoothData(50, 200, xLabels.value, Math.PI / 20, 1, 0, 19),
+  },
+  {
+    name: "Alkalinity",
+    color: pastelColors[5],
+    yAxisIndex: 20,
+    data: smoothData(20, 100, xLabels.value, Math.PI / 21, 1, 0, 20),
+  },
+  {
+    name: "Hardness",
+    color: pastelColors[6],
+    yAxisIndex: 21,
+    data: smoothData(10, 80, xLabels.value, Math.PI / 22, 1, 0, 21),
+  },
+  {
+    name: "Chlorine",
+    color: pastelColors[7],
+    yAxisIndex: 22,
+    data: smoothData(0, 5, xLabels.value, Math.PI / 23, 1, 0, 22),
+  },
+  {
+    name: "Nitrate",
+    color: pastelColors[8],
+    yAxisIndex: 23,
+    data: smoothData(0, 20, xLabels.value, Math.PI / 24, 1, 0, 23),
+  },
+  {
+    name: "Phosphate",
+    color: pastelColors[9],
+    yAxisIndex: 24,
+    data: smoothData(0, 10, xLabels.value, Math.PI / 25, 1, 0, 24),
+  },
+  {
+    name: "Sulfate",
+    color: pastelColors[10],
+    yAxisIndex: 25,
+    data: smoothData(0, 50, xLabels.value, Math.PI / 26, 1, 0, 25),
+  },
+  {
+    name: "Ammonia",
+    color: pastelColors[11],
+    yAxisIndex: 26,
+    data: smoothData(0, 15, xLabels.value, Math.PI / 27, 1, 0, 26),
+  },
+  {
+    name: "Nitrite",
+    color: pastelColors[12],
+    yAxisIndex: 27,
+    data: smoothData(0, 5, xLabels.value, Math.PI / 28, 1, 0, 27),
+  },
+  {
+    name: "BOD",
+    color: pastelColors[13],
+    yAxisIndex: 28,
+    data: smoothData(0, 30, xLabels.value, Math.PI / 29, 1, 0, 28),
+  },
+  {
+    name: "COD",
+    color: pastelColors[14],
+    yAxisIndex: 29,
+    data: smoothData(0, 100, xLabels.value, Math.PI / 30, 1, 0, 29),
+  },
+]);
+
+const checkedList = ref(yAxisList.map(y => y.name)); // 기본 전체 체크
+
+const filteredYAxisList = computed(() =>
+  yAxisList.filter(y => checkedList.value.includes(y.name))
+);
+const filteredSeriesList = computed(() =>
+  seriesList.value.filter(s => checkedList.value.includes(s.name))
+);
+
+const yAxisScrollIndex = ref(0);
+
+// 실시간 데이터 관련 상태 추가
+const isRealTimeMode = ref(false);
+const realTimeData = ref<RealTimeData>({});
+const realTimeTimer = ref<NodeJS.Timeout | null>(null);
+const currentRealTimeIndex = ref(0);
+
+// 실시간 데이터 시작 시간 (48시간 이후)
+const realTimeStartTime = 48;
+const realTimeDuration = 72; // 72개 포인트 (24초 × 3개/초)
+
+const visibleYAxisList = computed(() =>
+  filteredYAxisList.value.slice(
+    yAxisScrollIndex.value,
+    yAxisScrollIndex.value + 2
+  )
+);
+
+const seriesWithRealTimeData = computed(() => {
+  return filteredSeriesList.value.map(series => {
+    const combinedData = [...series.data];
+
+    // 실시간 모드일 때 실시간 데이터 추가
+    if (isRealTimeMode.value && realTimeData.value[series.name]) {
+      combinedData.push(...realTimeData.value[series.name]);
+    }
+
+    return {
+      ...series,
+      data: combinedData,
+      type: "line",
+    };
+  });
+});
+
+const mappedSeriesList = computed(() => {
+  // 시간(시) → 초 단위 변환 함수
+  const hourToSeconds = (h: number) => h * 3600;
+  return seriesWithRealTimeData.value
+    .map((s, idx) => {
+      const globalIdx = filteredYAxisList.value.findIndex(
+        y => y.name === s.name
+      );
+      if (globalIdx === -1) return null;
+      // 첫 번째 시리즈에만 markLine 추가
+      const markLine =
+        idx === 0
+          ? {
+              symbol: "none",
+              label: {
+                show: true,
+                position: "insideEndTop",
+                fontWeight: "bold",
+                fontSize: 13,
+                color: "#222",
+                formatter: function (params: { data?: { name?: string } }) {
+                  return params.data && params.data.name
+                    ? params.data.name
+                    : "";
+                },
+              },
+              lineStyle: { color: "#888", width: 2, type: "solid" },
+              data: [
+                { xAxis: hourToSeconds(6), name: "1F" },
+                { xAxis: hourToSeconds(10), name: "2F" },
+                { xAxis: hourToSeconds(12), name: "Seed" },
+                { xAxis: hourToSeconds(22), name: "Main" },
+              ],
+            }
+          : undefined;
+      return {
+        ...s,
+        yAxisIndex: globalIdx,
+        type: "line",
+        symbol: "none",
+        sampling: "lttb",
+        lineStyle: { width: 0.5 },
+        ...(isLargeMode
+          ? {
+              large: true,
+              progressive: 500,
+              progressiveThreshold: 10000,
+            }
+          : {}),
+        ...(markLine ? { markLine } : {}),
+      };
+    })
+    .filter(Boolean);
+});
+
+const handleCheckboxChange = (itemName: string, event: Event) => {
+  const target = event.target as HTMLInputElement;
+  const isChecked = target.checked;
+
+  if (isChecked) {
+    if (!checkedList.value.includes(itemName)) {
+      checkedList.value = [...checkedList.value, itemName];
+    }
+  } else {
+    if (checkedList.value.length === 1) {
+      alert("최소 1개의 데이터를 선택해주세요");
+      target.checked = true;
+      return;
+    }
+    checkedList.value = checkedList.value.filter(name => name !== itemName);
+  }
+};
+
+const isLargeMode = pointsPerLine.value * yAxisList.length >= 10000;
+
+function updateGraphicLabels() {
+  if (!chartInstance) return;
+  const x1 = chartInstance.convertToPixel({ xAxisIndex: 0 }, 6);
+  const x2 = chartInstance.convertToPixel({ xAxisIndex: 0 }, 10);
+  const x3 = chartInstance.convertToPixel({ xAxisIndex: 0 }, 12);
+  const x4 = chartInstance.convertToPixel({ xAxisIndex: 0 }, 22);
+  chartInstance.setOption({
+    graphic: [
+      { id: "label-1f", left: x1 - 9, top: 10 },
+      { id: "label-2f", left: x2 - 9, top: 10 },
+      { id: "label-seed", left: x3 - 10, top: 10 },
+      { id: "label-main", left: x4 - 10, top: 10 },
+      {
+        id: "line-1f",
+        type: "line",
+        shape: { x1: x1, y1: 0, x2: x1, y2: "100%" },
+        style: { stroke: "#888", lineWidth: 1 },
+      },
+      {
+        id: "line-2f",
+        type: "line",
+        shape: { x1: x2, y1: 0, x2: x2, y2: "100%" },
+        style: { stroke: "#888", lineWidth: 1 },
+      },
+      {
+        id: "line-seed",
+        type: "line",
+        shape: { x1: x3, y1: 0, x2: x3, y2: "100%" },
+        style: { stroke: "#888", lineWidth: 1 },
+      },
+      {
+        id: "line-main",
+        type: "line",
+        shape: { x1: x4, y1: 0, x2: x4, y2: "100%" },
+        style: { stroke: "#888", lineWidth: 1 },
+      },
+    ],
+  });
+}
+
+const renderChart = () => {
+  if (!growthChartRef.value) return;
+  if (!chartInstance) {
+    chartInstance = echarts.init(growthChartRef.value);
+  }
+
+  // yAxis는 visibleYAxisList 2개만, 나머지는 show: false
+  const yAxis = filteredYAxisList.value.map((y, i) => {
+    const visibleIdx = visibleYAxisList.value.findIndex(
+      vy => vy.name === y.name
+    );
+    return {
+      type: "value",
+      min: y.min,
+      max: y.max,
+      show: visibleIdx !== -1,
+      position: "left",
+      offset: visibleIdx === 1 ? 80 : 0,
+      z: 10 + i,
+      name: visibleIdx !== -1 ? y.name + (y.unit ? ` ${y.unit}` : "") : "",
+      nameLocation: "middle",
+      nameGap: 50,
+      nameTextStyle: {
+        color: y.color,
+        fontWeight: "bold",
+        fontSize: 11,
+        writing: "tb-rl",
+      },
+      axisLabel: {
+        show: visibleIdx !== -1,
+        fontSize: 12,
+        color: y.color,
+        fontWeight: "bold",
+      },
+      splitLine: {
+        show: visibleIdx === 1 || visibleIdx === 0,
+        lineStyle: { color: "#f0f0f0", width: 1 },
+      },
+      axisLine: {
+        show: visibleIdx !== -1,
+        lineStyle: { color: y.color, width: 2 },
+      },
+      axisTick: {
+        show: visibleIdx !== -1,
+        lineStyle: { color: y.color },
+      },
+    };
+  });
+
+  const option = {
+    grid: {
+      left: 120,
+      right: 60,
+      top: 40,
+      bottom: 120,
+      containLabel: true,
+    },
+    // brush: {
+    //   xAxisIndex: "all",
+    //   brushLink: "all",
+    //   outOfBrush: { colorAlpha: 0.1 },
+    //   brushType: "rect",
+    //   throttleType: "debounce",
+    //   throttleDelay: 300,
+    // },
+    toolbox: {
+      feature: {
+        dataZoom: {
+          yAxisIndex: "none",
+        },
+      },
+    },
+    xAxis: [
+      {
+        type: "value",
+        // min: 0, // <= 이 부분 주석 처리 또는 삭제
+        // max: 100, // <= 이 부분 주석 처리 또는 삭제
+        splitNumber: 20, // 20개 정도 라벨
+        position: "bottom",
+        axisLabel: {
+          fontSize: 12,
+          color: "#666",
+          fontWeight: "normal",
+          interval: 0, // 모든 라벨 표시 (1분 단위)
+          hideOverlap: true, // 겹치는 라벨 자동 숨김
+          formatter: function (value: number) {
+            // value는 초 단위
+            const totalSeconds = Math.round(value);
+            const hours = Math.floor(totalSeconds / 3600);
+            const minutes = Math.floor((totalSeconds % 3600) / 60);
+            const seconds = totalSeconds % 60;
+            return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+          },
+        },
+        splitLine: {
+          show: true,
+          lineStyle: { color: "#e0e0e0", width: 1 },
+        },
+        axisLine: {
+          show: true,
+          lineStyle: { color: "#ccc", width: 1 },
+        },
+        axisTick: {
+          show: true,
+          lineStyle: { color: "#ccc" },
+        },
+      },
+    ],
+    yAxis,
+    series: mappedSeriesList.value,
+    legend: { show: false },
+    animation: false,
+    dataZoom: [
+      {
+        type: "inside",
+        xAxisIndex: 0,
+        start: 0,
+        end: 100,
+        minValueSpan: 600, // 최소 10분까지만 확대
+        zoomOnMouseWheel: true,
+        moveOnMouseMove: true,
+        moveOnMouseWheel: false,
+        preventDefaultMouseMove: true,
+      },
+      {
+        type: "slider",
+        xAxisIndex: 0,
+        start: 0,
+        end: 100,
+        minValueSpan: 600, // 최소 10분까지만 확대
+        bottom: 10,
+        height: 20,
+        borderColor: "transparent",
+        backgroundColor: "#f5f5f5",
+        fillerColor: "rgba(25,118,210,0.2)",
+        handleStyle: {
+          color: "#1976d2",
+        },
+        textStyle: {
+          color: "#666",
+        },
+      },
+    ],
+    tooltip: {
+      trigger: "axis",
+      position: function (pt: number[]) {
+        return [pt[0], "10%"];
+      },
+      axisPointer: {
+        type: "line",
+        animation: false,
+        lineStyle: {
+          color: "#5470c6",
+          width: 1,
+          type: "dashed",
+        },
+      },
+      backgroundColor: "rgba(255, 255, 255, 0.95)",
+      borderColor: "#ccc",
+      borderWidth: 1,
+      textStyle: {
+        color: "#333",
+        fontSize: 13,
+        fontWeight: "normal",
+      },
+      extraCssText:
+        "box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 4px;",
+      formatter: function (
+        params: Array<{
+          seriesName: string;
+          color: string;
+          value: [number, number];
+        }>
+      ) {
+        if (!Array.isArray(params)) params = [params];
+
+        const baseDate = new Date("2025-07-01T00:00:00");
+        const hour = Array.isArray(params[0].value) ? params[0].value[0] : 0;
+        const date = new Date(baseDate.getTime());
+        date.setHours(baseDate.getHours() + hour);
+
+        const yyyy = date.getFullYear();
+        const mm = (date.getMonth() + 1).toString().padStart(2, "0");
+        const dd = date.getDate().toString().padStart(2, "0");
+        const HH = date.getHours().toString().padStart(2, "0");
+        const dateStr = `${yyyy}.${mm}.${dd} - ${HH}:00`;
+
+        let tooltipContent = `<div style="font-weight: bold; color: #5470c6; margin-bottom: 8px; border-bottom: 1px solid #eee; padding-bottom: 4px;">${dateStr}</div>`;
+
+        params.forEach(param => {
+          let unit = "";
+          if (param.seriesName && yAxisList) {
+            const y = yAxisList.find(y => y.name === param.seriesName);
+            if (y && y.unit) unit = " " + y.unit;
+          }
+          const value = Array.isArray(param.value) ? param.value[1] : "";
+
+          tooltipContent += `<div style="display: flex; justify-content: space-between; align-items: center; margin: 4px 0;">
+            <span style="display: flex; align-items: center;">
+              <span style="display: inline-block; width: 12px; height: 12px; background-color: ${param.color}; margin-right: 8px; border-radius: 2px;"></span>
+              <span style="font-weight: 500;">${param.seriesName}${unit}</span>
+            </span>
+            <span style="font-weight: bold; color: #333; margin-left: 16px;">${value}</span>
+          </div>`;
+        });
+
+        return tooltipContent;
+      },
+    },
+    ...(isLargeMode
+      ? {}
+      : {
+          graphic: [
+            // updateGraphicLabels에서 동적으로 위치가 바뀌는 라벨/라인 정의 (초기값)
+            {
+              id: "label-1f",
+              type: "text",
+              z: 100,
+              left: 0,
+              top: 0,
+              style: {
+                text: "1F",
+                font: "bold 15px sans-serif",
+                fill: "#222",
+                textAlign: "center",
+              },
+            },
+            {
+              id: "label-2f",
+              type: "text",
+              z: 100,
+              left: 0,
+              top: 0,
+              style: {
+                text: "2F",
+                font: "bold 15px sans-serif",
+                fill: "#222",
+                textAlign: "center",
+              },
+            },
+            {
+              id: "label-seed",
+              type: "text",
+              z: 100,
+              left: 0,
+              top: 0,
+              style: {
+                text: "Seed",
+                font: "bold 15px sans-serif",
+                fill: "#222",
+                textAlign: "center",
+              },
+            },
+            {
+              id: "label-main",
+              type: "text",
+              z: 100,
+              left: 0,
+              top: 0,
+              style: {
+                text: "Main",
+                font: "bold 15px sans-serif",
+                fill: "#222",
+                textAlign: "center",
+              },
+            },
+            {
+              id: "line-1f",
+              type: "line",
+              shape: { x1: 0, y1: 0, x2: 0, y2: "100%" },
+              style: { stroke: "#888", lineWidth: 1 },
+            },
+            {
+              id: "line-2f",
+              type: "line",
+              shape: { x1: 0, y1: 0, x2: 0, y2: "100%" },
+              style: { stroke: "#888", lineWidth: 1 },
+            },
+            {
+              id: "line-seed",
+              type: "line",
+              shape: { x1: 0, y1: 0, x2: 0, y2: "100%" },
+              style: { stroke: "#888", lineWidth: 1 },
+            },
+            {
+              id: "line-main",
+              type: "line",
+              shape: { x1: 0, y1: 0, x2: 0, y2: "100%" },
+              style: { stroke: "#888", lineWidth: 1 },
+            },
+          ],
+        }),
+  };
+  chartInstance.setOption(option, true);
+  if (!isLargeMode) updateGraphicLabels();
+
+  // brushEnd 이벤트로 드래그 영역 줌인
+  if (chartInstance) {
+    chartInstance.off("brushEnd");
+    chartInstance.on("brushEnd", function (params) {
+      const p = params as { areas?: { coordRange?: [number, number] }[] };
+      if (p.areas && p.areas.length > 0) {
+        const area = p.areas[0];
+        if (area.coordRange && chartInstance) {
+          chartInstance.dispatchAction({
+            type: "dataZoom",
+            startValue: area.coordRange[0],
+            endValue: area.coordRange[1],
+          });
+        }
+      }
+    });
+  }
+};
+
+watch(
+  [checkedList, yAxisScrollIndex],
+  ([newChecked, _newScroll], [oldChecked, _oldScroll]) => {
+    const newCheckedArray = [...newChecked];
+    const oldCheckedArray = oldChecked ? [...oldChecked] : [];
+
+    // 체크박스 변경이 있었는지 확인 (슬라이더 이동만으로는 실행하지 않음)
+    const checkboxChanged = newChecked !== oldChecked;
+    if (!checkboxChanged) {
+      renderChart();
+      return;
+    }
+
+    // 새로 체크된 y축이 있으면, 그 y축이 보이도록 슬라이더 이동
+    if (
+      oldCheckedArray.length > 0 &&
+      newCheckedArray.length > oldCheckedArray.length
+    ) {
+      const added = newCheckedArray.find(x => !oldCheckedArray.includes(x));
+      const idx = filteredYAxisList.value.findIndex(y => y.name === added);
+      if (idx !== -1) {
+        // 필터된 리스트가 2개 이하면 슬라이더를 0으로 고정
+        if (filteredYAxisList.value.length <= 2) {
+          yAxisScrollIndex.value = 0;
+        } else {
+          // 새로 추가된 항목이 현재 보이는 범위에 있는지 확인
+          const currentStart = yAxisScrollIndex.value;
+          const currentEnd = currentStart + 1;
+          // 현재 범위에 없으면 슬라이더 이동
+          if (idx < currentStart || idx > currentEnd) {
+            const newScrollIndex = Math.max(
+              0,
+              Math.min(idx, filteredYAxisList.value.length - 2)
+            );
+            yAxisScrollIndex.value = newScrollIndex;
+          }
+        }
+      }
+    }
+    // 체크박스 개수가 2개 이하면 슬라이더를 0으로 고정 (추가되지 않은 경우)
+    else if (filteredYAxisList.value.length <= 2) {
+      yAxisScrollIndex.value = 0;
+    }
+    // 체크박스 해제 시 슬라이더를 가장 왼쪽으로 이동
+    else if (
+      oldCheckedArray.length > 0 &&
+      newCheckedArray.length < oldCheckedArray.length
+    ) {
+      yAxisScrollIndex.value = 0;
+    }
+
+    renderChart();
+  }
+);
+
+// 실시간 데이터 변경 시 차트 업데이트
+watch(
+  realTimeData,
+  () => {
+    if (isRealTimeMode.value) {
+      renderChart();
+    }
+  },
+  { deep: true }
+);
+
+const menuVisible = ref(false);
+const menuX = ref(0);
+const menuY = ref(0);
+
+const currentZoomLevel = ref(1);
+const zoomStep = 0.2;
+
+const zoomIn = () => {
+  if (chartInstance) {
+    currentZoomLevel.value = Math.min(currentZoomLevel.value + zoomStep, 3);
+    applyZoom();
+  }
+};
+
+const zoomOut = () => {
+  if (chartInstance) {
+    currentZoomLevel.value = Math.max(currentZoomLevel.value - zoomStep, 0.5);
+    applyZoom();
+  }
+};
+
+const resetZoom = () => {
+  if (chartInstance) {
+    currentZoomLevel.value = 1;
+    applyZoom();
+  }
+};
+
+const applyZoom = () => {
+  if (!chartInstance) return;
+  const option = chartInstance.getOption();
+
+  const xDataZoom = {
+    type: "inside",
+    xAxisIndex: 0,
+    start: 0,
+    end: 100 / currentZoomLevel.value,
+    zoomOnMouseWheel: true,
+    moveOnMouseMove: true,
+    moveOnMouseWheel: false,
+    preventDefaultMouseMove: true,
+  };
+
+  const yDataZoom = visibleYAxisList.value.map((_, index) => ({
+    type: "inside",
+    yAxisIndex: index,
+    start: 0,
+    end: 100 / currentZoomLevel.value,
+    zoomOnMouseWheel: true,
+    moveOnMouseWheel: false,
+    preventDefaultMouseMove: true,
+  }));
+
+  option.dataZoom = [xDataZoom, ...yDataZoom];
+  chartInstance.setOption(option, false);
+};
+
+function onContextMenu(e: MouseEvent) {
+  e.preventDefault();
+  menuX.value = e.clientX;
+  menuY.value = e.clientY;
+  menuVisible.value = true;
+}
+function onClickAnywhere() {
+  menuVisible.value = false;
+}
+
+onMounted(() => {
+  renderChart();
+  if (chartInstance && !isLargeMode) {
+    chartInstance.on("finished", updateGraphicLabels);
+    chartInstance.on("dataZoom", updateGraphicLabels);
+    window.addEventListener("resize", updateGraphicLabels);
+  }
+
+  // 실시간 모드 자동 시작 비활성화
+  // setTimeout(() => {
+  //   startRealTimeMode();
+  // }, 1000); // 1초 후 시작
+});
+
+onUnmounted(() => {
+  stopRealTimeMode();
+  if (chartInstance) {
+    chartInstance.dispose();
+  }
+  if (!isLargeMode) window.removeEventListener("resize", updateGraphicLabels);
+});
+
+// 각 시리즈별 평균 기울기 계산 함수
+
+const calculateAverageSlope = (seriesData: [number, number][]) => {
+  if (seriesData.length < 2) return 0;
+
+  let totalSlope = 0;
+  let count = 0;
+
+  for (let i = 1; i < seriesData.length; i++) {
+    const current = seriesData[i][1];
+    const previous = seriesData[i - 1][1];
+    totalSlope += current - previous;
+    count++;
+  }
+
+  return count > 0 ? totalSlope / count : 0;
+};
+
+// 실시간 데이터 생성 함수
+const generateRealTimeData = () => {
+  filteredSeriesList.value.forEach(series => {
+    let previousValue: number;
+    if (
+      realTimeData.value[series.name] &&
+      (realTimeData.value[series.name] as [number, number][]).length > 0
+    ) {
+      const lastRealTimePoint = (
+        realTimeData.value[series.name] as [number, number][]
+      )[(realTimeData.value[series.name] as [number, number][]).length - 1];
+      previousValue = lastRealTimePoint[1];
+    } else {
+      const lastDataPoint = series.data[series.data.length - 1] as [
+        number,
+        number,
+      ];
+      previousValue = lastDataPoint[1];
+    }
+
+    const averageSlope = calculateAverageSlope(
+      series.data as [number, number][]
+    );
+    const predictedValue = previousValue + averageSlope * 0.5;
+    const random = Math.random();
+    let newValue: number;
+
+    if (random < 0.7) {
+      newValue = predictedValue;
+    } else if (random < 0.9) {
+      newValue = previousValue;
+    } else {
+      const variation = (Math.random() - 0.5) * 0.04;
+      newValue = Math.max(0, previousValue * (1 + variation));
+    }
+
+    const newPoint: [number, number] = [
+      realTimeStartTime + currentRealTimeIndex.value * 0.333,
+      newValue,
+    ];
+
+    if (realTimeData.value[series.name]) {
+      (realTimeData.value[series.name] as [number, number][]).push(newPoint);
+    } else {
+      realTimeData.value[series.name] = [newPoint];
+    }
+  });
+};
+
+// 실시간 모드 시작 (사용하지 않음)
+const _startRealTimeMode = () => {
+  if (isRealTimeMode.value) return;
+
+  isRealTimeMode.value = true;
+  currentRealTimeIndex.value = 0;
+
+  // 실시간 데이터 초기화
+  realTimeData.value = {};
+
+  // 1초마다 새로운 데이터 생성
+  realTimeTimer.value = setInterval(() => {
+    currentRealTimeIndex.value++;
+
+    if (currentRealTimeIndex.value >= realTimeDuration) {
+      // 72초 완료 후 실시간 모드 종료 (24초 × 3배 세밀도)
+      stopRealTimeMode();
+      return;
+    }
+
+    generateRealTimeData();
+  }, 1000); // 1초마다 실행
+};
+
+watch(intervalValue, () => {
+  renderChart();
+});
+
+// 실시간 모드 중지
+const stopRealTimeMode = () => {
+  if (!isRealTimeMode.value) return;
+
+  isRealTimeMode.value = false;
+  if (realTimeTimer.value) {
+    clearInterval(realTimeTimer.value);
+    realTimeTimer.value = null;
+  }
+  currentRealTimeIndex.value = 0;
+  realTimeData.value = {};
+};
+</script>
+
+<style scoped>
+.experiment-graph-page {
+  width: 95vw;
+  height: 76vh;
+  background: #fff;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.info-bar {
+  width: 100%;
+  background: #fff;
+  border-bottom: 1.5px solid #e0e0e0;
+  padding: 18px 32px 10px 32px;
+  font-size: 1.08rem;
+  font-family: "Pretendard", "Noto Sans KR", sans-serif;
+  font-weight: 500;
+  letter-spacing: 0.01em;
+  box-sizing: border-box;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  position: relative;
+}
+
+.info-label {
+  color: #222;
+  font-weight: 600;
+  margin-right: 2px;
+}
+
+.info-value {
+  color: #1976d2;
+  font-weight: 500;
+  margin-right: 8px;
+}
+
+.info-divider {
+  color: #aaa;
+  margin: 0 10px;
+}
+
+.realdata-checkbox-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 32px 8px 32px;
+  font-size: 1.08rem;
+  border-bottom: 1px solid #e0e0e0;
+  margin-bottom: 0px;
+  background: #fff;
+  flex-shrink: 0;
+  overflow-x: auto;
+  white-space: nowrap;
+}
+
+.realdata-label {
+  font-weight: bold;
+  margin-right: 12px;
+  color: #444;
+}
+
+.realdata-checkbox-item {
+  margin-right: 10px;
+  font-size: 1.01rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  user-select: none;
+}
+
+.realdata-checkbox-item input[type="checkbox"] {
+  accent-color: #7ecbff;
+  width: 16px;
+  height: 16px;
+  margin-right: 2px;
+}
+
+.main-graph-area {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.echarts-container {
+  flex: 1;
+  position: relative;
+  background: #fff;
+}
+
+.echarts-graph {
+  width: 100%;
+  height: 100%;
+}
+
+.zoom-controls {
+  position: absolute;
+  top: 60px; /* 기존 10px에서 60px로 변경 */
+  right: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  z-index: 1000;
+}
+
+.zoom-btn {
+  width: 32px;
+  height: 32px;
+  border: 1px solid #ddd;
+  background: #fff;
+  border-radius: 4px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  font-weight: bold;
+  color: #666;
+  transition: all 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.zoom-btn:hover {
+  background: #f5f5f5;
+  border-color: #bbb;
+  color: #333;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+}
+
+.zoom-btn.reset {
+  font-size: 14px;
+}
+
+.zoom-btn:active {
+  transform: translateY(1px);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.yaxis-scroll-bar-overlay {
+  position: absolute;
+  left: 60px;
+  bottom: 70px;
+  width: 120px;
+  height: 24px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  transform: translateY(50%);
+  background: none;
+  border-radius: 12px 12px 0 0;
+  box-shadow: none;
+  z-index: 30;
+  padding: 0 8px;
+  pointer-events: auto;
+}
+.yaxis-scroll-bar-overlay input[type="range"] {
+  width: 100%;
+  height: 8px;
+  accent-color: #bbb;
+  background: rgba(180, 180, 180, 0.1);
+  border-radius: 8px;
+  opacity: 0.4;
+  transition: box-shadow 0.2s;
+}
+.yaxis-scroll-bar-overlay input[type="range"]::-webkit-slider-thumb {
+  background: #eee;
+  border: 1.5px solid #ccc;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  opacity: 0.5;
+}
+.yaxis-scroll-bar-overlay input[type="range"]:hover {
+  box-shadow: 0 0 0 2px #bbb2;
+}
+</style>
diff --git a/pages/test/culture_graph.html b/pages/test/culture_graph.html
new file mode 100644
index 0000000..fccab40
--- /dev/null
+++ b/pages/test/culture_graph.html
@@ -0,0 +1,1038 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Culture Graph</title>
+    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: "Pretendard", "Noto Sans KR", sans-serif;
+        background: #f5f5f5;
+      }
+
+      .experiment-graph-page {
+        width: 95vw;
+        height: 76vh;
+        background: #fff;
+        display: flex;
+
+        flex-direction: column;
+        overflow: hidden;
+        margin: 20px auto;
+      }
+
+      .info-bar {
+        width: 100%;
+        background: #fff;
+        border-bottom: 1.5px solid #e0e0e0;
+        padding: 18px 32px 10px 32px;
+        font-size: 1.08rem;
+        font-weight: 500;
+        letter-spacing: 0.01em;
+      }
+
+      .info-row {
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        position: relative;
+      }
+
+      .info-label {
+        color: #222;
+        font-weight: 600;
+        margin-right: 2px;
+      }
+
+      .info-value {
+        color: #1976d2;
+        font-weight: 500;
+        margin-right: 8px;
+      }
+
+      .info-divider {
+        color: #aaa;
+        margin: 0 10px;
+      }
+
+      .realdata-checkbox-bar {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 12px 32px 8px 32px;
+        font-size: 1.08rem;
+        border-bottom: 1px solid #e0e0e0;
+        margin-bottom: 0px;
+        background: #fff;
+        flex-shrink: 0;
+        overflow-x: auto;
+        white-space: nowrap;
+      }
+
+      .realdata-label {
+        font-weight: bold;
+        margin-right: 12px;
+        color: #444;
+      }
+
+      .realdata-checkbox-item {
+        margin-right: 10px;
+        font-size: 1.01rem;
+        display: inline-flex;
+        align-items: center;
+        gap: 2px;
+        user-select: none;
+      }
+
+      .realdata-checkbox-item input[type="checkbox"] {
+        accent-color: #7ecbff;
+        width: 16px;
+        height: 16px;
+        margin-right: 2px;
+      }
+
+      .main-graph-area {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+
+      .echarts-container {
+        flex: 1;
+        position: relative;
+        background: #fff;
+      }
+
+      .echarts-graph {
+        width: 100%;
+        height: 100%;
+      }
+
+      .zoom-controls {
+        position: absolute;
+        top: 60px;
+        right: 10px;
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        z-index: 1000;
+      }
+
+      .zoom-btn {
+        width: 32px;
+        height: 32px;
+        border: 1px solid #ddd;
+        background: #fff;
+        border-radius: 4px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        font-weight: bold;
+        color: #666;
+        transition: all 0.2s ease;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      .zoom-btn:hover {
+        background: #f5f5f5;
+        border-color: #bbb;
+        color: #333;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
+      }
+
+      .zoom-btn.reset {
+        font-size: 14px;
+      }
+
+      .zoom-btn:active {
+        transform: translateY(1px);
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+      }
+
+      .yaxis-scroll-bar-overlay {
+        position: absolute;
+        left: 60px;
+        bottom: 70px;
+        width: 120px;
+        height: 24px;
+        display: flex;
+        align-items: flex-start;
+        justify-content: center;
+        transform: translateY(50%);
+        background: none;
+        border-radius: 12px 12px 0 0;
+        box-shadow: none;
+        z-index: 30;
+        padding: 0 8px;
+        pointer-events: auto;
+      }
+
+      .yaxis-scroll-bar-overlay input[type="range"] {
+        width: 100%;
+        height: 8px;
+        accent-color: #bbb;
+        background: rgba(180, 180, 180, 0.1);
+        border-radius: 8px;
+        opacity: 0.4;
+        transition: box-shadow 0.2s;
+      }
+
+      .yaxis-scroll-bar-overlay input[type="range"]::-webkit-slider-thumb {
+        background: #eee;
+        border: 1.5px solid #ccc;
+        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+        opacity: 0.5;
+      }
+
+      .yaxis-scroll-bar-overlay input[type="range"]:hover {
+        box-shadow: 0 0 0 2px #bbb2;
+      }
+
+      .context-menu {
+        position: fixed;
+        background: white;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        padding: 8px 0;
+        z-index: 10000;
+        display: none;
+      }
+
+      .context-menu-item {
+        padding: 8px 16px;
+        cursor: pointer;
+        font-size: 14px;
+        color: #333;
+      }
+
+      .context-menu-item:hover {
+        background: #f5f5f5;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="experiment-graph-page" id="experimentGraphPage">
+      <div class="info-bar">
+        <div class="info-row">
+          <span class="info-label">Experiment :</span>
+          <span class="info-value">Sample001</span>
+          <span class="info-divider">|</span>
+          <span class="info-label">Strain :</span>
+          <span class="info-value">균주명(Test)</span>
+          <span class="info-divider">|</span>
+          <span class="info-label">Time :</span>
+          <span class="info-value"
+            >2025.07.01 - 00:00 ~ 2025.07.03 - 00:00</span
+          >
+        </div>
+      </div>
+      <div class="realdata-checkbox-bar">
+        <span class="realdata-label">Real Data</span>
+        <span
+          style="font-size: 12px; color: #666; margin-left: 10px"
+          id="checkboxCount"
+          >(30/30)</span
+        >
+        <div id="checkboxContainer"></div>
+      </div>
+      <div class="main-graph-area">
+        <div class="echarts-container">
+          <div class="zoom-controls">
+            <button class="zoom-btn" title="확대" onclick="zoomIn()">
+              <span>+</span>
+            </button>
+            <button class="zoom-btn" title="축소" onclick="zoomOut()">
+              <span>−</span>
+            </button>
+            <button class="zoom-btn reset" title="초기화" onclick="resetZoom()">
+              <span>⟲</span>
+            </button>
+          </div>
+          <div id="growthChart" class="echarts-graph"></div>
+          <div class="yaxis-scroll-bar-overlay">
+            <input
+              id="yAxisScrollSlider"
+              type="range"
+              min="0"
+              max="28"
+              value="0"
+              oninput="handleYAxisScroll(this.value)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="context-menu" id="contextMenu">
+      <div
+        class="context-menu-item"
+        onclick="handleContextMenuAction('zoomIn')"
+      >
+        확대
+      </div>
+      <div
+        class="context-menu-item"
+        onclick="handleContextMenuAction('zoomOut')"
+      >
+        축소
+      </div>
+      <div class="context-menu-item" onclick="handleContextMenuAction('reset')">
+        초기화
+      </div>
+    </div>
+
+    <script>
+      // 전역 변수
+      let chartInstance = null;
+      let checkedList = [];
+      let yAxisScrollIndex = 0;
+      let currentZoomLevel = 1;
+      const zoomStep = 0.2;
+
+      const pastelColors = [
+        "#A3D8F4",
+        "#F7B7A3",
+        "#B5EAD7",
+        "#FFDAC1",
+        "#C7CEEA",
+        "#FFF1BA",
+        "#FFB7B2",
+        "#B4A7D6",
+        "#AED9E0",
+        "#FFC3A0",
+        "#E2F0CB",
+        "#FFB347",
+        "#C1C8E4",
+        "#FFFACD",
+        "#FFD1DC",
+      ];
+
+      const yAxisList = [
+        {
+          name: "ORP",
+          unit: "",
+          color: pastelColors[0],
+          min: 0,
+          max: 1000,
+          ticks: [1000, 800, 600, 400, 200, 0],
+        },
+        {
+          name: "Air flow",
+          unit: "(L/min)",
+          color: pastelColors[1],
+          min: 0,
+          max: 30,
+          ticks: [30, 25, 20, 15, 10, 5, 0],
+        },
+        {
+          name: "DO",
+          unit: "",
+          color: pastelColors[2],
+          min: 0,
+          max: 200,
+          ticks: [200, 150, 100, 50, 0],
+        },
+        {
+          name: "Feed TK1",
+          unit: "(L)",
+          color: pastelColors[3],
+          min: 0,
+          max: 10,
+          ticks: [10, 8, 6, 4, 2, 0],
+        },
+        {
+          name: "Feed TK2",
+          unit: "(L)",
+          color: pastelColors[4],
+          min: 0,
+          max: 10,
+          ticks: [10, 8, 6, 4, 2, 0],
+        },
+        {
+          name: "pH",
+          unit: "",
+          color: pastelColors[5],
+          min: 6.0,
+          max: 8.0,
+          ticks: [8.0, 7.5, 7.0, 6.5, 6.0],
+        },
+        {
+          name: "Pressure",
+          unit: "(bar)",
+          color: pastelColors[6],
+          min: 0,
+          max: 2,
+          ticks: [2, 1.5, 1, 0.5, 0],
+        },
+        {
+          name: "RPM",
+          unit: "",
+          color: pastelColors[7],
+          min: 0,
+          max: 3000,
+          ticks: [3000, 2400, 1800, 1200, 600, 0],
+        },
+        {
+          name: "CO2",
+          unit: "(%)",
+          color: pastelColors[8],
+          min: 0,
+          max: 10,
+          ticks: [10, 8, 6, 4, 2, 0],
+        },
+        {
+          name: "JAR Vol",
+          unit: "(L)",
+          color: pastelColors[9],
+          min: 0,
+          max: 20,
+          ticks: [20, 16, 12, 8, 4, 0],
+        },
+        {
+          name: "WEIGHT",
+          unit: "(kg)",
+          color: pastelColors[10],
+          min: 0,
+          max: 100,
+          ticks: [100, 80, 60, 40, 20, 0],
+        },
+        {
+          name: "O2",
+          unit: "(%)",
+          color: pastelColors[11],
+          min: 0,
+          max: 100,
+          ticks: [100, 80, 60, 40, 20, 0],
+        },
+        {
+          name: "NV",
+          unit: "",
+          color: pastelColors[12],
+          min: 0,
+          max: 10,
+          ticks: [10, 8, 6, 4, 2, 0],
+        },
+        {
+          name: "NIR",
+          unit: "",
+          color: pastelColors[13],
+          min: 0,
+          max: 10,
+          ticks: [10, 8, 6, 4, 2, 0],
+        },
+        {
+          name: "Temperature",
+          unit: "(℃)",
+          color: pastelColors[14],
+          min: 0,
+          max: 50,
+          ticks: [50, 40, 30, 20, 10, 0],
+        },
+        {
+          name: "Humidity",
+          unit: "(%)",
+          color: pastelColors[0],
+          min: 0,
+          max: 100,
+          ticks: [100, 80, 60, 40, 20, 0],
+        },
+        {
+          name: "Flow Rate",
+          unit: "(L/min)",
+          color: pastelColors[1],
+          min: 0,
+          max: 60,
+          ticks: [60, 50, 40, 30, 20, 10, 0],
+        },
+        {
+          name: "Conductivity",
+          unit: "(μS/cm)",
+          color: pastelColors[2],
+          min: 0,
+          max: 600,
+          ticks: [600, 500, 400, 300, 200, 100, 0],
+        },
+        {
+          name: "Turbidity",
+          unit: "(NTU)",
+          color: pastelColors[3],
+          min: 0,
+          max: 12,
+          ticks: [12, 10, 8, 6, 4, 2, 0],
+        },
+        {
+          name: "Dissolved Solids",
+          unit: "(mg/L)",
+          color: pastelColors[4],
+          min: 0,
+          max: 250,
+          ticks: [250, 200, 150, 100, 50, 0],
+        },
+        {
+          name: "Alkalinity",
+          unit: "(mg/L)",
+          color: pastelColors[5],
+          min: 0,
+          max: 120,
+          ticks: [120, 100, 80, 60, 40, 20, 0],
+        },
+        {
+          name: "Hardness",
+          unit: "(mg/L)",
+          color: pastelColors[6],
+          min: 0,
+          max: 100,
+          ticks: [100, 80, 60, 40, 20, 0],
+        },
+        {
+          name: "Chlorine",
+          unit: "(mg/L)",
+          color: pastelColors[7],
+          min: 0,
+          max: 6,
+          ticks: [6, 5, 4, 3, 2, 1, 0],
+        },
+        {
+          name: "Nitrate",
+          unit: "(mg/L)",
+          color: pastelColors[8],
+          min: 0,
+          max: 25,
+          ticks: [25, 20, 15, 10, 5, 0],
+        },
+        {
+          name: "Phosphate",
+          unit: "(mg/L)",
+          color: pastelColors[9],
+          min: 0,
+          max: 12,
+          ticks: [12, 10, 8, 6, 4, 2, 0],
+        },
+        {
+          name: "Sulfate",
+          unit: "(mg/L)",
+          color: pastelColors[10],
+          min: 0,
+          max: 60,
+          ticks: [60, 50, 40, 30, 20, 10, 0],
+        },
+        {
+          name: "Ammonia",
+          unit: "(mg/L)",
+          color: pastelColors[11],
+          min: 0,
+          max: 18,
+          ticks: [18, 15, 12, 9, 6, 3, 0],
+        },
+        {
+          name: "Nitrite",
+          unit: "(mg/L)",
+          color: pastelColors[12],
+          min: 0,
+          max: 6,
+          ticks: [6, 5, 4, 3, 2, 1, 0],
+        },
+        {
+          name: "BOD",
+          unit: "(mg/L)",
+          color: pastelColors[13],
+          min: 0,
+          max: 35,
+          ticks: [35, 30, 25, 20, 15, 10, 5, 0],
+        },
+        {
+          name: "COD",
+          unit: "(mg/L)",
+          color: pastelColors[14],
+          min: 0,
+          max: 120,
+          ticks: [120, 100, 80, 60, 40, 20, 0],
+        },
+      ];
+
+      // 데이터 생성 함수
+      const POINTS_PER_LINE = 66667;
+      const xLabels = Array.from(
+        { length: POINTS_PER_LINE },
+        (_, i) => +(i * (48 / (POINTS_PER_LINE - 1))).toFixed(6)
+      );
+
+      function smoothData(
+        min,
+        max,
+        n,
+        phase = 0,
+        amp = 1,
+        offset = 0,
+        seriesIndex
+      ) {
+        let prevValue = 0.5;
+        const values = [];
+        // 데이터 범위 축소: min+10% ~ max-10%
+        const rangeMin = min + (max - min) * 0.1;
+        const rangeMax = max - (max - min) * 0.1;
+        // 시리즈별 패턴 다양화: 증가/감소/진동/트렌드 섞기
+        // 패턴 결정 (시리즈 인덱스에 따라)
+        const trendType = seriesIndex % 4; // 0:증가, 1:감소, 2:진동, 3:랜덤
+        for (let i = 0; i < n; i++) {
+          const t = i / (n - 1);
+          let base;
+          if (trendType === 0) {
+            // 완만한 증가 + 진동
+            base =
+              0.2 + 0.6 * t + 0.15 * Math.sin(phase + t * Math.PI * amp * 2);
+          } else if (trendType === 1) {
+            // 완만한 감소 + 진동
+            base =
+              0.8 - 0.6 * t + 0.15 * Math.cos(phase + t * Math.PI * amp * 2);
+          } else if (trendType === 2) {
+            // 진동(사인파)
+            base = 0.5 + 0.35 * Math.sin(phase + t * Math.PI * amp * 3);
+          } else {
+            // 랜덤 트렌드(완만한 곡선 + 노이즈)
+            base = 0.5 + 0.2 * Math.sin(phase + t * Math.PI * amp) + 0.2 * t;
+          }
+          // 변동성(노이즈) 대폭 감소
+          const randomFactor = 0.05 + 0.05 * (seriesIndex % 3); // 0.05~0.15
+          const noise = (Math.random() - 0.5) * randomFactor * 0.18;
+          base += noise;
+          base = Math.max(0, Math.min(1, base));
+          const value = +(
+            rangeMin +
+            (rangeMax - rangeMin) * base +
+            offset
+          ).toFixed(2);
+          prevValue = base;
+          values.push([xLabels[i], value]);
+        }
+        return values;
+      }
+
+      // 시리즈 데이터 생성
+      const seriesList = yAxisList.map((yAxis, index) => ({
+        name: yAxis.name,
+        color: yAxis.color,
+        yAxisIndex: index,
+        data: smoothData(
+          yAxis.min,
+          yAxis.max,
+          POINTS_PER_LINE,
+          Math.PI / (index + 1),
+          1,
+          0,
+          index
+        ),
+      }));
+
+      // 체크박스 생성
+      function createCheckboxes() {
+        const container = document.getElementById("checkboxContainer");
+        checkedList = yAxisList.map(y => y.name);
+
+        yAxisList.forEach(col => {
+          const label = document.createElement("label");
+          label.className = "realdata-checkbox-item";
+
+          const checkbox = document.createElement("input");
+          checkbox.type = "checkbox";
+          checkbox.checked = true;
+          checkbox.value = col.name;
+          checkbox.addEventListener("change", e =>
+            handleCheckboxChange(col.name, e)
+          );
+
+          const span = document.createElement("span");
+          span.style.color = col.color;
+          span.style.fontWeight = "bold";
+          span.textContent = col.name;
+
+          label.appendChild(checkbox);
+          label.appendChild(span);
+          container.appendChild(label);
+        });
+
+        updateCheckboxCount();
+      }
+
+      function handleCheckboxChange(itemName, event) {
+        const isChecked = event.target.checked;
+
+        if (isChecked) {
+          if (!checkedList.includes(itemName)) {
+            checkedList.push(itemName);
+          }
+        } else {
+          if (checkedList.length === 1) {
+            alert("최소 1개의 데이터를 선택해주세요");
+            event.target.checked = true;
+            return;
+          }
+          checkedList = checkedList.filter(name => name !== itemName);
+        }
+
+        updateCheckboxCount();
+        renderChart();
+      }
+
+      function updateCheckboxCount() {
+        document.getElementById("checkboxCount").textContent =
+          `(${checkedList.length}/${yAxisList.length})`;
+      }
+
+      function handleYAxisScroll(value) {
+        yAxisScrollIndex = parseInt(value);
+        renderChart();
+      }
+
+      // 줌 기능
+      function zoomIn() {
+        currentZoomLevel = Math.min(currentZoomLevel + zoomStep, 3);
+        applyZoom();
+      }
+
+      function zoomOut() {
+        currentZoomLevel = Math.max(currentZoomLevel - zoomStep, 0.5);
+        applyZoom();
+      }
+
+      function resetZoom() {
+        currentZoomLevel = 1;
+        applyZoom();
+      }
+
+      function applyZoom() {
+        if (!chartInstance) return;
+        const option = chartInstance.getOption();
+
+        const xDataZoom = {
+          type: "inside",
+          xAxisIndex: 0,
+          start: 0,
+          end: 100 / currentZoomLevel,
+          zoomOnMouseWheel: true,
+          moveOnMouseMove: true,
+          moveOnMouseWheel: false,
+          preventDefaultMouseMove: true,
+        };
+
+        option.dataZoom = [xDataZoom];
+        chartInstance.setOption(option, false);
+      }
+
+      // 컨텍스트 메뉴
+      function onContextMenu(e) {
+        e.preventDefault();
+        const menu = document.getElementById("contextMenu");
+        menu.style.display = "block";
+        menu.style.left = e.clientX + "px";
+        menu.style.top = e.clientY + "px";
+      }
+
+      function onClickAnywhere() {
+        document.getElementById("contextMenu").style.display = "none";
+      }
+
+      function handleContextMenuAction(action) {
+        switch (action) {
+          case "zoomIn":
+            zoomIn();
+            break;
+          case "zoomOut":
+            zoomOut();
+            break;
+          case "reset":
+            resetZoom();
+            break;
+        }
+        document.getElementById("contextMenu").style.display = "none";
+      }
+
+      // 차트 렌더링
+      function renderChart() {
+        const chartElement = document.getElementById("growthChart");
+        if (!chartElement) return;
+
+        if (!chartInstance) {
+          chartInstance = echarts.init(chartElement);
+        }
+
+        const filteredYAxisList = yAxisList.filter(y =>
+          checkedList.includes(y.name)
+        );
+        const filteredSeriesList = seriesList.filter(s =>
+          checkedList.includes(s.name)
+        );
+
+        const visibleYAxisList = filteredYAxisList.slice(
+          yAxisScrollIndex,
+          yAxisScrollIndex + 2
+        );
+
+        const yAxis = filteredYAxisList.map((y, i) => {
+          const visibleIdx = visibleYAxisList.findIndex(
+            vy => vy.name === y.name
+          );
+          return {
+            type: "value",
+            min: y.min,
+            max: y.max,
+            show: visibleIdx !== -1,
+            position: "left",
+            offset: visibleIdx === 1 ? 80 : 0,
+            z: 10 + i,
+            name:
+              visibleIdx !== -1 ? y.name + (y.unit ? ` ${y.unit}` : "") : "",
+            nameLocation: "middle",
+            nameGap: 50,
+            nameTextStyle: {
+              color: y.color,
+              fontWeight: "bold",
+              fontSize: 11,
+              writing: "tb-rl",
+            },
+            axisLabel: {
+              show: visibleIdx !== -1,
+              fontSize: 12,
+              color: y.color,
+              fontWeight: "bold",
+            },
+            splitLine: {
+              show: visibleIdx === 1 || visibleIdx === 0,
+              lineStyle: { color: "#f0f0f0", width: 1 },
+            },
+            axisLine: {
+              show: visibleIdx !== -1,
+              lineStyle: { color: y.color, width: 2 },
+            },
+            axisTick: {
+              show: visibleIdx !== -1,
+              lineStyle: { color: y.color },
+            },
+          };
+        });
+
+        const mappedSeriesList = filteredSeriesList
+          .map((s, idx) => {
+            const globalIdx = filteredYAxisList.findIndex(
+              y => y.name === s.name
+            );
+            if (globalIdx === -1) return null;
+            const markLine =
+              idx === 0
+                ? {
+                    symbol: "none",
+                    label: {
+                      show: true,
+                      position: "insideEndTop",
+                      fontWeight: "bold",
+                      fontSize: 13,
+                      color: "#222",
+                      formatter: function (params) {
+                        return params.data && params.data.name
+                          ? params.data.name
+                          : "";
+                      },
+                    },
+                    lineStyle: { color: "#888", width: 2, type: "solid" },
+                    data: [
+                      { xAxis: 6, name: "1F" },
+                      { xAxis: 10, name: "2F" },
+                      { xAxis: 12, name: "Seed" },
+                      { xAxis: 22, name: "Main" },
+                    ],
+                  }
+                : undefined;
+            return {
+              ...s,
+              yAxisIndex: globalIdx,
+              type: "line",
+              symbol: "none",
+              sampling: "lttb",
+              lineStyle: { width: 0.5 },
+              ...(markLine ? { markLine } : {}),
+            };
+          })
+          .filter(Boolean);
+
+        const option = {
+          grid: {
+            left: 120,
+            right: 60,
+            top: 40,
+            bottom: 120,
+            containLabel: true,
+          },
+          toolbox: {
+            feature: {
+              dataZoom: {
+                yAxisIndex: "none",
+              },
+            },
+          },
+          xAxis: [
+            {
+              type: "value",
+              min: 0,
+              max: 48,
+              interval: 6,
+              position: "bottom",
+              axisLabel: {
+                fontSize: 12,
+                color: "#666",
+                fontWeight: "normal",
+              },
+              splitLine: {
+                show: true,
+                lineStyle: { color: "#e0e0e0", width: 1 },
+              },
+              axisLine: {
+                show: true,
+                lineStyle: { color: "#ccc", width: 1 },
+              },
+              axisTick: {
+                show: true,
+                lineStyle: { color: "#ccc" },
+              },
+            },
+          ],
+          yAxis,
+          series: mappedSeriesList,
+          legend: { show: false },
+          animation: false,
+          dataZoom: [
+            {
+              type: "inside",
+              xAxisIndex: 0,
+              start: 0,
+              end: 100,
+              zoomOnMouseWheel: true,
+              moveOnMouseMove: true,
+              moveOnMouseWheel: false,
+              preventDefaultMouseMove: true,
+            },
+            {
+              type: "slider",
+              xAxisIndex: 0,
+              start: 0,
+              end: 100,
+              bottom: 10,
+              height: 20,
+              borderColor: "transparent",
+              backgroundColor: "#f5f5f5",
+              fillerColor: "rgba(25,118,210,0.2)",
+              handleStyle: {
+                color: "#1976d2",
+              },
+              textStyle: {
+                color: "#666",
+              },
+            },
+          ],
+          tooltip: {
+            trigger: "axis",
+            position: function (pt) {
+              return [pt[0], "10%"];
+            },
+            axisPointer: {
+              type: "line",
+              animation: false,
+              lineStyle: {
+                color: "#5470c6",
+                width: 1,
+                type: "dashed",
+              },
+            },
+            backgroundColor: "rgba(255, 255, 255, 0.95)",
+            borderColor: "#ccc",
+            borderWidth: 1,
+            textStyle: {
+              color: "#333",
+              fontSize: 13,
+              fontWeight: "normal",
+            },
+            extraCssText:
+              "box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 4px;",
+            formatter: function (params) {
+              if (!Array.isArray(params)) params = [params];
+
+              const baseDate = new Date("2025-07-01T00:00:00");
+              const hour = Array.isArray(params[0].value)
+                ? params[0].value[0]
+                : params[0].data[0];
+              const date = new Date(baseDate.getTime());
+              date.setHours(baseDate.getHours() + hour);
+
+              const yyyy = date.getFullYear();
+              const mm = (date.getMonth() + 1).toString().padStart(2, "0");
+              const dd = date.getDate().toString().padStart(2, "0");
+              const HH = date.getHours().toString().padStart(2, "0");
+              const dateStr = `${yyyy}.${mm}.${dd} - ${HH}:00`;
+
+              let tooltipContent = `<div style="font-weight: bold; color: #5470c6; margin-bottom: 8px; border-bottom: 1px solid #eee; padding-bottom: 4px;">${dateStr}</div>`;
+
+              params.forEach(param => {
+                let unit = "";
+                if (param.seriesName && yAxisList) {
+                  const y = yAxisList.find(y => y.name === param.seriesName);
+                  if (y && y.unit) unit = " " + y.unit;
+                }
+                const value = Array.isArray(param.value)
+                  ? param.value[1]
+                  : param.data[1];
+
+                tooltipContent += `<div style="display: flex; justify-content: space-between; align-items: center; margin: 4px 0;">
+                  <span style="display: flex; align-items: center;">
+                    <span style="display: inline-block; width: 12px; height: 12px; background-color: ${param.color}; margin-right: 8px; border-radius: 2px;"></span>
+                    <span style="font-weight: 500;">${param.seriesName}${unit}</span>
+                  </span>
+                  <span style="font-weight: bold; color: #333; margin-left: 16px;">${value}</span>
+                </div>`;
+              });
+
+              return tooltipContent;
+            },
+          },
+        };
+
+        chartInstance.setOption(option, true);
+
+        // 슬라이더 최대값 업데이트
+        const slider = document.getElementById("yAxisScrollSlider");
+        if (slider) {
+          slider.max = Math.max(0, filteredYAxisList.length - 2);
+          slider.disabled = filteredYAxisList.length <= 2;
+        }
+      }
+
+      // 초기화
+      document.addEventListener("DOMContentLoaded", function () {
+        createCheckboxes();
+        renderChart();
+
+        // 이벤트 리스너 추가
+        document
+          .getElementById("experimentGraphPage")
+          .addEventListener("contextmenu", onContextMenu);
+        document.addEventListener("click", onClickAnywhere);
+
+        // 윈도우 리사이즈 이벤트
+        window.addEventListener("resize", function () {
+          if (chartInstance) {
+            chartInstance.resize();
+          }
+        });
+      });
+    </script>
+  </body>
+</html>
diff --git a/pages/test/igv2.vue b/pages/test/igv2.vue
new file mode 100644
index 0000000..c231f35
--- /dev/null
+++ b/pages/test/igv2.vue
@@ -0,0 +1,955 @@
+<template>
+  <div id="app" style="position: relative;">
+    <main role="main" class="container-fluid">
+      <div style="padding-top: 24px; position: relative;">
+        <!-- IGV 위 컨트롤 바 -->
+        <div style="display: flex; gap: 16px; align-items: center; margin-bottom: 8px; flex-wrap: wrap;">
+          <!-- 파란 핸들 위치 input -->
+          <label>시작 위치
+            <input type="number" :value="startPos" @input="onInputPosChange('start', $event.target.value)" class="igv-control-input" style="width:110px; margin-left:4px;" />
+          </label>
+          <label>끝 위치
+            <input type="number" :value="endPos" @input="onInputPosChange('end', $event.target.value)" class="igv-control-input" style="width:110px; margin-left:4px;" />
+          </label>
+          <button @click="reverseSequence" :class="['igv-control-btn', { 'reverse-active': isReverse }]" style="margin-bottom: 0; margin-left: 8px;">리버스(상보서열) 변환</button>
+          
+          <!-- 서버 파일 목록 드롭다운 -->
+          <div style="margin-left: 8px; position: relative;">
+            <button @click="toggleServerFilesDropdown" class="igv-control-btn">
+              서버 파일 목록
+              <span v-if="isServerFilesDropdownOpen">▼</span>
+              <span v-else>▶</span>
+            </button>
+            <div v-if="isServerFilesDropdownOpen" class="server-files-dropdown">
+              <div v-if="loadingFiles" class="dropdown-item">로딩 중...</div>
+              <div v-else-if="serverFiles.length === 0" class="dropdown-item">업로드된 파일이 없습니다.</div>
+              <div v-else>
+                <div 
+                  v-for="file in serverFiles" 
+                  :key="file.fileName"
+                  @click="selectServerFile(file)"
+                  class="dropdown-item file-item"
+                  :class="{ 'selected': selectedServerFile && selectedServerFile.fileName === file.fileName }"
+                >
+                  <div class="file-name">{{ file.fileName }}</div>
+                  <div class="file-info">
+                    크기: {{ formatFileSize(file.fileSize) }} | 
+                    업로드: {{ formatDate(file.uploadTime) }}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- FASTA 업로드 -->
+          <label style="margin-left: 8px;">
+            <input type="file" accept=".fa,.fasta" @change="onFastaUpload" style="display:none;" ref="fastaInput" />
+            <button type="button" class="igv-control-btn" @click="$refs.fastaInput.click()">FASTA 업로드</button>
+          </label>
+          <!-- 대용량 파일 분할 -->
+          <button v-if="showSplitOption" @click="splitLargeFile" class="igv-control-btn" style="margin-left:4px;">파일 분할</button>
+          <!-- 범위 내 염기서열 변경 -->
+          <input type="text" v-model="editSequence" placeholder="새 염기서열 입력" class="igv-control-input" style="width:180px; margin-left:8px;" />
+          <button @click="replaceSequenceInRange" class="igv-control-btn" style="margin-left:4px;">범위 염기서열 변경</button>
+          <!-- Tracks 드롭다운 -->
+          <ul
+            class="navbar-nav mr-auto"
+            style="list-style:none; padding-left:0; margin:0;"
+          >
+            <li
+              class="nav-item dropdown"
+              style="position: relative; display: inline-block;"
+            >
+              <a
+                href="#"
+                id="igv-example-api-dropdown"
+                @click.prevent="toggleDropdown"
+                aria-haspopup="true"
+                :aria-expanded="isDropdownOpen.toString()"
+                style="color: black; cursor: pointer; user-select: none;"
+                >Tracks</a
+              >
+              <ul
+                v-show="isDropdownOpen"
+                class="dropdown-menu"
+                style="width:350px; position: absolute; top: 100%; left: 0; background: white; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.15); padding: 5px 0; margin: 0; list-style:none; z-index: 1000;"
+              >
+                <li>
+                  <a
+                    href="#"
+                    @click.prevent="loadCopyNumberTrack"
+                    style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
+                    >Copy Number</a
+                  >
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    @click.prevent="loadDbSnpTrack"
+                    style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
+                    >dbSNP 137 (bed tabix)</a
+                  >
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    @click.prevent="loadBigWigTrack"
+                    style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
+                    >Encode bigwig</a
+                  >
+                </li>
+                <li>
+                  <a
+                    href="#"
+                    @click.prevent="loadBamTrack"
+                    style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
+                    >1KG Bam (HG02450)</a
+                  >
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
+        <!-- IGV 뷰어 영역 -->
+        <div id="igvDiv" ref="igvDiv" style="padding-top: 20px; min-height: 500px; position: relative;"></div>
+        <!-- 염기서열 결과 -->
+        <div style="margin-top: 12px;">
+          <strong :class="{ 'reverse-active': isReverse }">염기서열:</strong>
+          <pre :class="{ 'reverse-active': isReverse }" style="white-space: pre-wrap; word-break: break-all;">{{ displaySequence }}</pre>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+// igv.js와 igv_custom.js를 script 태그로 동적 로드(SSR 방지)
+if (typeof window !== 'undefined') {
+  function loadScriptOnce(src, globalCheck, callback) {
+    if (globalCheck()) {
+      if (callback) callback();
+      return;
+    }
+    
+    // 이미 로딩 중인지 확인
+    if (document.querySelector(`script[src="${src}"]`)) {
+      const checkInterval = setInterval(() => {
+        if (globalCheck()) {
+          clearInterval(checkInterval);
+          if (callback) callback();
+        }
+      }, 100);
+      return;
+    }
+    
+    const script = document.createElement('script');
+    script.src = src;
+    script.onload = function() { 
+      if (callback) callback(); 
+    };
+    script.onerror = function() {
+      console.error(`Failed to load script: ${src}`);
+    };
+    document.head.appendChild(script);
+  }
+  
+  // igv.js 먼저 로드
+  loadScriptOnce('/dist/igv.js', function() { 
+    return typeof window.igv !== 'undefined' && typeof window.igv.createBrowser === 'function'; 
+  }, function() {
+    console.log('IGV.js loaded successfully');
+    // igv_custom.js는 igv.js가 로드된 후에만 로드
+    loadScriptOnce('/dist/igv_custom.js', function() { 
+      return !!window.igvCustomLoaded; 
+    }, function() { 
+      window.igvCustomLoaded = true; 
+      console.log('IGV Custom loaded successfully');
+    });
+  });
+}
+
+export default {
+  name: "App",
+  data() {
+    return {
+      browser: null,
+      locus: null, // ex: "chr1:10000-10200"
+      overlayWidth: 900,
+      overlayHeight: 500,
+      sequence: '',
+      displaySequence: '',
+      isReverse: false,
+      isDropdownOpen: false,
+      startPos: null,
+      endPos: null,
+      prevStartPos: null,
+      prevEndPos: null,
+      fastaFile: null, // 업로드된 FASTA 파일 Blob
+      fastaName: '', // 업로드된 FASTA 파일명
+      editSequence: '', // 범위 내 교체할 염기서열
+      showSplitOption: false, // 파일 분할 옵션 표시
+      largeFile: null, // 대용량 파일 저장
+      isServerFilesDropdownOpen: false, // 서버 파일 목록 드롭다운 상태
+      loadingFiles: false, // 서버 파일 목록 로딩 상태
+      serverFiles: [], // 서버에 업로드된 파일 목록
+      selectedServerFile: null, // 선택된 서버 파일
+    };
+  },
+  watch: {
+    locus: 'fetchSequence',
+  },
+  async mounted() {
+    // IGV.js와 igv_custom.js를 script 태그로 동적 로드(SSR 방지)
+    if (typeof window !== 'undefined') {
+      function loadScriptOnce(src, globalCheck, callback) {
+        if (globalCheck()) {
+          if (callback) callback();
+          return;
+        }
+        // 이미 로딩 중인지 확인
+        if (document.querySelector(`script[src="${src}"]`)) {
+          const checkInterval = setInterval(() => {
+            if (globalCheck()) {
+              clearInterval(checkInterval);
+              if (callback) callback();
+            }
+          }, 100);
+          return;
+        }
+        const script = document.createElement('script');
+        script.src = src;
+        script.onload = function() { 
+          if (callback) callback(); 
+        };
+        script.onerror = function() {
+          console.error(`Failed to load script: ${src}`);
+        };
+        document.head.appendChild(script);
+      }
+      // igv.js 먼저 로드
+      loadScriptOnce('/dist/igv.js', function() { 
+        return typeof window.igv !== 'undefined' && typeof window.igv.createBrowser === 'function'; 
+      }, function() {
+        console.log('IGV.js loaded successfully');
+        // igv_custom.js는 igv.js가 로드된 후에만 로드
+        loadScriptOnce('/dist/igv_custom.js', function() { 
+          return !!window.igvCustomLoaded; 
+        }, function() { 
+          window.igvCustomLoaded = true; 
+          console.log('IGV Custom loaded successfully');
+        });
+      });
+    }
+    await this.initIGV();
+    // IGV가 완전히 생성될 때까지 대기
+    const registerListener = () => {
+      if (window.igvCustomLoaded && this.browser) {
+        window.addEventListener('igv-blue-lines-changed', this.onBlueLinesChanged);
+      } else {
+        setTimeout(registerListener, 200);
+      }
+    };
+    registerListener();
+  },
+  beforeUnmount() {
+    window.removeEventListener('igv-blue-lines-changed', this.onBlueLinesChanged);
+  },
+  methods: {
+    async initIGV() {
+      try {
+        await this.waitForIGV();
+        await this.$nextTick();
+        const igvDiv = this.$refs.igvDiv;
+        if (!igvDiv) {
+          console.error("❌ #igvDiv가 존재하지 않습니다.");
+          return;
+        }
+        // FASTA 업로드 시 genome 옵션 변경
+        const genomeOpt = this.fastaFile
+          ? {
+              id: this.fastaName || 'custom',
+              fastaURL: this.fastaFile,
+              indexURL: undefined,
+            }
+          : 'hg19';
+        console.log('IGV 옵션:', { locus: this.locus || "chr1:10000-10200", genome: genomeOpt });
+        const options = {
+          locus: this.locus || "chr1:10000-10200",
+          genome: genomeOpt,
+        };
+        try {
+          console.log('IGV 브라우저 생성 시작');
+          this.browser = await window.igv.createBrowser(igvDiv, options);
+          console.log('IGV 브라우저 생성 완료:', this.browser);
+          // 이전 좌표 저장용
+          // prevStartPos, prevEndPos는 data에 저장된 this.prevStartPos, this.prevEndPos 사용
+          this.browser.on("locuschange", (locus) => {
+            // locus 업데이트
+            this.locus = locus;
+            // locus 파싱
+            let locusStart, locusEnd;
+            if (typeof locus === 'string') {
+              const match = locus.match(/(chr[\w\d]+):(\d+)-(\d+)/);
+              if (!match) return;
+              locusStart = parseInt(match[2].replace(/,/g, ''), 10);
+              locusEnd = parseInt(match[3].replace(/,/g, ''), 10);
+            } else if (typeof locus === 'object' && locus.chr && locus.start && locus.end) {
+              locusStart = parseInt(String(locus.start).replace(/,/g, ''), 10);
+              locusEnd = parseInt(String(locus.end).replace(/,/g, ''), 10);
+            } else {
+              return;
+            }
+            // input 박스의 startPos, endPos 기준으로 ratio 계산
+            if (this.startPos !== null && this.endPos !== null) {
+              const startRatio = (this.startPos - locusStart) / (locusEnd - locusStart);
+              const endRatio = (this.endPos - locusStart) / (locusEnd - locusStart);
+              if (window.igvCustom && typeof window.igvCustom.setLineRatios === 'function') {
+                window.igvCustom.setLineRatios(startRatio, endRatio);
+              }
+            }
+          });
+          this.locus = options.locus;
+          // IGV, igvCustom 모두 준비된 후 최초 막대/염기서열 동기화
+          const syncInitialBlueLines = async () => {
+            if (window.igvCustom && typeof window.igvCustom.getLineRatios === 'function') {
+              // locus 파싱
+              let chrom, locusStart, locusEnd;
+              if (typeof this.locus === 'string') {
+                const match = this.locus.match(/(chr[\w\d]+):(\d+)-(\d+)/);
+                if (!match) return;
+                chrom = match[1];
+                locusStart = parseInt(match[2].replace(/,/g, ''), 10);
+                locusEnd = parseInt(match[3].replace(/,/g, ''), 10);
+              } else if (typeof this.locus === 'object' && this.locus.chr && this.locus.start && this.locus.end) {
+                chrom = this.locus.chr;
+                locusStart = parseInt(String(this.locus.start).replace(/,/g, ''), 10);
+                locusEnd = parseInt(String(this.locus.end).replace(/,/g, ''), 10);
+              } else {
+                return;
+              }
+              const { startRatio, endRatio } = window.igvCustom.getLineRatios();
+              const pos1 = Math.round(locusStart + (locusEnd - locusStart) * startRatio);
+              const pos2 = Math.round(locusStart + (locusEnd - locusStart) * endRatio);
+              const start = Math.min(pos1, pos2);
+              const end = Math.max(pos1, pos2);
+              this.startPos = start;
+              this.endPos = end;
+              if (end - start < 1) {
+                this.sequence = '';
+                this.displaySequence = '';
+                return;
+              }
+              // 염기서열 fetch
+              if (
+                this.browser.genome &&
+                this.browser.genome.sequence &&
+                typeof this.browser.genome.sequence.getSequence === 'function'
+              ) {
+                const seq = await this.browser.genome.sequence.getSequence(chrom, start, end);
+                this.sequence = seq || '';
+                this.displaySequence = this.isReverse ? this.getComplement(seq) : seq;
+              }
+            } else {
+              setTimeout(syncInitialBlueLines, 200);
+            }
+          };
+          syncInitialBlueLines();
+        } catch (error) {
+          console.error("IGV 브라우저 생성 중 오류:", error);
+        }
+      } catch (error) {
+        console.error("IGV 초기화 중 오류:", error);
+      }
+    },
+    // 파란 라인 위치 변경 이벤트 핸들러
+    async onBlueLinesChanged(e) {
+      if (!this.locus || !this.browser) {
+        this.sequence = 'locus/browser 없음';
+        this.displaySequence = 'locus/browser 없음';
+        this.startPos = null;
+        this.endPos = null;
+        if (window.igvCustom && typeof window.igvCustom.setMiniMapInfo === 'function') {
+          window.igvCustom.setMiniMapInfo(null, null, null);
+        }
+        return;
+      }
+      let chrom, locusStart, locusEnd;
+      if (typeof this.locus === 'string') {
+        const match = this.locus.match(/(chr[\w\d]+):(\d+)-(\d+)/);
+        if (!match) {
+          this.sequence = 'locus 파싱 실패';
+          this.displaySequence = 'locus 파싱 실패';
+          this.startPos = null;
+          this.endPos = null;
+          if (window.igvCustom && typeof window.igvCustom.setMiniMapInfo === 'function') {
+            window.igvCustom.setMiniMapInfo(null, null, null);
+          }
+          return;
+        }
+        chrom = match[1];
+        locusStart = parseInt(match[2].replace(/,/g, ''), 10);
+        locusEnd = parseInt(match[3].replace(/,/g, ''), 10);
+      } else if (typeof this.locus === 'object' && this.locus.chr && this.locus.start && this.locus.end) {
+        chrom = this.locus.chr;
+        locusStart = parseInt(String(this.locus.start).replace(/,/g, ''), 10);
+        locusEnd = parseInt(String(this.locus.end).replace(/,/g, ''), 10);
+      } else {
+        this.sequence = 'locus 파싱 실패';
+        this.displaySequence = 'locus 파싱 실패';
+        this.startPos = null;
+        this.endPos = null;
+        if (window.igvCustom && typeof window.igvCustom.setMiniMapInfo === 'function') {
+          window.igvCustom.setMiniMapInfo(null, null, null);
+        }
+        return;
+      }
+      const { startRatio, endRatio } = e.detail;
+      const pos1 = Math.round(locusStart + (locusEnd - locusStart) * startRatio);
+      const pos2 = Math.round(locusStart + (locusEnd - locusStart) * endRatio);
+      const start = Math.min(pos1, pos2);
+      const end = Math.max(pos1, pos2);
+      this.startPos = start;
+      this.endPos = end;
+      if (window.igvCustom && typeof window.igvCustom.setMiniMapInfo === 'function') {
+        window.igvCustom.setMiniMapInfo(chrom, start, end);
+      }
+      if (end - start < 1) {
+        this.sequence = '';
+        this.displaySequence = '';
+        return;
+      }
+      try {
+        if (
+          this.browser.genome &&
+          this.browser.genome.sequence &&
+          typeof this.browser.genome.sequence.getSequence === 'function'
+        ) {
+          const seq = await this.browser.genome.sequence.getSequence(chrom, start, end);
+          this.sequence = seq || '';
+          this.displaySequence = this.isReverse ? this.getComplement(seq) : seq;
+          return;
+        }
+        this.sequence = 'getSequence 없음(IGV 내부 구조 확인 필요)';
+        this.displaySequence = 'getSequence 없음(IGV 내부 구조 확인 필요)';
+      } catch {
+        this.sequence = '불러오기 실패';
+        this.displaySequence = '불러오기 실패';
+      }
+      // locus 이동 전 좌표 저장
+      this.prevStartPos = this.startPos;
+      this.prevEndPos = this.endPos;
+    },
+    reverseSequence() {
+      this.isReverse = !this.isReverse;
+      this.displaySequence = this.isReverse ? this.getComplement(this.sequence) : this.sequence;
+    },
+    getComplement(seq) {
+      if (!seq) return '';
+      return seq.replace(/[ATCG]/gi, c => {
+        switch (c.toUpperCase()) {
+          case 'A': return 'T';
+          case 'T': return 'A';
+          case 'C': return 'G';
+          case 'G': return 'C';
+          default: return c;
+        }
+      });
+    },
+    toggleDropdown() {
+      this.isDropdownOpen = !this.isDropdownOpen;
+    },
+    closeDropdown() {
+      this.isDropdownOpen = false;
+    },
+    handleClickOutside(event) {
+      const dropdown = this.$el.querySelector("#igv-example-api-dropdown");
+      const menu = this.$el.querySelector(".dropdown-menu");
+      if (
+        dropdown &&
+        menu &&
+        !dropdown.contains(event.target) &&
+        !menu.contains(event.target)
+      ) {
+        this.closeDropdown();
+      }
+    },
+    waitForIGV() {
+      return new Promise((resolve, reject) => {
+        let attempts = 0;
+        const maxAttempts = 100; // 10초 타임아웃
+        
+        const checkIGV = () => {
+          attempts++;
+          
+          if (typeof window.igv !== "undefined" && typeof window.igv.createBrowser === "function") {
+            console.log('IGV is ready');
+            resolve();
+          } else if (attempts >= maxAttempts) {
+            console.error('IGV loading timeout');
+            reject(new Error('IGV loading timeout'));
+          } else {
+            setTimeout(checkIGV, 100);
+          }
+        };
+        checkIGV();
+      });
+    },
+    loadCopyNumberTrack() {
+      if (this.browser) {
+        this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
+        this.browser.loadTrackList([
+          {
+            url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
+            indexed: false,
+            isLog: true,
+            name: "GBM Copy # (TCGA Broad GDAC)",
+          },
+        ]);
+      }
+      this.closeDropdown();
+    },
+    loadDbSnpTrack() {
+      if (this.browser) {
+        this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
+        this.browser.loadTrackList([
+          {
+            type: "annotation",
+            format: "bed",
+            url: "https://data.broadinstitute.org/igvdata/annotations/hg19/dbSnp/snp137.hg19.bed.gz",
+            indexURL:
+              "https://data.broadinstitute.org/igvdata/annotations/hg19/dbSnp/snp137.hg19.bed.gz.tbi",
+            visibilityWindow: 200000,
+            name: "dbSNP 137",
+          },
+        ]);
+      }
+      this.closeDropdown();
+    },
+    loadBigWigTrack() {
+      if (this.browser) {
+        this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
+        this.browser.loadTrackList([
+          {
+            type: "wig",
+            format: "bigwig",
+            url: "https://s3.amazonaws.com/igv.broadinstitute.org/data/hg19/encode/wgEncodeBroadHistoneGm12878H3k4me3StdSig.bigWig",
+            name: "Gm12878H3k4me3",
+          },
+        ]);
+      }
+      this.closeDropdown();
+    },
+    loadBamTrack() {
+      if (this.browser) {
+        this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
+        this.browser.loadTrackList([
+          {
+            type: "alignment",
+            format: "bam",
+            url: "https://1000genomes.s3.amazonaws.com/phase3/data/HG02450/alignment/HG02450.mapped.ILLUMINA.bwa.ACB.low_coverage.20120522.bam",
+            indexURL:
+              "https://1000genomes.s3.amazonaws.com/phase3/data/HG02450/alignment/HG02450.mapped.ILLUMINA.bwa.ACB.low_coverage.20120522.bam.bai",
+            name: "HG02450",
+          },
+        ]);
+      }
+      this.closeDropdown();
+    },
+    // input 박스에서 직접 좌표 입력 시 호출
+    onInputPosChange(which, val) {
+      let locusStart, locusEnd, chrom;
+      if (typeof this.locus === 'string') {
+        const match = this.locus.match(/(chr[\w\d]+):(\d+)-(\d+)/);
+        if (!match) return;
+        chrom = match[1];
+        locusStart = parseInt(match[2].replace(/,/g, ''), 10);
+        locusEnd = parseInt(match[3].replace(/,/g, ''), 10);
+      } else if (typeof this.locus === 'object' && this.locus.chr && this.locus.start && this.locus.end) {
+        chrom = this.locus.chr;
+        locusStart = parseInt(String(this.locus.start).replace(/,/g, ''), 10);
+        locusEnd = parseInt(String(this.locus.end).replace(/,/g, ''), 10);
+      } else {
+        return;
+      }
+      let start = this.startPos, end = this.endPos;
+      if (which === 'start') {
+        start = Number(val);
+      } else {
+        end = Number(val);
+      }
+      // 범위 보정
+      if (start >= end) return;
+      // ratio 계산
+      const startRatio = (start - locusStart) / (locusEnd - locusStart);
+      const endRatio = (end - locusStart) / (locusEnd - locusStart);
+      if (window.igvCustom && typeof window.igvCustom.setLineRatios === 'function') {
+        window.igvCustom.setLineRatios(startRatio, endRatio);
+      }
+      if (window.igvCustom && typeof window.igvCustom.setMiniMapInfo === 'function') {
+        window.igvCustom.setMiniMapInfo(chrom, start, end);
+      }
+    },
+    // FASTA 파일 업로드 핸들러
+    async onFastaUpload(e) {
+      const file = e.target.files[0];
+      if (!file) return;
+      
+      console.log('FASTA 파일 업로드:', file.name, file.size);
+      this.fastaName = file.name.replace(/\.[^/.]+$/, "");
+      // 파란 범위 임시 저장
+      const prevStartPos = this.startPos;
+      const prevEndPos = this.endPos;
+      try {
+        // 서버에 파일 업로드
+        const formData = new FormData();
+        formData.append('file', file);
+        
+        console.log('서버에 파일 업로드 중...');
+        if (typeof window !== 'undefined') {
+          const { data: _data, error: _error } = await useApi('/api/fasta/upload', {
+            method: 'post',
+            body: formData,
+            headers: {
+              // 'Content-Type'은 브라우저가 자동으로 설정하므로 명시하지 않음
+            }
+          })
+        if (!response.ok) {
+          throw new Error(`서버 업로드 실패: ${response.status}`);
+        }
+        
+        
+        const result = await response.json();
+        console.log('서버 업로드 완료:', result);
+        
+        // 원격 URL 사용
+        this.fastaFile = result.remoteUrl;
+        
+        // IGV 브라우저 완전 재생성
+        if (this.browser) {
+          if (typeof this.browser.removeAllTracks === 'function') {
+            this.browser.removeAllTracks();
+          }
+          this.browser = null;
+        }
+        // igvDiv 완전히 비우기
+        const igvDiv = this.$refs.igvDiv;
+        if (igvDiv) {
+          igvDiv.innerHTML = '';
+        }
+        // locus, 시퀀스 등 초기화
+        this.locus = "chr1:1-100";
+        this.sequence = '';
+        this.displaySequence = '';
+        this.startPos = null;
+        this.endPos = null;
+        console.log('IGV 재초기화 시작');
+        await this.initIGV();
+        // IGV 재초기화 후 파란 범위 복원 (딜레이 추가)
+        setTimeout(() => {
+          if (prevStartPos !== null && prevEndPos !== null && window.igvCustom && typeof window.igvCustom.setLineRatios === 'function') {
+            // locus 파싱
+            let locusStart = 1, locusEnd = 100;
+            if (typeof this.locus === 'string') {
+              const match = this.locus.match(/(chr[\w\d]+):(\d+)-(\d+)/);
+              if (match) {
+                locusStart = parseInt(match[2].replace(/,/g, ''), 10);
+                locusEnd = parseInt(match[3].replace(/,/g, ''), 10);
+              }
+            }
+            const startRatio = (prevStartPos - locusStart) / (locusEnd - locusStart);
+            const endRatio = (prevEndPos - locusStart) / (locusEnd - locusStart);
+            window.igvCustom.setLineRatios(startRatio, endRatio);
+            if (typeof window.waitForIGVAndInit === 'function') {
+              window.waitForIGVAndInit();
+            }
+          }
+        }, 500);
+      }
+      } catch (error) {
+        console.error('파일 업로드 오류:', error);
+        alert(`파일 업로드 실패: ${error.message}\n\n서버 API가 설정되지 않았거나, 파일이 너무 클 수 있습니다.`);
+        
+        // 서버 업로드 실패 시 기존 방식으로 폴백
+        if (file.size <= 100 * 1024 * 1024) { // 100MB 이하만
+          this.largeFile = file;
+          this.showSplitOption = true;
+        }
+      }
+    },
+    // 대용량 파일 분할
+    async splitLargeFile() {
+      if (!this.largeFile) return;
+      
+      try {
+        const chunkSize = 50 * 1024 * 1024; // 50MB 청크
+        const totalChunks = Math.ceil(this.largeFile.size / chunkSize);
+        
+        alert(`파일을 ${totalChunks}개 청크로 분할합니다. 각 청크는 약 50MB입니다.`);
+        
+        for (let i = 0; i < totalChunks; i++) {
+          const start = i * chunkSize;
+          const end = Math.min(start + chunkSize, this.largeFile.size);
+          const chunk = this.largeFile.slice(start, end);
+          
+          // 청크를 파일로 다운로드
+          const url = URL.createObjectURL(chunk);
+          const a = document.createElement('a');
+          a.href = url;
+          a.download = `${this.largeFile.name.replace(/\.[^/.]+$/, "")}_part${i + 1}.fasta`;
+          document.body.appendChild(a);
+          a.click();
+          document.body.removeChild(a);
+          URL.revokeObjectURL(url);
+          
+          // 진행률 표시
+          const progress = ((i + 1) / totalChunks * 100).toFixed(1);
+          console.log(`분할 진행률: ${progress}%`);
+        }
+        
+        alert(`파일 분할 완료! ${totalChunks}개의 파일이 다운로드되었습니다.\n각 파일을 개별적으로 업로드하여 사용하세요.`);
+        this.showSplitOption = false;
+        this.largeFile = null;
+        
+      } catch (error) {
+        console.error('파일 분할 중 오류:', error);
+        alert('파일 분할 중 오류가 발생했습니다.');
+      }
+    },
+    // 범위 내 염기서열 교체
+    replaceSequenceInRange() {
+      if (!this.sequence || !this.editSequence) {
+        alert('염기서열 또는 입력값이 없습니다.');
+        return;
+      }
+      if (this.editSequence.length !== (this.endPos - this.startPos)) {
+        alert('입력한 염기서열 길이가 범위와 일치해야 합니다.');
+        return;
+      }
+      // 기존 염기서열을 교체
+      // 실제 FASTA 파일은 수정하지 않고, 화면에만 반영
+      this.sequence = this.editSequence;
+      this.displaySequence = this.isReverse ? this.getComplement(this.sequence) : this.sequence;
+      alert('범위 내 염기서열이 변경되었습니다. (화면에만 반영)');
+    },
+    // 서버 파일 목록 토글
+    toggleServerFilesDropdown() {
+      this.isServerFilesDropdownOpen = !this.isServerFilesDropdownOpen;
+      if (this.isServerFilesDropdownOpen) {
+        this.loadServerFiles();
+      }
+    },
+         // 서버 파일 목록 로드
+     async loadServerFiles() {
+       this.loadingFiles = true;
+       try {
+         const response = await fetch('http://localhost/api/fasta/files');
+         if (!response.ok) {
+           throw new Error(`서버 파일 목록 로드 실패: ${response.status}`);
+         }
+         const result = await response.json();
+         this.serverFiles = Array.isArray(result) && Array.isArray(result[0]) ? result[0] : (Array.isArray(result) ? result : []);
+       } catch (error) {
+         console.error('서버 파일 목록 로드 중 오류:', error);
+         this.serverFiles = [];
+         alert(`서버 파일 목록을 불러오는데 실패했습니다: ${error.message}`);
+       } finally {
+         this.loadingFiles = false;
+       }
+     },
+         // 서버 파일 선택
+     selectServerFile(file) {
+       const prevStartPos = this.startPos;
+       const prevEndPos = this.endPos;
+       this.selectedServerFile = file;
+       this.fastaFile = file.fileUrl; // 선택된 파일의 URL을 fastaFile에 저장
+       this.fastaName = file.fileName; // 파일명 업데이트
+      
+      // IGV 브라우저 완전 재생성
+      if (this.browser) {
+        if (typeof this.browser.removeAllTracks === 'function') {
+          this.browser.removeAllTracks();
+        }
+        this.browser = null;
+      }
+      // igvDiv 완전히 비우기
+      const igvDiv = this.$refs.igvDiv;
+      if (igvDiv) {
+        igvDiv.innerHTML = '';
+      }
+      // locus, 시퀀스 등 초기화
+      this.locus = "chr1:1-100";
+      this.sequence = '';
+      this.displaySequence = '';
+      this.startPos = null;
+      this.endPos = null;
+      console.log('IGV 재초기화 시작');
+      this.initIGV().then(() => {
+        // IGV 재초기화 후 파란 범위 복원 (딜레이 추가)
+        setTimeout(() => {
+          if (prevStartPos !== null && prevEndPos !== null && window.igvCustom && typeof window.igvCustom.setLineRatios === 'function') {
+            // locus 파싱
+            let locusStart = 1, locusEnd = 100;
+            if (typeof this.locus === 'string') {
+              const match = this.locus.match(/(chr[\w\d]+):(\d+)-(\d+)/);
+              if (match) {
+                locusStart = parseInt(match[2].replace(/,/g, ''), 10);
+                locusEnd = parseInt(match[3].replace(/,/g, ''), 10);
+              }
+            }
+            const startRatio = (prevStartPos - locusStart) / (locusEnd - locusStart);
+            const endRatio = (prevEndPos - locusStart) / (locusEnd - locusStart);
+            window.igvCustom.setLineRatios(startRatio, endRatio);
+            if (typeof window.igvCustom.setupLines === 'function') {
+              window.igvCustom.setupLines();
+            }
+            if (typeof window.waitForIGVAndInit === 'function') {
+              window.waitForIGVAndInit();
+            }
+          }
+        }, 500);
+      });
+      this.isServerFilesDropdownOpen = false; // 드롭다운 닫기
+    },
+    // 파일 크기 포맷
+    formatFileSize(bytes) {
+      if (bytes === 0) return '0 Bytes';
+      const k = 1024;
+      const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+      const i = Math.floor(Math.log(bytes) / Math.log(k));
+      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    },
+    // 날짜 포맷
+    formatDate(timestamp) {
+      const date = new Date(timestamp);
+      return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
+    }
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2c3e50;
+}
+
+pre {
+  padding: 10px;
+  border-radius: 4px;
+}
+
+.reverse-active {
+  background: #e6f0ff !important;
+  color: #0056b3 !important;
+  font-weight: bold;
+  border: 2px solid #0056b3 !important;
+  box-shadow: 0 0 4px #b3d1ff;
+}
+
+.igv-control-btn.reverse-active {
+  background: #0056b3 !important;
+  color: #fff !important;
+  border: 2px solid #003366 !important;
+}
+
+.nav-tabs {
+  margin-bottom: 20px;
+}
+
+.tab-content {
+  padding-top: 20px;
+}
+
+.igv-control-input {
+  border: 1.5px solid #007bff;
+  padding: 4px 8px;
+  border-radius: 5px;
+  font-size: 15px;
+  outline: none;
+  transition: border 0.2s;
+}
+
+.igv-control-input:focus {
+  border: 2px solid #0056b3;
+}
+
+.igv-control-btn {
+  border: 1.5px solid #007bff;
+  background: #f5faff;
+  color: #007bff;
+  border-radius: 5px;
+  padding: 6px 16px;
+  font-size: 15px;
+  cursor: pointer;
+  transition: background 0.2s, border 0.2s, color 0.2s;
+}
+
+.igv-control-btn:hover {
+  background: #007bff;
+  color: #fff;
+  border: 2px solid #0056b3;
+}
+
+/* 서버 파일 목록 드롭다운 스타일 */
+.server-files-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
+  padding: 5px 0;
+  margin-top: 5px;
+  z-index: 1000;
+  max-height: 300px; /* 스크롤 가능하도록 높이 제한 */
+  overflow-y: auto;
+  border-radius: 4px;
+}
+
+.server-files-dropdown .dropdown-item {
+  padding: 8px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.server-files-dropdown .dropdown-item:hover {
+  background-color: #f0f0f0;
+}
+
+.server-files-dropdown .dropdown-item.selected {
+  background-color: #e6f0ff;
+  font-weight: bold;
+  color: #0056b3;
+}
+
+.server-files-dropdown .file-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 20px;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.server-files-dropdown .file-item:hover {
+  background-color: #f0f0f0;
+}
+
+.server-files-dropdown .file-item.selected {
+  background-color: #e6f0ff;
+  font-weight: bold;
+  color: #0056b3;
+}
+
+.server-files-dropdown .file-name {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.server-files-dropdown .file-info {
+  font-size: 0.8em;
+  color: #666;
+}
+</style> 
\ No newline at end of file
diff --git a/pages/test/pathway.vue b/pages/test/pathway.vue
new file mode 100644
index 0000000..defb399
--- /dev/null
+++ b/pages/test/pathway.vue
@@ -0,0 +1,247 @@
+<template>
+  <div style="position: relative;">
+    <h2>KEGG Pathway Viewer (Compact Overlay)</h2>
+    <div ref="cyContainer" style="width: 100%; height: 800px; border: 1px solid #ccc; position: relative;"></div>
+    <div ref="overlayContainer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000;"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+import cytoscape from 'cytoscape'
+import { Chart, registerables } from 'chart.js'
+
+Chart.register(...registerables)
+
+const cyContainer = ref(null)
+const overlayContainer = ref(null)
+const chartMap = new Map()
+
+function toRenderedPosition(pos, cy) {
+  const zoom = cy.zoom()
+  const pan = cy.pan()
+  return {
+    x: pos.x * zoom + pan.x,
+    y: pos.y * zoom + pan.y
+  }
+}
+
+onMounted(async () => {
+  await nextTick()
+
+  const resizeOverlay = () => {
+    if (!cyContainer.value || !overlayContainer.value) return
+    overlayContainer.value.style.width = cyContainer.value.offsetWidth + 'px'
+    overlayContainer.value.style.height = cyContainer.value.offsetHeight + 'px'
+  }
+
+  resizeOverlay()
+  window.addEventListener('resize', resizeOverlay)
+
+  const res = await fetch('/pon00061.xml')
+  const xmlText = await res.text()
+  const parser = new DOMParser()
+  const xmlDoc = parser.parseFromString(xmlText, 'application/xml')
+
+  const scale = 5
+  const entryMap = new Map()
+  const entryDataMap = new Map()
+  const parentMap = new Map()
+
+  const entries = Array.from(xmlDoc.getElementsByTagName('entry'))
+  for (const entry of entries) {
+    const id = entry.getAttribute('id')
+    entryDataMap.set(id, entry)
+    if (entry.getAttribute('type') === 'group') {
+      const components = entry.getElementsByTagName('component')
+      for (const comp of components) {
+        const childId = comp.getAttribute('id')
+        parentMap.set(childId, id)
+      }
+    }
+  }
+
+  const nodes = entries.map(entry => {
+    const id = entry.getAttribute('id')
+    const graphics = entry.getElementsByTagName('graphics')[0]
+    const x = parseFloat(graphics?.getAttribute('x') || '0') * scale
+    const y = parseFloat(graphics?.getAttribute('y') || '0') * scale
+    const label = graphics?.getAttribute('name') || id
+    const fgColor = graphics?.getAttribute('fgcolor') || '#000000'
+    const bgColor = graphics?.getAttribute('bgcolor') || '#ffffff'
+    const entryType = entry.getAttribute('type')
+    const shapeType = entryType === 'compound' ? 'compound' : entryType === 'group' ? 'group' : entryType === 'ortholog' ? 'ortholog' : 'gene'
+    const parent = parentMap.get(id)
+
+    const node = {
+      data: {
+        id,
+        label,
+        link: entry.getAttribute('link') || null,
+        reaction: entry.getAttribute('reaction') || null
+      },
+      position: { x, y },
+      classes: shapeType,
+      style: {
+        color: fgColor,
+        'background-color': bgColor
+      }
+    }
+    if (parent) node.data.parent = parent
+    entryMap.set(id, true)
+    return node
+  })
+
+  function resolveToRealNode(id) {
+    if (!entryMap.has(id)) return null
+    const entry = entryDataMap.get(id)
+    if (entry?.getAttribute('type') === 'group') {
+      const components = Array.from(entry.getElementsByTagName('component'))
+      if (components.length > 0) return components[0].getAttribute('id')
+    }
+    return id
+  }
+
+  const edges = []
+  const relations = Array.from(xmlDoc.getElementsByTagName('relation'))
+  relations.forEach((rel, i) => {
+    let source = resolveToRealNode(rel.getAttribute('entry1'))
+    let target = resolveToRealNode(rel.getAttribute('entry2'))
+    const type = rel.getAttribute('type')
+    const subtypes = Array.from(rel.getElementsByTagName('subtype'))
+    const compoundSubtype = subtypes.find(s => s.getAttribute('name') === 'compound')
+    if (compoundSubtype) {
+      const compoundId = compoundSubtype.getAttribute('value')
+      if (entryMap.has(source) && entryMap.has(target) && entryMap.has(compoundId)) {
+        edges.push(
+          { data: { id: `edge${i}-1`, source, target: compoundId, label: 'via compound' } },
+          { data: { id: `edge${i}-2`, source: compoundId, target, label: 'via compound' } }
+        )
+      }
+    } else {
+      if (entryMap.has(source) && entryMap.has(target)) {
+        edges.push({ data: { id: `edge${i}`, source, target, label: type } })
+      }
+    }
+  })
+
+  const reactions = Array.from(xmlDoc.getElementsByTagName('reaction'))
+  reactions.forEach((reaction, i) => {
+    const reactionType = reaction.getAttribute('type')
+    const reactionLabel = reaction.getAttribute('name') || `reaction${i}`
+    const substrates = Array.from(reaction.getElementsByTagName('substrate'))
+    const products = Array.from(reaction.getElementsByTagName('product'))
+    substrates.forEach(substrate => {
+      const sid = resolveToRealNode(substrate.getAttribute('id'))
+      products.forEach(product => {
+        const pid = resolveToRealNode(product.getAttribute('id'))
+        if (entryMap.has(sid) && entryMap.has(pid)) {
+          edges.push({ data: { id: `reaction-${i}-${sid}-${pid}`, source: sid, target: pid, label: `${reactionLabel} (${reactionType})` } })
+          if (reactionType === 'reversible') {
+            edges.push({ data: { id: `reaction-${i}-${pid}-${sid}`, source: pid, target: sid, label: `${reactionLabel} (reversible)` } })
+          }
+        }
+      })
+    })
+  })
+
+  const cy = cytoscape({
+    container: cyContainer.value,
+    elements: { nodes, edges },
+    style: [
+      { selector: 'node', style: { label: 'data(label)', 'text-valign': 'center', 'text-halign': 'center', shape: 'rectangle', 'font-size': 10, 'border-width': 1, 'border-color': '#333' } },
+      { selector: '.ortholog', style: { 'background-color': '#ccffcc', shape: 'round-rectangle', 'border-width': 2, 'border-color': '#339933' } },
+      { selector: '$node > node', style: { 'background-color': '#f3f3f3', 'border-width': 2, 'border-color': '#666', shape: 'roundrectangle' } },
+      { selector: '.compound', style: { 'background-color': '#ffe135', shape: 'ellipse' } },
+      { selector: 'edge', style: { width: 2, 'line-color': '#888', 'target-arrow-shape': 'triangle', 'label': 'data(label)', 'font-size': 8 } }
+    ],
+    layout: { name: 'preset' }
+  })
+
+  cy.ready(() => {
+    cy.fit(cy.elements(), 100)
+    createNodeOverlays(cy)
+  })
+
+  cy.on('render', () => {
+    requestAnimationFrame(() => updateOverlayPositions(cy))
+  })
+})
+
+function createNodeOverlays(cy) {
+  cy.nodes().forEach(node => {
+    const pos = node.renderedPosition()
+    const id = node.id()
+
+    const wrapper = document.createElement('div')
+    wrapper.style.position = 'absolute'
+    wrapper.style.left = `${pos.x + 30}px`
+    wrapper.style.top = `${pos.y - 40}px`
+    wrapper.style.width = '20px'
+    wrapper.style.height = '80px'
+    wrapper.style.background = 'rgba(255,255,255,0.9)'
+    wrapper.style.fontSize = '6px'
+    wrapper.style.border = '1px solid #ccc'
+    wrapper.style.borderRadius = '2px'
+    wrapper.style.overflow = 'hidden'
+    wrapper.style.pointerEvents = 'none'
+    wrapper.style.zIndex = '9999' // 보장
+
+    const table = document.createElement('table')
+    table.style.borderCollapse = 'collapse'
+    table.style.width = '100%'
+    for (let i = 0; i < 7; i++) {
+      const tr = document.createElement('tr')
+      for (let j = 0; j < 2; j++) {
+        const td = document.createElement('td')
+        td.textContent = '·'
+        td.style.padding = '0'
+        td.style.fontSize = '6px'
+        td.style.textAlign = 'center'
+        tr.appendChild(td)
+      }
+      table.appendChild(tr)
+    }
+
+    const canvas = document.createElement('canvas')
+    canvas.width = 16
+    canvas.height = 16
+    canvas.style.margin = '2px auto 0'
+    canvas.style.display = 'block'
+
+    wrapper.appendChild(table)
+    wrapper.appendChild(canvas)
+    overlayContainer.value.appendChild(wrapper)
+
+    const ctx = canvas.getContext('2d')
+    const chart = new Chart(ctx, {
+      type: 'doughnut',
+      data: {
+        labels: ['A', 'B'],
+        datasets: [{ data: [30, 70], backgroundColor: ['#ff6384', '#36a2eb'] }]
+      },
+      options: {
+        responsive: false,
+        plugins: { legend: { display: false }, tooltip: { enabled: false } },
+        cutout: '60%',
+        animation: false
+      }
+    })
+
+    chartMap.set(id, { wrapper, chart })
+  })
+}
+
+function updateOverlayPositions(cy) {
+  cy.nodes().forEach(node => {
+    const entry = chartMap.get(node.id())
+    if (entry) {
+      const pos = node.renderedPosition()
+      entry.wrapper.style.left = `${pos.x + 30}px`
+      entry.wrapper.style.top = `${pos.y - 40}px`
+    }
+  })
+}
+
+
+</script>
diff --git a/pages/test/pathway2.vue b/pages/test/pathway2.vue
new file mode 100644
index 0000000..7c1fb2f
--- /dev/null
+++ b/pages/test/pathway2.vue
@@ -0,0 +1,263 @@
+<template>
+  <div>
+    <h2>KEGG Pathway Viewer (Cytoscape.js)</h2>
+    <div ref="cyContainer" style="width: 100%; height: 800px; border: 1px solid #ccc;"></div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, nextTick } from 'vue'
+import cytoscape from 'cytoscape'
+
+const cyContainer = ref(null)
+
+onMounted(async () => {
+  await nextTick()
+
+  const res = await fetch('/pon00061.xml')
+  const xmlText = await res.text()
+  const parser = new DOMParser()
+  const xmlDoc = parser.parseFromString(xmlText, 'application/xml')
+
+  const scale = 3
+
+  const entryMap = new Map()
+  const entryDataMap = new Map()
+  const parentMap = new Map()
+
+  const entries = Array.from(xmlDoc.getElementsByTagName('entry'))
+
+  // 1. 부모-자식 관계 정리
+  for (const entry of entries) {
+    const id = entry.getAttribute('id')
+    entryDataMap.set(id, entry)
+
+    if (entry.getAttribute('type') === 'group') {
+      const components = entry.getElementsByTagName('component')
+      for (const comp of components) {
+        const childId = comp.getAttribute('id')
+        parentMap.set(childId, id)
+      }
+    }
+  }
+
+  // 2. 노드 생성
+  const nodes = entries.map(entry => {
+    const id = entry.getAttribute('id')
+    const graphics = entry.getElementsByTagName('graphics')[0]
+    const x = parseFloat(graphics?.getAttribute('x') || '0') * scale
+    const y = parseFloat(graphics?.getAttribute('y') || '0') * scale
+    const label = graphics?.getAttribute('name') || id
+    const fgColor = graphics?.getAttribute('fgcolor') || '#000000'
+    const bgColor = graphics?.getAttribute('bgcolor') || '#ffffff'
+    const shapeType = graphics?.getAttribute('type') === 'circle' ? 'compound' : 'gene'
+    const parent = parentMap.get(id)
+
+    const node = {
+      data: {
+        id,
+        label,
+        link: entry.getAttribute('link') || null,
+        reaction: entry.getAttribute('reaction') || null
+      },
+      position: { x, y },
+      classes: shapeType,
+      style: {
+        'color': fgColor,
+        'background-color': bgColor
+      }
+    }
+
+    // parent 설정
+    if (parent) node.data.parent = parent
+
+    // ortholog 스타일 구분
+    if (entry.getAttribute('type') === 'ortholog') {
+      node.classes += ' ortholog'
+    }
+
+    entryMap.set(id, true)
+    return node
+  })
+
+  // 3. group 노드가 edge에 등장할 경우 첫 자식으로 대체
+  function resolveToRealNode(id) {
+    if (!entryMap.has(id)) return null
+    const entry = entryDataMap.get(id)
+    if (entry?.getAttribute('type') === 'group') {
+      const components = Array.from(entry.getElementsByTagName('component'))
+      if (components.length > 0) return components[0].getAttribute('id')
+    }
+    return id
+  }
+
+  const edges = []
+
+  // 4. relation 기반 edge 처리
+  const relations = Array.from(xmlDoc.getElementsByTagName('relation'))
+
+  relations.forEach((rel, i) => {
+    let source = resolveToRealNode(rel.getAttribute('entry1'))
+    let target = resolveToRealNode(rel.getAttribute('entry2'))
+    const type = rel.getAttribute('type')
+
+    const subtypes = Array.from(rel.getElementsByTagName('subtype'))
+    const compoundSubtype = subtypes.find(s => s.getAttribute('name') === 'compound')
+
+    if (compoundSubtype) {
+      const compoundId = compoundSubtype.getAttribute('value')
+      if (entryMap.has(source) && entryMap.has(target) && entryMap.has(compoundId)) {
+        edges.push(
+          {
+            data: {
+              id: `edge${i}-1`,
+              source,
+              target: compoundId,
+              label: 'via compound'
+            }
+          },
+          {
+            data: {
+              id: `edge${i}-2`,
+              source: compoundId,
+              target,
+              label: 'via compound'
+            }
+          }
+        )
+      }
+    } else {
+      if (entryMap.has(source) && entryMap.has(target)) {
+        edges.push({
+          data: {
+            id: `edge${i}`,
+            source,
+            target,
+            label: type
+          }
+        })
+      }
+    }
+  })
+
+  // 5. reaction 기반 edge 처리
+  const reactions = Array.from(xmlDoc.getElementsByTagName('reaction'))
+
+  reactions.forEach((reaction, i) => {
+    const reactionType = reaction.getAttribute('type')
+    const reactionLabel = reaction.getAttribute('name') || `reaction${i}`
+
+    const substrates = Array.from(reaction.getElementsByTagName('substrate'))
+    const products = Array.from(reaction.getElementsByTagName('product'))
+
+    substrates.forEach(substrate => {
+      const sid = resolveToRealNode(substrate.getAttribute('id'))
+      products.forEach(product => {
+        const pid = resolveToRealNode(product.getAttribute('id'))
+        if (entryMap.has(sid) && entryMap.has(pid)) {
+          edges.push({
+            data: {
+              id: `reaction-${i}-${sid}-${pid}`,
+              source: sid,
+              target: pid,
+              label: `${reactionLabel} (${reactionType})`
+            }
+          })
+          if (reactionType === 'reversible') {
+            edges.push({
+              data: {
+                id: `reaction-${i}-${pid}-${sid}`,
+                source: pid,
+                target: sid,
+                label: `${reactionLabel} (reversible)`
+              }
+            })
+          }
+        }
+      })
+    })
+  })
+
+  // 6. Cytoscape 초기화
+  const cy = cytoscape({
+    container: cyContainer.value,
+    elements: { nodes, edges },
+    style: [
+      {
+        selector: 'node',
+        style: {
+          label: 'data(label)',
+          'text-valign': 'center',
+          'text-halign': 'center',
+          'shape': 'rectangle',
+          'padding': '6px',
+          'text-wrap': 'wrap',
+          'color': '#000',
+          'font-size': 10,
+          'border-width': 1,
+          'border-color': '#333'
+        }
+      },
+      {
+        selector: '.ortholog',
+        style: {
+          'background-color': '#ccffcc',
+          'shape': 'round-rectangle',
+          'border-width': 2,
+          'border-color': '#339933'
+        }
+      },
+      {
+        selector: '$node > node',
+        style: {
+          'background-color': '#f3f3f3',
+          'border-width': 2,
+          'border-color': '#666',
+          'shape': 'roundrectangle',
+          'text-valign': 'top',
+          'text-halign': 'center',
+          'font-weight': 'bold',
+          'padding': '20px'
+        }
+      },
+      {
+        selector: '.compound',
+        style: {
+          'background-color': '#ffe135',
+          'shape': 'ellipse'
+        }
+      },
+      {
+        selector: 'edge',
+        style: {
+          width: 2,
+          'line-color': '#888',
+          'target-arrow-color': '#888',
+          'target-arrow-shape': 'triangle',
+          'curve-style': 'bezier',
+          'label': 'data(label)',
+          'font-size': 8,
+          'text-background-opacity': 1,
+          'text-background-color': '#fff',
+          'text-background-shape': 'roundrectangle',
+          'text-rotation': 'autorotate'
+        }
+      }
+    ],
+    layout: { name: 'preset' }
+  })
+
+  cy.ready(() => {
+    cy.fit(cy.elements(), 100)
+  })
+
+  // 7. 노드 클릭 시 KEGG 링크 열기
+  cy.on('tap', 'node', (evt) => {
+    const node = evt.target
+    const link = node.data('link')
+    if (link) {
+      window.open(link, '_blank')
+    }
+  })
+})
+</script>
diff --git a/pages/test/pathway3.vue b/pages/test/pathway3.vue
new file mode 100644
index 0000000..d7890b2
--- /dev/null
+++ b/pages/test/pathway3.vue
@@ -0,0 +1,254 @@
+<template>
+    <div ref="cyContainer" class="cy-container"></div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, nextTick } from 'vue'
+  import cytoscape from 'cytoscape'
+  
+  if (typeof document !== 'undefined') {
+    const script = document.createElement('script');
+    script.src = '/dist/cy_custom.js';
+    script.onload = () => {
+      window.igvCustomLoaded = true;
+    };
+    document.head.appendChild(script);
+  }
+
+  let CytoscapeOverlays = null
+
+    if (import.meta.client) {
+    const useOverlay = (await import('@/composables/useOverlay')).default
+    CytoscapeOverlays = await useOverlay()
+    }
+
+  const cyContainer = ref(null)
+  
+  onMounted(async () => {
+    await nextTick()
+
+    cytoscape.use(CytoscapeOverlays.default)
+  
+    const res = await fetch('/pon00061.xml')
+    const xmlText = await res.text()
+    const parser = new DOMParser()
+    const xmlDoc = parser.parseFromString(xmlText, 'application/xml')
+  
+    const scale = 3
+    const entryMap = new Map()
+    const entryDataMap = new Map()
+    const parentMap = new Map()
+  
+    const entries = Array.from(xmlDoc.getElementsByTagName('entry'))
+  
+    for (const entry of entries) {
+      const id = entry.getAttribute('id')
+      entryDataMap.set(id, entry)
+      if (entry.getAttribute('type') === 'group') {
+        const components = entry.getElementsByTagName('component')
+        for (const comp of components) {
+          parentMap.set(comp.getAttribute('id'), id)
+        }
+      }
+    }
+  
+    const nodes = entries.map(entry => {
+      const id = entry.getAttribute('id')
+      const graphics = entry.getElementsByTagName('graphics')[0]
+      const x = parseFloat(graphics?.getAttribute('x') || '0') * scale
+      const y = parseFloat(graphics?.getAttribute('y') || '0') * scale
+      const label = graphics?.getAttribute('name') || id
+      const fgColor = graphics?.getAttribute('fgcolor') || '#000000'
+      const bgColor = graphics?.getAttribute('bgcolor') || '#ffffff'
+      const parent = parentMap.get(id)
+  
+      const valueA = Math.floor(Math.random() * 50)
+      const valueB = 100 - valueA
+  
+      const node = {
+        data: {
+          id,
+          label,
+          link: entry.getAttribute('link') || null,
+          reaction: entry.getAttribute('reaction') || null,
+          chartData: [valueA, valueB]
+        },
+        position: { x, y },
+        classes: entry.getAttribute('type'),
+        style: {
+          color: fgColor,
+          'background-color': bgColor
+        }
+      }
+  
+      if (parent) node.data.parent = parent
+      entryMap.set(id, true)
+      return node
+    })
+  
+    function resolveToRealNode(id) {
+      if (!entryMap.has(id)) return null
+      const entry = entryDataMap.get(id)
+      if (entry?.getAttribute('type') === 'group') {
+        const components = Array.from(entry.getElementsByTagName('component'))
+        if (components.length > 0) return components[0].getAttribute('id')
+      }
+      return id
+    }
+  
+    const edges = []
+    const relations = Array.from(xmlDoc.getElementsByTagName('relation'))
+    relations.forEach((rel, i) => {
+      const source = resolveToRealNode(rel.getAttribute('entry1'))
+      const target = resolveToRealNode(rel.getAttribute('entry2'))
+      const type = rel.getAttribute('type')
+      const subtypes = Array.from(rel.getElementsByTagName('subtype'))
+      const compoundSubtype = subtypes.find(s => s.getAttribute('name') === 'compound')
+
+      if (compoundSubtype) {
+        const compoundId = compoundSubtype.getAttribute('value')
+        if (entryMap.has(source) && entryMap.has(target) && entryMap.has(compoundId)) {
+          const sourceConst = source;
+          const targetConst = target;
+          edges.push(
+            {
+              data: {
+                id: `edge${i}-1`,
+                source: sourceConst,
+                target: compoundId,
+                label: 'via compound'
+              }
+            },
+            {
+              data: {
+                id: `edge${i}-2`,
+                source: compoundId,
+                target: targetConst,
+                label: 'via compound'
+              }
+            }
+          )
+        }
+      } else {
+        if (entryMap.has(source) && entryMap.has(target)) {
+          const sourceConst = source;
+          const targetConst = target;
+          edges.push({
+            data: {
+              id: `edge${i}`,
+              source: sourceConst,
+              target: targetConst,
+              label: type
+            }
+          })
+        }
+      }
+    })
+  
+    const reactions = Array.from(xmlDoc.getElementsByTagName('reaction'))
+    reactions.forEach((reaction, i) => {
+      const reactionType = reaction.getAttribute('type')
+      const substrates = Array.from(reaction.getElementsByTagName('substrate'))
+      const products = Array.from(reaction.getElementsByTagName('product'))
+      substrates.forEach(substrate => {
+        const sid = resolveToRealNode(substrate.getAttribute('id'))
+        products.forEach(product => {
+          const pid = resolveToRealNode(product.getAttribute('id'))
+          if (entryMap.has(sid) && entryMap.has(pid)) {
+            edges.push({
+              data: {
+                id: `reaction-${i}-${sid}-${pid}`,
+                source: sid,
+                target: pid,
+                label: `${reactionType}`
+              }
+            })
+          }
+        })
+      })
+    })
+  
+    // 원형(도넛/파이) 차트 overlay 생성 (흰색 라인 없이)
+    const pieOverlay = CytoscapeOverlays.renderSymbol({
+      symbol: node => {
+        const data = node.data('chartData') || [50, 50]
+        return {
+          draw: (ctx, size) => {
+            const total = data[0] + data[1]
+            const r = Math.sqrt(size / Math.PI)
+            const innerR = r * 0.5
+            const startAngle = 0
+            const angleA = (data[0] / total) * 2 * Math.PI
+
+            // A 영역
+            ctx.beginPath()
+            ctx.arc(0, 0, r, startAngle, startAngle + angleA)
+            ctx.arc(0, 0, innerR, startAngle + angleA, startAngle, true)
+            ctx.closePath()
+            ctx.fillStyle = '#36a2eb'
+            ctx.fill()
+
+            // B 영역
+            ctx.beginPath()
+            ctx.arc(0, 0, r, startAngle + angleA, startAngle + 2 * Math.PI)
+            ctx.arc(0, 0, innerR, startAngle + 2 * Math.PI, startAngle + angleA, true)
+            ctx.closePath()
+            ctx.fillStyle = '#ff6384'
+            ctx.fill()
+          }
+        }
+      },
+      color: '',
+      width: 32,
+      height: 32,
+      borderColor: '#333'
+    })
+
+    const cy = cytoscape({
+      container: cyContainer.value,
+      elements: { nodes, edges },
+      style: [
+        { selector: 'node', style: {
+            label: 'data(label)',
+            'background-color': '#eee',
+            'text-valign': 'center',
+            'text-halign': 'center',
+            'border-width': 2,
+            'border-color': '#333',
+            'font-size': 8,
+            'padding': '6px',
+            'width': 32,
+            'height': 32,
+          }
+        },
+        { selector: 'edge', style: { 'curve-style': 'bezier', 'target-arrow-shape': 'triangle', 'line-color': '#888' } },
+      ],
+      layout: { name: 'preset', padding: 100 }
+    })
+
+    cy.overlays(
+      [
+        { position: 'right', vis: pieOverlay }
+      ],
+      {
+        updateOn: 'render',
+        backgroundColor: 'white'
+      }
+    )
+
+    applyCustomZoomHandling(cy);
+
+});
+  </script>
+  
+  <style>
+  .cy-container {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 0 !important;
+    height: 800px !important;
+    overflow: hidden !important;
+    position: relative;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/pages/test/pathway4.vue b/pages/test/pathway4.vue
new file mode 100644
index 0000000..0cffdde
--- /dev/null
+++ b/pages/test/pathway4.vue
@@ -0,0 +1,245 @@
+<template>
+    <div ref="cyContainer" class="cy-container"></div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted, nextTick } from 'vue'
+  import cytoscape from 'cytoscape'
+  
+  let CytoscapeOverlays = null
+
+    if (import.meta.client) {
+    const useOverlay = (await import('@/composables/useOverlay')).default
+    CytoscapeOverlays = await useOverlay()
+    }
+
+  const cyContainer = ref(null)
+  
+  onMounted(async () => {
+    await nextTick()
+
+    cytoscape.use(CytoscapeOverlays.default)
+  
+    const res = await fetch('/expanded_pathway21600.xml')
+    const xmlText = await res.text()
+    const parser = new DOMParser()
+    const xmlDoc = parser.parseFromString(xmlText, 'application/xml')
+  
+    const scale = 3
+    const entryMap = new Map()
+    const entryDataMap = new Map()
+    const parentMap = new Map()
+  
+    const entries = Array.from(xmlDoc.getElementsByTagName('entry'))
+  
+    for (const entry of entries) {
+      const id = entry.getAttribute('id')
+      entryDataMap.set(id, entry)
+      if (entry.getAttribute('type') === 'group') {
+        const components = entry.getElementsByTagName('component')
+        for (const comp of components) {
+          parentMap.set(comp.getAttribute('id'), id)
+        }
+      }
+    }
+  
+    const nodes = entries.map(entry => {
+      const id = entry.getAttribute('id')
+      const graphics = entry.getElementsByTagName('graphics')[0]
+      const x = parseFloat(graphics?.getAttribute('x') || '0') * scale
+      const y = parseFloat(graphics?.getAttribute('y') || '0') * scale
+      const label = graphics?.getAttribute('name') || id
+      const fgColor = graphics?.getAttribute('fgcolor') || '#000000'
+      const bgColor = graphics?.getAttribute('bgcolor') || '#ffffff'
+      const parent = parentMap.get(id)
+  
+      const valueA = Math.floor(Math.random() * 50)
+      const valueB = 100 - valueA
+  
+      const node = {
+        data: {
+          id,
+          label,
+          link: entry.getAttribute('link') || null,
+          reaction: entry.getAttribute('reaction') || null,
+          chartData: [valueA, valueB]
+        },
+        position: { x, y },
+        classes: entry.getAttribute('type'),
+        style: {
+          color: fgColor,
+          'background-color': bgColor
+        }
+      }
+  
+      if (parent) node.data.parent = parent
+      entryMap.set(id, true)
+      return node
+    })
+  
+    function resolveToRealNode(id) {
+      if (!entryMap.has(id)) return null
+      const entry = entryDataMap.get(id)
+      if (entry?.getAttribute('type') === 'group') {
+        const components = Array.from(entry.getElementsByTagName('component'))
+        if (components.length > 0) return components[0].getAttribute('id')
+      }
+      return id
+    }
+  
+    const edges = []
+    const relations = Array.from(xmlDoc.getElementsByTagName('relation'))
+    relations.forEach((rel, i) => {
+      const source = resolveToRealNode(rel.getAttribute('entry1'))
+      const target = resolveToRealNode(rel.getAttribute('entry2'))
+      const type = rel.getAttribute('type')
+      const subtypes = Array.from(rel.getElementsByTagName('subtype'))
+      const compoundSubtype = subtypes.find(s => s.getAttribute('name') === 'compound')
+
+      if (compoundSubtype) {
+        const compoundId = compoundSubtype.getAttribute('value')
+        if (entryMap.has(source) && entryMap.has(target) && entryMap.has(compoundId)) {
+          const sourceConst = source;
+          const targetConst = target;
+          edges.push(
+            {
+              data: {
+                id: `edge${i}-1`,
+                source: sourceConst,
+                target: compoundId,
+                label: 'via compound'
+              }
+            },
+            {
+              data: {
+                id: `edge${i}-2`,
+                source: compoundId,
+                target: targetConst,
+                label: 'via compound'
+              }
+            }
+          )
+        }
+      } else {
+        if (entryMap.has(source) && entryMap.has(target)) {
+          const sourceConst = source;
+          const targetConst = target;
+          edges.push({
+            data: {
+              id: `edge${i}`,
+              source: sourceConst,
+              target: targetConst,
+              label: type
+            }
+          })
+        }
+      }
+    })
+  
+    const reactions = Array.from(xmlDoc.getElementsByTagName('reaction'))
+    reactions.forEach((reaction, i) => {
+      const reactionType = reaction.getAttribute('type')
+      const substrates = Array.from(reaction.getElementsByTagName('substrate'))
+      const products = Array.from(reaction.getElementsByTagName('product'))
+      substrates.forEach(substrate => {
+        const sid = resolveToRealNode(substrate.getAttribute('id'))
+        products.forEach(product => {
+          const pid = resolveToRealNode(product.getAttribute('id'))
+          if (entryMap.has(sid) && entryMap.has(pid)) {
+            edges.push({
+              data: {
+                id: `reaction-${i}-${sid}-${pid}`,
+                source: sid,
+                target: pid,
+                label: `${reactionType}`
+              }
+            })
+          }
+        })
+      })
+    })
+  
+    // 원형(도넛/파이) 차트 overlay 생성 (흰색 라인 없이)
+    const pieOverlay = CytoscapeOverlays.renderSymbol({
+      symbol: node => {
+        const data = node.data('chartData') || [50, 50]
+        return {
+          draw: (ctx, size) => {
+            const total = data[0] + data[1]
+            const r = Math.sqrt(size / Math.PI)
+            const innerR = r * 0.5
+            const startAngle = 0
+            const angleA = (data[0] / total) * 2 * Math.PI
+
+            // A 영역
+            ctx.beginPath()
+            ctx.arc(0, 0, r, startAngle, startAngle + angleA)
+            ctx.arc(0, 0, innerR, startAngle + angleA, startAngle, true)
+            ctx.closePath()
+            ctx.fillStyle = '#36a2eb'
+            ctx.fill()
+
+            // B 영역
+            ctx.beginPath()
+            ctx.arc(0, 0, r, startAngle + angleA, startAngle + 2 * Math.PI)
+            ctx.arc(0, 0, innerR, startAngle + 2 * Math.PI, startAngle + angleA, true)
+            ctx.closePath()
+            ctx.fillStyle = '#ff6384'
+            ctx.fill()
+          }
+        }
+      },
+      color: '',
+      width: 32,
+      height: 32,
+      borderColor: '#333'
+    })
+
+    const cy = cytoscape({
+      container: cyContainer.value,
+      elements: { nodes, edges },
+      style: [
+        { selector: 'node', style: {
+            label: 'data(label)',
+            'background-color': '#eee',
+            'text-valign': 'center',
+            'text-halign': 'center',
+            'border-width': 2,
+            'border-color': '#333',
+            'font-size': 8,
+            'padding': '6px',
+            'width': 32,
+            'height': 32,
+          }
+        },
+        { selector: 'edge', style: { 'curve-style': 'bezier', 'target-arrow-shape': 'triangle', 'line-color': '#888' } },
+      ],
+      layout: { name: 'preset', padding: 100 }
+    })
+
+    cy.overlays(
+      [
+        { position: 'right', vis: pieOverlay }
+      ],
+      {
+        updateOn: 'render',
+        backgroundColor: 'white'
+      }
+    )
+
+    applyCustomZoomHandling(cy);
+
+});
+  </script>
+  
+  <style>
+  .cy-container {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 0 !important;
+    height: 800px !important;
+    overflow: hidden !important;
+    position: relative;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/pages/test/pathwayJson.vue b/pages/test/pathwayJson.vue
new file mode 100644
index 0000000..0a2372c
--- /dev/null
+++ b/pages/test/pathwayJson.vue
@@ -0,0 +1,130 @@
+<template>
+    <div>
+      <select v-model="selectedGroup" @change="focusGroup">
+        <option v-for="g in groups" :key="g" :value="g">
+          Group {{ g }}
+        </option>
+      </select>
+  
+      <div ref="cyEl" style="width: 100%; height: 800px;"></div>
+    </div>
+  </template>
+  
+  <script setup>
+  import { ref, onMounted } from 'vue';
+  import cytoscape from "cytoscape";
+  
+  let CytoscapeOverlays = null
+  
+  if (import.meta.client) {
+    const useOverlay = (await import('@/composables/useOverlay')).default
+    CytoscapeOverlays = await useOverlay()
+  }
+  
+  useHead({
+    script: [
+      {
+        src: '/dist/cy_custom.js',
+        defer: true
+      }
+    ]
+  });
+  
+  const cyEl = ref(null);
+  const cy = ref(null);
+  const selectedGroup = ref(null);
+  const groups = ref([]);
+  
+  onMounted(() => {
+    fetch("/group43200.json")
+      .then(res => res.json())
+      .then(data => {
+        const nodes = data.entries.map(e => ({
+          data: { id: `n${e.id}`, label: e.graphics.name, group: e.group },
+          position: { x: e.graphics.x, y: e.graphics.y },
+        }));
+        const edges = data.relations.map(r => ({
+          data: {
+            source: `n${r.entry1}`,
+            target: `n${r.entry2}`,
+          }
+        }));
+        groups.value = [...new Set(data.entries.map(e => e.group))];
+  
+        const colorPalette = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080'];
+        const groupColorMap = {};
+        groups.value.forEach((group, index) => {
+          groupColorMap[group] = colorPalette[index % colorPalette.length];
+        });
+
+        cy.value = cytoscape({
+          container: cyEl.value,
+          elements: [...nodes, ...edges],
+          style: [
+            {
+              selector: 'node',
+              style: {
+                label: 'data(label)',
+                'background-color': (node) => groupColorMap[node.data('group')] || '#ccc',
+                'text-valign': 'center',
+                'text-halign': 'center',
+                'width': 30,
+                'height': 30
+              }
+            },
+            {
+              selector: 'edge',
+              style: {
+                'line-color': '#ccc',
+                'target-arrow-shape': 'triangle'
+              }
+            }
+          ],
+          layout: { name: 'preset' },
+          zoomingEnabled: true,
+          userZoomingEnabled: true
+        });
+        
+        setTimeout(() => {
+          if (typeof applyCustomZoomHandling === 'function') {
+            applyCustomZoomHandling(cy.value);
+          }
+        }, 100);
+      });
+  });
+  
+  function focusGroup() {
+    if (!cy.value || !selectedGroup.value) return;
+  
+    const groupNodes = cy.value.nodes().filter(ele => ele.data('group') === selectedGroup.value);
+    if (groupNodes.length === 0) return;
+  
+    const bb = groupNodes.boundingBox();
+    const container = cy.value.container();
+    const viewportWidth = container.clientWidth;
+    const viewportHeight = container.clientHeight;
+    const padding = 40;
+    const zoomX = (viewportWidth - 2 * padding) / bb.w;
+    const zoomY = (viewportHeight - 2 * padding) / bb.h;
+    const zoom = Math.min(zoomX, zoomY, 5);
+  
+    cy.value.animate({
+        zoom: zoom,
+        center: { eles: groupNodes }
+    }, {
+        duration: 800
+    });
+  }
+  </script>
+  
+  <style>
+  .cy-container {
+    width: 100vw !important;
+    max-width: 100vw !important;
+    min-width: 0 !important;
+    height: 800px !important;
+    overflow: hidden !important;
+    position: relative;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/pages/test/test01.vue b/pages/test/test01.vue
new file mode 100644
index 0000000..b9e2afe
--- /dev/null
+++ b/pages/test/test01.vue
@@ -0,0 +1,299 @@
+<template>
+  <div class="test-page">
+    <div class="container">
+      <h1 class="title">테스트 페이지 01</h1>
+
+      <div class="test-section">
+        <h2>기본 기능 테스트</h2>
+
+        <div class="test-card">
+          <h3>사용자 정보 테스트</h3>
+          <p>
+            로그인 상태: {{ userStore.isLoggedIn ? "로그인됨" : "로그아웃됨" }}
+          </p>
+          <p v-if="userStore.user">사용자: {{ userStore.user.name }}</p>
+          <p v-if="userStore.user">역할: {{ userStore.user.role }}</p>
+          <div class="button-group">
+            <button class="btn btn-success" @click="loginTest">
+              테스트 로그인
+            </button>
+            <button class="btn btn-info" @click="adminLoginTest">
+              관리자 로그인
+            </button>
+            <button class="btn btn-warning" @click="logoutTest">
+              테스트 로그아웃
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="test-section">
+        <h2>API 테스트</h2>
+
+        <div class="test-card">
+          <h3>데이터 로딩 테스트</h3>
+          <button
+            class="btn btn-primary"
+            :disabled="loading"
+            @click="loadTestData"
+          >
+            {{ loading ? "로딩 중..." : "테스트 데이터 로드" }}
+          </button>
+          <div v-if="testData" class="data-display">
+            <pre>{{ JSON.stringify(testData, null, 2) }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { useUserStore } from "~/stores/user";
+
+// 페이지 메타데이터
+definePageMeta({
+  title: "테스트 페이지 01",
+  description: "기능 테스트를 위한 페이지",
+});
+
+const userStore = useUserStore();
+
+// 반응형 데이터
+const loading = ref(false);
+const testData = ref<{
+  id: number;
+  name: string;
+  timestamp: string;
+  items: string[];
+} | null>(null);
+
+// 메서드
+const loginTest = () => {
+  // 테스트용 로그인 (실제로는 API 호출이 필요)
+  userStore.user = {
+    id: "1",
+    userId: "test",
+    email: "test@example.com",
+    name: "테스트 사용자",
+    role: "user",
+  };
+  userStore.isLoggedIn = true;
+};
+
+const adminLoginTest = () => {
+  // 관리자 로그인 로직 구현
+  userStore.user = {
+    id: "2",
+    userId: "admin",
+    email: "admin@example.com",
+    name: "관리자",
+    role: "admin",
+  };
+  userStore.isLoggedIn = true;
+};
+
+const logoutTest = () => {
+  userStore.logout();
+};
+
+const loadTestData = async () => {
+  loading.value = true;
+  try {
+    // 실제 API 호출 대신 시뮬레이션
+    await new Promise((resolve) => setTimeout(resolve, 1000));
+    testData.value = {
+      id: 1,
+      name: "테스트 데이터",
+      timestamp: new Date().toISOString(),
+      items: ["항목 1", "항목 2", "항목 3"],
+    };
+  } catch (error) {
+    console.error("데이터 로딩 실패:", error);
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 라이프사이클
+onMounted(() => {
+  console.log("테스트 페이지 01이 마운트되었습니다.");
+});
+</script>
+
+<style scoped>
+.test-page {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 2rem 0;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1rem;
+}
+
+.title {
+  text-align: center;
+  color: white;
+  font-size: 2.5rem;
+  font-weight: bold;
+  margin-bottom: 2rem;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+.test-section {
+  background: white;
+  border-radius: 12px;
+  padding: 2rem;
+  margin-bottom: 2rem;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+}
+
+.test-section h2 {
+  color: #333;
+  margin-bottom: 1.5rem;
+  font-size: 1.5rem;
+  border-bottom: 2px solid #667eea;
+  padding-bottom: 0.5rem;
+}
+
+.test-card {
+  background: #f8f9fa;
+  border-radius: 8px;
+  padding: 1.5rem;
+  margin-bottom: 1.5rem;
+  border-left: 4px solid #667eea;
+}
+
+.test-card h3 {
+  color: #495057;
+  margin-bottom: 1rem;
+  font-size: 1.2rem;
+}
+
+.test-card p {
+  color: #6c757d;
+  margin-bottom: 1rem;
+  font-size: 1rem;
+}
+
+.button-group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.btn {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  display: inline-block;
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.btn-primary {
+  background: #667eea;
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #5a6fd8;
+}
+
+.btn-secondary {
+  background: #6c757d;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background: #5a6268;
+}
+
+.btn-danger {
+  background: #dc3545;
+  color: white;
+}
+
+.btn-danger:hover {
+  background: #c82333;
+}
+
+.btn-success {
+  background: #28a745;
+  color: white;
+}
+
+.btn-success:hover {
+  background: #218838;
+}
+
+.btn-warning {
+  background: #ffc107;
+  color: #212529;
+}
+
+.btn-warning:hover {
+  background: #e0a800;
+}
+
+.btn-info {
+  background: #17a2b8;
+  color: white;
+}
+
+.btn-info:hover {
+  background: #138496;
+}
+
+.data-display {
+  margin-top: 1rem;
+  background: #f1f3f4;
+  border-radius: 6px;
+  padding: 1rem;
+  border: 1px solid #dee2e6;
+}
+
+.data-display pre {
+  margin: 0;
+  font-size: 0.85rem;
+  color: #495057;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+@media (max-width: 768px) {
+  .container {
+    padding: 0 0.5rem;
+  }
+
+  .test-section {
+    padding: 1rem;
+  }
+
+  .button-group {
+    flex-direction: column;
+  }
+
+  .btn {
+    width: 100%;
+  }
+}
+</style>
diff --git a/pages/test/test02.vue b/pages/test/test02.vue
new file mode 100644
index 0000000..d7be90c
--- /dev/null
+++ b/pages/test/test02.vue
@@ -0,0 +1,282 @@
+<template>
+    <div id="app">
+      <main role="main" class="container-fluid">
+        <div style="padding-top: 64px">
+          <div>
+            <ul
+              class="navbar-nav mr-auto"
+              style="list-style:none; padding-left:0; margin:0;"
+            >
+              <li
+                class="nav-item dropdown"
+                style="position: relative; display: inline-block;"
+              >
+                <a
+                  href="#"
+                  id="igv-example-api-dropdown"
+                  @click.prevent="toggleDropdown"
+                  aria-haspopup="true"
+                  :aria-expanded="isDropdownOpen.toString()"
+                  style="color: black; cursor: pointer; user-select: none;"
+                  >Tracks</a
+                >
+                <ul
+                  v-show="isDropdownOpen"
+                  class="dropdown-menu"
+                  style="width:350px; position: absolute; top: 100%; left: 0; background: white; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.15); padding: 5px 0; margin: 0; list-style:none; z-index: 1000;"
+                >
+                  <li>
+                    <a
+                      href="#"
+                      @click.prevent="loadCopyNumberTrack"
+                      style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
+                      >Copy Number</a
+                    >
+                  </li>
+                  <li>
+                    <a
+                      href="#"
+                      @click.prevent="loadDbSnpTrack"
+                      style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
+                      >dbSNP 137 (bed tabix)</a
+                    >
+                  </li>
+                  <li>
+                    <a
+                      href="#"
+                      @click.prevent="loadBigWigTrack"
+                      style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
+                      >Encode bigwig</a
+                    >
+                  </li>
+                  <li>
+                    <a
+                      href="#"
+                      @click.prevent="loadBamTrack"
+                      style="display:block; padding: 8px 20px; color: black; text-decoration: none;"
+                      >1KG Bam (HG02450)</a
+                    >
+                  </li>
+                </ul>
+              </li>
+            </ul>
+          </div>
+          <!-- 탭 콘텐츠 -->
+          <div class="tab-content" id="viewerTabContent">
+            <div
+              class="tab-pane fade show active"
+              id="igv-viewer"
+              role="tabpanel"
+            >
+              <div style="padding-top: 20px">
+                이 예제는 드롭다운 메뉴에서 동적으로 트랙을 추가하는 igv.js API의
+                사용을 보여줍니다.
+                위의 메뉴에서 'CopyNumber'를 선택하면 다음과 같은 호출이 실행됩니다.
+                <p>
+                  <pre>
+                  igv.browser.loadTrack({
+                      url: 'https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz',
+                      name: 'GBM Copy # (TCGA Broad GDAC)'});
+                  </pre>
+                </p>
+                자세한 내용은
+                <a href="https://github.com/igvteam/igv.js/wiki">개발자 위키</a>를
+                참조하세요.
+              </div>
+              <div id="igvDiv" style="padding-top: 20px"></div>
+            </div>
+          </div>
+        </div>
+      </main>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "App",
+    data() {
+      return {
+        browser: null,
+        isDropdownOpen: false,
+      };
+    },
+    mounted() {
+      // 외부 클릭시 드롭다운 닫기
+      document.addEventListener("click", this.handleClickOutside);
+      this.initializeIGV();
+    },
+    beforeUnmount() {
+      document.removeEventListener("click", this.handleClickOutside);
+    },
+    methods: {
+      toggleDropdown() {
+        this.isDropdownOpen = !this.isDropdownOpen;
+      },
+      closeDropdown() {
+        this.isDropdownOpen = false;
+      },
+      handleClickOutside(event) {
+        const dropdown = this.$el.querySelector("#igv-example-api-dropdown");
+        const menu = this.$el.querySelector(".dropdown-menu");
+        if (
+          dropdown &&
+          menu &&
+          !dropdown.contains(event.target) &&
+          !menu.contains(event.target)
+        ) {
+          this.closeDropdown();
+        }
+      },
+  
+      async initializeIGV() {
+        await this.waitForIGV();
+        await this.$nextTick();
+  
+        const igvDiv = document.getElementById("igvDiv");
+        if (!igvDiv) {
+          console.error("❌ #igvDiv가 존재하지 않습니다.");
+          return;
+        }
+  
+        const options = {
+          locus: "chr1:155,160,475-155,184,282",
+          genome: "hg19",
+        };
+  
+        try {
+          this.browser = await igv.createBrowser(igvDiv, options);
+          window.igv = { browser: this.browser };
+          this.addBaseClickEvent();
+          this.browser.on("locuschange", this.addBaseClickEvent);
+          this.browser.on("trackclick", this.addBaseClickEvent);
+        } catch (error) {
+          console.error("IGV 브라우저 생성 중 오류:", error);
+        }
+      },
+      waitForIGV() {
+        return new Promise((resolve) => {
+          const checkIGV = () => {
+            if (typeof igv !== "undefined") {
+              resolve();
+            } else {
+              setTimeout(checkIGV, 100);
+            }
+          };
+          checkIGV();
+        });
+      },
+      addBaseClickEvent() {
+        setTimeout(() => {
+          const texts = document.querySelectorAll("#igvDiv text");
+          texts.forEach((text) => {
+            const base = text.textContent;
+            if (["A", "T", "C", "G"].includes(base)) {
+              text.style.cursor = "pointer";
+              text.onclick = () => {
+                text.textContent = this.getComplement(text.textContent);
+              };
+            }
+          });
+        }, 300);
+      },
+      getComplement(base) {
+        switch (base) {
+          case "A":
+            return "T";
+          case "T":
+            return "A";
+          case "C":
+            return "G";
+          case "G":
+            return "C";
+          default:
+            return base;
+        }
+      },
+      loadCopyNumberTrack() {
+        if (this.browser) {
+          this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
+          this.browser.loadTrackList([
+            {
+              url: "https://s3.amazonaws.com/igv.org.demo/GBM-TP.seg.gz",
+              indexed: false,
+              isLog: true,
+              name: "GBM Copy # (TCGA Broad GDAC)",
+            },
+          ]);
+        }
+        this.closeDropdown();
+      },
+      loadDbSnpTrack() {
+        if (this.browser) {
+          this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
+          this.browser.loadTrackList([
+            {
+              type: "annotation",
+              format: "bed",
+              url: "https://data.broadinstitute.org/igvdata/annotations/hg19/dbSnp/snp137.hg19.bed.gz",
+              indexURL:
+                "https://data.broadinstitute.org/igvdata/annotations/hg19/dbSnp/snp137.hg19.bed.gz.tbi",
+              visibilityWindow: 200000,
+              name: "dbSNP 137",
+            },
+          ]);
+        }
+        this.closeDropdown();
+      },
+      loadBigWigTrack() {
+        if (this.browser) {
+          this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
+          this.browser.loadTrackList([
+            {
+              type: "wig",
+              format: "bigwig",
+              url: "https://s3.amazonaws.com/igv.broadinstitute.org/data/hg19/encode/wgEncodeBroadHistoneGm12878H3k4me3StdSig.bigWig",
+              name: "Gm12878H3k4me3",
+            },
+          ]);
+        }
+        this.closeDropdown();
+      },
+      loadBamTrack() {
+        if (this.browser) {
+          this.browser.loadTrackList = this.browser.loadTrackList.bind(this.browser);
+          this.browser.loadTrackList([
+            {
+              type: "alignment",
+              format: "bam",
+              url: "https://1000genomes.s3.amazonaws.com/phase3/data/HG02450/alignment/HG02450.mapped.ILLUMINA.bwa.ACB.low_coverage.20120522.bam",
+              indexURL:
+                "https://1000genomes.s3.amazonaws.com/phase3/data/HG02450/alignment/HG02450.mapped.ILLUMINA.bwa.ACB.low_coverage.20120522.bam.bai",
+              name: "HG02450",
+            },
+          ]);
+        }
+        this.closeDropdown();
+      },
+    },
+  };
+  </script>
+  
+  <style>
+  #app {
+    font-family: Avenir, Helvetica, Arial, sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #2c3e50;
+  }
+  
+  pre {
+    padding: 10px;
+    border-radius: 4px;
+  }
+  
+  .nav-tabs {
+    margin-bottom: 20px;
+  }
+  
+  .tab-content {
+    padding-top: 20px;
+  }
+  </style>
+  
\ No newline at end of file