From b7bbfd2709fa05409cb54f29781ead635f2ccdb7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Mon, 22 Jul 2024 22:41:13 +0900
Subject: [PATCH 1/2] =?UTF-8?q?[K5P-51]=20[feat]=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/component/modal.scss          |  22 +++-
 src/components/common/btn/ThemeWideBtn.vue    |  29 +++++
 src/components/common/input/TextAreaInput.vue |  30 +++++
 src/components/common/modal/ModalFooter.vue   |  35 ++++++
 src/components/common/modal/ModalHeader.vue   |  34 ++++++
 src/components/item/ItemCreateModal.vue       | 110 ++++++++++++++++++
 src/components/item/ItemModal.vue             |  23 ----
 src/components/item/ItemTable.vue             |   2 +-
 src/components/item/ItemTableRow.vue          |   9 +-
 src/router/index.js                           |   5 +
 src/stores/item.js                            |   3 +
 src/utils/axios.js                            |  32 ++++-
 src/utils/file.js                             |   0
 src/utils/item.js                             |  51 ++++++++
 src/views/MainView.vue                        |   1 +
 src/views/item/ItemDetailView.vue             |  21 ++++
 src/views/item/ItemListView.vue               |  42 ++++---
 17 files changed, 399 insertions(+), 50 deletions(-)
 create mode 100644 src/components/common/btn/ThemeWideBtn.vue
 create mode 100644 src/components/common/input/TextAreaInput.vue
 create mode 100644 src/components/common/modal/ModalFooter.vue
 create mode 100644 src/components/common/modal/ModalHeader.vue
 create mode 100644 src/components/item/ItemCreateModal.vue
 delete mode 100644 src/components/item/ItemModal.vue
 create mode 100644 src/utils/file.js
 create mode 100644 src/utils/item.js
 create mode 100644 src/views/item/ItemDetailView.vue

