Merge branch 'master' of https://gogs.interscope.i234.me/mo0647/greenwhale

* 'master' of https://gogs.interscope.i234.me/mo0647/greenwhale:
  공지사항 작업예정

app/assets/scss/style.scss

@@ -1152,10 +1152,15 @@ main{
                         flex-direction: column;
                         gap: 16px;
                         width: calc((100% - 60px) / 4);
-                        .img--wrap{                            
+                        .img--wrap{       
+                            width: 100%;                     
+                            height: 353px;
+                            overflow: hidden;
                             border: 1px solid #E0E4F2;
                             img{
                                 width: 100%;
+                                height: 100%;
+                                object-fit: cover;
                             }
                         }
                         h4{
@@ -1173,6 +1178,12 @@ main{
             }
             .news--wrap{
                 margin-top: 80px;
+                >h3{
+                    margin-bottom: 24px;
+                    color: #1f2128;
+                    font-size: 32px;
+                    font-weight: 700;
+                }
                 .news--list{
                     display: flex;
                     flex-direction: column;
@@ -1220,6 +1231,87 @@ main{
                     }
                 }
             }
+            .sns--wrap{
+                margin-top: 80px;
+                >h3 {
+                    margin-bottom: 24px;
+                    color: #1f2128;
+                    font-size: 32px;
+                    font-weight: 700;
+                }
+                .sns--list{
+                    display: flex;
+                    gap: 20px;
+                    .sns{
+                        width: calc((100% - 60px) / 4);
+                        overflow: hidden;
+                        position: relative;
+                        .img--wrap{
+                            background-repeat: no-repeat;
+                            background-size: cover;
+                            background-position: center;
+                            width: 100%;
+                            padding-bottom: 100%;
+                            transition: all 0.3s;
+                        }
+                        .txt--wrap{
+                            position: absolute;
+                            color: #fff;
+                            height: 50%;
+                            width: 100%;
+                            background-color: #00a654;
+                            bottom: -100%;
+                            transition: all 0.3s;
+                            left: 0;
+                            padding: 16px;
+                            display: flex;
+                            flex-direction: column;
+                            justify-content: space-between;
+                            z-index: 3;
+                            >h4{
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                display: -webkit-box;
+                                -webkit-line-clamp: 2;
+                                -webkit-box-orient: vertical;
+                                font-size: 18px;
+                                font-weight: 700;
+                            }
+                            >span{
+                                display: flex;
+                                font-size: 14px;
+                                font-weight: 700;
+                                .ico{
+                                    width: 20px;
+                                    height: 20px;
+                                    background-image: url(/img/ico--more--arrow2.svg);
+                                }
+                            }
+                        }
+                        &::before{
+                            z-index: 2;
+                            transition: all 0.3s;
+                            position: absolute;
+                            top: 0;
+                            left: 0;
+                            width: 100%;
+                            background: rgba(0, 0, 0, 0.50);
+                            content: '';
+                            display: inline-block;
+                            height: 100%;
+                            opacity: 0;
+                        }
+                        &:hover{
+                            &::before{
+                                opacity: 1;
+                            }
+                            .txt--wrap{
+                                bottom: 0;
+                            }
+                        }
+                    }
+                }
+            }
             .pagination--wrap{
                 margin-top: 48px;
                 display: flex;
@@ -1379,3 +1471,37 @@ main{
     }
 }
 
+// 모달
+.bg-elevated\/75{
+    background-color: rgba(0,0,0,0.5);
+    backdrop-filter: blur(6px);
+}
+
+.bg-default{
+    border-radius: 0;
+    overflow: visible;
+    .modal--close--btn{
+        top: -36px;
+        right: 0;
+        position: absolute;
+        background-color: transparent;
+        width: 28px;
+        height: 28px;
+        background-image: url(/img/ico--close.svg);
+        border: none;
+        padding: 0;
+    }
+    .modal--img--container {
+        width: 100%;
+        max-height: calc(100vh - 80px); //close버튼 공간 남김
+        overflow-y: auto;
+        display: flex;
+        justify-content: center;
+        align-items: flex-start;
+        img{
+            width: 100%;
+            height: auto;
+            display: block;
+        }
+    }
+}

app/pages/media/news.vue

@@ -9,107 +9,42 @@
         </div>
         <div class="news--wrap">
           <div class="news--list">
-            <NuxtLink to="/" class="news">
+            <NuxtLink
+              v-for="news in paginatedNews"
+              :key="news.id"
+              :to="news.link"
+              class="news"
+            >
               <div class="news--title--wrap">
-                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
-                <span>2025.07.11</span>
+                <h4>{{ news.title }}</h4>
+                <span>{{ news.date }}</span>
               </div>
               <div class="news--thumb--wrap">
-                <img src="/img/img--news.png" alt="">
-              </div>
-            </NuxtLink>
-            <NuxtLink to="/" class="news">
-              <div class="news--title--wrap">
-                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
-                <span>2025.07.11</span>
-              </div>
-              <div class="news--thumb--wrap">
-                <img src="/img/img--cycle--center.png" alt="">
-              </div>
-            </NuxtLink>
-            <NuxtLink to="/" class="news">
-              <div class="news--title--wrap">
-                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
-                <span>2025.07.11</span>
-              </div>
-              <div class="news--thumb--wrap">
-                <img src="/img/img--cycle--center.png" alt="">
-              </div>
-            </NuxtLink>
-            <NuxtLink to="/" class="news">
-              <div class="news--title--wrap">
-                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
-                <span>2025.07.11</span>
-              </div>
-              <div class="news--thumb--wrap">
-                <img src="/img/img--cycle--center.png" alt="">
-              </div>
-            </NuxtLink>
-            <NuxtLink to="/" class="news">
-              <div class="news--title--wrap">
-                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
-                <span>2025.07.11</span>
-              </div>
-              <div class="news--thumb--wrap">
-                <img src="/img/img--cycle--center.png" alt="">
-              </div>
-            </NuxtLink>
-            <NuxtLink to="/" class="news">
-              <div class="news--title--wrap">
-                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
-                <span>2025.07.11</span>
-              </div>
-              <div class="news--thumb--wrap">
-                <img src="/img/img--cycle--center.png" alt="">
-              </div>
-            </NuxtLink>
-            <NuxtLink to="/" class="news">
-              <div class="news--title--wrap">
-                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
-                <span>2025.07.11</span>
-              </div>
-              <div class="news--thumb--wrap">
-                <img src="/img/img--cycle--center.png" alt="">
-              </div>
-            </NuxtLink>
-            <NuxtLink to="/" class="news">
-              <div class="news--title--wrap">
-                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
-                <span>2025.07.11</span>
-              </div>
-              <div class="news--thumb--wrap">
-                <img src="/img/img--cycle--center.png" alt="">
-              </div>
-            </NuxtLink>
-            <NuxtLink to="/" class="news">
-              <div class="news--title--wrap">
-                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
-                <span>2025.07.11</span>
-              </div>
-              <div class="news--thumb--wrap">
-                <img src="/img/img--cycle--center.png" alt="">
-              </div>
-            </NuxtLink>
-            <NuxtLink to="/" class="news">
-              <div class="news--title--wrap">
-                <h4>그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ESG전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최 그린플라스틱연합, ESG친환경대전서 ‘자원순환 탄소중립 GPA 컨퍼런스’ 개최그린플라스틱연합, ES</h4>
-                <span>2025.07.11</span>
-              </div>
-              <div class="news--thumb--wrap">
-                <img src="/img/img--cycle--center.png" alt="">
+                <img :src="news.image" alt="">
               </div>
             </NuxtLink>
           </div>
           <div class="pagination--wrap">
-            <UButton class="prev--btn" disabled></UButton>
+            <UButton
+              @click="prevPage"
+              class="prev--btn"
+              :disabled="currentPage === 1"
+            ></UButton>
             <div class="numbs">
-              <UButton class="active">1</UButton>
-              <UButton>2</UButton>
-              <UButton>3</UButton>
-              <UButton>4</UButton>
-              <UButton>5</UButton>
+              <UButton
+                v-for="page in totalPages"
+                :key="page"
+                @click="goToPage(page)"
+                :class="{ 'active': currentPage === page }"
+              >
+                {{ page }}
+              </UButton>
             </div>
-            <UButton class="next--btn"></UButton>
+            <UButton
+              @click="nextPage"
+              class="next--btn"
+              :disabled="currentPage === totalPages"
+            ></UButton>
           </div>
         </div>
       </div>
@@ -131,4 +66,62 @@ const navigation = ref([
   },
   { name: "환경뉴스", link: "/media/news" }
 ])
+
+// 뉴스 데이터 배열 생성
+const newsData = ref([
+  { id: 1, title: "그린플라스틱연합, ESG친환경대전서 '자원순환 탄소중립 GPA 컨퍼런스' 개최", date: "2025.07.11", image: "/img/img--news.png", link: "/" },
+  { id: 2, title: "친환경 플라스틱 기술 개발 동향", date: "2025.07.10", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 3, title: "탄소중립 실현을 위한 플라스틱 재활용 기술", date: "2025.07.09", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 4, title: "바이오플라스틱 시장 전망과 기술 동향", date: "2025.07.08", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 5, title: "플라스틱 감축을 위한 정부 정책 변화", date: "2025.07.07", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 6, title: "순환경제와 플라스틱 재활용 산업", date: "2025.07.06", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 7, title: "해양 플라스틱 오염 해결을 위한 혁신 기술", date: "2025.07.05", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 8, title: "친환경 포장재 개발 현황", date: "2025.07.04", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 9, title: "플라스틱 대체재 소재 연구 동향", date: "2025.07.03", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 10, title: "ESG 경영과 플라스틱 감축 전략", date: "2025.07.02", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 11, title: "글로벌 플라스틱 규제 동향", date: "2025.07.01", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 12, title: "생분해성 플라스틱 상용화 전망", date: "2025.06.30", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 13, title: "플라스틱 없는 일주일 캠페인", date: "2025.06.29", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 14, title: "재활용 플라스틱 품질 향상 기술", date: "2025.06.28", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 15, title: "플라스틱 순환경제 구축 방안", date: "2025.06.27", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 16, title: "친환경 소재 개발 투자 확대", date: "2025.06.26", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 17, title: "마이크로플라스틱 저감 기술", date: "2025.06.25", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 18, title: "플라스틱 재활용률 제고 방안", date: "2025.06.24", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 19, title: "바이오매스 기반 플라스틱 개발", date: "2025.06.23", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 20, title: "환경친화적 플라스틱 산업 전망", date: "2025.06.22", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 21, title: "플라스틱 폐기물 감축 정책", date: "2025.06.21", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 22, title: "지속가능한 포장재 솔루션", date: "2025.06.20", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 23, title: "플라스틱 리사이클링 혁신 기술", date: "2025.06.19", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 24, title: "친환경 플라스틱 인증 시스템", date: "2025.06.18", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 25, title: "탄소 발자국 감축을 위한 플라스틱 대안", date: "2025.06.17", image: "/img/img--cycle--center.png", link: "/" }
+])
+
+// 페이지네이션 로직
+const currentPage = ref(1)
+const itemsPerPage = 10
+const totalPages = computed(() => Math.ceil(newsData.value.length / itemsPerPage))
+
+const paginatedNews = computed(() => {
+  const start = (currentPage.value - 1) * itemsPerPage
+  const end = start + itemsPerPage
+  return newsData.value.slice(start, end)
+})
+
+const goToPage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    currentPage.value = page
+  }
+}
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++
+  }
+}
+
+const prevPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--
+  }
+}
 </script>

