From 8d55b3a80c103a0254a8a2921c255c639aab721d Mon Sep 17 00:00:00 2001
From: JUNGEUNJUNG <dmsej108@strato.co.kr>
Date: Wed, 25 Sep 2024 07:45:11 +0900
Subject: [PATCH] deployment yaml generator add modal, UI update

---
 applicationFE/src/api/yaml.ts                 |   2 +-
 .../src/views/generate/YamlGenerate.vue       |   2 +-
 .../generate/components/configmapForm.vue     |  18 +-
 .../views/generate/components/deployModal.vue |  45 ++
 .../generate/components/deploymentForm.vue    | 439 +++++++++++-------
 .../src/views/generate/components/hpaForm.vue |   4 +-
 .../src/views/generate/components/podForm.vue |   4 +-
 .../views/generate/components/serviceForm.vue |  14 +-
 applicationFE/src/views/type/type.ts          |   2 +-
 9 files changed, 339 insertions(+), 191 deletions(-)
 create mode 100644 applicationFE/src/views/generate/components/deployModal.vue

diff --git a/applicationFE/src/api/yaml.ts b/applicationFE/src/api/yaml.ts
index 16e34f6..9230e40 100644
--- a/applicationFE/src/api/yaml.ts
+++ b/applicationFE/src/api/yaml.ts
@@ -18,7 +18,7 @@ export const generateYamlHpa = (param:Hpa) => {
 
 // deployment YAML
 export const generateYamlDeployment = (param:Deployment) => {
-  return request.post('/yaml/deployment', param)
+  return request.post('/manifest/v1/generator/yaml/deployments', param)
 }
 
 // configmap YAML
diff --git a/applicationFE/src/views/generate/YamlGenerate.vue b/applicationFE/src/views/generate/YamlGenerate.vue
index dbd8346..fce8960 100644
--- a/applicationFE/src/views/generate/YamlGenerate.vue
+++ b/applicationFE/src/views/generate/YamlGenerate.vue
@@ -40,8 +40,8 @@
 </template>
 <script setup lang="ts">
 import PodForm from './components/podForm.vue';
-import ServiceForm from './components/serviceForm.vue';
 import DeploymentForm from './components/deploymentForm.vue';
+import ServiceForm from './components/serviceForm.vue';
 import HpaForm from './components/hpaForm.vue';
 import ConfigmapForm from './components/configmapForm.vue';
 import { onMounted } from 'vue';
diff --git a/applicationFE/src/views/generate/components/configmapForm.vue b/applicationFE/src/views/generate/components/configmapForm.vue
index 127b5c4..0c79dd8 100644
--- a/applicationFE/src/views/generate/components/configmapForm.vue
+++ b/applicationFE/src/views/generate/components/configmapForm.vue
@@ -15,7 +15,7 @@
         </div>
         <div class="mb-3">
           <label class="form-label">- Labels</label>
-          <div class="generate-form" v-for="(item, idx) in ConfigMapLabels" :key="idx">
+          <div class="generate-form" v-for="(item, idx) in configMapLabels" :key="idx">
             <input type="text" class="form-control w-33" name="example-password-input" v-model="item.key" placeholder="key" />
             <input type="text" class="form-control w-33" name="example-password-input" v-model="item.value" placeholder="value" />
             <div class="btn-list">
@@ -71,7 +71,7 @@
     <div class="btn-list justify-content-end mt-4">
       <a class="btn btn-primary" @click="onClickDeploy" data-bs-toggle='modal' data-bs-target='#modal-config-map'>GENERATE</a>
     </div>
-    <yamlModal :yaml-data="yamlData" :title="title" />
+    <YamlModal :yaml-data="yamlData" :title="title" />
   </div>
   
   
@@ -84,7 +84,7 @@ import { ref } from 'vue';
 import { onMounted } from 'vue';
 import { generateYamlConfigmap } from '@/api/yaml.ts';
 import { useToast } from 'vue-toastification';
-import yamlModal from './configMapModal.vue';
+import YamlModal from './configMapModal.vue';
 
 const toast = useToast()
 /**
@@ -94,7 +94,7 @@ const toast = useToast()
  const title = ref("" as string)
  const configMapFormData = ref({} as ConfigMap)
  const metadata = ref({} as any)
- const ConfigMapLabels = ref([] as any)
+ const configMapLabels = ref([] as any)
  const configMapData = ref([] as any)
  const yamlData = ref("" as string)
 
@@ -109,12 +109,12 @@ const setInit = () => {
     namespace: "",
     labels: {}
   }
-  ConfigMapLabels.value.push({key: "", value:""})
+  configMapLabels.value.push({key: "", value:""})
   configMapData.value.push({key: "", value:""})
 }
 
 const onClickDeploy = async () => {
-  const transformedObject = ConfigMapLabels.value.reduce((acc: { [x: string]: any; }, item: { key: string | number; value: any; }) => {
+  const transformedObject = configMapLabels.value.reduce((acc: { [x: string]: any; }, item: { key: string | number; value: any; }) => {
     acc[item.key] = item.value;
     return acc;
   }, {});
@@ -134,14 +134,14 @@ const onClickDeploy = async () => {
 }
 
 const addLabel = () => {
-  ConfigMapLabels.value.push({
+  configMapLabels.value.push({
     key: "", value:""
   })
 }
 
 const removeLabel = (idx: number) => {
-  if(ConfigMapLabels.value.length !== 1) {
-    ConfigMapLabels.value.splice(idx, 1)
+  if(configMapLabels.value.length !== 1) {
+    configMapLabels.value.splice(idx, 1)
   }
 }
 
diff --git a/applicationFE/src/views/generate/components/deployModal.vue b/applicationFE/src/views/generate/components/deployModal.vue
new file mode 100644
index 0000000..457a399
--- /dev/null
+++ b/applicationFE/src/views/generate/components/deployModal.vue
@@ -0,0 +1,45 @@
+<template> 
+  <div class="modal" id="modal-deploy" tabindex="-1">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">{{ props.title }}</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        </div>
+        <div class="modal-body">
+          <div class="card">
+            <div class="card-body">
+              <h4>YAML</h4>
+              <div>
+                <pre>{{ data }}</pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, computed, watch } from 'vue';
+import { ref } from 'vue';
+import { useToast } from 'vue-toastification';
+
+interface Props {
+  title: string
+  yamlData: string
+}
+const props = defineProps<Props>()
+const yamlData = computed(() => props.yamlData)
+watch(yamlData, async () => {
+  await setData();
+});
+
+const data = ref("" as string)
+
+const setData = async () => {
+  data.value = props.yamlData
+}
+
+</script>
\ No newline at end of file
diff --git a/applicationFE/src/views/generate/components/deploymentForm.vue b/applicationFE/src/views/generate/components/deploymentForm.vue
index 68ba255..0ef3312 100644
--- a/applicationFE/src/views/generate/components/deploymentForm.vue
+++ b/applicationFE/src/views/generate/components/deploymentForm.vue
@@ -1,135 +1,182 @@
 <template>
   <div class="tab-pane" id="tabs-deployment">
-    <div class="mb-3">
-      <label class="form-label">Deployment Name</label>
-      <input type="text" class="form-control w-33" name="example-text-input" v-model="deploymentFormData.deployName" placeholder="deploy-01" />
-    </div>
-    <div class="mb-3">
-      <label class="form-label">Namespace</label>
-      <input type="text" class="form-control w-33" name="example-text-input" v-model="deploymentFormData.namespace" placeholder="namespace" />
-    </div>
-    <div class="mb-3">
-      <label class="form-label">Labels</label>
-      <div class="generate-form" v-for="(item, idx) in deploymentLabels" :key="idx">
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.key" placeholder="key" />
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.value" placeholder="value" />
-        <div class="btn-list">
-          <button class="btn btn-primary" @click="addLabel" style="text-align: center !important;">
-          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <path d="M12 5l0 14" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
-        <button class="btn btn-primary" @click="removeLabel(idx)">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
-        </div>
+    <div class="card">
+      <div class="card-header">
+        <h3 class="card-title">Metadata 영역</h3>
       </div>
-    </div>
-    <div class="mb-3">
-      <label class="form-label">Selector</label>
-      <div class="generate-form" v-for="(item, idx) in deploySelector" :key="idx">
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.key" placeholder="key" />
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.value" placeholder="value" />
-        <div class="btn-list">
-          <button class="btn btn-primary" @click="addSelector" style="text-align: center !important;">
-          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <path d="M12 5l0 14" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
-        <button class="btn btn-primary" @click="removeSelector(idx)">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
+      <div class="card-body">
+        <div class="mb-3">
+          <label class="form-label required">- Name</label>
+          <input type="text" class="form-control w-33" name="example-text-input" v-model="metadata.name" placeholder="deployment-01" />
         </div>
-      </div>
-    </div>
-    <div class="mb-3">
-      <label class="form-label">Replicas</label>
-      <input type="text" class="form-control w-33" name="example-text-input" v-model="deploymentFormData.namespace" placeholder="namespace" />
-    </div>
-    <div class="mb-3">
-      <label class="form-label">Image</label>
-      <input type="text" class="form-control w-33" name="example-text-input" v-model="deploymentFormData.image" placeholder="image" />
-    </div>
-    <div class="mb-3">
-      <label class="form-label">containerPort</label>
-      <div class="generate-form" v-for="(item, idx) in deployContainerPort" :key="idx">
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.portNum" placeholder="portNum" />
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.name" placeholder="name" />
-        <div class="btn-list">
-          <button class="btn btn-primary" @click="addPort" style="text-align: center !important;">
-          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <path d="M12 5l0 14" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
-        <button class="btn btn-primary" @click="removePort(idx)">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
+        <div class="mb-3">
+          <label class="form-label">- Namespace</label>
+          <input type="text" class="form-control w-33" name="example-text-input" v-model="metadata.namespace" placeholder="namespace" />
         </div>
-      </div>
-    </div>
-    <div class="mb-3">
-      <label class="form-label">env</label>
-      <div class="generate-form" v-for="(item, idx) in deployEnv" :key="idx">
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.name" placeholder="name" />
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.value" placeholder="value" />
-        <div class="btn-list">
-          <button class="btn btn-primary" @click="addEnv" style="text-align: center !important;">
-          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <path d="M12 5l0 14" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
-        <button class="btn btn-primary" @click="removeEnv(idx)">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
+        <div class="mb-3">
+          <label class="form-label">- Labels</label>
+          <div class="generate-form" v-for="(item, idx) in deployLabels" :key="idx">
+            <input type="text" class="form-control w-33" v-model="item.key" placeholder="key" />
+            <input type="text" class="form-control w-33" v-model="item.value" placeholder="value" />
+            <div class="btn-list">
+              <button class="btn btn-primary" @click="addLabel" style="text-align: center !important;">
+              <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M12 5l0 14" />
+                <path d="M5 12l14 0" />
+              </svg>
+            </button>
+            <button class="btn btn-primary" @click="removeLabel(idx)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M5 12l14 0" />
+              </svg>
+            </button>
+            </div>
+          </div>
         </div>
       </div>
     </div>
-    <div class="mb-3">
-      <label class="form-label">volumeMounts</label>
-      <div class="generate-form" v-for="(item, idx) in deployVoumeMounts" :key="idx">
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.mountPath" placeholder="mountPath" />
-        <input type="text" class="form-control w-33" name="example-password-input" v-model="item.name" placeholder="name" />
-        <div class="btn-list">
-          <button class="btn btn-primary" @click="addVm" style="text-align: center !important;">
-          <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
-            <path d="M12 5l0 14" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
-        <button class="btn btn-primary" @click="removeVm(idx)">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
-            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-            <path d="M5 12l14 0" />
-          </svg>
-        </button>
+
+    <div class="card mt-4">
+      <div class="card-header">
+        <h3 class="card-title">Spec 영역</h3>
+      </div>
+      <div class="card-body">
+        <div class="mb-3">
+          <label class="form-label">- Replicas</label>
+          <input type="text" class="form-control w-33" v-model="spec.replicas" />
+        </div>
+        <div class="mb-3">
+          <label class="form-label">- Match Labels</label>
+          <div class="generate-form" v-for="(item, idx) in matchLabels" :key="idx">
+            <input type="text" class="form-control w-33" v-model="item.key" placeholder="key" />
+            <input type="text" class="form-control w-33" v-model="item.value" placeholder="value" />
+            <div class="btn-list">
+              <button class="btn btn-primary" @click="addMatchLabel" style="text-align: center !important;">
+              <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M12 5l0 14" />
+                <path d="M5 12l14 0" />
+              </svg>
+            </button>
+            <button class="btn btn-primary" @click="removeMatchLabel(idx)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M5 12l14 0" />
+              </svg>
+            </button>
+            </div>
+          </div>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">Template</label>
+        </div>
+        <div class="mb-3">
+          <div class="btn-list">
+            <label class="form-label">- Labels</label>
+          </div>
+          <div class="generate-form" v-for="(item, idx) in templateLabels" :key="idx">
+            <input type="text" class="form-control w-33" v-model="item.key" placeholder="key" />
+            <input type="text" class="form-control w-33" v-model="item.value" placeholder="value" />
+            <div class="btn-list">
+              <button class="btn btn-primary" @click="addTemplateLabel" style="text-align: center !important;">
+              <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M12 5l0 14" />
+                <path d="M5 12l14 0" />
+              </svg>
+            </button>
+            <button class="btn btn-primary" @click="removeTemplateLabel(idx)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M5 12l14 0" />
+              </svg>
+            </button>
+            </div>
+          </div>
+        </div>
+
+      <div v-for="(container, idx) in containers" :key="idx">
+        <div class="mb-3">
+          <div class="btn-list">
+            <label class="form-label">Containers</label>
+            <button class="btn btn-primary" @click="addContainer" style="text-align: center !important;">
+              <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                <path d="M12 5l0 14" />
+                <path d="M5 12l14 0" />
+              </svg>
+            </button>
+            <button class="btn btn-primary" @click="removeContainer(idx)">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                <path d="M5 12l14 0" />
+              </svg>
+            </button>
+          </div>
+          <div class="row" style="width:68% !important">
+            <div class="col mt-4">
+              <label class="form-label required">- Name</label>
+              <input type="text" class="form-control" v-model="container.name" />
+            </div>
+            <div class="col mt-4">
+              <label class="form-label required">- Image</label>
+              <input type="text" class="form-control" v-model="container.image" />
+            </div>
+          </div>
         </div>
+        <div class="mb-3">
+          <label class="form-label">- Port</label>
+          <div class="generate-form" v-for="(port, portIndex) in container.ports" :key="portIndex">
+            <input type="text" class="form-control w-33" v-model="port.containerPort" placeholder="value" />
+            <div class="btn-list">
+              <button class="btn btn-primary" @click="addPort(idx)" style="text-align: center !important;">
+                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                  <path d="M12 5l0 14" />
+                  <path d="M5 12l14 0" />
+                </svg>
+              </button>
+              <button class="btn btn-primary" @click="removePort(idx, portIndex)">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                  <path d="M5 12l14 0" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="mb-3">
+          <label class="form-label">- Env</label>
+          <div class="generate-form" v-for="(env, envIndex) in container.env" :key="envIndex">
+            <input type="text" class="form-control w-33" v-model="env.name" placeholder="key" />
+            <input type="text" class="form-control w-33" v-model="env.value" placeholder="value" />
+            <div class="btn-list">
+              <button class="btn btn-primary" @click="addEnv(idx)" style="text-align: center !important;">
+                <svg  xmlns="http://www.w3.org/2000/svg"  width="24"  height="24"  viewBox="0 0 24 24"  fill="none"  stroke="currentColor"  stroke-width="2"  stroke-linecap="round"  stroke-linejoin="round"  class="icon icon-tabler icons-tabler-outline icon-tabler-plus" style="margin: 0 !important;">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+                  <path d="M12 5l0 14" />
+                  <path d="M5 12l14 0" />
+                </svg>
+              </button>
+              <button class="btn btn-primary" @click="removeEnv(idx, envIndex)">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-minus" style="margin: 0 !important;">
+                  <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                  <path d="M5 12l14 0" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
       </div>
     </div>
 
-    <div class="btn-list justify-content-end">
-      <a class="btn btn-primary" @click="onClickDeploy">GENERATE</a>
+    <div class="btn-list justify-content-end mt-4">
+      <a class="btn btn-primary" @click="onClickPod" data-bs-toggle='modal' data-bs-target='#modal-deploy'>GENERATE</a>
     </div>
+    <YamlModal :yaml-data="yamlData" :title="title" />
   </div>
   
   
@@ -138,106 +185,162 @@
 
 <script setup lang="ts">
 import type { Deployment } from '@/views/type/type';
-import { ref, reactive } from 'vue';
+import { ref } from 'vue';
 import { onMounted } from 'vue';
 import { useToast } from 'vue-toastification';
+import { generateYamlDeployment } from '@/api/yaml.ts';
+import YamlModal from './deployModal.vue';
 
 /**
  * @Title formData 
  * @Desc pod 데이터
  */
- const deploymentFormData = ref({} as Deployment)
- const deploymentLabels = ref([] as any)
- const deploySelector = ref([] as any)
- const deployContainerPort = ref([] as any)
- const deployEnv = ref([] as any)
- const deployVoumeMounts = ref([] as any)
+ const title = ref("" as string)
+ const deployFormData = ref({} as Deployment)
+ const metadata = ref({} as any)
+ const deployLabels = ref([] as any)
+ const matchLabels = ref([] as any)
+ const templateLabels = ref([] as any)
+ const spec = ref({} as any)
+ const containers = ref([] as any)
+ const yamlData = ref("" as string)
 
  onMounted(async () => {
   await setInit();
 })
 
 const setInit = () => {
-  deploymentLabels.value.push({key: "", value:""})
-  deploySelector.value.push({key: "", value:""})
-  deployContainerPort.value.push({portNum: "", name:""})
-  deployEnv.value.push({name: "", value:""})
-  deployVoumeMounts.value.push({mountPath: "", name:""})
-  deploymentFormData.value.deployName = ""
-  deploymentFormData.value.namespace = ""
-  deploymentFormData.value.image = ""
+  title.value = "Deployment"
+  metadata.value.name = ""
+  metadata.value.namespace = ""
+  deployLabels.value.push({key: "", value: ""})
+  matchLabels.value.push({key: "", value: ""})
+  templateLabels.value.push({key: "", value: ""})
+
+  spec.value = {
+    replicas: "",
+    selector: {
+      matchLabels: {}
+    },
+    template: {
+      metadata: {
+        labels:{}
+      },
+      spec: {
+        containers: []
+      }
+    }
+  }
+
+  containers.value.push({
+    name: "",
+    image: "",
+    env: [{name: "", value:""}],
+    ports: [{containerPort: ""}],
+  })
 }
 
-const onClickDeploy = () => {
-  console.log("onClickDeploy")
-  deploymentFormData.value.labels = deploymentLabels.value
-  deploymentFormData.value.selector = deploySelector.value
-  deploymentFormData.value.containerPort = deployContainerPort.value
-  deploymentFormData.value.env = deployEnv.value
-  deploymentFormData.value.volumeMounts = deployVoumeMounts.value
+const onClickPod = async () => {
+  const transformedObject = deployLabels.value.reduce((acc: { [x: string]: any; }, item: { key: string|number; value: any; }) => {
+    acc[item.key] = item.value;
+    return acc;
+  }, {});
+
+  const transformedObjectMatch = matchLabels.value.reduce((acc: { [x: string]: any; }, item: { key: string|number; value: any; }) => {
+    acc[item.key] = item.value;
+    return acc;
+  }, {});
+
+  const transformedObjectTemplate = templateLabels.value.reduce((acc: { [x: string]: any; }, item: { key: string|number; value: any; }) => {
+    acc[item.key] = item.value;
+    return acc;
+  }, {});
 
-  const param = { ...deploymentFormData }
+  metadata.value.labels = transformedObject;
+  deployFormData.value.metadata = metadata.value;
+  spec.value.selector.matchLabels = transformedObjectMatch;
+  spec.value.template.metadata.labels = transformedObjectTemplate;
+  spec.value.template.spec.containers =  containers.value;
+  deployFormData.value.spec = spec.value;
 
-  console.log("param : ", param)
+  console.log("deployFormData.value : ", deployFormData.value)
+  
+  const { data } = await generateYamlDeployment(deployFormData.value);
+  yamlData.value = data;
 }
 
 const addLabel = () => {
-  deploymentLabels.value.push({
+  deployLabels.value.push({
     key: "", value:""
   })
 }
 
 const removeLabel = (idx: number) => {
-  if(deploymentLabels.value.length !== 1) {
-    deploymentLabels.value.splice(idx, 1)
+  if(deployLabels.value.length !== 1) {
+    deployLabels.value.splice(idx, 1)
+  }
+}
+
+const addMatchLabel = () => {
+  matchLabels.value.push({
+    key: "", value:""
+  })
+}
+
+const removeMatchLabel = (idx: number) => {
+  if(matchLabels.value.length !== 1) {
+    matchLabels.value.splice(idx, 1)
   }
 }
 
-const addSelector = () => {
-  deploySelector.value.push({
+const addTemplateLabel = () => {
+  templateLabels.value.push({
     key: "", value:""
   })
 }
 
-const removeSelector = (idx: number) => {
-  if(deploySelector.value.length !== 1) {
-    deploySelector.value.splice(idx, 1)
+const removeTemplateLabel = (idx: number) => {
+  if(templateLabels.value.length !== 1) {
+    templateLabels.value.splice(idx, 1)
   }
 }
 
-const addPort = () => {
-  deployContainerPort.value.push({
-    portNum: "", name:""
+const addContainer = () => {
+  containers.value.push({
+    name: "",
+    image: "",
+    env: [{name: "", value:""}],
+    ports: [{containerPort: ""}],
   })
 }
 
-const removePort = (idx: number) => {
-  if(deployContainerPort.value.length !== 1) {
-    deployContainerPort.value.splice(idx, 1)
+const removeContainer = (idx: number) => {
+  if(containers.value.length !== 1) {
+    containers.value.splice(idx, 1)
   }
 }
 
-const addEnv = () => {
-  deployEnv.value.push({
+const addEnv = (idx: number) => {
+  containers.value[idx].env.push({
     name: "", value:""
   })
 }
 
-const removeEnv = (idx: number) => {
-  if(deployEnv.value.length !== 1) {
-    deployEnv.value.splice(idx, 1)
+const removeEnv = (idx: number, envIndex: number) => {
+  if(containers.value[idx].env.length !== 1) {
+    containers.value[idx].env.splice(envIndex, 1)
   }
 }
 
-const addVm = () => {
-  deployVoumeMounts.value.push({
-    mountPath: "", name:""
+const addPort = (idx: number) => {
+  containers.value[idx].ports.push({
+    containerPort: ""
   })
 }
 
-const removeVm = (idx: number) => {
-  if(deployVoumeMounts.value.length !== 1) {
-    deployVoumeMounts.value.splice(idx, 1)
+const removePort = (idx: number, portIndex: number) => {
+  if(containers.value[idx].ports.length !== 1) {
+    containers.value[idx].ports.splice(portIndex, 1)
   }
 }
 
diff --git a/applicationFE/src/views/generate/components/hpaForm.vue b/applicationFE/src/views/generate/components/hpaForm.vue
index 21fb637..7f55b74 100644
--- a/applicationFE/src/views/generate/components/hpaForm.vue
+++ b/applicationFE/src/views/generate/components/hpaForm.vue
@@ -87,7 +87,7 @@
     <div class="btn-list justify-content-end mt-4">
       <a class="btn btn-primary" @click="onClickHpa" data-bs-toggle='modal' data-bs-target='#modal-yaml'>GENERATE</a>
     </div>
-    <yamlModal :yaml-data="yamlData" :title="title" />
+    <YamlModal :yaml-data="yamlData" :title="title" />
   </div>
   
   
@@ -101,7 +101,7 @@ import { ref } from 'vue';
 import { onMounted } from 'vue';
 import { useToast } from 'vue-toastification';
 import { generateYamlHpa } from '@/api/yaml.ts';
-import yamlModal from './yamlModal.vue';
+import YamlModal from './yamlModal.vue';
 
 const toast = useToast()
 /**
diff --git a/applicationFE/src/views/generate/components/podForm.vue b/applicationFE/src/views/generate/components/podForm.vue
index 7ab8d28..73acb3a 100644
--- a/applicationFE/src/views/generate/components/podForm.vue
+++ b/applicationFE/src/views/generate/components/podForm.vue
@@ -174,7 +174,7 @@
     <div class="btn-list justify-content-end mt-4">
       <a class="btn btn-primary" @click="onClickPod" data-bs-toggle='modal' data-bs-target='#modal-pod'>GENERATE</a>
     </div>
-    <yamlModal :yaml-data="yamlData" :title="title" />
+    <YamlModal :yaml-data="yamlData" :title="title" />
   </div>
   
   
@@ -187,7 +187,7 @@ import { ref, reactive } from 'vue';
 import { onMounted } from 'vue';
 import { useToast } from 'vue-toastification';
 import { generateYamlPod } from '@/api/yaml.ts';
-import yamlModal from './podModal.vue';
+import YamlModal from './podModal.vue';
 
 /**
  * @Title formData 
diff --git a/applicationFE/src/views/generate/components/serviceForm.vue b/applicationFE/src/views/generate/components/serviceForm.vue
index edbea65..9740e6c 100644
--- a/applicationFE/src/views/generate/components/serviceForm.vue
+++ b/applicationFE/src/views/generate/components/serviceForm.vue
@@ -103,14 +103,16 @@
                 <input type="text" class="form-control" v-model="item.nodePort" />
               </div>
             </div>
+            <div class="border-bottom" style="width: 100%; margin-top: 10px" v-if="ports.length > 1"></div>
+          </div>
+          
             <div class="row" style="width:68% !important">
               <div class="col mt-4">
                 <label class="form-label">- Type</label>
-                <input type="text" class="form-control" v-model="type" />
+                <input type="text" class="form-control" v-model="spec.type" />
               </div>
             </div>
-            <div class="border-bottom" style="width: 100%; margin-top: 10px" v-if="ports.length > 1"></div>
-          </div>
+          
         </div>
       </div>
     </div>
@@ -118,7 +120,7 @@
     <div class="btn-list justify-content-end mt-4">
       <a class="btn btn-primary" @click="onClickService" data-bs-toggle='modal' data-bs-target='#modal-service'>GENERATE</a>
     </div>
-    <yamlModal :yaml-data="yamlData" :title="title" />
+    <YamlModal :yaml-data="yamlData" :title="title" />
   </div>
   
   
@@ -131,7 +133,7 @@ import { ref } from 'vue';
 import { onMounted } from 'vue';
 import { useToast } from 'vue-toastification';
 import { generateYamlService } from '@/api/yaml.ts';
-import yamlModal from './servcieModal.vue';
+import YamlModal from './servcieModal.vue';
 
 /**
  * @Title formData 
@@ -166,7 +168,6 @@ const setInit = () => {
   serviceLabels.value.push({key: "", value:""})
   selector.value.push({key: "", value:""})
   ports.value.push({protocol: "", port: "", targetPort: "", nodePort: ""})
-  type.value = ""
 }
 
 const onClickService = async () => {
@@ -185,7 +186,6 @@ const onClickService = async () => {
 
   spec.value.selector = transformedObjectSelector;
   spec.value.ports = ports.value;
-  spec.value.type = type.value
   serviceFormData.value.spec = spec.value
 
   const { data } = await generateYamlService(serviceFormData.value);
diff --git a/applicationFE/src/views/type/type.ts b/applicationFE/src/views/type/type.ts
index f612a1a..8eaf32f 100644
--- a/applicationFE/src/views/type/type.ts
+++ b/applicationFE/src/views/type/type.ts
@@ -20,7 +20,7 @@ export interface Pod {
 
 export interface Deployment {
   metadata: {}
-  data: {}
+  spec: {}
 }
 
 export interface ConfigMap {