+ 모달 변수 공유 부분 수정

app/pages/technology/patents.vue

@@ -47,146 +47,20 @@
             <UModal
               v-for="patent in paginatedPatents"
               :key="patent.id"
-              v-model:open="isModalOpen"
+              v-model:open="patent.isOpen"
               title="특허 / 인증 크게보기"
               :close="false"
             >
-              <UButton @click="openModal(patent.image)" class="patents">
+              <UButton @click="openModal(patent)" class="patents">
                 <div class="img--wrap">
                   <img :src="patent.image" alt="" />
                 </div>
                 <h4>{{ patent.title }}</h4>
               </UButton>
               <template #content>
-                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
+                <UButton @click="patent.isOpen = false" class="modal--close--btn"></UButton>
                 <div class="modal--img--container">
-                  <img :src="selectedImage" alt="" />
-                </div>
-              </template>
-            </UModal>
-            <UModal
-              v-model:open="isModalOpen"
-              title="특허 / 인증 크게보기"
-              :close="false"
-            >
-              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
-                <div class="img--wrap">
-                  <img src="/img/top_ban_technology.jpg" alt="" />
-                </div>
-                <h4>플라스틱 감축 소재 인증서</h4>
-              </UButton>
-              <template #content>
-                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
-                <div class="modal--img--container">
-                  <img :src="selectedImage" alt="" />
-                </div>
-              </template>
-            </UModal>
-            <UModal
-              v-model:open="isModalOpen"
-              title="특허 / 인증 크게보기"
-              :close="false"
-            >
-              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
-                <div class="img--wrap">
-                  <img src="/img/top_ban_technology.jpg" alt="" />
-                </div>
-                <h4>플라스틱 감축 소재 인증서</h4>
-              </UButton>
-              <template #content>
-                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
-                <div class="modal--img--container">
-                  <img :src="selectedImage" alt="" />
-                </div>
-              </template>
-            </UModal>
-            <UModal
-              v-model:open="isModalOpen"
-              title="특허 / 인증 크게보기"
-              :close="false"
-            >
-              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
-                <div class="img--wrap">
-                  <img src="/img/top_ban_technology.jpg" alt="" />
-                </div>
-                <h4>플라스틱 감축 소재 인증서</h4>
-              </UButton>
-              <template #content>
-                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
-                <div class="modal--img--container">
-                  <img :src="selectedImage" alt="" />
-                </div>
-              </template>
-            </UModal>
-            <UModal
-              v-model:open="isModalOpen"
-              title="특허 / 인증 크게보기"
-              :close="false"
-            >
-              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
-                <div class="img--wrap">
-                  <img src="/img/top_ban_technology.jpg" alt="" />
-                </div>
-                <h4>플라스틱 감축 소재 인증서</h4>
-              </UButton>
-              <template #content>
-                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
-                <div class="modal--img--container">
-                  <img :src="selectedImage" alt="" />
-                </div>
-              </template>
-            </UModal>
-            <UModal
-              v-model:open="isModalOpen"
-              title="특허 / 인증 크게보기"
-              :close="false"
-            >
-              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
-                <div class="img--wrap">
-                  <img src="/img/top_ban_technology.jpg" alt="" />
-                </div>
-                <h4>플라스틱 감축 소재 인증서</h4>
-              </UButton>
-              <template #content>
-                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
-                <div class="modal--img--container">
-                  <img :src="selectedImage" alt="" />
-                </div>
-              </template>
-            </UModal>
-            <UModal
-              v-model:open="isModalOpen"
-              title="특허 / 인증 크게보기"
-              :close="false"
-            >
-              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
-                <div class="img--wrap">
-                  <img src="/img/top_ban_technology.jpg" alt="" />
-                </div>
-                <h4>플라스틱 감축 소재 인증서</h4>
-              </UButton>
-              <template #content>
-                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
-                <div class="modal--img--container">
-                  <img :src="selectedImage" alt="" />
-                </div>
-              </template>
-            </UModal>
-            <UModal
-              v-model:open="isModalOpen"
-              title="특허 / 인증 크게보기"
-              :close="false"
-            >
-              <UButton @click="openModal('/img/top_ban_technology.jpg')" class="patents">
-                <div class="img--wrap">
-                  <img src="/img/top_ban_technology.jpg" alt="" />
-                </div>
-                <h4>플라스틱 감축 소재 인증서</h4>
-              </UButton>
-              <template #content>
-                <UButton @click="isModalOpen = false" class="modal--close--btn"></UButton>
-                <div class="modal--img--container">
-                  <img :src="selectedImage" alt="" />
+                  <img :src="patent.image" alt="" />
                 </div>
               </template>
             </UModal>
@@ -224,7 +98,6 @@
 
   const className = ref("technology");
   const title = ref("Technology");
-  const isModalOpen = ref(false);
   const loading = ref(true);
   const patentsData = ref([]);
   const totalCount = ref(0);
@@ -252,7 +125,6 @@
     },
   ]);
 
-  const selectedImage = ref("/img/img--patents.png");
 
   // 전체 데이터 가져오기 (4개 API 합쳐서)
   const fetchAllPatents = async () => {
@@ -278,6 +150,7 @@
             image: item.main_file1
               ? `http://green.interscope.co.kr/backend${item.main_file1}`
               : "/img/img--patents.png",
+            isOpen: false, // 각 항목별 모달 상태
           }));
           allData = [...allData, ...categoryData];
         }
@@ -317,6 +190,7 @@
             image: item.main_file1
               ? `http://green.interscope.co.kr/backend${item.main_file1}`
               : "/img/img--patents.png",
+            isOpen: false, // 각 항목별 모달 상태
           }));
         } else {
           console.error("JSON 응답 형식이 올바르지 않습니다:", response);
@@ -352,11 +226,13 @@
         id: 1,
         title: "플라스틱 감축 소재 인증서",
         image: "/img/img--patents.png",
+        isOpen: false,
       },
       {
         id: 2,
         title: "플라스틱 감축 소재 인증서",
         image: "/img/top_ban_technology.jpg",
+        isOpen: false,
       },
     ];
   };
@@ -412,9 +288,8 @@
     }
   };
 
-  const openModal = (imagePath) => {
-    selectedImage.value = imagePath;
-    isModalOpen.value = true;
+  const openModal = (patent) => {
+    patent.isOpen = true;
   };
 
   // 컴포넌트 마운트 시 데이터 로드