app/pages/media/press.vue

@@ -4,77 +4,81 @@
     <section class="title--section">
       <div class="sub--container type2">
         <div class="title--wrap">
-          <h2 class="title">그린웨일글로벌은 까다롭기로 유명한 <br />
-            <strong>친환경 플라스틱 관련 미국 특허 및 유럽 인증을 획득</strong>하여 <br />그 기술력을 입증받았습니다.</h2>
+          <h2 class="title">그린웨일글로벌의 <br />
+            <strong>새로운 소식들을 전해드립니다.</strong></h2>
         </div>
-        <div class="tab--wrap">
-          <NuxtLink to="/" class="active">전체</NuxtLink>
-          <NuxtLink to="/" class="">특허증</NuxtLink>
-          <NuxtLink to="/" class="">인증서</NuxtLink>
-          <NuxtLink to="/" class="">성적서</NuxtLink>
-          <NuxtLink to="/" class="">MSD&TDS</NuxtLink>
-        </div>
-        <div class="patents--wrap">
-          <div class="patents--list">
-            <div class="patents">
-              <div class="img--wrap">
-                <img src="/img/img--patents.png" alt="">
-              </div>
-              <h4>플라스틱 감축 소재 인증서</h4>
-            </div>
-            <div class="patents">
-              <div class="img--wrap">
-                <img src="/img/img--patents.png" alt="">
-              </div>
-              <h4>Korea Eco-Label EL724 Certificate: Biodegradable Resin & Products</h4>
-            </div>
-            <div class="patents">
-              <div class="img--wrap">
-                <img src="/img/img--patents.png" alt="">
+        <div class="sns--wrap">
+          <h3>SNS</h3>
+          <div class="sns--list">
+            <NuxtLink class="sns" to="/">
+              <div class="img--wrap" style="background-image: url('/img/img--sns1.png')"></div>
+              <div class="txt--wrap">
+                <h4>그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌</h4>
+                <span>바로가기<i class="ico"></i></span>
               </div>
