오시는길만 남음

app/assets/scss/style.scss

@@ -699,6 +699,15 @@ main{
                 padding: 100px 0 120px;
             }
         }
+        &.notice--section{
+            .sub--container{
+                .title--wrap{
+                    .title{
+                        font-size: 48px;
+                    }
+                }
+            }
+        }
         .sub--container{
             margin: 0 auto;
             max-width: 1060px;
@@ -711,6 +720,9 @@ main{
                 max-width: 1280px;
                 padding: 100px 0 120px;
             }
+            &.type4{
+                padding: 160px 0 120px;
+            }
             .title--wrap{
                 text-align: center;
                 &.color--white{
@@ -1037,6 +1049,59 @@ main{
                     }
                 }
             }
+            .search--wrap{
+                margin: 60px 0 40px;
+                display: flex;
+                justify-content: end;
+                position: relative;
+                gap: 8px;
+                >button{
+                    width: 120px;
+                    box-shadow: none;
+                    height: 48px;
+                    padding-left: 16px;
+                    border: 1px solid #b6bbcc;
+                    padding-right: 40px;
+                    color: #1f2128;
+                    font-size: 16px;
+                    font-weight: 500;
+                    .iconify{
+                        --svg: none;
+                        background-color: transparent;
+                        width: 24px;
+                        height: 24px;
+                        background-image: url(/img/ico--select.svg);
+                    }
+                }
+                input{
+                    padding: 0 40px 0 16px;
+                    height: 48px;
+                    width: 320px;
+                    box-shadow: none;
+                    border: 1px solid #b6bbcc;
+                    color: #1f2128;
+                    font-size: 16px;
+                    font-weight: 500;
+                    &::placeholder{
+                        color: #78809b;
+                        font-size: 16px;
+                        font-weight: 500;
+                    }
+                }
+                .search--btn{
+                    background-color: transparent;
+                    border: none;
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%);
+                    background-repeat: no-repeat;
+                    width: 24px;
+                    padding: 0;
+                    right: 12px;
+                    height: 24px;
+                    background-image: url(/img/ico--search.svg);
+                }
+            }
             .materials--wrap{
                 display: flex;
                 flex-direction: column;
@@ -1231,6 +1296,213 @@ main{
                     }
                 }
             }