diff --git a/src/assets/scss/component/modal.scss b/src/assets/scss/component/modal.scss
index 729c956..c69774a 100644
--- a/src/assets/scss/component/modal.scss
+++ b/src/assets/scss/component/modal.scss
@@ -1,11 +1,23 @@
 .modal-overlay {
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 0.5);
+  top: $nav-bar-height;
+  left: $side-bar-width;
+  width: calc(100vw - $side-bar-width);
+  height: calc(100vh - $nav-bar-height);
+  background: rgba(255, 2550, 255, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.modal-content {
+  @include flex-box(column, center, 20px);
+  width: 400px;
+  padding: 0px 30px;
+  border-radius : 10px;
+  box-shadow: $base-shadow;
+  background-color: white;
+  .modal-main {
+    @include flex-box(column, center, 20px);
+  }
 }
\ No newline at end of file
diff --git a/src/components/common/btn/ThemeWideBtn.vue b/src/components/common/btn/ThemeWideBtn.vue
new file mode 100644
index 0000000..4555bf9
--- /dev/null
+++ b/src/components/common/btn/ThemeWideBtn.vue
@@ -0,0 +1,29 @@
+<template>
+  <button class="theme-btn" @click="func">
+    <span>{{ title }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'ThmemWideBtnVue',
+  props: {
+    title: String,
+    func: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .theme-btn {
+    @include flex-box(row, center, 0px);
+    @include base-button();
+    width: 100%;
+    padding: 10px 0px;
+    background-color: $theme-color;
+    color: white;
+    border: none;
+    font-size: 18px;
+    font-weight: bold;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/common/input/TextAreaInput.vue b/src/components/common/input/TextAreaInput.vue
new file mode 100644
index 0000000..efaaf8a
--- /dev/null
+++ b/src/components/common/input/TextAreaInput.vue
@@ -0,0 +1,30 @@
+<template>
+  <textarea 
+    class="text-area-input"
+    :rows="rows" 
+    :placeholder="title"
+    :value="modelValue" 
+    @input="$emit('update:modelValue', $event.target.value)">
+  ></textarea>
+</template>
+
+<script>
+export default {
+  name: 'TextAreaInput',
+  props: {
+    'title': String,
+    'modelValue': String,
+    'rows': String,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .text-area-input {
+    width: 100%;
+    padding: 10px;
+    font-weight: bold;
+    border : $theme-color 3px solid;
+    border-radius: 10px;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/common/modal/ModalFooter.vue b/src/components/common/modal/ModalFooter.vue
new file mode 100644
index 0000000..66a0c82
--- /dev/null
+++ b/src/components/common/modal/ModalFooter.vue
@@ -0,0 +1,35 @@
+<template>
+  <div class="modal-footer">
+    <ThemeWideBtnVue :title="title" :func="func"/>
+    <p>{{ errorMsg }}</p>
+  </div>
+</template>
+
+<script>
+import ThemeWideBtnVue from '../btn/ThemeWideBtn.vue'
+
+export default {
+  name:'ModalFooterVue',
+  components: {
+    ThemeWideBtnVue
+  },
+  props: {
+    title: String,
+    errorMsg: String,
+    func: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-footer {
+  @include flex-box(row, center, 10px);
+  width: 100%;
+  padding: 20px 0px;
+  border-top: $theme-color solid 2px;
+  p {
+    color: tomato;
+    font-weight: bold;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/common/modal/ModalHeader.vue b/src/components/common/modal/ModalHeader.vue
new file mode 100644
index 0000000..e5b84ca
--- /dev/null
+++ b/src/components/common/modal/ModalHeader.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="modal-header">
+    <span>{{title}}</span>
+    <i class="bi bi-x-square-fill" @click="closeModal"></i>
+  </div>
+</template>
+
+<script>
+export default {
+  name:'ModalHeaderVue',
+  props: {
+    title: String,
+    closeModal: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.modal-header {
+  @include flex-box(row, space-between, 0px);
+  width: 100%;
+  padding: 20px 0px;
+  border-bottom: $theme-color solid 2px;
+  span {
+    font-size: 24px;
+    font-weight: bold;
+  }
+  i {
+    @include base-icon;
+    color: $theme-color;
+    font-size: 28px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/item/ItemCreateModal.vue b/src/components/item/ItemCreateModal.vue
new file mode 100644
index 0000000..73107fc
--- /dev/null
+++ b/src/components/item/ItemCreateModal.vue
@@ -0,0 +1,110 @@
+<template>
+  <div v-if="isVisible" class="modal-overlay" @click.self="closeModal">
+    <div class="modal-content">
+      <ModalHeaderVue :title="title" :closeModal="closeModal"/>
+      <div class="modal-main">
+        <div class="img-box" @click="triggerFileInput">
+          <span v-if="!imgSrc">이미지 업로드</span>
+          <img v-else :src="imgSrc" alt="Uploaded Image" />
+        </div>
+        <input type="file" ref="fileInput" @change="onImageChange" accept="image/*" style="display: none;" />
+        <InfoInputVue title="상품명" v-model="name"/>
+        <InfoInputVue title="가격" v-model="price"/>
+        <TextAreaInputVue rows=5 title="상세설명을 입력하세요." v-model="description"/>
+      </div>
+      <ModalFooterVue :title="title" :errorMsg="errorMsg" :func="() => createItem()"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import ModalHeaderVue from '../common/modal/ModalHeader.vue';
+import ModalFooterVue from '../common/modal/ModalFooter.vue';
+import InfoInputVue from '../common/input/InfoInput.vue';
+import TextAreaInputVue from '../common/input/TextAreaInput.vue';
+import { createItem } from '@/utils/item';
+
+export default {
+  name: 'ItemCreateModalVue',
+  components: {
+    ModalHeaderVue,
+    ModalFooterVue,
+    InfoInputVue,
+    TextAreaInputVue,
+  },
+  props: {
+    'isVisible': Boolean,
+    'closeModal': Function,
+  },
+  data() {
+    return {
+      title: '상품 생성',
+      errorMsg: '',
+      name: '',
+      price: '',
+      description: '',
+      imgSrc: null,
+      imgFile: null
+    }
+  },
+  methods: {
+    // 이미지 업로드
+    triggerFileInput() {
+      this.$refs.fileInput.click();
+    },
+    // 이미지 등록
+    onImageChange(event) {
+      const file = event.target.files[0];
+      if (file) {
+        this.imgFile = file;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          this.imgSrc = e.target.result;
+        };
+        reader.readAsDataURL(file);
+      }
+    },
+    // 상품 생성
+    async createItem() {
+      const data = {
+          name: this.name,
+          price: this.price,
+          description: this.description
+      };
+
+      const result = await createItem(data, this.imgFile);
+
+      if (result.code === 200) {
+        console.log(result.data.id);
+        this.closeModal();
+        this.$router.push(`/item/${result.data.id}`);
+      } else {
+        this.errorMsg = result.message;
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/component/modal.scss';
+
+.img-box {
+  @include flex-box(row, center, 0px);
+  @include base-icon;
+  width: 250px;
+  height: 250px;
+  border: $theme-color solid 3px;
+  border-radius: 10px;
+  overflow: hidden;
+  font-size: 20px;
+  font-weight: bold;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/components/item/ItemModal.vue b/src/components/item/ItemModal.vue
deleted file mode 100644
index 1a861d9..0000000
--- a/src/components/item/ItemModal.vue
+++ /dev/null
@@ -1,23 +0,0 @@
-<template>
-  <div v-if="isVisible" class="modal-overlay" @click.self="closeModal">
-    <div class="modal-content">
-      <slot></slot>
-      <button @click="closeModal">Close</button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    isVisible: Boolean,
-    closeModal: Function
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '@/assets/scss/component/modal.scss';
-
-
-</style>
\ No newline at end of file
diff --git a/src/components/item/ItemTable.vue b/src/components/item/ItemTable.vue
index c8dd4bc..98e33d5 100644
--- a/src/components/item/ItemTable.vue
+++ b/src/components/item/ItemTable.vue
@@ -26,7 +26,7 @@ export default {
     ...mapStores(useItemStore),
   },
   methods: {
-    ...mapActions(useItemStore, ['setColumnSort'])
+    ...mapActions(useItemStore, ['setColumnSort']),
   }
 }
 </script>
diff --git a/src/components/item/ItemTableRow.vue b/src/components/item/ItemTableRow.vue
index aa0a10f..20a2e52 100644
--- a/src/components/item/ItemTableRow.vue
+++ b/src/components/item/ItemTableRow.vue
@@ -1,6 +1,6 @@
 <template>
-  <tr class="item-row"> 
-    <td class="item-column"><span>{{ itemData.id }}</span></td>
+  <tr class="item-row" @click="toItemDetail"> 
+    <td class="item-column" ><span>{{ itemData.id }}</span></td>
     <td class="item-column"><img :src="itemData.imageUrl" alt="item-image" class="item-image"></td>
     <td class="item-column"><span>{{ itemData.name }}</span></td>
     <td class="item-column"><span>{{ itemData.price }}원</span></td>
@@ -26,6 +26,11 @@ export default {
       return toDateFromDateTime(this.itemData.updatedAt)
     }
   },
+  methods: {
+    toItemDetail() {
+      this.$router.push(`/item/${this.itemData.id}`);
+    }
+  }
 }
 </script>
 
diff --git a/src/router/index.js b/src/router/index.js
index eb7f48d..4c05335 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -23,6 +23,11 @@ const router = createRouter({
           name:'item',
           component: () => import('@/views/item/ItemListView.vue')
         },
+        {
+          path : '/item/:id',
+          name:'itemDetail',
+          component: () => import('@/views/item/ItemDetailView.vue')
+        },
         {
           path : '/member',
           name:'member',
diff --git a/src/stores/item.js b/src/stores/item.js
index db612fa..ce38480 100644
--- a/src/stores/item.js
+++ b/src/stores/item.js
@@ -39,6 +39,9 @@ export const useItemStore = defineStore('item', {
       if (column) {
         column.sort = sortValue;
       }
+    },
+    setCurrentItem(info) {
+      this.currentItem = info;
     }
   },
 })
\ No newline at end of file
diff --git a/src/utils/axios.js b/src/utils/axios.js
index fb4b37b..4a7a7a9 100644
--- a/src/utils/axios.js
+++ b/src/utils/axios.js
@@ -48,6 +48,36 @@ mainAxios.interceptors.response.use(
   }
 );
 
+// 파일 API
+const fileAxios = axios.create({
+  baseURL: `${import.meta.env.VITE_API_URL}`, 
+  headers: {
+    'Content-Type': 'multipart/form-data',
+  },
+  withCredentials: true
+})
+
+fileAxios.interceptors.response.use(
+  (response) => {
+    return response.data;
+  },
+  async (error) => {
+    // 잘못된 토큰
+    if (error.response.data.code === 401) {
+      const authStore = useAuthStore();
+      authStore.logout();
+    // 만료된 엑세스 토큰
+    } else if (error.response.data.code === 419) {
+      await mainAxios.post('auth/reissue')
+      return await mainAxios(error.config);
+    // 그 외의 예외
+    } else {
+      return error.response.data;
+    }
+  }
+);
+
+
 // 회원 관련 axios
 const memberAxios = axios.create({
   baseURL: `${import.meta.env.VITE_API_URL}`, 
@@ -66,4 +96,4 @@ authAxios.interceptors.response.use(
   }
 );
 
-export { authAxios, mainAxios, memberAxios }
\ No newline at end of file
+export { authAxios, mainAxios, fileAxios, memberAxios }
\ No newline at end of file
diff --git a/src/utils/file.js b/src/utils/file.js
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/item.js b/src/utils/item.js
new file mode 100644
index 0000000..94dbb5e
--- /dev/null
+++ b/src/utils/item.js
@@ -0,0 +1,51 @@
+import { useItemStore } from "@/stores/item";
+import { fileAxios, mainAxios } from "./axios";
+
+// 아이템 목록 조회
+async function getItemList(itemName) {
+  const itemStore = useItemStore();
+
+  let url = `items?page=${itemStore.page}&size=${itemStore.size}&name=${itemName}`;
+  itemStore.columns.forEach(column => {
+    if (column.sort != null) url += `&sort=${column.data},${column.sort}`
+  });
+
+  const result = await mainAxios.get(url);
+  itemStore.setMaxPage(result.data.totalPages - 1);
+  itemStore.setItemList(result.data.content);
+
+  return {'code': result.code, 'message' : result.message}
+}
+
+// 아이템 상세 조회
+async function getItem(itemId) {
+  const itemStore = useItemStore();
+
+  let url = `items/${itemId}`;
+  const result = await mainAxios.get(url);
+  
+  itemStore.setCurrentItem(result.data)
+
+  return result;
+}
+
+// 아이템 생성
+async function createItem(infos, imgFile) {
+  
+  const formData = new FormData();
+  const jsonData = JSON.stringify(infos);
+
+  const jsonBlob = new Blob([jsonData], { type: 'application/json' });
+  formData.append('data', jsonBlob, 'item');
+  if (imgFile !== null) {
+    formData.append('image', imgFile, 'image');
+  }
+
+  const result = await fileAxios.post('items', formData);
+
+  return result;
+}
+
+
+
+export { getItemList, getItem, createItem }
\ No newline at end of file
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index eef3505..8a44e9c 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -28,6 +28,7 @@ export default {
     left: $side-bar-width;
     width: calc(100vw - $side-bar-width);
     height: calc(100vh - $nav-bar-height);
+    // height: calc(100vh - $nav-bar-height);
     overflow-x: auto;
   }
 </style>
\ No newline at end of file
diff --git a/src/views/item/ItemDetailView.vue b/src/views/item/ItemDetailView.vue
new file mode 100644
index 0000000..37df478
--- /dev/null
+++ b/src/views/item/ItemDetailView.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+
+  </div>
+</template>
+
+<script>
+import { getItem } from '@/utils/item';
+
+export default {
+  name: 'ItemDetailView',
+  async mounted() {
+    const result = await getItem(this.$route.params.id);
+    console.log(result)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/views/item/ItemListView.vue b/src/views/item/ItemListView.vue
index d43c0af..a4e3429 100644
--- a/src/views/item/ItemListView.vue
+++ b/src/views/item/ItemListView.vue
@@ -1,14 +1,17 @@
 <template>
   <div class="root-container">
     <div class="top-btn-box">
-      <ThemeIconBtnVue title="상품 등록" icon="bi bi-plus-square"/>
-      <SearchInputVue title="상품명 검색" v-model="itemName" :search="getData"/>
+      <ThemeIconBtnVue title="상품 등록" icon="bi bi-plus-square" :func="() => operateModal(true)"/>
+      <SearchInputVue title="상품명 검색" v-model="itemName" :search="getItemList"/>
     </div>
     <div class="table-box">
       <ItemTableVue/>
       <PaginationBarVue :store="itemStore"/>
     </div>
   </div>
+  <ItemCreateModal 
+    :isVisible="modalVisible" 
+    :closeModal="() => operateModal(false)"/>
 </template>
 
 <script>
@@ -16,10 +19,11 @@ import ThemeIconBtnVue from '@/components/common/btn/ThemeIconBtn.vue';
 import SearchInputVue from '@/components/common/input/SearchInput.vue';
 import PaginationBarVue from '@/components/common/PaginationBar.vue';
 import ItemTableVue from '@/components/item/ItemTable.vue';
+import ItemCreateModal from '@/components/item/ItemCreateModal.vue';
 import { useItemStore } from '@/stores/item';
-import { mainAxios } from '@/utils/axios';
 import { mapActions } from 'pinia';
 import { mapStores } from 'pinia';
+import { getItemList } from '@/utils/item';
 
 export default {
   name : 'ItemListView',
@@ -28,38 +32,41 @@ export default {
     SearchInputVue,
     PaginationBarVue,
     ItemTableVue,
+    ItemCreateModal,
   },
   data() {
     return {
-      itemName: ""
+      itemName: "",
+      modalVisible: false,
     }
   },
   computed: {
     ...mapStores(useItemStore)
   },
   watch: {
-    'itemStore.size': 'getData',
-    'itemStore.page': 'getData',
+    'itemStore.size': 'getItemList',
+    'itemStore.page': 'getItemList',
     'itemStore.columns': {
-      handler: 'getData',
+      handler: 'getItemList',
       deep: true
     }
   },
   methods: {
     ...mapActions(useItemStore, ['setPage','setItemList']),
-    // 조회 api 함수 - 로직 수정하면 됩니다.
-    async getData() {
-      let url = `items?page=${this.itemStore.page}&size=${this.itemStore.size}&name=${this.itemName}`;
-      this.itemStore.columns.forEach(column => {
-        if (column.sort != null) url += `&sort=${column.data},${column.sort}`
-      });
-      const result = await mainAxios.get(url);
-      this.itemStore.setMaxPage(result.data.totalPages - 1);
-      this.itemStore.setItemList(result.data.content);
+    // 메서드 - 상품 목록 조회
+    async getItemList() {
+      const result = await getItemList(this.itemName);
+      if (result.code !== 200) {
+        // 예외 처리
+      }
     },
+    // 메서드 - 상품 생성 모달창 조작
+    operateModal(value) {
+      this.modalVisible = value;
+    }
   },
   async mounted() {
-    this.getData();
+    this.getItemList();
   }
 }
 </script>
@@ -70,7 +77,6 @@ export default {
     background: $back-color;
     width: 100%;
     min-height:100%;
-    height: 100%;
     padding: 30px 40px
   }
   .top-btn-box {

From abe92756a55fb9d082d73870491b1a3b91ba9591 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=ED=95=9C=EC=A3=BC?= <rlagkswn37@naver.com>
Date: Tue, 23 Jul 2024 14:38:31 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[K5P-51]=20[feat]=20=EC=83=81=ED=92=88=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/scss/component/modal.scss          |  14 +-
 src/assets/scss/item.scss                     |   7 +
 src/components/common/btn/SuccessWideBtn.vue  |  29 ++++
 src/components/common/btn/WarningWideBtn.vue  |  29 ++++
 .../common/info/DescriptionInfo.vue           |  29 ++++
 src/components/common/info/TitleInfo.vue      |  48 ++++++
 src/components/item/ItemCreateModal.vue       |  29 ++--
 src/components/item/ItemDeleteModal.vue       |  63 ++++++++
 src/components/item/ItemInfo.vue              |  53 +++++++
 src/components/item/ItemTable.vue             |   1 -
 src/components/item/ItemUpdateModal.vue       | 141 ++++++++++++++++++
 src/utils/item.js                             |  52 ++++++-
 src/views/item/ItemDetailView.vue             |  68 ++++++++-
 src/views/item/ItemListView.vue               |  42 +++---
 14 files changed, 558 insertions(+), 47 deletions(-)
 create mode 100644 src/assets/scss/item.scss
 create mode 100644 src/components/common/btn/SuccessWideBtn.vue
 create mode 100644 src/components/common/btn/WarningWideBtn.vue
 create mode 100644 src/components/common/info/DescriptionInfo.vue
 create mode 100644 src/components/common/info/TitleInfo.vue
 create mode 100644 src/components/item/ItemDeleteModal.vue
 create mode 100644 src/components/item/ItemInfo.vue
 create mode 100644 src/components/item/ItemUpdateModal.vue

diff --git a/src/assets/scss/component/modal.scss b/src/assets/scss/component/modal.scss
index c69774a..5ba1fd8 100644
--- a/src/assets/scss/component/modal.scss
+++ b/src/assets/scss/component/modal.scss
@@ -4,7 +4,7 @@
   left: $side-bar-width;
   width: calc(100vw - $side-bar-width);
   height: calc(100vh - $nav-bar-height);
-  background: rgba(255, 2550, 255, 0.7);
+  background: rgba(255, 255, 255, 0.7);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -20,4 +20,16 @@
   .modal-main {
     @include flex-box(column, center, 20px);
   }
+}
+
+.fade-enter-from, .fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-active, .fade-leave-active{
+  transition: all 0.3s;
+}
+
+.fade-enter-to, .fade-leave-from{
+  opacity: 1;
 }
\ No newline at end of file
diff --git a/src/assets/scss/item.scss b/src/assets/scss/item.scss
new file mode 100644
index 0000000..7567c6c
--- /dev/null
+++ b/src/assets/scss/item.scss
@@ -0,0 +1,7 @@
+.root-container {
+  @include flex-box(column, space-between, 20px);
+  background: $back-color;
+  width: 100%;
+  min-height:100%;
+  padding: 30px 40px
+}
\ No newline at end of file
diff --git a/src/components/common/btn/SuccessWideBtn.vue b/src/components/common/btn/SuccessWideBtn.vue
new file mode 100644
index 0000000..3f07a5f
--- /dev/null
+++ b/src/components/common/btn/SuccessWideBtn.vue
@@ -0,0 +1,29 @@
+<template>
+  <button class="success-btn" @click="func">
+    <span>{{ title }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'SuccessWideBtnVue',
+  props: {
+    title: String,
+    func: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .success-btn {
+    @include flex-box(row, center, 0px);
+    @include base-button();
+    width: 100%;
+    padding: 10px 0px;
+    background-color: #2C80CE;
+    color: white;
+    border: none;
+    font-size: 18px;
+    font-weight: bold;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/common/btn/WarningWideBtn.vue b/src/components/common/btn/WarningWideBtn.vue
new file mode 100644
index 0000000..fecbcda
--- /dev/null
+++ b/src/components/common/btn/WarningWideBtn.vue
@@ -0,0 +1,29 @@
+<template>
+  <button class="warning-btn" @click="func">
+    <span>{{ title }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'WarningWideBtnVue',
+  props: {
+    title: String,
+    func: Function
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .warning-btn {
+    @include flex-box(row, center, 0px);
+    @include base-button();
+    width: 100%;
+    padding: 10px 0px;
+    background-color: tomato;
+    color: white;
+    border: none;
+    font-size: 18px;
+    font-weight: bold;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/common/info/DescriptionInfo.vue b/src/components/common/info/DescriptionInfo.vue
new file mode 100644
index 0000000..ed33895
--- /dev/null
+++ b/src/components/common/info/DescriptionInfo.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="description-input">
+    {{ infoValue }}
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DescriptionInfoVue',
+  props: {
+    infoValue: String,
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  .description-input {
+    @include flex-box(row, start, 0px);
+    width: 100%;
+    height: 120px;
+    overflow-y: auto;
+    padding: 10px 20px;
+    border-radius: 5px;
+    border: $theme-color solid 3px;
+    font-size: 16px;
+    font-weight: bold;
+    white-space: pre-wrap;
+  }
+</style>
diff --git a/src/components/common/info/TitleInfo.vue b/src/components/common/info/TitleInfo.vue
new file mode 100644
index 0000000..0199006
--- /dev/null
+++ b/src/components/common/info/TitleInfo.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="info-input">
+    <div class="title-box">
+      {{ title }}
+    </div>
+    <div class="info-box">{{ info }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TitleInfoVue',
+  props: {
+    'title' : String,
+    'info': String,
+  },
+}
+</script>
+
+<style lang='scss' scoped>
+  .info-input {
+    @include flex-box(row, center, 0px);
+    background-color: white;
+    width: 100%;
+    height: 40px;
+
+    .title-box {
+      @include flex-box(row, center, 0px);
+      @include white-text(16px);
+      background: $theme-color;
+      width: 140px;
+      height: 100%;
+      border-top-left-radius: 5px;
+      border-bottom-left-radius: 5px;
+    }
+
+    .info-box {
+      @include flex-box(row, start, 0px);
+      width: 100%;
+      height: 100%;
+      padding: 0px 20px;
+      font-weight: bold;
+      border: $theme-color solid;
+      border-top-right-radius: 5px;
+      border-bottom-right-radius: 5px;
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/item/ItemCreateModal.vue b/src/components/item/ItemCreateModal.vue
index 73107fc..a817e26 100644
--- a/src/components/item/ItemCreateModal.vue
+++ b/src/components/item/ItemCreateModal.vue
@@ -1,20 +1,22 @@
 <template>
-  <div v-if="isVisible" class="modal-overlay" @click.self="closeModal">
-    <div class="modal-content">
-      <ModalHeaderVue :title="title" :closeModal="closeModal"/>
-      <div class="modal-main">
-        <div class="img-box" @click="triggerFileInput">
-          <span v-if="!imgSrc">이미지 업로드</span>
-          <img v-else :src="imgSrc" alt="Uploaded Image" />
+  <transition name="fade">
+    <div v-if="isVisible" class="modal-overlay" @click.self="closeModal">
+      <div class="modal-content">
+        <ModalHeaderVue :title="title" :closeModal="closeModal"/>
+        <div class="modal-main">
+          <div class="img-box" @click="triggerFileInput">
+            <span v-if="!imgSrc">이미지 업로드</span>
+            <img v-else :src="imgSrc" alt="Uploaded Image" />
+          </div>
+          <input type="file" ref="fileInput" @change="onImageChange" accept="image/*" style="display: none;" />
+          <InfoInputVue title="상품명" v-model="name"/>
+          <InfoInputVue title="가격" v-model="price"/>
+          <TextAreaInputVue rows=5 title="상세설명을 입력하세요." v-model="description"/>
         </div>
-        <input type="file" ref="fileInput" @change="onImageChange" accept="image/*" style="display: none;" />
-        <InfoInputVue title="상품명" v-model="name"/>
-        <InfoInputVue title="가격" v-model="price"/>
-        <TextAreaInputVue rows=5 title="상세설명을 입력하세요." v-model="description"/>
+        <ModalFooterVue :title="title" :errorMsg="errorMsg" :func="() => createItem()"/>
       </div>
-      <ModalFooterVue :title="title" :errorMsg="errorMsg" :func="() => createItem()"/>
     </div>
-  </div>
+  </transition>
 </template>
 
 <script>
@@ -75,7 +77,6 @@ export default {
       const result = await createItem(data, this.imgFile);
 
       if (result.code === 200) {
-        console.log(result.data.id);
         this.closeModal();
         this.$router.push(`/item/${result.data.id}`);
       } else {
diff --git a/src/components/item/ItemDeleteModal.vue b/src/components/item/ItemDeleteModal.vue
new file mode 100644
index 0000000..d8ec501
--- /dev/null
+++ b/src/components/item/ItemDeleteModal.vue
@@ -0,0 +1,63 @@
+<template>
+  <transition name="fade">
+    <div v-if="isVisible" class="modal-overlay" @click.self="closeModal">
+      <div class="modal-content">
+        <ModalHeaderVue :title="title" :closeModal="closeModal"/>
+        <div class="modal-main">
+          <span class="content-text">현재 {{ itemStore.currentItem.contractCount }}건의 관련된 계약이 존재합니다.</span>
+          <span class="content-text">정말로 삭제하시겠습니까?</span>
+        </div>
+        <ModalFooterVue :title="title" :errorMsg="errorMsg" :func="() => deleteItem()"/>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import ModalHeaderVue from '../common/modal/ModalHeader.vue';
+import ModalFooterVue from '../common/modal/ModalFooter.vue';
+import { deleteItem } from '@/utils/item';
+import { mapStores } from 'pinia';
+import { useItemStore } from '@/stores/item';
+
+export default {
+  name: 'ItemDeleteModalVue',
+  components: {
+    ModalHeaderVue,
+    ModalFooterVue,
+  },
+  props: {
+    'isVisible': Boolean,
+    'closeModal': Function,
+  },
+  data() {
+    return {
+      title: '상품 삭제',
+      errorMsg: '',
+      name: '',
+      price: '',
+      description: '',
+    }
+  },
+  computed: {
+    ...mapStores(useItemStore),
+  },
+  methods: {
+    // 상품 삭제
+    async deleteItem() {
+      const result = await deleteItem(this.itemStore.currentItem.id);
+      if (result.code === 200) {
+        this.$router.push({name: 'item'})
+      }
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/component/modal.scss';
+  .content-text{
+    padding: 0px;
+    font-weight: bold;
+  }
+</style>
\ No newline at end of file
diff --git a/src/components/item/ItemInfo.vue b/src/components/item/ItemInfo.vue
new file mode 100644
index 0000000..2400381
--- /dev/null
+++ b/src/components/item/ItemInfo.vue
@@ -0,0 +1,53 @@
+<template>
+    <div class="info-container">
+      <img :src="itemStore.currentItem.imageUrl" alt="item-image">
+      <TitleInfoVue title="상품명" :info="itemStore.currentItem.name"/>
+      <TitleInfoVue title="가격" :info="`${itemStore.currentItem.price}원`"/>
+      <TitleInfoVue title="생성일" :info="createdAtDate"/>
+      <TitleInfoVue title="수정일" :info="updatedAtDate"/>
+      <DescriptionInfoVue :infoValue="itemStore.currentItem.description"/>
+    </div>
+</template>
+
+<script>
+import { useItemStore } from '@/stores/item';
+import { mapStores } from 'pinia';
+import { toDateFromDateTime } from '@/utils/date';
+import TitleInfoVue from '@/components/common/info/TitleInfo.vue';
+import DescriptionInfoVue from '../common/info/DescriptionInfo.vue';
+
+export default {
+  name: 'InfoInfoVue',
+  components: {
+    TitleInfoVue,
+    DescriptionInfoVue
+  },
+  computed: {
+    ...mapStores(useItemStore),
+    createdAtDate() {
+      return toDateFromDateTime(this.itemStore.currentItem.createdAt)
+    },
+    updatedAtDate() {
+      return toDateFromDateTime(this.itemStore.currentItem.updatedAt)
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.info-container {
+  @include flex-box(column, center, 20px);
+  width: 100%;
+  padding: 40px 30px;
+  border-radius : 10px;
+  box-shadow: $base-shadow;
+  background-color: white;
+  img {
+    width: 320px;
+    height: 320px;
+    object-fit: cover;
+    border: $theme-color solid 3px;
+    border-radius: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/item/ItemTable.vue b/src/components/item/ItemTable.vue
index 98e33d5..02ffcad 100644
--- a/src/components/item/ItemTable.vue
+++ b/src/components/item/ItemTable.vue
@@ -1,5 +1,4 @@
 <template>
-
   <table class="item-table">
     <thead>
       <TableHaederVue :store="itemStore"/>
diff --git a/src/components/item/ItemUpdateModal.vue b/src/components/item/ItemUpdateModal.vue
new file mode 100644
index 0000000..460d1d8
--- /dev/null
+++ b/src/components/item/ItemUpdateModal.vue
@@ -0,0 +1,141 @@
+<template>
+  <transition name="fade">
+    <div v-if="isVisible" class="modal-overlay" @click.self="closeModal">
+      <div class="modal-content">
+        <ModalHeaderVue :title="title" :closeModal="closeModal"/>
+        <div class="modal-main">
+          <div class="img-box" @click="triggerFileInput">
+            <span v-if="!imgSrc">이미지 업로드</span>
+            <img v-else :src="imgSrc" alt="Uploaded Image" />
+          </div>
+          <input type="file" ref="fileInput" @change="onImageChange" accept="image/*" style="display: none;" />
+          <InfoInputVue title="상품명" v-model="name"/>
+          <InfoInputVue title="가격" v-model="price"/>
+          <TextAreaInputVue rows=5 title="상세설명을 입력하세요." v-model="description"/>
+        </div>
+        <ModalFooterVue :title="title" :errorMsg="errorMsg" :func="() => updateItem()"/>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import { useItemStore } from '@/stores/item';
+import { mapStores } from 'pinia';
+import ModalHeaderVue from '../common/modal/ModalHeader.vue';
+import ModalFooterVue from '../common/modal/ModalFooter.vue';
+import InfoInputVue from '../common/input/InfoInput.vue';
+import TextAreaInputVue from '../common/input/TextAreaInput.vue';
+import { editItem, editItemImage } from '@/utils/item';
+
+export default {
+  name: 'ItemUpdateModalVue',
+  components: {
+    ModalHeaderVue,
+    ModalFooterVue,
+    InfoInputVue,
+    TextAreaInputVue,
+  },
+  props: {
+    'isVisible': Boolean,
+    'closeModal': Function,
+  },
+  data() {
+    return {
+      title: '상품 수정',
+      errorMsg: '',
+      name: '',
+      price: '',
+      description: '',
+      imgSrc: null,
+      imgFile: null
+    }
+  },
+  computed: {
+    ...mapStores(useItemStore),
+  },
+  watch: {
+    isVisible(newVal) {
+      if (newVal) this.showData();
+    },
+  },
+  methods: {
+    // 현재 데이터 표시
+    async showData() {
+      this.name = this.itemStore.currentItem.name;
+      this.price = this.itemStore.currentItem.price + '';
+      this.description = this.itemStore.currentItem.description;
+      this.imgSrc = this.itemStore.currentItem.imageUrl;
+    },
+    // 이미지 업로드
+    triggerFileInput() {
+      this.$refs.fileInput.click();
+    },
+    // 이미지 등록
+    onImageChange(event) {
+      const file = event.target.files[0];
+      if (file) {
+        this.imgFile = file;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+          this.imgSrc = e.target.result;
+        };
+        reader.readAsDataURL(file);
+      }
+    },
+    // 상품 수정
+    async updateItem() {
+      let editSuccess = true;;
+
+      // 상품 정보 수정
+      const data = {
+        name: this.name,
+        price: this.price,
+        description: this.description
+      };
+      const result = await editItem(this.itemStore.currentItem.id, data);
+
+      if (result.code !== 200) {
+        this.errorMsg = result.message;
+        editSuccess = false;
+      }
+
+      // 상품 이미지 수정
+      if (this.imgFile !== null && editSuccess) {
+        console.log(this.imgFile)
+        const result_img = await editItemImage(this.itemStore.currentItem.id, this.imgFile);
+        if (result_img.code !== 200) {
+          this.errorMsg = result_img.message;
+          editSuccess = false;
+        } 
+      }
+
+      // 모달창 종료
+      if (editSuccess) this.closeModal();
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/scss/component/modal.scss';
+
+.img-box {
+  @include flex-box(row, center, 0px);
+  @include base-icon;
+  width: 250px;
+  height: 250px;
+  border: $theme-color solid 3px;
+  border-radius: 10px;
+  overflow: hidden;
+  font-size: 20px;
+  font-weight: bold;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+</style>
\ No newline at end of file
diff --git a/src/utils/item.js b/src/utils/item.js
index 94dbb5e..b999651 100644
--- a/src/utils/item.js
+++ b/src/utils/item.js
@@ -1,9 +1,10 @@
 import { useItemStore } from "@/stores/item";
 import { fileAxios, mainAxios } from "./axios";
 
+const itemStore = useItemStore();
+
 // 아이템 목록 조회
 async function getItemList(itemName) {
-  const itemStore = useItemStore();
 
   let url = `items?page=${itemStore.page}&size=${itemStore.size}&name=${itemName}`;
   itemStore.columns.forEach(column => {
@@ -19,19 +20,19 @@ async function getItemList(itemName) {
 
 // 아이템 상세 조회
 async function getItem(itemId) {
-  const itemStore = useItemStore();
-
   let url = `items/${itemId}`;
   const result = await mainAxios.get(url);
   
-  itemStore.setCurrentItem(result.data)
+  if (result.code === 200) {
+    itemStore.setCurrentItem(result.data);
+  }
 
-  return result;
+  return {'code': result.code, 'message' : result.message};
 }
 
 // 아이템 생성
 async function createItem(infos, imgFile) {
-  
+
   const formData = new FormData();
   const jsonData = JSON.stringify(infos);
 
@@ -46,6 +47,43 @@ async function createItem(infos, imgFile) {
   return result;
 }
 
+// 아이템 수정
+async function editItem(itemId, infos) {
+  const result = await mainAxios.put(`items/${itemId}`, infos);
+
+  if (result.code === 200) {
+    itemStore.setCurrentItem(result.data);
+  }
+
+  return {'code': result.code, 'message' : result.message};
+}
+
+// 아이템 이미지 수정
+async function editItemImage(itemId, imgFile) {
+  const formData = new FormData();
+  formData.append('image', imgFile, 'image');
+
+  const result = await fileAxios.put(`items/${itemId}/image`, formData);
+
+  if (result.code === 200) {
+    itemStore.setCurrentItem(result.data);
+  }
+
+  return {'code': result.code, 'message' : result.message};
+}
+
+// 아이템 삭제
+async function deleteItem(itemId) {
+  const result = await fileAxios.delete(`items/${itemId}`);
+
+  if (result.code === 200) {
+    itemStore.setCurrentItem({});
+  }
+
+  return {'code': result.code, 'message' : result.message};
+}
+
+
 
 
-export { getItemList, getItem, createItem }
\ No newline at end of file
+export { getItemList, getItem, createItem, editItem, editItemImage, deleteItem }
\ No newline at end of file
diff --git a/src/views/item/ItemDetailView.vue b/src/views/item/ItemDetailView.vue
index 37df478..321a7f2 100644
--- a/src/views/item/ItemDetailView.vue
+++ b/src/views/item/ItemDetailView.vue
@@ -1,21 +1,81 @@
 <template>
-  <div>
-
+  <div class="root-container">
+    <div class="left-side">
+      <ItemInfoVue/>
+      <div class="btn-box">
+        <SuccessWideBtnVue title="수정" :func="() => operateEditModal(true)"/>
+        <WarningWideBtnVue title="삭제" :func="() => operateDeleteModal(true)"/>
+      </div>
+    </div>
   </div>
+  <ItemUpdateModalVue 
+    :isVisible="editModalVisible" 
+    :closeModal="() => operateEditModal(false)"/>
+  <ItemDeleteModalVue 
+    :isVisible="deleteModalVisible" 
+    :closeModal="() => operateDeleteModal(false)"/>
 </template>
 
 <script>
+import { useItemStore } from '@/stores/item';
 import { getItem } from '@/utils/item';
+import { mapStores } from 'pinia';
+import ItemInfoVue from '@/components/item/ItemInfo.vue';
+import SuccessWideBtnVue from '@/components/common/btn/SuccessWideBtn.vue';
+import WarningWideBtnVue from '@/components/common/btn/WarningWideBtn.vue';
+import ItemUpdateModalVue from '@/components/item/ItemUpdateModal.vue';
+import ItemDeleteModalVue from '@/components/item/ItemDeleteModal.vue';
 
 export default {
   name: 'ItemDetailView',
+  components: {
+    ItemInfoVue,
+    SuccessWideBtnVue,
+    WarningWideBtnVue,
+    ItemUpdateModalVue,
+    ItemDeleteModalVue
+  },
+  data() {
+    return {
+      editModalVisible: false,
+      deleteModalVisible: false,
+    }
+  },
+  computed: {
+    ...mapStores(useItemStore),
+  },
+  methods: {
+    // 메서드 - 상품 수정 모달창 조작
+    operateEditModal(value) {
+      this.editModalVisible = value;
+    },
+    operateDeleteModal(value) {
+      this.deleteModalVisible = value;
+    }
+  },
   async mounted() {
-    const result = await getItem(this.$route.params.id);
-    console.log(result)
+    await getItem(this.$route.params.id);
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.root-container {
+  @include flex-box(row, space-between, 20px);
+  background: $back-color;
+  width: 100%;
+  height:100%;
+  padding: 60px 50px
+}
 
+.left-side {
+  @include flex-box(column, space-between, 0px);
+  width: 400px;
+  height: 100%;
+}
+
+.btn-box {
+  @include flex-box(row, center, 60px);
+  width: 100%;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/item/ItemListView.vue b/src/views/item/ItemListView.vue
index a4e3429..e0d75bb 100644
--- a/src/views/item/ItemListView.vue
+++ b/src/views/item/ItemListView.vue
@@ -72,24 +72,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .root-container {
-    @include flex-box(column, space-between, 20px);
-    background: $back-color;
-    width: 100%;
-    min-height:100%;
-    padding: 30px 40px
-  }
-  .top-btn-box {
-    @include flex-box(row, space-between, 20px);
-    width: 100%;
-  }
-  .table-box {
-    @include flex-box(column, space-between, 20px);
-    box-shadow: $base-shadow;
-    background: white;
-    width: 100%;
-    padding: 20px 30px;
-    border-radius: 5px;
-    flex-grow: 1;
-  }
+.root-container {
+  @include flex-box(column, space-between, 20px);
+  background: $back-color;
+  width: 100%;
+  min-height:100%;
+  padding: 30px 40px
+}
+
+.top-btn-box {
+  @include flex-box(row, space-between, 20px);
+  width: 100%;
+}
+
+.table-box {
+  @include flex-box(column, space-between, 20px);
+  box-shadow: $base-shadow;
+  background: white;
+  width: 100%;
+  flex-grow: 1;
+  padding: 20px 30px;
+  border-radius: 5px;
+}
 </style>