-              <h4>플라스틱 감축 소재 인증서</h4>
-            </div>
-            <div class="patents">
-              <div class="img--wrap">
-                <img src="/img/img--patents.png" alt="">
+            </NuxtLink>
+            <NuxtLink class="sns" to="/">
+              <div class="img--wrap" style="background-image: url('/img/img--sns2.png')"></div>
+              <div class="txt--wrap">
+                <h4>그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌</h4>
+                <span>바로가기<i class="ico"></i></span>
               </div>
-              <h4>플라스틱 감축 소재 인증서</h4>
-            </div>
-            <div class="patents">
-              <div class="img--wrap">
-                <img src="/img/img--patents.png" alt="">
+            </NuxtLink>
+            <NuxtLink class="sns" to="/">
+              <div class="img--wrap" style="background-image: url('/img/img--sns3.png')"></div>
+              <div class="txt--wrap">
+                <h4>그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌</h4>
+                <span>바로가기<i class="ico"></i></span>
               </div>
-              <h4>Korea Eco-Label EL724 Certificate: Biodegradable Resin & Products</h4>
-            </div>
-            <div class="patents">
-              <div class="img--wrap">
-                <img src="/img/img--patents.png" alt="">
+            </NuxtLink>
+            <NuxtLink class="sns" to="/">
+              <div class="img--wrap" style="background-image: url('/img/img--sns4.png')"></div>
+              <div class="txt--wrap">
+                <h4>그린웨일글로벌, 녹색인프라 수출펀드 첫 투자기업 선정. 그린웨일글로벌</h4>
+                <span>바로가기<i class="ico"></i></span>
               </div>
