Merge branch 'main' of https://demo.stam.kr/leejisun9/bio_frontend

package.json

@@ -25,6 +25,7 @@
     "echarts": "^5.6.0",
     "eslint": "^9.29.0",
     "ipx": "^3.1.1",
+    "molstar": "^5.1.2",
     "nuxt": "^3.17.5",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.5.0",

pages/[tabId]/test/molstar.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="molstar-page">
+    <PageDescription>
+      <h1>Mol* 뷰어 테스트</h1>
+      <div class="box">
+        <p>간단한 PDB 구조(1CRN)를 불러와 Mol*로 렌더링합니다.</p>
+      </div>
+    </PageDescription>
+
+    <div
+      ref="containerRef"
+      class="viewer-wrap"
+      :style="{ height: containerHeight }"
+    >
+      <div ref="viewerRef" class="molstar-viewer" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, onBeforeUnmount, ref } from "vue";
+import { Viewer } from "molstar/lib/apps/viewer/app";
+import "molstar/build/viewer/molstar.css";
+
+definePageMeta({
+  title: "Mol* 테스트",
+  description: "Mol* 뷰어 테스트 페이지",
+});
+
+const viewerRef = ref<HTMLDivElement | null>(null);
+const containerRef = ref<HTMLDivElement | null>(null);
+const containerHeight = ref<string>("80vh");
+let viewer: Viewer | null = null;
+
+onMounted(async () => {
+  if (!viewerRef.value) return;
+
+  viewer = await Viewer.create(viewerRef.value, {
+    layoutIsExpanded: true,
+    layoutShowControls: true,
+    viewportShowExpand: true,
+  });
+
+  // 예시 구조: 1CRN
+  await viewer.loadStructureFromUrl(
+    "https://files.rcsb.org/download/1CRN.pdb",
+    "pdb"
+  );
+
+  const resizeToAvailableHeight = () => {
+    if (!containerRef.value) return;
+    const rect = containerRef.value.getBoundingClientRect();
+    const bottomPadding = 16; // 여백
+    const available = window.innerHeight - rect.top - bottomPadding;
+    containerHeight.value = `${Math.max(300, available)}px`;
+    viewer?.handleResize();
+  };
+
+  resizeToAvailableHeight();
+  window.addEventListener("resize", resizeToAvailableHeight);
+  // 정리 함수 저장
+  (containerRef as any)._off = () =>
+    window.removeEventListener("resize", resizeToAvailableHeight);
+});
+
+onBeforeUnmount(() => {
+  viewer?.dispose?.();
+  viewer = null;
+  (containerRef as any)?._off?.();
+});
+</script>
+
+<style scoped>
+.viewer-wrap {
+  width: 100%;
+  overflow: hidden; /* 내부 Mol*에서 자체 스크롤 관리 */
+}
+.molstar-viewer {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.msp-plugin .msp-layout-expanded {
+  position: inherit;
+}
+</style>

types/permissions.ts

@@ -302,6 +302,17 @@ export const MOCK_PERMISSIONS: UserPermissions = {
         description: "테스트 등록 페이지",
         menuYn: "N",
       },
+      {
+        oid: 26,
+        code: "P0118",
+        name: "molstar",
+        type: "PAGE",
+        path: "/test/molstar",
+        parentCode: "PG01",
+        sortOrder: 18,
+        description: "Mol* 뷰어 테스트 페이지",
+        menuYn: "Y",
+      },
 
       // 관리자 페이지그룹 하위 페이지들 (PG02 > P0201~P0203)
       {