diff --git a/.github/workflows/continuous-delivery.yaml b/.github/workflows/continuous-delivery.yaml
new file mode 100644
index 00000000..d3a25959
--- /dev/null
+++ b/.github/workflows/continuous-delivery.yaml
@@ -0,0 +1,214 @@
+# This workflow performs continuous delivery (CD).
+# This workflow will build a container image and publish it to container registries.
+name: Continuous Delivery (CD)
+
+# When it's time to do a release,
+# do a full cross-platform build for all supported architectures and
+# push all of them to Docker Hub and GitHub Container Registry (GHCR).
+
+on:
+  # "Build and publish" on merged
+  # Actually, there's no "merged" event.
+  # A "push" event is occurred after the pull request "close" event with "merged" true condition.
+  # The "push" event could replace "merged" event.
+  push:
+    branches:
+      - main
+    tags:
+      # Only trigger on semver shaped tags.
+      - "v*.*.*"
+    paths-ignore:
+      - ".github/**"
+      - "docs/**"
+      - "**.md"
+      - ".gitignore"
+      - "LICENSE"
+      - "CODEOWNERS"
+
+env:
+  DOCKER_REGISTRY_NAME: cloudbaristaorg
+  GHCR_REGISTRY_NAME: ${{ github.repository_owner }}
+  IMAGE_NAME: ${{ github.event.repository.name }}
+
+jobs:
+  # The job key is "publish-container-image"
+  publish-api-container-image:
+    # Job name is "Publish a container image"
+    name: Publish a container image
+
+    if: github.repository_owner == 'm-cmp'
+
+    # This job runs on Ubuntu-latest (Ubuntu 22.04 LTS checked on 2023-12-13)
+    # See https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v4
+
+      # About billing for GitHub Packages
+      # https://docs.github.com/en/billing/managing-billing-for-github-packages/about-billing-for-github-packages
+      - name: Extract metadata from Git reference and GitHub events
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            # image name for Docker Hub
+            ${{env.DOCKER_REGISTRY_NAME}}/${{env.IMAGE_NAME}}-api
+            # image name for GitHub Container Registry (GHCR)
+            ghcr.io/${{env.GHCR_REGISTRY_NAME}}/${{env.IMAGE_NAME}}-api
+          tags: |
+            # See `tags` input: https://github.com/docker/metadata-action?tab=readme-ov-file#tags-input
+            ## Tags for a push tag event
+            # minimal (e.g., 1.2.3)
+            type=semver,enable=true,pattern={{version}}
+            # type=semver,pattern={{major}}.{{minor}}
+            ## Tags for a push branch event
+            # Tags to reflect the last commit of the active branch
+            type=edge,enable=true
+            ## Other types (currently the followings may be out of scope in this project)
+            ## Tags for a push branch event
+            # minimal (short sha)
+            # type=sha,enable=true,format=short            
+            ## Tags for a push or pull_request event
+            # type=ref,event=branch
+            # type=ref,event=tag
+            # type=ref,event=pr
+            ## Tags for a schedule event - handlebars with timezone (e.g. 20200110-093000)
+            # type=schedule,enable=true,pattern={{date 'YYYYMMDD-hhmmss' tz='Asia/Tokyo'}}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: all
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Cache Docker layers
+        uses: actions/cache@v4
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-api-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-api-
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      # TODO: Create a PAT with `read:packages` and `write:packages` scopes and save it as an Actions secret `CR_PAT`
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.CR_PAT }}
+
+      - name: Build and publish
+        id: docker_build
+        uses: docker/build-push-action@v6
+        with:
+          builder: ${{ steps.buildx.outputs.name }}
+          context: ./api
+          file: ./api/Dockerfile.mcwebconsoleapi
+          target: deploy
+          platforms: linux/amd64 # linux/arm/v7,linux/arm64,linux/386,linux/ppc64le,linux/s390x,linux/arm/v6
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache
+
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }}
+
+  publish-front-container-image:
+    name: Publish a container image
+
+    if: github.repository_owner == 'm-cmp'
+
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v4
+
+      - name: Extract metadata from Git reference and GitHub events
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: |
+            # image name for Docker Hub
+            ${{env.DOCKER_REGISTRY_NAME}}/${{env.IMAGE_NAME}}-front
+            # image name for GitHub Container Registry (GHCR)
+            ghcr.io/${{env.GHCR_REGISTRY_NAME}}/${{env.IMAGE_NAME}}-front
+          tags: |
+            # See `tags` input: https://github.com/docker/metadata-action?tab=readme-ov-file#tags-input
+            ## Tags for a push tag event
+            # minimal (e.g., 1.2.3)
+            type=semver,enable=true,pattern={{version}}
+            # type=semver,pattern={{major}}.{{minor}}
+            ## Tags for a push branch event
+            # Tags to reflect the last commit of the active branch
+            type=edge,enable=true
+            ## Other types (currently the followings may be out of scope in this project)
+            ## Tags for a push branch event
+            # minimal (short sha)
+            # type=sha,enable=true,format=short            
+            ## Tags for a push or pull_request event
+            # type=ref,event=branch
+            # type=ref,event=tag
+            # type=ref,event=pr
+            ## Tags for a schedule event - handlebars with timezone (e.g. 20200110-093000)
+            # type=schedule,enable=true,pattern={{date 'YYYYMMDD-hhmmss' tz='Asia/Tokyo'}}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+        with:
+          platforms: all
+
+      - name: Set up Docker Buildx
+        id: buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Cache Docker layers
+        uses: actions/cache@v4
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-front-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-front-
+
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      # TODO: Create a PAT with `read:packages` and `write:packages` scopes and save it as an Actions secret `CR_PAT`
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.CR_PAT }}
+
+      - name: Build and publish
+        id: docker_build
+        uses: docker/build-push-action@v6
+        with:
+          builder: ${{ steps.buildx.outputs.name }}
+          context: ./
+          file: ./front/Dockerfile.mcwebconsolefront
+          target: deploy
+          platforms: linux/amd64
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache
+
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }}
\ No newline at end of file
diff --git a/.github/workflows/continuous-integration.yaml b/.github/workflows/continuous-integration.yaml
new file mode 100644
index 00000000..3bf8f20c
--- /dev/null
+++ b/.github/workflows/continuous-integration.yaml
@@ -0,0 +1,140 @@
+# This workflow performs continuous integration (CI).
+# This workflow will build the container image for amd64 arch. (as a basic build test)
+name: Continuous Integration (CI)
+
+on:
+  # On pull-request event with detailed condition below.
+  pull_request:
+    branches:
+      - main
+    paths-ignore:
+      - "**.md"
+      - ".gitignore"
+      - "LICENSE"
+      - "docs/**"
+      - "api/scripts/**"
+      - "front/scripts/**"
+      - "*/scripts/**"
+jobs:
+  # The job key (i.e., ID) is "build-source-code"
+  build-source-code-api-server:
+    # Job name is "Building source code"
+    # This job runs on Ubuntu-latest (Ubuntu 22.04 LTS checked on 2023-12-13)
+    # See https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
+    name: Build source code for mc-web-console api
+    strategy:
+      matrix:
+        go-version: ["1.23"]
+        os: [ubuntu-22.04]
+        #os: [ubuntu-22.04, ubuntu-20.04, windows-2022, windows-2019]
+    runs-on: ${{matrix.os}}
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Set up Go
+        uses: actions/setup-go@v5
+        with:
+          go-version: ${{matrix.go-version}}
+
+      - name: Install Buffalo CLI
+        run: go install github.com/gobuffalo/cli/cmd/buffalo@v0.18.14
+
+      - name: Install Go dependencies
+        run: go mod download
+        working-directory: ./api
+    
+      - name: Build Buffalo application
+        run: buffalo build --static
+        working-directory: ./api
+
+  # The job key is "build-container-image"
+  build-container-image-api-server:
+    # Job name is "Build a container image"
+    name: Build a container image for mc-web-console api
+
+    # This job runs on Ubuntu-latest (Ubuntu 22.04 LTS checked on 2023-12-13)
+    # See https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
+    runs-on: ubuntu-22.04
+    if: ${{ !contains(github.event.head_commit.message, '[skip ci]') }}
+
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v4
+
+      - name: Build image
+        env:
+          IMAGE_NAME: ${{ github.event.repository.name }}-api
+        run: docker image build --file ./api/Dockerfile.mcwebconsoleapi --tag $IMAGE_NAME .
+
+  # The job key (i.e., ID) is "build-source-code"
+  # build-source-code-front-server:
+  #   # Job name is "Building source code"
+  #   # This job runs on Ubuntu-latest (Ubuntu 22.04 LTS checked on 2023-12-13)
+  #   # See https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
+  #   name: Build source code for mc-web-console front
+  #   strategy:
+  #     matrix:
+  #       go-version: ["1.23"]
+  #       os: [ubuntu-22.04]
+  #       #os: [ubuntu-22.04, ubuntu-20.04, windows-2022, windows-2019]
+  #   runs-on: ${{matrix.os}}
+  #   steps:
+  #     - uses: actions/checkout@v4
+
+  #     - name: Set up Go
+  #       uses: actions/setup-go@v5
+  #       with:
+  #         go-version: ${{matrix.go-version}}
+
+  #     - name: Install Buffalo CLI
+  #       run: go install github.com/gobuffalo/cli/cmd/buffalo@v0.18.14
+
+  #     - name: Install Go dependencies
+  #       run: go mod download
+  #       working-directory: ./front
+      
+  #     - name: Set up Node.js
+  #       uses: actions/setup-node@v3
+  #       with:
+  #         node-version: '20.17.0'
+
+  #     - name: Enable Corepack
+  #       run: corepack enable
+
+  #     - name: Install Yarn 4.1.0
+  #       run: corepack prepare yarn@4.1.0 --activate
+
+  #     - name: Install npm dependencies
+  #       run: npm install
+  #       working-directory: ./front
+
+  #     - name: Clean Yarn cache
+  #       run: yarn cache clean
+  #       working-directory: ./front
+
+  #     - name: Install Yarn dependencies with cache check
+  #       run: yarn install --immutable
+  #       working-directory: ./front
+    
+  #     - name: Build Buffalo application
+  #       run: buffalo build --static
+  #       working-directory: ./front
+
+  # The job key is "build-container-image"
+  build-container-image-front-server:
+    # Job name is "Build a container image"
+    name: Build a container image for mc-web-console front
+
+    # This job runs on Ubuntu-latest (Ubuntu 22.04 LTS checked on 2023-12-13)
+    # See https://docs.github.com/en/actions/using-github-hosted-runners/about-github-hosted-runners
+    runs-on: ubuntu-22.04
+    if: ${{ !contains(github.event.head_commit.message, '[skip ci]') }}
+
+    steps:
+      - name: Checkout source code
+        uses: actions/checkout@v4
+
+      - name: Build image
+        env:
+          IMAGE_NAME: ${{ github.event.repository.name }}-front
+        run: docker image build --file ./front/Dockerfile.mcwebconsolefront --tag $IMAGE_NAME .
\ No newline at end of file
diff --git a/conf/menu.yaml b/conf/menu.yaml
deleted file mode 100644
index cfff8679..00000000
--- a/conf/menu.yaml
+++ /dev/null
@@ -1,299 +0,0 @@
-# restype:menu = title > category > menu > submenu
-# restype:screen
-
-menus:  
-    ########## step1 : title  ################
-  - id: settings
-    parentid: home
-    displayname: Settings
-    restype: menu
-    isaction: "false"
-    priority: 1
-
-  - id: operations
-    parentid: home
-    displayname: Operations
-    restype: menu
-    isaction: "false"
-    priority: 2  
-
-    ################## step2 : auth  ################
-  - id: login
-    parentid: none
-    displayname: Login
-    restype: screen
-    isaction: "true"
-    priority: 0
-
-    ################## step2 : quick Link  ################
-      
-
-    ############## step2 : category  : settings  ################    
-  - id: accountnaccess
-    parentid: settings
-    displayname: Account & Access
-    restype: menu
-    isaction: "false"
-    priority: 1
-
-  - id: environment
-    parentid: settings
-    displayname: Environment
-    restype: menu
-    isaction: "false"
-    priority: 2
-
-    ############## step2 : category  : operations  ################
-  - id: manage
-    parentid: operations
-    displayname: Manage
-    restype: menu
-    isaction: "false"
-    priority: 1
-
-  - id: analytics
-    parentid: operations
-    displayname: Analytics
-    restype: menu
-    isaction: "false"
-    priority: 2    
-
-    ################## step3 : menu : settings > accountnaccess  ################
-  - id: organizations
-    parentid: accountnaccess
-    displayname: Organizations
-    restype: menu
-    isaction: "false"
-    priority: 1
-
-    ################## step3 : menu : settings > environment  ################
-  - id: cloudsps
-    parentid: environment
-    displayname: Cloud SPs
-    restype: menu
-    isaction: "false"
-    priority: 1
-
-  - id: cloudresources
-    parentid: environment
-    displayname: Cloud Resources
-    restype: menu
-    isaction: "false"
-    priority: 2
-
-    ################## step3 : menu : operations > manage  ################
-  - id: workspaces
-    parentid: manage
-    displayname: Workspaces
-    restype: menu
-    isaction: "true"
-    priority: 1
-
-  - id: workloads
-    parentid: manage
-    displayname: Workloads
-    restype: menu
-    isaction: "true"
-    priority: 2
-
-  - id: plugins
-    parentid: manage
-    displayname: Plugins
-    restype: menu
-    isaction: "false"
-    priority: 3
-   
-    ################## step3 : menu : operations > analytics ################
-  - id: monitorings
-    parentid: analytics
-    displayname: Monitorings
-    restype: menu
-    isaction: "false"
-    priority: 1
-
-  - id: eventsntraces
-    parentid: analytics
-    displayname: Events & Traces
-    restype: menu
-    isaction: "false"
-    priority: 2
-
-  - id: costanalysis
-    parentid: analytics
-    displayname: Cost Analysis
-    restype: menu
-    isaction: "true"
-    priority: 3
-
-
-    ###################### step4 : submenu : settings > accountaccess > organizations ################
-  - id: users
-    parentid: organizations
-    displayname: Users
-    restype: menu
-    isaction: "true"
-    priority: 1
-
-  - id: accesscontrols
-    parentid: organizations
-    displayname: Access Controls
-    restype: menu
-    isaction: "true"
-    priority: 2
-
-    ###################### step4 : submenu : settings > environment > cloudsps ################
-  - id: cloudoverview
-    parentid: cloudsps
-    displayname: Cloud Overview
-    restype: menu
-    isaction: "true"
-    priority: 1
-
-  - id: credentials
-    parentid: cloudsps
-    displayname: Credentials
-    restype: menu
-    isaction: "true"
-    priority: 2
-
-    ###################### step4 : submenu : settings > environment > cloudresources ################
-  - id: networks
-    parentid: cloudresources
-    displayname: Networks
-    restype: menu
-    isaction: "true"
-    priority: 1
-
-  - id: myimages
-    parentid: cloudresources
-    displayname: MyImages
-    restype: menu
-    isaction: "true"
-    priority: 2    
-
-
-    ###################### step4 : submenu : operations > manage > workspaces ################
-  - id: projects
-    parentid: workspaces
-    displayname: Projects
-    restype: menu
-    isaction: "true"
-    priority: 1
-
-  - id: members
-    parentid: workspaces
-    displayname: Members
-    restype: menu
-    isaction: "true"
-    priority: 2
-
-  - id: roles
-    parentid: workspaces
-    displayname: Roles
-    restype: menu
-    isaction: "true"
-    priority: 3
-
-    ###################### step4 : submenu : operations > manage > workloads ################
-  - id: mciswls
-    parentid: workloads
-    displayname: MCI WLs
-    restype: menu
-    isaction: "true"
-    priority: 1
-
-  - id: pmkwls
-    parentid: workloads
-    displayname: PMK WLs
-    restype: menu
-    isaction: "true"
-    priority: 2
-
-    ###################### step4 : submenu : operations > analytics > monitorings ################
-  - id: mcismonitoring
-    parentid: monitorings
-    displayname: MCIs Monitoring
-    restype: menu
-    isaction: "true"
-    priority: 1
-
-  - id: thirdpartymonitoring
-    parentid: monitorings
-    displayname: 3rd party Monitoring
-    restype: menu
-    isaction: "true"
-    priority: 2
-
-  - id: monitoringconfig
-    parentid: monitorings
-    displayname: Monitoring Config
-    restype: menu
-    isaction: "true"
-    priority: 3
-
-    ###################### step4 : submenu : operations > analytics > eventsntraces ################
-  - id: alarmshistory
-    parentid: eventsntraces
-    displayname: Alarms History
-    restype: menu
-    isaction: "true"
-    priority: 1
-
-  - id: thresholdconfig
-    parentid: eventsntraces
-    displayname: Threshold Config
-    restype: menu
-    isaction: "true"
-    priority: 2
-
-  - id: logmanage
-    parentid: eventsntraces
-    displayname: Log Manage
-    restype: menu
-    isaction: "true"
-    priority: 3
-
-  - id: logconfig
-    parentid: eventsntraces
-    displayname: Log Config
-    restype: menu
-    isaction: "true"
-    priority: 4
-
-  - id: eventtrace
-    parentid: eventsntraces
-    displayname: Event Trace
-    restype: menu
-    isaction: "true"
-    priority: 5
-
-    ###################### step4 : submenu : operations > analytics > costanalysis ################
-
-    ###################### step4 : submenu : operations > manage > plugins ################
-  - id: costoptimizer
-    parentid: plugins
-    displayname: CostOptimizer
-    restype: menu
-    isaction: "true"
-    priority: 1
-
-  - id: workflowmanager
-    parentid: plugins
-    displayname: WorkflowManager
-    restype: menu
-    isaction: "true"
-    priority: 2
-
-  - id: softwaremanager
-    parentid: plugins
-    displayname: SoftwareManager
-    restype: menu
-    isaction: "true"
-    priority: 3
-
-  - id: datamanager
-    parentid: plugins
-    displayname: DataManager
-    restype: menu
-    isaction: "true"
-    priority: 4
diff --git a/conf/webconsole_menu_permissions.csv b/conf/webconsole_menu_permissions.csv
index e178203d..49e83799 100644
--- a/conf/webconsole_menu_permissions.csv
+++ b/conf/webconsole_menu_permissions.csv
@@ -2,6 +2,7 @@ framework,resource,adminPolicy,billadminPolicy,billviewerPolicy,operatorPolicy,v
 mc-web-console,settingsmenu,TRUE,,,TRUE,TRUE
 mc-web-console,accountnaccessmenu,TRUE,,,,
 mc-web-console,organizationsmenu,TRUE,,,,