-              <h4>플라스틱 감축 소재 인증서</h4>
-            </div>
-            <div class="patents">
-              <div class="img--wrap">
-                <img src="/img/img--patents.png" alt="">
+            </NuxtLink>
+          </div>
+        </div>
+        <div class="news--wrap">
+          <h3>기사</h3>
+          <div class="news--list">
+            <NuxtLink
+              v-for="news in paginatedNews"
+              :key="news.id"
+              :to="news.link"
+              class="news"
+            >
+              <div class="news--title--wrap">
+                <h4>{{ news.title }}</h4>
+                <span>{{ news.date }}</span>
               </div>
-              <h4>플라스틱 감축 소재 인증서</h4>
-            </div>
-            <div class="patents">
-              <div class="img--wrap">
-                <img src="/img/img--patents.png" alt="">
+              <div class="news--thumb--wrap">
+                <img :src="news.image" alt="">
               </div>
-              <h4>플라스틱 감축 소재 인증서</h4>
-            </div>
+            </NuxtLink>
           </div>
           <div class="pagination--wrap">
-            <UButton class="prev--btn" disabled></UButton>
+            <UButton
+              @click="prevPage"
+              class="prev--btn"
+              :disabled="currentPage === 1"
+            ></UButton>
             <div class="numbs">