+            .notice--wrap {
+                .notice--list {
+                    display: flex;
+                    flex-direction: column;
+                    border-top: 1px solid #1f2128;
+
+                    .notice {
+                        display: flex;
+                        justify-content: space-between;
+                        border-bottom: 1px solid #e0e4f2;
+                        transition: all 0.3s;
+                        align-items: center;
+                        padding: 28px 20px;
+                        gap: 80px;
+
+                        &:hover {
+                            background-color: #F6F8FF;
+                        }
+
+                        .news--index{
+                            width: 20px;
+                            color: #515973;
+                            font-size: 16px;
+                            font-weight: 400;
+                        }
+
+                        h4 {
+                            color: #1f2128;
+                            font-size: 20px;
+                            width: calc(100% - 260px);
+                            font-weight: 500;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            display: -webkit-box;
+                            -webkit-line-clamp: 1;
+                            -webkit-box-orient: vertical;
+                        }
+
+                        .news--date {
+                            color: #515973;
+                            font-size: 16px;
+                            font-weight: 400;
+                        }
+                    }
+                }
+            }
+            .faq--wrap{
+                margin-top: 60px;
+                border-top: 1px solid #1f2128;
+                .border-default{
+                    border-bottom: 1px solid #b6bbcc;
+                    .flex{
+                        >button{
+                            cursor: pointer;
+                            gap: 20px;
+                            padding: 28px 20px;
+                            .text-start{
+                                color: #00a654;
+                                font-size: 20px;
+                                font-weight: 700;
+                                padding-left: 44px;
+                                position: relative;
+                                &::before{
+                                    content: 'Q';
+                                    position: absolute;
+                                    width: 24px;
+                                    left: 0;
+                                    text-align: center;
+                                    margin-right: 20px;
+                                    font-size: 24px;
+                                    line-height: 1.1;
+                                }
+                            }
+                            .iconify{
+                                width: 28px;
+                                height: 28px;
+                                --svg: none;
+                                background-color: transparent;
+                                background-image: url(/img/ico--faq--arrow.svg);
+                            }
+                        }
+                    }
+                    .overflow-hidden{
+                        padding: 28px 60px 28px 20px;
+                        background-color: #f6f8ff;
+                        .text-sm{
+                            padding-bottom: 0;
+                            color: #1f2128;
+                            font-size: 18px;
+                            position: relative;
+                            padding-left: 44px;
+                            &::before{
+                                content: 'A';
+                                position: absolute;
+                                width: 24px;
+                                left: 0;
+                                text-align: center;
+                                color: #515973;
+                                font-weight: 700;
+                                margin-right: 20px;
+                                font-size: 24px;
+                                line-height: 1.1;
+                            }
+                        }
+                    }
+                }
+            }
+            .view--wrap{
+                .view--title{
+                    padding-bottom: 40px;
+                    border-bottom: 1px solid #78809b;
+                    >h3{
+                        margin-bottom: 16px;
+                        color: #1f2128;
+                        font-size: 32px;
+                        font-weight: 700;
+                    }
+                    .view--info{
+                        display: flex;
+                        align-items: center;
+                        >p{
+                            color: #515973;
+                            font-size: 16px;
+                            font-weight: 400;
+                        }
+                        .bar{
+                            margin: 0 12px;
+                            display: inline-block;
+                            width: 1px;
+                            height: 12px;
+                            background-color: #b6bbcc;
+                        }
+                    }
+                }
+                .view--cont{
+                    padding: 40px 0;
+                    border-bottom: 1px solid #78809b;
+                    margin-bottom: 40px;
+                    img{
+                        max-width: 100%;
+                    }
+                    p{
+                        color: #1f2128;
+                        font-size: 18px;
+                        font-weight: 400;
+                    }
+                }
+                .btn--wrap{
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    >a{
+                        width: 128px;
+                        height: 44px;
+                        background-color: #1f2128;
+                        color: #fff;
+                        border-radius: 24px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        font-size: 16px;
+                        font-weight: 700;
+                    }
+                }
+                .link--wrap{
+                    margin-top: 80px;
+                    display: flex;
+                    flex-direction: column;
+                    .link{
+                        &:first-child{
+                            border-top: 1px solid #B6BBCC;
+                        }
+                        align-items: center;
+                        display: flex;
+                        justify-content: space-between;
+                        transition: all 0.3s;
+                        padding: 28px 20px;
+                        border-bottom: 1px solid #B6BBCC;
+                        &:hover{
+                            background-color: #eff1fb;
+                        }
+                        >p{
+                            width: 60px;
+                            color: #515973;
+                            font-weight: 400;
+                            font-size: 16px;
+                        }
+                        >h5{
+                            color: #1f2128;
+                            overflow: hidden;
+                            text-overflow: ellipsis;
+                            display: -webkit-box;
+                            -webkit-line-clamp: 1;
+                            -webkit-box-orient: vertical;
+                            font-size: 18px;
+                            width: calc(100% - 300px);
+                            font-weight: 500;
+                        }
+                        >span{
+                            width: 80px;
+                            color: #515973;
+                            font-size: 16px;
+                            font-weight: 400;
+                        }
+                    }
+                }
+            }
             .sns--wrap{
                 margin-top: 80px;
                 >h3 {

app/pages/company/catalog.vue

@@ -1,7 +1,7 @@
 <template>
   <main>
     <TopVisual :className="className" :title="title" :navigation="navigation" />
-    <section class="title--section">
+    <section class="catalog--section">
       <div class="sub--container type2">
         <div class="title--wrap">
           <h2 class="title">저희 회사에 대한 이해를 돕기 위해 <br /><strong>카탈로그와 회사 소개서를 준비했습니다.</strong></h2>

app/pages/company/partners.vue

@@ -1,7 +1,7 @@
 <template>
   <main>
     <TopVisual :className="className" :title="title" :navigation="navigation" />
-    <section class="history--section">
+    <section class="partners--section">
       <div class="sub--container type3">
         <div class="title--wrap">
           <h2 class="title">그린웨일글로벌과 함께 하고 있는 <br /><strong>파트너들을 소개합니다.</strong></h2>

app/pages/contact/faq.vue

@@ -1,104 +1,69 @@
 <template>
-  <div>
-    <topVisual />
-    <div class="sub-content">
-      <div class="container">
-        <h2 class="sub-title">자주 묻는 질문</h2>
-        <div class="faq-list">
-          <div v-for="(item, index) in faqItems" :key="index" class="faq-item">
-            <div class="faq-question" @click="toggleAnswer(index)">
-              <span class="q-mark">Q</span>
-              <span class="question-text">{{ item.question }}</span>
-              <span class="toggle-icon" :class="{ active: openIndex === index }">▼</span>
-            </div>
-            <div v-if="openIndex === index" class="faq-answer">
-              <span class="a-mark">A</span>
-              <span class="answer-text">{{ item.answer }}</span>
-            </div>
-          </div>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="notice--section">
+      <div class="sub--container type2">
+        <div class="title--wrap">
+          <h2 class="title">FAQ</h2>
+        </div>
+        <div class="faq--wrap">
+          <UAccordion :collapsible="false" :items="faqContent"></UAccordion>
         </div>
       </div>
-    </div>
-  </div>
+    </section>
+  </main>
 </template>
-
 <script setup>
-import topVisual from '~/components/topVisual.vue';
+import TopVisual from '~/components/topVisual.vue';
 
-const openIndex = ref(null);
+const className = ref("contact")
+const title = ref("Contact")
+const navigation = ref([
+  { name: "Contact",
+    link: "/contact/faq" ,
+    gnbList: [
+      { name: "공지사항", link: "/contact/notice" },
+      { name: "FAQ", link: "/contact/faq" },
+      { name: "고객센터", link: "/contact/support" },
+      { name: "오시는길", link: "/contact/location" }
+    ]
+  },
+  { name: "FAQ", link: "/contact/faq" }
+])
 
-const faqItems = [
+const faqContent = ref([
+  {
+    label: "바이오 플라스틱은 어떤 종류가 있어요?",
+    content: "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다."
+  },
+  {
+    label: "생분해성 플라스틱이란 무엇인가요?",
+    content: "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다."
+  },
   {
-    question: '그린웨일글로벌의 주요 제품은 무엇인가요?',
-    answer: '친환경 소재와 지속 가능한 솔루션을 제공합니다.'
+    label: "생분해성 플라스틱이 정말 친환경적인가요?",
+    content: "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다."
   },
   {
-    question: '제품 문의는 어떻게 하나요?',
-    answer: '고객지원 페이지의 문의 양식을 통해 문의하실 수 있습니다.'
+    label: "제품마다 생분해 되는 시간이 다른가요?",
+    content: "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다."
   },
   {
-    question: '기술 지원을 받을 수 있나요?',
-    answer: '네, 전문 기술진이 상담 및 지원을 제공합니다.'
+    label: "그린웨일글로벌 플라스틱은 어떻게 다르나요?",
+    content: "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다."
+  },
+  {
+    label: "카사바란 무엇인가요?",
+    content: "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다."
+  },
+  {
+    label: "정말 생분해되는지 어떻게 알 수 있나요?",
+    content: "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다."
+  },
+  {
+    label: "물에 젖거나 가열하면 부패하나요?",
+    content: "바이오플라스틱은 크게 생분해성 플라스틱(Biodegradable plastic), 바이오 베이스 플라스틱(Bio-based plastic), 그리고 산화생분해 플라스틱(Oxo-biodegradable plastic)으로 나뉩니다. 단 이 중 산화생분해 플라스틱은 최근에 마이크로플라스틱으로 분산될 뿐, 분해되지 않는다고 결론지어 친환경 플라스틱 종류에서 제외되었습니다."
   }
-];
-
-const toggleAnswer = (index) => {
-  openIndex.value = openIndex.value === index ? null : index;
-};
-</script>
+])
 
-<style scoped>
-.faq-list {
-  padding: 40px 0;
-}
-.faq-item {
-  border-bottom: 1px solid #e0e0e0;
-  padding: 20px 0;
-}
-.faq-question {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  padding: 10px 0;
-}
-.q-mark, .a-mark {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  background: #00a651;
-  color: white;
-  border-radius: 50%;
-  margin-right: 15px;
-  font-weight: bold;
-}
-.a-mark {
-  background: #666;
-}
-.question-text {
-  flex: 1;
-  font-size: 18px;
-  font-weight: 500;
-}
-.toggle-icon {
-  transition: transform 0.3s;
-}
-.toggle-icon.active {
-  transform: rotate(180deg);
-}
-.faq-answer {
-  display: flex;
-  align-items: flex-start;
-  padding: 20px 0;
-  background: #f8f8f8;
-  margin-top: 10px;
-  padding: 20px;
-  border-radius: 4px;
-}
-.answer-text {
-  flex: 1;
-  font-size: 16px;
-  line-height: 1.6;
-}
-</style>
+</script>

app/pages/contact/notice.vue

@@ -1,98 +1,132 @@
 <template>
-  <div>
-    <topVisual />
-    <div class="sub-content">
-      <div class="container">
-        <h2 class="sub-title">공지사항</h2>
-        <div class="notice-list">
-          <table class="table">
-            <thead>
-              <tr>
-                <th width="10%">번호</th>
-                <th width="60%">제목</th>
-                <th width="15%">작성일</th>
-                <th width="15%">조회수</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="(notice, index) in notices" :key="index">
-                <td>{{ notices.length - index }}</td>
-                <td class="text-left">
-                  <a href="#" @click.prevent>{{ notice.title }}</a>
-                </td>
-                <td>{{ notice.date }}</td>
-                <td>{{ notice.views }}</td>
-              </tr>
-            </tbody>
-          </table>
+  <main>
+    <TopVisual :className="className" :title="title" :navigation="navigation" />
+    <section class="notice--section">
+      <div class="sub--container type2">
+        <div class="title--wrap">
+          <h2 class="title">공지사항</h2>
+        </div>
+        <div class="search--wrap">
+          <USelect v-model="searchValue" :items="searchItems" />
+          <UInput v-model="searchKeyword" placeholder="검색어를 입력해주세요."/>
+          <UButton class="search--btn"></UButton>
+        </div>
+        <div class="notice--wrap">
+          <div class="notice--list">
+            <NuxtLink
+              v-for="news in paginatedNews"
+              :key="news.id"
+              to="/contact/noticeView"
+              class="notice"
+            >
+              <span class="news--index">{{ news.id }}</span>
+              <h4>{{ news.title }}</h4>
+              <span class="news--date">{{ news.date }}</span>
+            </NuxtLink>
+          </div>
+          <div class="pagination--wrap">
+            <UButton
+              @click="prevPage"
+              class="prev--btn"
+              :disabled="currentPage === 1"
+            ></UButton>
+            <div class="numbs">
+              <UButton
+                v-for="page in totalPages"
+                :key="page"
+                @click="goToPage(page)"
+                :class="{ 'active': currentPage === page }"
+              >
+                {{ page }}
+              </UButton>
+            </div>
+            <UButton
+              @click="nextPage"
+              class="next--btn"
+              :disabled="currentPage === totalPages"
+            ></UButton>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
+    </section>
+  </main>
 </template>
-
 <script setup>
-import topVisual from '~/components/topVisual.vue';
+import TopVisual from '~/components/topVisual.vue';
+const searchItems = ref(['제목'])
+const searchValue = ref('선택')
+const searchKeyword = ref('')
 
-const notices = [
-  {
-    title: '2024년 신년 인사',
-    date: '2024-01-02',
-    views: 150
-  },
-  {
-    title: '홈페이지 리뉴얼 안내',
-    date: '2023-12-15',
-    views: 280
-  },
-  {
-    title: '연말연시 휴무 안내',
-    date: '2023-12-20',
-    views: 195
+const className = ref("contact")
+const title = ref("Contact")
+const navigation = ref([
+  { name: "Contact",
+    link: "/contact/notice" ,
+    gnbList: [
+      { name: "공지사항", link: "/contact/notice" },
+      { name: "FAQ", link: "/contact/faq" },
+      { name: "고객센터", link: "/contact/support" },
+      { name: "오시는길", link: "/contact/location" }
+    ]
   },
-  {
-    title: '신제품 출시 안내',
-    date: '2023-11-10',
-    views: 450
-  },
-  {
-    title: '고객 감사 이벤트',
-    date: '2023-10-25',
-    views: 320
-  }
-];
-</script>
+  { name: "공지사항", link: "/contact/notice" }
+])
 
-<style scoped>
-.notice-list {
-  padding: 40px 0;
-}
-.table {
-  width: 100%;
-  border-collapse: collapse;
-}
-.table th {
-  background: #f8f8f8;
-  padding: 15px;
-  text-align: center;
-  border-top: 2px solid #333;
-  border-bottom: 1px solid #ddd;
-  font-weight: 500;
-}
-.table td {
-  padding: 15px;
-  text-align: center;
-  border-bottom: 1px solid #e0e0e0;
-}
-.table td.text-left {
-  text-align: left;
+// 뉴스 데이터 배열 생성
+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
+  }
 }
-.table a {
-  color: #333;
-  text-decoration: none;
-  transition: color 0.3s;
+
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++
+  }
 }
-.table a:hover {
-  color: #00a651;
+
+const prevPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--
+  }
 }
