diff --git a/applicationFE/src/api/repository.ts b/applicationFE/src/api/repository.ts
new file mode 100644
index 0000000..246119d
--- /dev/null
+++ b/applicationFE/src/api/repository.ts
@@ -0,0 +1,43 @@
+import request from "../common/request";
+import type { Repository } from "@/views/type/type";
+
+// Repository 목록
+export const getRepositoryList = (module:string) => {
+  return request.get(`/oss/v1/repositories/${module}/list`)
+}
+
+// Repository 삭제
+export function deleteRepository(module: string, name: string) {
+  return request.delete(`/oss/v1/repositories/${module}/delete/${name}`)
+}
+
+// Repository 등록
+export function registRepository(module: string, param: Repository) {
+  return request.post(`/oss/v1/repositories/${module}/create`, param)
+}
+
+// Repository 상세정보 조회
+export const getRepositoryDetailInfo = (module:string, name: string) => {
+  return request.get(`/oss/v1/repositories/${module}/detail/${name}`)
+}
+
+// Repository 수정
+export const updateRepository = (module:string, param: Repository) => {
+  return request.put(`/oss/v1/repositories/${module}/update`, param)
+}
+
+// Repository 삭제
+export function deleteComponent(module: string, id: string) {
+  return request.delete(`/oss/v1/components/${module}/delete/${id}`)
+}
+
+// 컴포넌트 목록
+export const getComponentList = (module:string, name: string) => {
+  return request.get(`/oss/v1/components/${module}/list/${name}`)
+}
+
+
+// 컴포넌트 파일 upload
+export const uploadComponent = (module:string, name: string, param: object) => {
+  return request.post(`/oss/v1/components/${module}/create/${name}`, param)
+}
\ No newline at end of file
diff --git a/applicationFE/src/router/index.ts b/applicationFE/src/router/index.ts
index 8812cc9..4ed8119 100644
--- a/applicationFE/src/router/index.ts
+++ b/applicationFE/src/router/index.ts
@@ -13,6 +13,21 @@ const router = createRouter({
       name: 'ossList',
       component: () => import('@/views/oss/OssList.vue' as any)
     },
+    {
+      path: '/web/generate/yaml',
+      name: 'yamlGenerate',
+      component: () => import('@/views/generate/YamlGenerate.vue' as any)
+    },
+    {
+      path: '/web/repository/list',
+      name: 'repositoryList',
+      component: () => import('@/views/repository/RepositoryList.vue' as any)
+    },
+    {
+      path: `/web/repository/detail/:repositoryName`,
+      name: 'repositoryDetail',
+      component: () => import('@/views/repository/RepositoryDetail.vue' as any)
+    },
   ]
 })
 