-              <UButton class="active">1</UButton>
-              <UButton>2</UButton>
-              <UButton>3</UButton>
-              <UButton>4</UButton>
-              <UButton>5</UButton>
+              <UButton
+                v-for="page in totalPages"
+                :key="page"
+                @click="goToPage(page)"
+                :class="{ 'active': currentPage === page }"
+              >
+                {{ page }}
+              </UButton>
             </div>
-            <UButton class="next--btn"></UButton>
+            <UButton
+              @click="nextPage"
+              class="next--btn"
+              :disabled="currentPage === totalPages"
+            ></UButton>
           </div>
         </div>
       </div>
@@ -84,16 +88,74 @@
 <script setup>
 import TopVisual from '~/components/topVisual.vue'
 
-const className = ref("technology")
-const title = ref("Technology")
+const className = ref("media")
+const title = ref("Media")
 const navigation = ref([
-  { name: "Technology",
-    link: "/technology/patents" ,
+  { name: "Media",
+    link: "/media/press" ,
     gnbList : [
-      { name: "시설", link: "/technology/facilities" },
-      { name: "특허 / 인증", link: "/technology/patents" },
+      { name: "환경뉴스", link: "/media/news" },
+      { name: "보도자료", link: "/media/press" },
     ]
   },
-  { name: "특허 / 인증", link: "/technology/patents" }
+  { name: "보도자료", link: "/media/press" }
+])
+
+// 뉴스 데이터 배열 생성
+const newsData = ref([
+  { id: 1, title: "그린플라스틱연합, ESG친환경대전서 '자원순환 탄소중립 GPA 컨퍼런스' 개최", date: "2025.07.11", image: "/img/img--news.png", link: "/" },
+  { id: 2, title: "친환경 플라스틱 기술 개발 동향", date: "2025.07.10", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 3, title: "탄소중립 실현을 위한 플라스틱 재활용 기술", date: "2025.07.09", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 4, title: "바이오플라스틱 시장 전망과 기술 동향", date: "2025.07.08", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 5, title: "플라스틱 감축을 위한 정부 정책 변화", date: "2025.07.07", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 6, title: "순환경제와 플라스틱 재활용 산업", date: "2025.07.06", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 7, title: "해양 플라스틱 오염 해결을 위한 혁신 기술", date: "2025.07.05", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 8, title: "친환경 포장재 개발 현황", date: "2025.07.04", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 9, title: "플라스틱 대체재 소재 연구 동향", date: "2025.07.03", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 10, title: "ESG 경영과 플라스틱 감축 전략", date: "2025.07.02", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 11, title: "글로벌 플라스틱 규제 동향", date: "2025.07.01", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 12, title: "생분해성 플라스틱 상용화 전망", date: "2025.06.30", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 13, title: "플라스틱 없는 일주일 캠페인", date: "2025.06.29", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 14, title: "재활용 플라스틱 품질 향상 기술", date: "2025.06.28", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 15, title: "플라스틱 순환경제 구축 방안", date: "2025.06.27", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 16, title: "친환경 소재 개발 투자 확대", date: "2025.06.26", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 17, title: "마이크로플라스틱 저감 기술", date: "2025.06.25", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 18, title: "플라스틱 재활용률 제고 방안", date: "2025.06.24", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 19, title: "바이오매스 기반 플라스틱 개발", date: "2025.06.23", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 20, title: "환경친화적 플라스틱 산업 전망", date: "2025.06.22", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 21, title: "플라스틱 폐기물 감축 정책", date: "2025.06.21", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 22, title: "지속가능한 포장재 솔루션", date: "2025.06.20", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 23, title: "플라스틱 리사이클링 혁신 기술", date: "2025.06.19", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 24, title: "친환경 플라스틱 인증 시스템", date: "2025.06.18", image: "/img/img--cycle--center.png", link: "/" },
+  { id: 25, title: "탄소 발자국 감축을 위한 플라스틱 대안", date: "2025.06.17", image: "/img/img--cycle--center.png", link: "/" }
 ])
+
+// 페이지네이션 로직
+const currentPage = ref(1)
+const itemsPerPage = 10
+const totalPages = computed(() => Math.ceil(newsData.value.length / itemsPerPage))
+
+const paginatedNews = computed(() => {
+  const start = (currentPage.value - 1) * itemsPerPage
+  const end = start + itemsPerPage
+  return newsData.value.slice(start, end)
+})
+
+const goToPage = (page) => {
+  if (page >= 1 && page <= totalPages.value) {
+    currentPage.value = page
+  }
+}
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++
+  }
+}
+
+const prevPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--
+  }
+}
 </script>