-</style>
+</script>

app/pages/contact/noticeView.vue

@@ -0,0 +1,81 @@
+<template>
+  <main>
+    <section class="">
+      <div class="sub--container type4">
+        <div class="view--wrap">
+          <div class="view--title">
+            <h3>2025년 정기주주총회</h3>
+            <div class="view--info">
+              <p>그린웨일글로벌(주)</p>
+              <span class="bar"></span>
+              <p>2025-03-17 09:03:14</p>
+              <span class="bar"></span>
+              <p>조회수 : 304</p>
+            </div>
+          </div>
+          <div class="view--cont">
+            <p>
+              그린웨일 글로벌 주식회사 (‘www.greenwhaleglobal.com’이하 '그린웨일 글로벌')은(는) 「개인정보 보호법」 제30조에 따라 정부주체의 개인정보를 보호하고 이와 관련한 고충을 신속하고 원활하게 처리할 수 있도록 하기 위하여 다음과 같이 개인정보 처리방침을 수립·공개합니다. <br /><br />
+              이 개인정보처리방침은 2022년 11월 01일부터 적용됩니다. <br /><br />
+              제1조(개인정보의 처리 목적) <br /><br />
+              그린웨일 글로벌은 다음의 목적을 위하여 개인정보를 처리합니다. 처리하고 있는 개인정보는 다음의 목적 이외의 용도로는 이용되지 않으며 이용 목적이 변경되는 경우에는 「개인정보 보호법」 제18조에 따라 별도의 동의를 받는 등 필요한 조치를 이행할 예정입니다. <br /><br />
+              재화 또는 서비스 제공: 맞춤 서비스 제공을 목적으로 개인정보를 처리합니다.
+            </p>
+          </div>
+          <div class="btn--wrap">
+            <NuxtLink to="/contact/notice">목록</NuxtLink>
+          </div>
+          <div class="link--wrap">
+            <NuxtLink to="/" class="link">
+              <p>Preview</p>
+              <h5>2025년 정기주주총회</h5>
+              <span>2025.07.11</span>
+            </NuxtLink>
+            <NuxtLink to="/" class="link">
+              <p>Next</p>
+              <h5>2025년 정기주주총회</h5>
+              <span>2025.07.11</span>
+            </NuxtLink>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+<script setup>
+let scrollObserver = null
+
+onMounted(() => {
+  const header = document.querySelector('.header--wrap')
+  if (header) {
+    header.classList.add('white')
+
+    // MutationObserver로 클래스 변경 감지 및 방지
+    scrollObserver = new MutationObserver((mutations) => {
+      mutations.forEach((mutation) => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          if (!header.classList.contains('white')) {
+            header.classList.add('white')
+          }
+        }
+      })
+    })
+
+    scrollObserver.observe(header, {
+      attributes: true,
+      attributeFilter: ['class']
+    })
+  }
+})
+
+onUnmounted(() => {
+  const header = document.querySelector('.header--wrap')
+  if (header) {
+    header.classList.remove('white')
+  }
+
+  if (scrollObserver) {
+    scrollObserver.disconnect()
+  }
+})
+</script>

