From 30e2099d1431982d053850136ad00d12fc285746 Mon Sep 17 00:00:00 2001
From: leejisun9 <leejisun9@gmail.com>
Date: Fri, 12 Sep 2025 11:21:21 +0900
Subject: [PATCH] delete folder

---
 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 deletions(-)
 delete mode 100644 pages/test/culture-graph-multi.vue
 delete mode 100644 pages/test/culture-graph-tab.vue
 delete mode 100644 pages/test/culture-graph.vue
 delete mode 100644 pages/test/culture_graph.html
 delete mode 100644 pages/test/igv2.vue
 delete mode 100644 pages/test/pathway.vue
 delete mode 100644 pages/test/pathway2.vue
 delete mode 100644 pages/test/pathway3.vue
 delete mode 100644 pages/test/pathway4.vue
 delete mode 100644 pages/test/pathwayJson.vue
 delete mode 100644 pages/test/test01.vue
 delete mode 100644 pages/test/test02.vue

diff --git a/pages/test/culture-graph-multi.vue b/pages/test/culture-graph-multi.vue
deleted file mode 100644
index 68fada1..0000000
--- a/pages/test/culture-graph-multi.vue
+++ /dev/null
@@ -1,413 +0,0 @@
-<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
deleted file mode 100644
index 76dff3b..0000000
--- a/pages/test/culture-graph-tab.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<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
deleted file mode 100644
index 797bbe3..0000000
--- a/pages/test/culture-graph.vue
+++ /dev/null
@@ -1,1647 +0,0 @@
-<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
deleted file mode 100644
index fccab40..0000000
--- a/pages/test/culture_graph.html
+++ /dev/null
@@ -1,1038 +0,0 @@
-<!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
deleted file mode 100644
index c231f35..0000000
--- a/pages/test/igv2.vue
+++ /dev/null
@@ -1,955 +0,0 @@
-<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
deleted file mode 100644
index defb399..0000000
--- a/pages/test/pathway.vue
+++ /dev/null
@@ -1,247 +0,0 @@
-<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
deleted file mode 100644
index 7c1fb2f..0000000
--- a/pages/test/pathway2.vue
+++ /dev/null
@@ -1,263 +0,0 @@
-<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
deleted file mode 100644
index d7890b2..0000000
--- a/pages/test/pathway3.vue
+++ /dev/null
@@ -1,254 +0,0 @@
-<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
deleted file mode 100644
index 0cffdde..0000000
--- a/pages/test/pathway4.vue
+++ /dev/null
@@ -1,245 +0,0 @@
-<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
deleted file mode 100644
index 0a2372c..0000000
--- a/pages/test/pathwayJson.vue
+++ /dev/null
@@ -1,130 +0,0 @@
-<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
deleted file mode 100644
index b9e2afe..0000000
--- a/pages/test/test01.vue
+++ /dev/null
@@ -1,299 +0,0 @@
-<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
deleted file mode 100644
index d7be90c..0000000
--- a/pages/test/test02.vue
+++ /dev/null
@@ -1,282 +0,0 @@
-<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