app/pages/technology/patents.vue

@@ -16,15 +16,32 @@
         </div>
         <div class="patents--wrap">
           <div class="patents--list">
-            <UModal title="히이" close-ico>
-              <UButton class="patents">
+            <UModal v-model:open="isModalOpen" title="특허 / 인증 크게보기" :close="false">
+              <UButton @click="openModal('/img/img--patents.png')" class="patents">
                 <div class="img--wrap">
                   <img src="/img/img--patents.png" alt="">
                 </div>
                 <h4>플라스틱 감축 소재 인증서</h4>
               </UButton>
-              <template>
-                
+              <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>
           </div>
@@ -47,8 +64,9 @@
 <script setup>
 import TopVisual from '~/components/topVisual.vue'
 
-const className = ref("technology")
-const title = ref("Technology")
+const className = ref("technology");
+const title = ref("Technology");
+const isModalOpen = ref(false);
 const navigation = ref([
   { name: "Technology",
     link: "/technology/patents" ,
@@ -59,4 +77,11 @@ const navigation = ref([
   },
   { name: "특허 / 인증", link: "/technology/patents" }
 ])
+
+const selectedImage = ref('/img/img--patents.png');
+
+const openModal = (imagePath) => {
+  selectedImage.value = imagePath;
+  isModalOpen.value = true;
+};
 </script>

package-lock.json

@@ -87,6 +87,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.4.tgz",
       "integrity": "sha512-2BCOP7TN8M+gVDj7/ht3hsaO/B/n5oDbiAyyvnRlNOs+u1o+JWNYTQrmpuNp1/Wq2gcFrI01JAW+paEKDMx/CA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
         "@babel/generator": "^7.28.3",
@@ -352,6 +353,7 @@
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz",
       "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/types": "^7.28.4"
       },
@@ -4008,6 +4010,7 @@
       "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.21.tgz",
       "integrity": "sha512-SXlyk6I5eUGBd2v8Ie7tF6ADHE9kCR6mBEuPyH1nUZ0h6Xx6nZI29i12sJKQmzbDyr2tUHMhhTt51Z6blbkTTQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.28.3",
         "@vue/compiler-core": "3.5.21",
@@ -4316,6 +4319,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4557,6 +4561,7 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz",
       "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "follow-redirects": "^1.15.6",
         "form-data": "^4.0.4",
@@ -4743,6 +4748,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.8.3",
         "caniuse-lite": "^1.0.30001741",
@@ -5826,7 +5832,8 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/embla-carousel-auto-height": {
       "version": "8.6.0",
@@ -6401,6 +6408,7 @@
       "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.1.0.tgz",
       "integrity": "sha512-trLf4SzuuUxfusZADLINj+dE8clK1frKdmqiJNb1Es75fmI5oY6X2mxLVUciLLjxqw/xr72Dhy+lER6dGd02FQ==",
       "license": "Apache-2.0",
+      "peer": true,
       "engines": {
         "node": ">=10"
       }
@@ -7176,7 +7184,8 @@
       "version": "3.7.1",
       "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
       "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/js-tokens": {
       "version": "4.0.0",
@@ -8468,6 +8477,7 @@
       "resolved": "https://registry.npmjs.org/oxc-parser/-/oxc-parser-0.87.0.tgz",
       "integrity": "sha512-uc47XrtHwkBoES4HFgwgfH9sqwAtJXgAIBq4fFBMZ4hWmgVZoExyn+L4g4VuaecVKXkz1bvlaHcfwHAJPQb5Gw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@oxc-project/types": "^0.87.0"
       },
@@ -8718,6 +8728,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -10289,6 +10300,7 @@
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
       "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/dcastil"
@@ -10317,7 +10329,8 @@
       "version": "4.1.13",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.13.tgz",
       "integrity": "sha512-i+zidfmTqtwquj4hMEwdjshYYgMbOrPzb9a0M3ZgNa0JMoZeFC6bxZvO8yr8ozS6ix2SDz0+mvryPeBs2TFE+w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/tapable": {
       "version": "2.2.3",
@@ -10373,6 +10386,7 @@
       "resolved": "https://registry.npmjs.org/terser/-/terser-5.44.0.tgz",
       "integrity": "sha512-nIVck8DK+GM/0Frwd+nIhZ84pR/BX7rmXMfYwyg+Sri5oGVE99/E3KvXqpC2xHFxyqXyGHTKBSioxxplrO4I4w==",
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
         "acorn": "^8.15.0",
@@ -11158,6 +11172,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.7.tgz",
       "integrity": "sha512-VbA8ScMvAISJNJVbRDTJdCwqQoAareR/wutevKanhR2/1EkoXVZVkkORaYm/tNVCjP/UDTKtcw3bAkwOUdedmA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.5.0",
@@ -11474,6 +11489,7 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.21.tgz",
       "integrity": "sha512-xxf9rum9KtOdwdRkiApWL+9hZEMWE90FHh8yS1+KJAiWYh+iGWV1FquPjoO9VUHQ+VIhsCXNNyZ5Sf4++RVZBA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.5.21",
         "@vue/compiler-sfc": "3.5.21",
@@ -11516,6 +11532,7 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.5.1.tgz",
       "integrity": "sha512-ogAF3P97NPm8fJsE4by9dwSYtDwXIY1nFY9T6DyQnGHd1E2Da94w9JIolpe42LJGIl0DwOHBi8TcRPlPGwbTtw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@vue/devtools-api": "^6.6.4"
       },
@@ -11731,6 +11748,7 @@
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
       "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
       "license": "ISC",
+      "peer": true,
       "bin": {
         "yaml": "bin.mjs"
       },

public/img/ico--close.svg

@@ -0,0 +1,8 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_67512" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="28">
+<rect width="28" height="28" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_67512)">
+<path d="M7.46621 21.7584L6.24121 20.5334L12.7745 14L6.24121 7.4667L7.46621 6.2417L13.9995 12.775L20.5329 6.2417L21.7579 7.4667L15.2245 14L21.7579 20.5334L20.5329 21.7584L13.9995 15.225L7.46621 21.7584Z" fill="white"/>
+</g>
+</svg>

public/img/ico--more--arrow2.svg

@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_68106" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
+<rect width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_68106)">
+<path d="M13.8558 10.625H3.75V9.375H13.8558L9.10898 4.62819L9.99998 3.75L16.25 9.99998L9.99998 16.25L9.10898 15.3718L13.8558 10.625Z" fill="white"/>
+</g>
+</svg>