diff --git a/applicationFE/src/views/repository/RepositoryDetail.vue b/applicationFE/src/views/repository/RepositoryDetail.vue
new file mode 100644
index 0000000..bc426f5
--- /dev/null
+++ b/applicationFE/src/views/repository/RepositoryDetail.vue
@@ -0,0 +1,210 @@
+<template>
+  <div class="card w-100" ref="workflowForm">
+    <div class="card-header">
+      <div class="card-title">
+        <h1>Repository Detail</h1>
+      </div>
+    </div>
+    <div 
+      class="card-body">
+      <div class="card-title">
+        <div class="mb-3">
+          <label class="form-label">Name</label>
+          <div class="grid gap-0 column-gap-3">
+            <input type="text" ref="repositoryName" class="form-control p-2 g-col-11" v-model="repositoryDetail.name" readonly />
+          </div>
+        </div>
+
+        <div class="mb-3">
+          <label class="form-label">Format</label>
+          <div class="grid gap-0 column-gap-3">
+            <input type="text" ref="repositoryFormat" class="form-control p-2 g-col-11" v-model="repositoryDetail.format" readonly />
+          </div>
+        </div>
+
+        <div class="mb-3">
+          <label class="form-label required">URL(Path)</label>
+          <div class="grid gap-0 column-gap-3">
+            <input type="text" ref="repositoryFormat" class="form-control p-2 g-col-11" v-model="repositoryDetail.url" readonly />
+          </div>
+        </div>
+
+        <div class="mb-3">
+          <label class="form-label required">Type(hosted)</label>
+          <div class="grid gap-0 column-gap-3">
+            <input type="text" ref="repositoryFormat" class="form-control p-2 g-col-11" v-model="repositoryDetail.type" readonly />
+          </div>
+        </div>
+
+        <div class="mb-3">
+          <div class="btn-list">
+            <button class='btn btn-primary d-none d-sm-inline-block' style="margin-left: auto; margin-bottom:10px;" data-bs-toggle='modal' data-bs-target='#uploadComponent'>
+              File Upload
+            </button>      
+          </div>
+          <Tabulator 
+            :columns="columns"
+            :table-data="componentList">
+          </Tabulator>
+        </div>
+
+        <div class="row align-items-center">
+          <div id="gap" class="col" />
+          <div class="col-auto ms-auto">
+            <div class="btn-list">
+              <button class="btn btn-right border" @click="onClickList">
+                목록으로
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <DeleteComponent 
+        :component-name="selectComponentName"
+        :component-id="selectComponentId"
+        @get-detail="_getDetailInfo"/>
+
+      <UploadComponent 
+        :repository-name="repositoryDetail.name"
+        :format="repositoryDetail.format"
+        @get-detail="_getDetailInfo"/>
+
+    </div>      
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue';
+import { onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { getRepositoryDetailInfo, getComponentList } from '@/api/repository';
+import { type Repository, type Component } from '@/views/type/type'
+import { useToast } from 'vue-toastification';
+import _ from 'lodash';
+import Tabulator from '@/components/Table/Tabulator.vue'
+import { type ColumnDefinition } from 'tabulator-tables';
+import DeleteComponent from './components/deleteComponent.vue';
+import UploadComponent from './components/uploadComponent.vue';
+
+const toast = useToast()
+const route = useRoute();
+const router = useRouter();
+const repositoryDetail = ref({} as Repository)
+
+const componentList = ref([] as Array<Component>)
+const columns = ref([] as Array<ColumnDefinition>)
+
+onMounted(async () => {
+  setColumns()
+  await _getDetailInfo()
+})
+
+const repositoryName = ref('' as any)
+const _getDetailInfo = async () => {
+  repositoryName.value = route.params.repositoryName
+  const { data } = await getRepositoryDetailInfo("nexus", repositoryName.value);
+  repositoryDetail.value = data;
+  await _getComponentInfo()
+}
+
+const _getComponentInfo = async () => {
+  const { data } = await getComponentList("nexus", repositoryDetail.value.name);
+  componentList.value = data;
+}
+
+const selectComponentId = ref('' as string)
+const selectComponentName = ref('' as string)
+const setColumns = () => {
+  columns.value = [
+    {
+      title: "File Name",
+      field: "name",
+      width: 400
+    },
+    {
+      title: "File Format",
+      field: "format",
+      width: 300
+    },
+    {
+      title: "File URL(Path)",
+      field: "assets",
+      width: 800,
+      formatter: function(cell) {
+        const assets = cell.getValue();
+        if (assets && assets.length > 0) {
+            const dowonloadUrl = assets[0].downloadUrl;
+            return dowonloadUrl;
+        }
+        return "N/A";
+      }
+    },
+    {
+      title: "File Size",
+      field: "assets",
+      width: 400,
+      formatter: function(cell) {
+        const assets = cell.getValue();
+        if (assets && assets.length > 0) {
+            const fileSize = assets[0].fileSize;
+            return `${(fileSize / 1024).toFixed(2)} KB`; // 파일 크기를 KB 단위로 포맷
+        }
+        return "N/A";
+      }
+    },
+    {
+      title: "Action",
+      width: 400,
+      formatter: downloadDeleteButtonFormatter,
+      cellClick: function (e, cell) {
+        const target = e.target as HTMLElement;
+        const btnFlag = target?.getAttribute('id')
+        
+        if (btnFlag === 'download-btn') {
+          console.log("download")
+          let fileData = cell.getRow().getData()
+          downloadUrl(fileData)
+        }
+        else {
+          selectComponentId.value = cell.getRow().getData().id
+          selectComponentName.value = cell.getRow().getData().name
+        }
+      }
+    }
+  ]
+}
+
+const downloadDeleteButtonFormatter = () => {
+  return `
+  <div>
+  <button
+      class='btn btn-danger d-none d-sm-inline-block'
+      id='delete-btn'
+      data-bs-toggle='modal' 
+      data-bs-target='#deleteComponent'>
+      Delete
+    </button>
+    <button
+      class='btn btn-primary d-none d-sm-inline-block mr-5'
+      id='download-btn'>
+      Download
+    </button>
+  </div>`;
+}
+
+const downloadUrl = (data: any) => {
+  const url = data.assets[0].downloadUrl;
+  const link = document.createElement('a');
+  link.href = url;
+  link.download = '';
+
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+const onClickList = () => {
+  router.push('/web/repository/list')
+}
+
+</script>
\ No newline at end of file
diff --git a/applicationFE/src/views/repository/RepositoryList.vue b/applicationFE/src/views/repository/RepositoryList.vue
new file mode 100644
index 0000000..f12e73b
--- /dev/null
+++ b/applicationFE/src/views/repository/RepositoryList.vue
@@ -0,0 +1,165 @@
+<template>
+  <div class="card card-flush w-100">
+    <TableHeander 
+      :header-title="'Repository'"
+      :new-btn-title="'New Repository'"
+      :popup-flag="true"
+      :popup-target="'#repositoryForm'"
+      @click-new-btn="onClickNewBtn"
+    />
+    <Tabulator 
+      :columns="columns"
+      :table-data="repositoryList">
+    </Tabulator>
+
+    <RepositoryForm 
+      :mode="formMode"
+      :repository-name="selectRepositoryName"
+      @get-repository-list="_getRepositoryList"/>
+
+    <DeleteRepository 
+      :repository-name="selectRepositoryName"
+      @get-repository-list="_getRepositoryList"/>
+
+  </div>
+</template>
+<script setup lang="ts">
+import TableHeander from '@/components/Table/TableHeader.vue'
+import Tabulator from '@/components/Table/Tabulator.vue'
+import { getRepositoryList } from '@/api/repository'
+import { onMounted } from 'vue';
+import { ref } from 'vue';
+import { type Repository } from '@/views/type/type'
+import { type ColumnDefinition } from 'tabulator-tables';
+import { useToast } from 'vue-toastification';
+import router from '@/router';
+import RepositoryForm from './components/repositoryForm.vue';
+import DeleteRepository from './components/deleteRepository.vue';
+
+const toast = useToast()
+/**
+ * @Title repositoryList / columns
+ * @Desc 
+ *    repositoryList : repository 목록 저장
+ *    columns : 목록의 컬럼 저장
+ */
+const repositoryList = ref([] as Array<Repository>)
+const columns = ref([] as Array<ColumnDefinition>)
+
+/**
+ * @Title Life Cycle
+ * @Desc 컬럼 set Callback 함수 호출 / repositoryList Callback 함수 호출
+ */
+onMounted(async () => {
+  setColumns()
+  await _getRepositoryList()
+})
+
+/**
+ * @Title _getRepositoryList
+ * @Desc repository List Callback 함수 / repository List api 호출
+ */
+const _getRepositoryList = async () => {
+  try {
+    const { data } = await getRepositoryList("nexus")
+    repositoryList.value = data
+  } catch(error) {
+    console.log(error)
+    toast.error('데이터를 가져올 수 없습니다.')
+  }
+}
+
+/**
+ * @Title selectRepositoryName / setColumns
+ * @Desc
+ *    selectRepositoryName : 삭제를 위한 선택된 row의 ossName저장
+ *    setColumns : 컬럼 set Callback 함수
+ */
+const selectRepositoryName = ref('' as string)
+const setColumns = () => {
+  columns.value = [
+    {
+      title: "Name",
+      field: "name",
+      width: 400,
+      cellClick: function (e, cell) {
+        e.stopPropagation();
+        selectRepositoryName.value = cell.getRow().getData().name
+        router.push('/web/repository/detail/' + selectRepositoryName.value)
+      }
+    },
+    {
+      title: "Format",
+      field: "format",
+      width: 300
+    },
+    {
+      title: "URL",
+      field: "url",
+      width: 410
+    },
+    {
+      title: "Type(hosted)",
+      field: "type",
+      width: 400
+    },
+    {
+      title: "Action",
+      width: 400,
+      formatter: editDeleteButtonFormatter,
+      cellClick: function (e, cell) {
+        const target = e.target as HTMLElement;
+        const btnFlag = target?.getAttribute('id')
+        selectRepositoryName.value = cell.getRow().getData().name
+
+        if (btnFlag === 'edit-btn') {
+          formMode.value = 'edit'
+        }
+        else {
+          selectRepositoryName.value = cell.getRow().getData().name
+        }
+      }
+    }
+  ]
+}
+
+/**
+ * @Title editButtonFormatter
+ * @Desc 수정 / 삭제 버튼 Formatter
+ */
+const editDeleteButtonFormatter = () => {
+  return `
+  <div>
+    <button
+      class='btn btn-primary d-none d-sm-inline-block mr-5'
+      id='edit-btn'
+      data-bs-toggle='modal' 
+      data-bs-target='#repositoryForm'>
+      Update
+    </button>
+    <button
+      class='btn btn-danger d-none d-sm-inline-block'
+      id='delete-btn'
+      data-bs-toggle='modal' 
+      data-bs-target='#deleteRepository'>
+      Delete
+    </button>
+  </div>`;
+}
+
+/**
+ * @Title formMode
+ * @Desc 기본값 new / repositoryForm에 생성/수정 을 알려주는 값
+ */
+const formMode = ref('new')
+
+/**
+ * @Title onClickNewBtn
+ * @Desc repository 생성버튼 클릭시 동작하는 함수 (formMode set)
+ */
+const onClickNewBtn = () => {
+  formMode.value = 'new'
+}
+
+
+</script>
\ No newline at end of file
diff --git a/applicationFE/src/views/repository/components/deleteComponent.vue b/applicationFE/src/views/repository/components/deleteComponent.vue
new file mode 100644
index 0000000..8623913
--- /dev/null
+++ b/applicationFE/src/views/repository/components/deleteComponent.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="modal" id="deleteComponent" tabindex="-1">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <div class="modal-status bg-danger"></div>
+        <div class="modal-body text-left py-4">
+          <!-- OSS Title -->
+          <h3 class="mb-5">
+            Component 삭제
+          </h3>
+
+          <h4>{{ props.componentName }}을(를) 정말 삭제하시겠습니까?</h4>
+
+        </div>
+
+        <div class="modal-footer">
+          <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
+            Cancel
+          </a>
+          <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal"  @click="onClickDelete()">
+            삭제
+          </a>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'vue-toastification';
+import { deleteComponent } from '@/api/repository';
+
+const toast = useToast()
+/**
+ * @Title Props / Emit
+ */
+interface Props {
+  componentName: string
+  componentId: string
+}
+const props = defineProps<Props>()
+const emit = defineEmits(['get-detail'])
+
+/**
+ * @Title onClickDelete
+ * @Desc 삭제 버튼 클릭시 동작 / 삭제 api 호출
+ */
+const onClickDelete = async () => {
+  const { data } = await deleteComponent("nexus", props.componentId)
+  if (data)
+    toast.success('삭제되었습니다.')
+  else
+    toast.error('삭제하지 못했습니다.')
+    emit('get-detail')
+}
+</script>
\ No newline at end of file
diff --git a/applicationFE/src/views/repository/components/deleteRepository.vue b/applicationFE/src/views/repository/components/deleteRepository.vue
new file mode 100644
index 0000000..6428d8e
--- /dev/null
+++ b/applicationFE/src/views/repository/components/deleteRepository.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="modal" id="deleteRepository" tabindex="-1">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <div class="modal-status bg-danger"></div>
+        <div class="modal-body text-left py-4">
+          <!-- OSS Title -->
+          <h3 class="mb-5">
+            Repository 삭제
+          </h3>
+
+          <h4>{{ props.repositoryName }}을(를) 정말 삭제하시겠습니까?</h4>
+
+        </div>
+
+        <div class="modal-footer">
+          <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
+            Cancel
+          </a>
+          <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal"  @click="onClickDelete()">
+            삭제
+          </a>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'vue-toastification';
+import { deleteRepository } from '@/api/repository';
+
+const toast = useToast()
+/**
+ * @Title Props / Emit
+ */
+interface Props {
+  repositoryName: string
+}
+const props = defineProps<Props>()
+const emit = defineEmits(['get-repository-list'])
+
+/**
+ * @Title onClickDelete
+ * @Desc 삭제 버튼 클릭시 동작 / 삭제 api 호출
+ */
+const onClickDelete = async () => {
+  const { data } = await deleteRepository("nexus", props.repositoryName)
+  if (data)
+    toast.success('삭제되었습니다.')
+  else
+    toast.error('삭제하지 못했습니다.')
+    emit('get-repository-list')
+}
+</script>
\ No newline at end of file
diff --git a/applicationFE/src/views/repository/components/repositoryForm.vue b/applicationFE/src/views/repository/components/repositoryForm.vue
new file mode 100644
index 0000000..f99af53
--- /dev/null
+++ b/applicationFE/src/views/repository/components/repositoryForm.vue
@@ -0,0 +1,236 @@
+<template>
+  <div class="modal" id="repositoryForm" tabindex="-1">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <div class="modal-body text-left py-4">
+          <!-- Repository Title -->
+          <h3 class="mb-5">
+            Repository {{ props.mode === 'new' ? '생성' : '수정'}}
+          </h3>
+
+          <div>
+            <!-- Repository 명 -->
+            <div class="row mb-3">
+              <label class="form-label required">Name</label>
+              <div class="grid gap-0 column-gap-3">
+                <input type="text" class="form-control p-2 g-col-11" v-model="repositoryFormData.name" />
+              </div>
+            </div>
+            
+            <!-- Format -->
+            <div class="mb-3">
+              <label class="form-label required">Format</label>
+              <div>
+                <label class="form-check form-check-inline">
+                  <input class="form-check-input" type="radio" name="format" value="raw" v-model="repositoryFormData.format">
+                  <span class="form-check-label">raw</span>
+                </label>
+                <label class="form-check form-check-inline">
+                  <input class="form-check-input" type="radio" name="format" value="helm" v-model="repositoryFormData.format">
+                  <span class="form-check-label">helm</span>
+                </label>
+                <label class="form-check form-check-inline">
+                  <input class="form-check-input" type="radio" name="format" value="docker" v-model="repositoryFormData.format">
+                  <span class="form-check-label">docker</span>
+                </label>
+              </div>
+            </div>
+
+            <!-- Allow -->
+            <div class="mb-3">
+              <label class="form-label required">Allow</label>
+              <div>
+                <label class="form-check form-check-inline">
+                  <input class="form-check-input" type="radio" name="allow" value="allow" v-model="writePolicy">
+                  <span class="form-check-label">allow</span>
+                </label>
+                <label class="form-check form-check-inline">
+                  <input class="form-check-input" type="radio" name="allow" value="allow_once" v-model="writePolicy">
+                  <span class="form-check-label">allow_once</span>
+                </label>
+                <label class="form-check form-check-inline">
+                  <input class="form-check-input" type="radio" name="allow" value="deny" v-model="writePolicy">
+                  <span class="form-check-label">deny</span>
+                </label>
+              </div>
+            </div>
+
+            <!-- On/Offline -->
+            <div class="mb-3">
+              <label class="form-label required">On/Offline</label>
+              <div>
+                <label class="form-check form-check-inline">
+                  <input class="form-check-input" type="radio" name="online" value="true" v-model="repositoryFormData.online">
+                  <span class="form-check-label">true</span>
+                </label>
+                <label class="form-check form-check-inline">
+                  <input class="form-check-input" type="radio" name="online" value="false" v-model="repositoryFormData.online">
+                  <span class="form-check-label">false</span>
+                </label>
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <label class="form-label required">Storage</label>
+              <div class="grid gap-0 column-gap-3">
+                <input type="text" class="form-control p-2 g-col-11" value="defalut" disabled />
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <label class="form-label required">Http</label>
+              <div class="grid gap-0 column-gap-3">
+                <input type="text" class="form-control p-2 g-col-11" v-model="httpPort" :disabled="repositoryFormData.format != 'docker'" />
+              </div>
+            </div>
+
+            <div class="mb-3">
+              <label class="form-label required">Https</label>
+              <div class="grid gap-0 column-gap-3">
+                <input type="text" class="form-control p-2 g-col-11" v-model="httpsPort" :disabled="repositoryFormData.format != 'docker'" />
+              </div>
+            </div>
+
+          </div>
+        </div>
+
+      <div class="modal-footer">
+        <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal" @click="setInit()">
+          Cancel
+        </a>
+        <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal"  @click="onClickSubmit()">
+          {{props.mode === 'new' ? '생성' : '수정'}}
+        </a>
+      </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Repository } from '../../type/type';
+import { ref } from 'vue';
+import { useToast } from 'vue-toastification';
+import { registRepository, getRepositoryDetailInfo, updateRepository } from '@/api/repository';
+import { onMounted } from 'vue';
+import { computed } from 'vue';
+import { watch } from 'vue';
+
+const toast = useToast()
+/**
+ * @Title Props / Emit
+ */
+interface Props {
+  mode: String
+  repositoryName: string
+}
+const props = defineProps<Props>()
+const emit = defineEmits(['get-repository-list'])
+const repositoryName = computed(() => props.repositoryName);
+watch(repositoryName, async () => {
+  await setInit();
+});
+
+onMounted(async () => {
+  await setInit();
+})
+
+const repositoryFormData = ref({} as Repository)
+const writePolicy = ref("" as string)
+const httpPort = ref(0 as number)
+const httpsPort = ref(0 as number)
+
+const setInit = async () => {
+  if (props.mode === 'new') {
+    repositoryFormData.value.name = ''
+    repositoryFormData.value.format = 'raw'
+    repositoryFormData.value.type = 'hosted'
+    repositoryFormData.value.url = ''
+    repositoryFormData.value.online = true
+    writePolicy.value = "allow"
+  }
+  else {
+    const { data } = await getRepositoryDetailInfo("nexus", props.repositoryName)
+    repositoryFormData.value = data
+    writePolicy.value = data.storage.writePolicy
+    if(data.format == "docker") {
+      httpPort.value = data.docker.httpPort
+      httpsPort.value = data.docker.httpsPort
+    }
+  }
+}
+
+/**x
+ * @Title onClickSubmit
+ * @Desc 
+ *     1. 생성 / 수정 버튼 클릭시 동작
+ *     2. 부모로 부터 받은 mode값에 따라서 생성/수정 Callback 함수 호출후 부모에게 repository 목록 api 호출  
+ */
+const onClickSubmit = async () => {
+  repositoryFormData.value.storage = {
+    "blobStoreName": "default",
+    "strictContentTypeValidation": true,
+    "writePolicy": writePolicy.value
+  }
+
+  if(repositoryFormData.value.format != "docker") {
+    repositoryFormData.value.docker = null
+  } else {
+    repositoryFormData.value.docker = {
+      "v1Enabled": true,
+      "forceBasicAuth": true,
+      "httpPort": httpPort.value,
+      "httpsPort": httpsPort.value,
+      "subdomain": "/test"
+    }
+  }
+
+  if (props.mode === 'new') {
+    await _registRepository().then(() => {
+      emit('get-repository-list')
+    })
+  }
+  else 
+    await _updateRepository().then(() => {
+      emit('get-repository-list')
+    })  
+  setInit()
+}
+
+/**
+ * @Title _registRepository
+ * @Desc 생성 Callback 함수 / 생성 api 호출
+ */
+const _registRepository = async () => {
+  const { data } = await registRepository("nexus", repositoryFormData.value)
+  if (data)
+    toast.success('등록되었습니다.')
+  else
+    toast.error('등록 할 수 없습니다.')
+}
+
+/**
+ * @Title updateRepository
+ * @Desc 수정 Callback 함수 / 수정 api 호출
+ */
+const _updateRepository = async () => {
+  const { data } = await updateRepository("nexus", repositoryFormData.value)
+  if (data)
+    toast.success('등록되었습니다.')
+  else
+    toast.error('등록 할 수 없습니다.')
+}
+
+</script>
+
+<!-- <style scoped>
+.d-lb {
+  display: inline-block;
+}
+.mr-5 {
+   margin-right: 5px;
+}
+</style> -->
\ No newline at end of file
diff --git a/applicationFE/src/views/repository/components/uploadComponent.vue b/applicationFE/src/views/repository/components/uploadComponent.vue
new file mode 100644
index 0000000..e0513ef
--- /dev/null
+++ b/applicationFE/src/views/repository/components/uploadComponent.vue
@@ -0,0 +1,108 @@
+<template>
+  <div class="modal" id="uploadComponent" tabindex="-1">
+    <div class="modal-dialog modal-lg" role="document">
+      <div class="modal-content">
+
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+        <div class="modal-body text-left py-4">
+          <!-- OSS Title -->
+          <h3 class="mb-5">
+            File Upload
+          </h3>
+
+          <div>
+            <!-- Repository 명 -->
+            <div class="mb-3">
+              <label class="form-label">Name</label>
+              <input type="text" class="form-control p-2 g-col-11" :value="props.repositoryName" readonly />
+            </div>
+
+            <div class="mb-3">
+              <label class="form-label">Path</label>
+              <input type="text" class="form-control p-2 g-col-11" v-model="directory" :disabled="props.format != 'raw'"/>
+            </div>
+
+            <div class="mb-3">
+              <label class="form-label required">File</label>
+              <div class="grid gap-0 column-gap-3">
+                <input type="file" class="form-control p-2 g-col-11" @change="handleFileChange"/>
+                <!-- <button class="btn btn-primary">File</button> -->
+              </div>
+            </div>
+
+          </div>
+
+        </div>
+
+        <div class="modal-footer">
+          <a href="#" class="btn btn-link link-secondary" data-bs-dismiss="modal">
+            Cancel
+          </a>
+          <a href="#" class="btn btn-primary ms-auto" data-bs-dismiss="modal"  @click="fileUpload()">
+            Upload
+          </a>
+        </div>
+
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useToast } from 'vue-toastification';
+import { uploadComponent } from '@/api/repository';
+import { ref } from 'vue';
+import _ from 'lodash';
+import { onMounted } from 'vue';
+
+const toast = useToast()
+/**
+ * @Title Props / Emit
+ */
+interface Props {
+  repositoryName: string
+  format: string
+}
+const props = defineProps<Props>()
+const emit = defineEmits(['get-detail'])
+
+
+onMounted(() => {
+  setInit();
+})
+
+const directory = ref("/" as string)
+const files = ref([] as any)
+
+const handleFileChange = (event: any) => {
+  files.value = event.target.files[0];
+}
+
+const fileUpload = async () => {
+
+  if(props.format == "raw" && _.isEmpty(directory.value)) {
+    toast.error('Path를 입력해주세요.');
+    return;
+  }
+
+  if(files.value.length == 0) {
+    toast.error('등록 요청한 파일이 없습니다.');
+    return;
+  }
+  const formData = new FormData();
+  formData.append('assets', files.value);
+  formData.append('directory', directory.value);
+
+  const { data } = await uploadComponent("nexus", props.repositoryName, formData);
+  if (data)
+    toast.success('등록되었습니다.')
+  else
+    toast.error('등록 할 수 없습니다.')
+  emit('get-detail')
+}
+
+const setInit = () => {
+  directory.value = "/"
+  files.value = [];
+}
+</script>
\ No newline at end of file
diff --git a/applicationFE/src/views/type/type.ts b/applicationFE/src/views/type/type.ts
index 350316e..fc985b4 100644
--- a/applicationFE/src/views/type/type.ts
+++ b/applicationFE/src/views/type/type.ts
@@ -11,4 +11,55 @@ export interface OssType {
   ossTypeIdx: number
   ossTypeName: string
   ossTypeDesc: string
+}
+
+export interface Pod {
+  podName: string
+  namespace: string
+  labels: []
+  image: string
+  containerPort: []
+  env: []
+  volumeMounts: []
+}
+
+export interface Deployment {
+  deployName: string
+  namespace: string
+  labels: []
+  selector: []
+  replicas: number
+  image: string
+  containerPort: []
+  env: []
+  volumeMounts: []
+}
+
+export interface Hpa {
+  hpaName: string
+  namespace: string
+  labels: {}
+  target: {}
+  metric: {}
+  minReplicas: number
+  maxReplicas: number
+}
+
+export interface Repository {
+  name: string
+  format: string
+  type: string
+  url: string
+  online: boolean
+  storage: {}
+  docker: {}
+}
+
+export interface Component {
+  id: string
+  repository: string
+  format: string
+  group: string
+  name: string
+  assets: []
 }
\ No newline at end of file