+mc-web-console,costanalysismenu,TRUE,TRUE,TRUE,,
 mc-web-console,companyinfomenu,TRUE,,,,
 mc-web-console,usersmenu,TRUE,,,,
 mc-web-console,approvalsmenu,TRUE,,,,
diff --git a/front/assets/js/common/api/services/mci_api.js b/front/assets/js/common/api/services/mci_api.js
index 855c8e5b..8261a17b 100644
--- a/front/assets/js/common/api/services/mci_api.js
+++ b/front/assets/js/common/api/services/mci_api.js
@@ -49,6 +49,30 @@ export async function getMci(nsId, mciId) {
   return response.data
 }
 
+// mci vm 단건 조회
+export async function getMciVm(nsId, mciId, vmId) {
+  if (nsId == "" || nsId == undefined || mciId == undefined || vmId == ""|| vmId == undefined || vmId == "") {
+    console.log(" undefined nsId: " + nsId, + " mciId " + mciId, ", vmId " + vmId);
+    return;
+  }
+  const data = {
+    pathParams: {
+      nsId: nsId,
+      mciId: mciId,
+      vmId: vmId
+    }
+  }
+
+  var controller = "/api/" + "mc-infra-manager/" + "GetMciVm";
+  const response = await webconsolejs["common/api/http"].commonAPIPost(
+    controller,
+    data
+  );
+
+  // error check를 위해 response를 return
+  return response.data
+}
+
 // mciLifeCycle 제어 option : reboot / suspend / resume / terminate
 export function mciLifeCycle(type, checked_array, nsId) {
   console.log("mciLifeCycle option : ", type)
@@ -234,7 +258,7 @@ export async function getRegionList() {
   // }
   //   };
 
-  let controller = "/api/" + "mc-infra-manager/" + "GetRegionList";
+  let controller = "/api/" + "mc-infra-manager/" + "GetRegions";
   let response = await webconsolejs["common/api/http"].commonAPIPost(
     controller,
 
@@ -293,7 +317,7 @@ export function calculateConnectionCount(vmList) {
 
 // MCI 상태를 UI에서 표현하는 방식으로 변경
 export function getMciStatusFormatter(mciFullStatus) {
-  console.log("getMciStatus " + mciFullStatus);
+  //console.log("getMciStatus " + mciFullStatus);
   var statusArr = mciFullStatus.split("-");
   var returnStatus = statusArr[0].toLowerCase();
 
@@ -307,7 +331,7 @@ export function getMciStatusFormatter(mciFullStatus) {
   } else {
     returnStatus = "terminate";
   }
-  console.log("after status " + returnStatus);
+  //console.log("after status " + returnStatus);
   return returnStatus;
 }
 
@@ -352,7 +376,7 @@ export function getMciInfoProviderNames(mciData) {
 
 // VM 상태를 UI에서 표현하는 방식으로 변경
 export function getVmStatusFormatter(vmFullStatus) {
-  console.log("getVmStatusFormatter " + vmFullStatus);
+  //console.log("getVmStatusFormatter " + vmFullStatus);
   var returnVmStatus = vmFullStatus.toLowerCase() // 소문자로 변환
 
   const VM_STATUS_RUNNING = "running"
@@ -397,9 +421,9 @@ export function getVmStatusStyleClass(vmDispStatus) {
 // 해당 mci에서 상태값들을 count : 1개 mci의 상태는 1개만 있으므로 running, stop, terminate 중 1개만 1, 나머지는 0
 // dashboard, mci 에서 사용
 export function calculateMciStatusCount(mciData) {
-  console.log("calculateMciStatusCount");
+  //console.log("calculateMciStatusCount");
 
-  console.log("mciData : ", mciData);
+  //console.log("mciData : ", mciData);
   var mciStatusCountMap = new Map();
   mciStatusCountMap.set("running", 0);
   mciStatusCountMap.set("stop", 0); // partial 도 stop으로 보고있음.
@@ -437,9 +461,9 @@ export function calculateVmStatusCount(aMci) {
 
   try {
     if (aMci.statusCount) {
-      console.log("statusCount part", aMci);
+      //console.log("statusCount part", aMci);
       var statusCountObj = aMci.statusCount;
-      console.log(statusCountObj);
+      //console.log(statusCountObj);
       var countCreating = statusCountObj.countCreating;
       var countFailed = statusCountObj.countFailed;
       var countRebooting = statusCountObj.countRebooting;
@@ -466,7 +490,7 @@ export function calculateVmStatusCount(aMci) {
       vmStatusCountMap.set("stop", Number(countSuspended)); // partial 도 stop으로 보고있음.
       vmStatusCountMap.set("terminate", sumEtc);
     } else if (aMci.vm) {
-      console.log("statusCount part list part");
+      // console.log("statusCount part list part");
       vmList = aMci.vm;
       for (var vmIndex in vmList) {
         var aVm = vmList[vmIndex];
diff --git a/front/assets/js/common/iframe/iframe.js b/front/assets/js/common/iframe/iframe.js
index 5dff4fd7..1eac326a 100644
--- a/front/assets/js/common/iframe/iframe.js
+++ b/front/assets/js/common/iframe/iframe.js
@@ -4,7 +4,7 @@ export function addIframe(targetDiv, srchost, data){
     iframe.onload = function() {
         console.log("iFrame loaded..");
         console.log("postMessage : ", data);
-        iframe.contentWindow.postMessage(data, host);
+        iframe.contentWindow.postMessage(data, srchost);
     };
     var div = document.getElementById(targetDiv);
     div.appendChild(iframe);
diff --git a/front/assets/js/pages/operation/manage/mci.js b/front/assets/js/pages/operation/manage/mci.js
index 0c5aa712..cb430403 100644
--- a/front/assets/js/pages/operation/manage/mci.js
+++ b/front/assets/js/pages/operation/manage/mci.js
@@ -3,10 +3,14 @@ import { TabulatorFull as Tabulator } from "tabulator-tables";
 // navBar에 있는 object인데 직접 handling( onchange)
 $("#select-current-project").on('change', async function () {
   console.log("select-current-project changed ")
+  // TODO : 왜 NsId를 select의 text값을 쓸까??
   let project = { "Id": this.value, "Name": this.options[this.selectedIndex].text, "NsId": this.options[this.selectedIndex].text }
   if (this.value == "") return;
   webconsolejs["common/api/services/workspace_api"].setCurrentProject(project)// 세션에 저장
   console.log("select-current-project on change ", project)
+
+  currentNsId = webconsolejs["common/api/services/workspace_api"].getCurrentProject()?.NsId
+  
   var respMciList = await webconsolejs["common/api/services/mci_api"].getMciList(project.NsId);
   getMciListCallbackSuccess(project.NsId, respMciList);
 })
@@ -16,21 +20,23 @@ $("#select-current-project").on('change', async function () {
 export function commoncallbac(val) {
   alert(val);
 }
-////
+//// 선택한 값이 object면 selectedXXX
+//// 선택한 값이 id면 currentㅌㅌㅌ
 
 var totalMciListObj = new Object();
 var selectedWorkspaceProject = new Object();
 export var selectedMciObj = new Object();
-export var nsid = "";
+
 var totalMciStatusMap = new Map();
 var totalVmStatusMap = new Map();
-// var totalCloudConnectionMap = new Map();
-var selectedVmId = "";
+
+var currentNsId = "";
 var currentMciId = "";
+var currentVmId = "";
 
 var mciListTable;
 var checked_array = [];
-var selectedMciID = ""
+
 
 initMciTable(); // init tabulator
 
@@ -56,8 +62,29 @@ async function initMci() {
 
   // workspace selection check
   webconsolejs["partials/layout/modal"].checkWorkspaceSelection(selectedWorkspaceProject)
+
+  // 현재 project set.
+  currentNsId = webconsolejs["common/api/services/workspace_api"].getCurrentProject()?.NsId
+
   ////////////////////// set workspace list, project list at Navbar end //////////////////////////////////
 
+  ////////////////////// 받은 mciId가 있으면 해당 mciId를 set하고 조회한다. ////////////////
+  // 외부(dashboard)에서 받아온 mciID가 있으면 MCIS INFO 이동
+  // 현재 브라우저의 URL
+  const url = window.location.href;
+  const urlObj = new URL(url);
+  // URLSearchParams 객체 생성
+  const params = new URLSearchParams(urlObj.search);
+  // mciID 파라미터 값 추출
+  var selectedMciID = params.get('mciID');
+
+  console.log('selectedMciID:', selectedMciID);  // 출력: mciID의 값 (예: com)
+  //if (selectedMciID != undefined) {
+  if (selectedMciID) {
+    currentMciId = selectedMciID
+    toggleRowSelection(selectedMciID)    
+  }
+  ////////////////////  mciId를 set하고 조회 완료. ////////////////
 
   refreshMciList();
 }
@@ -66,34 +93,12 @@ async function initMci() {
 export async function refreshMciList(){
   if (selectedWorkspaceProject.projectId != "") {
     console.log("workspaceProject ", selectedWorkspaceProject)
-    var selectedProjectId = selectedWorkspaceProject.projectId;
-    var selectedNsId = selectedWorkspaceProject.nsId;
-    console.log('in initMci selectedNsId:', selectedNsId);
-
+    
     //getMciList();// project가 선택되어 있으면 mci목록을 조회한다.
-    var respMciList = await webconsolejs["common/api/services/mci_api"].getMciList(selectedNsId);
+    var respMciList = await webconsolejs["common/api/services/mci_api"].getMciList(currentNsId);
     console.log("respMciListrespMciListrespMciList", respMciList)
-    getMciListCallbackSuccess(selectedProjectId, respMciList);
-
-
-    ////////////////////// 받은 mciId가 있으면 해당 mciId를 set하고 조회한다. ////////////////
-    // 외부(dashboard)에서 받아온 mciID가 있으면 MCIS INFO 이동
-    // 현재 브라우저의 URL
-    const url = window.location.href;
-    const urlObj = new URL(url);
-    // URLSearchParams 객체 생성
-    const params = new URLSearchParams(urlObj.search);
-    // mciID 파라미터 값 추출
-    selectedMciID = params.get('mciID');
-
-    console.log('selectedMciID:', selectedMciID);  // 출력: mciID의 값 (예: com)
-    //if (selectedMciID != undefined) {
-      if (selectedMciID) {
-      currentMciId = selectedMciID
-      toggleRowSelection(selectedMciID)
-      getSelectedMciData()
-    }
-    ////////////////////  mciId를 set하고 조회 완료. ////////////////
+    getMciListCallbackSuccess(selectedWorkspaceProject.projectId, respMciList);
+    
   }
 }
 
@@ -104,32 +109,64 @@ function getMciListCallbackSuccess(caller, mciList) {
 
   totalMciListObj = mciList.mci;
   console.log("total mci : ", totalMciListObj);
-  mciListTable.setData(totalMciListObj);
+  
+  // displayMciDashboard();
+
+  if( currentMciId ){
+    console.log("getMciListCallbackSuccess current mci ", currentMciId)
+    getSelectedMciData();//선택한 mci가 있으면 처리
+  }
+
+  refreshDisplay();
+}
+
+// data 표시 
+function refreshDisplay(){  
   setToTalMciStatus(); // mci상태 표시
   setTotalVmStatus(); // mci 의 vm들 상태표시
-  //     setTotalConnection();// Mci의 provider별 connection 표시
+  mciListTable.setData(totalMciListObj);
 
-  // displayMciDashboard();
+  if( currentMciId){
+    for (var mciIndex in totalMciListObj) {
+      var aMci = totalMciListObj[mciIndex];
 
+      if ( currentMciId == aMci.id){
+        console.log(aMci)
+        displayServerStatusList(currentMciId, aMci.vm)
+        break;
+      }
+    }    
+  }
 }
 
 // 클릭한 mci info 가져오기
 // 표에서 선택된 MciId 받아옴
 export async function getSelectedMciData() {
 
-  console.log('currentMciId:', currentMciId);  // 출력: mciID의 값 (예: com)
+  console.log('getSelectedMciData currentMciId:', currentMciId);  // 출력: mciID의 값 (예: com)
   if (currentMciId != undefined && currentMciId != "") {
-    var selectedNsId = webconsolejs["common/api/services/workspace_api"].getCurrentProject()?.NsId
     
-    var mciResp = await webconsolejs["common/api/services/mci_api"].getMci(selectedNsId, currentMciId)
+    var mciResp = await webconsolejs["common/api/services/mci_api"].getMci(currentNsId, currentMciId)
     console.log("mciResp ", mciResp)
     if (mciResp.status.code != 200) {
       console.log("resp status ", mciResp.status)
       // failed.  // TODO : Error Popup 처리
       return;
     }
+
+    var mciData = mciResp.responseData;
+    // 전체를 관리하는 obj 갱신
+    for (var mciIndex in totalMciListObj) {
+      var aMci = totalMciListObj[mciIndex];
+
+      if ( aMci.id == mciData.id ){
+        totalMciListObj[mciIndex] = mciData
+        break;
+      }
+    }
+    
     // SET MCIS Info page
-    setMciInfoData(mciResp.responseData)
+    setMciInfoData(mciData)
 
     // // Toggle MCIS Info
     // var div = document.getElementById("mci_info");
@@ -142,6 +179,7 @@ export async function getSelectedMciData() {
 function setMciInfoData(mciData) {
   console.log("setMciInfoData", mciData)
   try {
+
     var mciID = mciData.id;
     var mciName = mciData.name;
     var mciDescription = mciData.description;
@@ -199,43 +237,34 @@ function setMciInfoData(mciData) {
     console.error(e);
   }
 
-  // TODO : mci info로 cursor 이동
-  // vm상태별로 icon 표시한다
-  displayServerStatusList(mciID, mciData.vm)
-
+  refreshDisplay();
 }
 
 // mci 삭제
 export function deleteMci() {
-  var selectedNsId = selectedWorkspaceProject.nsId;
-  webconsolejs["common/api/services/mci_api"].mciDelete(checked_array, selectedNsId)
+  webconsolejs["common/api/services/mci_api"].mciDelete(checked_array, currentNsId)
 
 }
 
 // vm 삭제
 export function deleteVm() {
-  var selectedNsId = selectedWorkspaceProject.nsId;
-  webconsolejs["common/api/services/mci_api"].vmDelete(currentMciId, selectedNsId, selectedVmId)
+  webconsolejs["common/api/services/mci_api"].vmDelete(currentMciId, currentNsId, currentVmId)
 
 }
 
 // mci life cycle 변경
 export function changeMciLifeCycle(type) {
-
-  var selectedNsId = selectedWorkspaceProject.nsId;
-  webconsolejs["common/api/services/mci_api"].mciLifeCycle(type, checked_array, selectedNsId)
+  webconsolejs["common/api/services/mci_api"].mciLifeCycle(type, checked_array, currentNsId)
 }
 
 // vm life cycle 변경
 export function changeVmLifeCycle(type) {
-  var selectedNsId = selectedWorkspaceProject.nsId;
-
-  if (selectedVmId == undefined || selectedVmId == "") {
+  if (currentVmId == undefined || currentVmId == "") {
     webconsolejs['partials/layout/modal'].commonShowDefaultModal('Validation', 'Please select a VM')
     return;
   }
 
-  webconsolejs["common/api/services/mci_api"].vmLifeCycle(type, currentMciId, selectedNsId, selectedVmId)
+  webconsolejs["common/api/services/mci_api"].vmLifeCycle(type, currentMciId, currentNsId, currentVmId)
 }
 
 // vm 상태별 icon으로 표시
@@ -255,31 +284,62 @@ function displayServerStatusList(mciID, vmList) {
     var vmDispStatus = webconsolejs["common/api/services/mci_api"].getVmStatusFormatter(vmStatus); // vmStatus set
     var vmStatusClass = webconsolejs["common/api/services/mci_api"].getVmStatusStyleClass(vmDispStatus) // vmStatus 별로 상태 색상 set
 
-    vmLi += '<li id="server_status_icon_' + vmID + '" class="card ' + vmStatusClass + '" onclick="webconsolejs[\'pages/operation/manage/mci\'].vmDetailInfo(\'' + mciID + '\',\'' + mciName + '\',\'' + vmID + '\')"><span class="text-dark-fg">' + vmName + '</span></li>';
+    vmLi += '<li id="server_status_icon_' + vmID + '" class="card ' + vmStatusClass + '" onclick="webconsolejs[\'pages/operation/manage/mci\'].vmDetailInfo(\'' + vmID +'\')"><span class="text-dark-fg">' + vmName + '</span></li>';
 
   }// end of mci loop
 
   $("#mci_server_info_box").empty();
   $("#mci_server_info_box").append(vmLi);
+
+  // 선택한 vm이 있는 경우 해당 vm의 정보도 갱신한다.
+  if( currentVmId ){
+    vmDetailInfo(currentVmId)
+  }
 }
 
+
+
 // Server List / Status VM 리스트에서
 // VM 한 개 클릭시 vm의 세부 정보
-export async function vmDetailInfo(mciID, mciName, vmID) {
+export async function vmDetailInfo(vmId) {
+  currentVmId = vmId
   // Toggle MCIS Info
   var div = document.getElementById("server_info");
-  webconsolejs["partials/layout/navigatePages"].toggleElement(div)
+  const hasActiveClass = div.classList.contains("active");
+  console.log("vmDetailInfo hasActiveClass", hasActiveClass)
+  if( !hasActiveClass){
+    webconsolejs["partials/layout/navigatePages"].toggleElement(div)
+  }
 
   console.log("vmDetailInfo")
-  console.log("mciID : ", mciID)
-  console.log("mciName : ", mciName)
-  console.log("vmID : ", vmID)
+  console.log("mciID : ", currentMciId)
+  console.log("vmID : ", currentVmId)
 
-  // get mci 
-  var selectedNsId = webconsolejs["common/api/services/workspace_api"].getCurrentProject()?.NsId
+  // get mci vm  
   try {
-    var response = await webconsolejs["common/api/services/mci_api"].getMci(selectedNsId, mciID);
-    var aMci = response.responseData
+    var response = await webconsolejs["common/api/services/mci_api"].getMciVm(currentNsId, currentMciId, vmId);
+    var aVm = response.responseData
+    var responseVmId = response.id;
+    console.log("vm ", aVm)
+    // 전체를 관리하는 obj 갱신
+    var aMci = {};
+    for (var mciIndex in totalMciListObj) {
+      aMci = totalMciListObj[mciIndex];
+
+      if ( aMci.id == currentMciId ){
+        for (var vmIndex in aMci.vm) {
+          var tempVms = aMci.vm
+          if( currentVmId == tempVms.id){
+            aMci.vm[vmIndex] = aVm;
+            break;
+          }
+        }
+        //aMci = totalMciListObj[mciIndex];
+        totalMciListObj[mciIndex] = aMci;
+
+        break;
+      }
+    }
     clearServerInfo();
 
     console.log("aMci", aMci);
@@ -289,6 +349,7 @@ export async function vmDetailInfo(mciID, mciName, vmID) {
       return;
     }
 
+    var mciName = aMci.name;
     var vmList = aMci.vm;
     console.log("vmList:", vmList);
 
@@ -297,7 +358,7 @@ export async function vmDetailInfo(mciID, mciName, vmID) {
 
     for (var vmIndex in vmList) {
       var aVm = vmList[vmIndex];
-      if (vmID == aVm.id) {
+      if (currentVmId == aVm.id) {
         data = aVm;
         vmExist = true;
         console.log("aVm", aVm);
@@ -313,8 +374,7 @@ export async function vmDetailInfo(mciID, mciName, vmID) {
   }
   console.log("selected Vm");
   console.log("selected vm data : ", data);
-  var vmId = data.id;
-  selectedVmId = vmId
+  var vmId = data.id;  
   var vmName = data.name;
   var vmStatus = data.status;
   var vmDescription = data.description;
@@ -332,8 +392,9 @@ export async function vmDetailInfo(mciID, mciName, vmID) {
     console.log("e", e)
   }
   var startTime = data.createdTime
-  var privateIp = data.privateIP
-  var securityGroupID = data.securityGroupIds[0];
+  var privateIp = data.privateIP;
+  //var securityGroupID = data.securityGroupIds[0];
+  var securityGroupID = data.securityGroupIds;
   var providerName = data.connectionConfig.providerName
   var vmProviderIcon = ""
   vmProviderIcon +=
@@ -353,7 +414,7 @@ export async function vmDetailInfo(mciID, mciName, vmID) {
 
 
   $("#server_info_text").text(' [ ' + vmName + ' / ' + mciName + ' ]')
-  $("#server_info_name").text(vmName + "/" + vmID)
+  $("#server_info_name").text(vmName + "/" + vmId)
   $("#server_info_desc").text(vmDescription)
 
   $("#server_info_start_time").text(startTime)
@@ -557,8 +618,8 @@ function setToTalMciStatus() {
       var aMci = totalMciListObj[mciIndex];
 
       var aMciStatusCountMap = webconsolejs["common/api/services/mci_api"].calculateMciStatusCount(aMci);
-      console.log("aMci.id : ", aMci.id);
-      console.log("mciStatusMap ::: ", aMciStatusCountMap);
+      //console.log("aMci.id : ", aMci.id);
+      //console.log("mciStatusMap ::: ", aMciStatusCountMap);
       totalMciStatusMap.set(aMci.id, aMciStatusCountMap);
     }
   } catch (e) {
@@ -574,7 +635,7 @@ function setTotalVmStatus() {
   try {
     for (var mciIndex in totalMciListObj) {
       var aMci = totalMciListObj[mciIndex];
-      console.log("aMci : ", aMci);
+      //console.log("aMci : ", aMci);
       var vmStatusCountMap = webconsolejs["common/api/services/mci_api"].calculateVmStatusCount(aMci);
       totalVmStatusMap.set(aMci.id, vmStatusCountMap);
     }
@@ -598,7 +659,7 @@ function displayMciStatusArea() {
     sumMciRunningCnt += statusRunning;
     sumMciStopCnt += statusStop;
     sumMciTerminateCnt += statusTerminate;
-    console.log("totalMciStatusMap :: ", key, value);
+    //console.log("totalMciStatusMap :: ", key, value);
   });
   sumMciCnt = sumMciRunningCnt + sumMciStopCnt + sumMciTerminateCnt;