app/pages/media/news.vue

@@ -1,7 +1,7 @@
 <template>
   <main>
     <TopVisual :className="className" :title="title" :navigation="navigation" />
-    <section class="title--section">
+    <section class="news--section">
       <div class="sub--container type2">
         <div class="title--wrap">
           <h2 class="title">친환경 플라스틱과 관련한 <br />

app/pages/media/press.vue

@@ -1,7 +1,7 @@
 <template>
   <main>
     <TopVisual :className="className" :title="title" :navigation="navigation" />
-    <section class="title--section">
+    <section class="press--section">
       <div class="sub--container type2">
         <div class="title--wrap">
           <h2 class="title">그린웨일글로벌의 <br />

package-lock.json

@@ -9708,6 +9708,7 @@
       "integrity": "sha512-t+YPtOQHpGW1QWsh1CHQ5cPIr9lbbGZLZnbihP/D/qZj/yuV68m8qarcV17nvkOX81BCrvzAlq2klCQFZghyTg==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "chokidar": "^4.0.0",
         "immutable": "^5.0.2",

public/img/ico--faq--arrow.svg

@@ -0,0 +1,8 @@
+<svg width="28" height="29" viewBox="0 0 28 29" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_69090" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="28" height="29">
+<rect y="0.5" width="28" height="28" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_69090)">
+<path d="M13.9999 18.6124L7.4082 11.9916L8.6332 10.7666L13.9999 16.1333L19.3665 10.7666L20.5915 11.9916L13.9999 18.6124Z" fill="#515973"/>
+</g>
+</svg>

public/img/ico--search.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_68823" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_68823)">
+<path d="M19.5504 20.575L13.2504 14.3C12.7504 14.7167 12.1754 15.0417 11.5254 15.275C10.8754 15.5083 10.2087 15.625 9.52539 15.625C7.80872 15.625 6.35872 15.0333 5.17539 13.85C3.99206 12.6667 3.40039 11.2167 3.40039 9.5C3.40039 7.8 3.99206 6.354 5.17539 5.162C6.35872 3.97067 7.80872 3.375 9.52539 3.375C11.2254 3.375 12.6671 3.96667 13.8504 5.15C15.0337 6.33333 15.6254 7.78333 15.6254 9.5C15.6254 10.2167 15.5087 10.9 15.2754 11.55C15.0421 12.2 14.7254 12.7667 14.3254 13.25L20.6004 19.525L19.5504 20.575ZM9.52539 14.125C10.8087 14.125 11.8964 13.675 12.7884 12.775C13.6797 11.875 14.1254 10.7833 14.1254 9.5C14.1254 8.21667 13.6797 7.125 12.7884 6.225C11.8964 5.325 10.8087 4.875 9.52539 4.875C8.22539 4.875 7.12972 5.325 6.23839 6.225C5.34639 7.125 4.90039 8.21667 4.90039 9.5C4.90039 10.7833 5.34639 11.875 6.23839 12.775C7.12972 13.675 8.22539 14.125 9.52539 14.125Z" fill="#515973"/>
+</g>
+</svg>

public/img/ico--select.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_68820" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+<rect width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_68820)">
+<path d="M11.9996 15.5248L6.34961 9.8498L7.39961 8.7998L11.9996 13.3998L16.5996 8.7998L17.6496 9.8498L11.9996 15.5248Z" fill="#515973"/>
+</g>
+</svg>