+ 팝업 기능 수동 추가

app/assets/scss/sub.scss

@@ -451,4 +451,24 @@
 
 body{
   top:0px!important;
+}
+
+
+.pop_wrap {position:absolute; top:148px; left:250px; z-index:10;}
+.pop_wrap .pop {padding:0 5px;}
+.pop_wrap img {display:block; max-width:100%;}
+.pop_footer {overflow:hidden; font-size:14px; padding:5px 10px; background:#000;}
+.pop_footer p {float:left;}
+.pop_footer a {float:right; color:#fff;}
+.pop_footer label {color:#fff;}
+
+@media (max-width: 1600px) {
+  .pop_wrap {}
+
+}
+
+@media (max-width: 1023px) {
+	.pop_wrap {left:3%; right:3%; width:auto; margin-left:0;}
+	.pop_wrap .pop {}
+	.pop_wrap > div {position:absolute; top:0; left:0; width:100%; float:none; padding:0;}
 }

app/pages/index.vue

@@ -5,17 +5,32 @@
       <div class="main--container">
         <div class="title--wrap mb-[40px]">
           <h3 class="green--title">Brand Story</h3>
-          <p class="sub--title">연간 4억톤 이상 폐기물이 버려져<br> 우리의 지구 환경에 많은 악영향을 주고 있습니다.</p>
-          <h2>그린웨일글로벌은 자연물질을 <br class="mobile">플라스틱으로 생성하여 <br>환경오염을 방지하는 신개념 <br class="mobile">친환경 미래를 만들어 갈 것입니다.</h2>
+          <p class="sub--title">
+            연간 4억톤 이상 폐기물이 버려져<br />
+            우리의 지구 환경에 많은 악영향을 주고 있습니다.
+          </p>
+          <h2>
+            그린웨일글로벌은 자연물질을 <br class="mobile" />플라스틱으로 생성하여
+            <br />환경오염을 방지하는 신개념 <br class="mobile" />친환경 미래를 만들어 갈
+            것입니다.
+          </h2>
         </div>
         <div class="content--wrap">
           <div class="img--card--wrap">
-            <div class="card"><img src="/img/main--card1.png" alt="그린웨일글로벌"></div>
-            <div class="card"><img src="/img/main--card2.png" alt="그린웨일글로벌"></div>
-            <div class="card"><img src="/img/main--card3.png" alt="그린웨일글로벌"></div>
+            <div class="card">
+              <img src="/img/main--card1.png" alt="그린웨일글로벌" />
+            </div>
+            <div class="card">
+              <img src="/img/main--card2.png" alt="그린웨일글로벌" />
+            </div>
+            <div class="card">
+              <img src="/img/main--card3.png" alt="그린웨일글로벌" />
+            </div>
           </div>
           <div class="black--btn--wrap">
-            <NuxtLink class="black--btn" to="/company/intro">더보기<i class="ico"></i></NuxtLink>
+            <NuxtLink class="black--btn" to="/company/intro"
+              >더보기<i class="ico"></i
+            ></NuxtLink>
           </div>
         </div>
       </div>
@@ -24,7 +39,11 @@
       <div class="main--container">
         <div class="title--wrap mb-[40px]">
           <h3 class="green--title">Technology</h3>
-          <h2>그린웨일글로벌은 <br />자연에서 얻은 바이오매스를 <br class="mobile" />독자적 기술로 친환경 소재로 바꾸어, <br />생분해성·재활용·바이오 플라스틱을 통해 <br />지구를 지키는 미래를 만들어갑니다.</h2>
+          <h2>
+            그린웨일글로벌은 <br />자연에서 얻은 바이오매스를 <br class="mobile" />독자적
+            기술로 친환경 소재로 바꾸어, <br />생분해성·재활용·바이오 플라스틱을 통해
+            <br />지구를 지키는 미래를 만들어갑니다.
+          </h2>
         </div>
         <div class="content--wrap">
           <div class="square--card--wrap">
@@ -50,7 +69,9 @@
             </dl>
           </div>
           <div class="black--btn--wrap">
-            <NuxtLink class="black--btn blur--type" to="/technology/facilities">더보기<i class="ico"></i></NuxtLink>
+            <NuxtLink class="black--btn blur--type" to="/technology/facilities"
+              >더보기<i class="ico"></i
+            ></NuxtLink>
           </div>
         </div>
       </div>
@@ -71,7 +92,9 @@
                   <span class="number">-80</span>
                   <span class="percent">%</span>
                 </div>
-                <p class="sub--txt">Plastic pollution reduced <br />by 2040 <br />(UNEP)</p>
+                <p class="sub--txt">
+                  Plastic pollution reduced <br />by 2040 <br />(UNEP)
+                </p>
               </div>
               <ul class="card--desc">
                 <li>
@@ -83,14 +106,16 @@
                 <li>
                   <span class="nation">EU</span>
                   <p class="txt">
-                    <strong>100%</strong> <span>recycled plastic packaging by 2030</span><br />
+                    <strong>100%</strong> <span>recycled plastic packaging by 2030</span
+                    ><br />
                     <strong>100%</strong> <span>recycled plastic packaging by 2030</span>
                   </p>
                 </li>
                 <li>
                   <span class="nation">US</span>
                   <p class="txt">
-                    <strong>-25%</strong> <span>Single Use Plastic Packaging by 2032</span>
+                    <strong>-25%</strong>
+                    <span>Single Use Plastic Packaging by 2032</span>
                   </p>
                 </li>
               </ul>
@@ -103,25 +128,31 @@
                   <span class="number">-100</span>
                   <span class="percent">%</span>
                 </div>
-                <p class="sub--txt">GHG emissions by 2050 <br />compared to 2010 levels <br />(UN IPCC report)</p>
+                <p class="sub--txt">
+                  GHG emissions by 2050 <br />compared to 2010 levels <br />(UN IPCC
+                  report)
+                </p>
               </div>
               <ul class="card--desc">
                 <li>
                   <span class="nation">KR</span>
                   <p class="txt">
-                    <strong>-40%</strong> <span>by 2030 (vs. 2018)</span> <strong>-100%</strong> <span>by 2050</span>
+                    <strong>-40%</strong> <span>by 2030 (vs. 2018)</span>
+                    <strong>-100%</strong> <span>by 2050</span>
                   </p>
                 </li>
                 <li>
                   <span class="nation">EU</span>
                   <p class="txt">
-                    <strong>-55%</strong> <span>by 2030 (vs. 1990)</span> <strong>-100%</strong> <span>by 2050</span>
+                    <strong>-55%</strong> <span>by 2030 (vs. 1990)</span>
+                    <strong>-100%</strong> <span>by 2050</span>
                   </p>
                 </li>
                 <li>
                   <span class="nation">US</span>
                   <p class="txt">
-                    <strong>-48%</strong> <span>by 2030 (vs. 1990)</span> <strong>-100%</strong> <span>by 2045</span>
+                    <strong>-48%</strong> <span>by 2030 (vs. 1990)</span>
+                    <strong>-100%</strong> <span>by 2045</span>
                   </p>
                 </li>
               </ul>
@@ -134,26 +165,31 @@
                   <span class="number">42</span>
                   <span class="percent">%</span>
                 </div>
-                <p class="sub--txt">Recycled possibly <br />by 2040 <br />(OECD scenario)</p>
+                <p class="sub--txt">
+                  Recycled possibly <br />by 2040 <br />(OECD scenario)
+                </p>
               </div>
               <ul class="card--desc">
                 <li>
                   <span class="nation">KR</span>
-                  <p class="txt">
-                    <strong>70%</strong> <span>by 2030</span>
-                  </p>
+                  <p class="txt"><strong>70%</strong> <span>by 2030</span></p>
                 </li>
                 <li>
                   <span class="nation">EU</span>
                   <p class="txt">
-                    <strong>77%</strong> <span>bottles collected by 2025,</span> <strong>90%</strong> <span>by 2029 Bottles with</span> <strong>25%</strong> <span>recycled plastic by 2025, </span><strong>30%</strong> <span>by 2030</span>
+                    <strong>77%</strong> <span>bottles collected by 2025,</span>
+                    <strong>90%</strong> <span>by 2029 Bottles with</span>
+                    <strong>25%</strong> <span>recycled plastic by 2025, </span
+                    ><strong>30%</strong> <span>by 2030</span>
                   </p>
                 </li>
                 <li>
                   <span class="nation">US</span>
                   <p class="txt">
-                    <strong>65%</strong> <span>single use plastic recycled by 2032</span><br />
-                    <span>All packaging</span> <strong>100%</strong> <span>recycled or compostable</span>
+                    <strong>65%</strong> <span>single use plastic recycled by 2032</span
+                    ><br />
+                    <span>All packaging</span> <strong>100%</strong>
+                    <span>recycled or compostable</span>
                   </p>
                 </li>
               </ul>
@@ -186,62 +222,149 @@
             </a>
           </div>
           <div class="black--btn--wrap">
-            <NuxtLink class="black--btn" to="/media/news">더보기<i class="ico"></i></NuxtLink>
+            <NuxtLink class="black--btn" to="/media/news"
+              >더보기<i class="ico"></i
+            ></NuxtLink>
           </div>
         </div>
       </div>
     </section>
+
+    <div class="pop_wrap">
+      <div class="pop" id="pop1" v-show="popupStates.pop1">
+        <a href="https://youtu.be/1yR2c0gD-0o" target="_blank"
+          ><img src="/img/pop04.jpg" alt=""
+        /></a>
+        <div class="pop_footer">
+          <p>
+            <input type="checkbox" id="pop1Close" @change="closePopupOneDay('pop1')" />
+            <label for="pop1Close">오늘하루열지않기</label>
+          </p>
+          <a href="#" class="pop_close" @click.prevent="closePopup('pop1')">닫기X</a>
+        </div>
+      </div>
+
+      <div class="pop" id="pop2" v-show="popupStates.pop2">
+        <div class="pop_footer">
+          <p>
+            <input type="checkbox" id="pop2Close" @change="closePopupOneDay('pop2')" />
+            <label for="pop2Close">오늘하루열지않기</label>
+          </p>
+          <a href="#" class="pop_close" @click.prevent="closePopup('pop2')">닫기X</a>
+        </div>
+      </div>
+
+      <div class="pop" id="pop3" v-show="popupStates.pop3">
+        <div class="pop_footer">
+          <p>
+            <input type="checkbox" id="pop3Close" @change="closePopupOneDay('pop3')" />
+            <label for="pop3Close">오늘하루열지않기</label>
+          </p>
+          <a href="#" class="pop_close" @click.prevent="closePopup('pop3')">닫기X</a>
+        </div>
+      </div>
+    </div>
   </main>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from "vue";
-
-const newsData = ref([]);
-
-// API에서 뉴스 데이터 가져오기 (최신 3개만)
-const fetchNewsList = async () => {
-  try {
-    const response = await $postForm(`/board_list/media`, {
-      boardId: 'news',
-      page: 1,
-      searchKind: "",
-      searchKeyword: "",
+  import { ref, computed, onMounted } from "vue";
+
+  const newsData = ref([]);
+
+  // 팝업 상태 관리
+  const popupStates = ref({
+    pop1: true,
+    pop2: false,
+    pop3: false,
+  });
+
+  // 쿠키 관련 함수들
+  const setCookie = (name, value, days) => {
+    const expires = new Date();
+    expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);
+    document.cookie = `${name}=${value};expires=${expires.toUTCString()};path=/`;
+  };
+
+  const getCookie = (name) => {
+    const nameEQ = name + "=";
+    const ca = document.cookie.split(";");
+    for (let i = 0; i < ca.length; i++) {
+      let c = ca[i];
+      while (c.charAt(0) === " ") c = c.substring(1, c.length);
+      if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+    }
+    return null;
+  };
+
+  // 팝업 닫기 함수
+  const closePopup = (popupId) => {
+    popupStates.value[popupId] = false;
+  };
+
+  // 하루 동안 팝업 닫기 함수
+  const closePopupOneDay = (popupId) => {
+    setCookie(popupId, "1", 1);
+    popupStates.value[popupId] = false;
+  };
+
+  // 팝업 초기화 함수
+  const initPopups = () => {
+    // 각 팝업의 쿠키 상태를 확인하여 표시 여부 결정
+    Object.keys(popupStates.value).forEach((popupId) => {
+      if (getCookie(popupId) === "1") {
+        popupStates.value[popupId] = false; // 쿠키가 있으면 숨김
+      }
+      // 쿠키가 없으면 초기값 유지
     });
+  };
 
-    if (response && response.success && response.list) {
-      const newData = response.list.slice(0, 3).map((item, index) => {
-        return {
-          id: index + 1,
-          title: item.title,
-          date: item.regdate,
-          link: item.etc1 || "#", // etc1 필드에 외부 링크 저장
-        };
+  // API에서 뉴스 데이터 가져오기 (최신 3개만)
+  const fetchNewsList = async () => {
+    try {
+      const response = await $postForm(`/board_list/media`, {
+        boardId: "news",
+        page: 1,
+        searchKind: "",
+        searchKeyword: "",
       });
-      
-      newsData.value = newData;
-    } else {
-      console.error("뉴스 데이터 로드 실패");
-    }
-  } catch (error) {
-    console.error("뉴스 데이터 로드 중 오류:", error);
-  }
-};
-
-// 표시할 뉴스 데이터 (최대 3개)
-const displayNews = computed(() => {
-  return newsData.value.length > 0 ? newsData.value : [
-    {
-      id: 1,
-      title: "뉴스 데이터를 불러오는 중입니다...",
-      date: "2025.01.01",
-      link: "#"
+
+      if (response && response.success && response.list) {
+        const newData = response.list.slice(0, 3).map((item, index) => {
+          return {
+            id: index + 1,
+            title: item.title,
+            date: item.regdate,
+            link: item.etc1 || "#", // etc1 필드에 외부 링크 저장
+          };
+        });
+
+        newsData.value = newData;
+      } else {
+        console.error("뉴스 데이터 로드 실패");
+      }
+    } catch (error) {
+      console.error("뉴스 데이터 로드 중 오류:", error);
     }
-  ];
-});
-
-// 컴포넌트 마운트 시 데이터 로드
-onMounted(() => {
-  fetchNewsList();
-});
-</script>
+  };
+
+  // 표시할 뉴스 데이터 (최대 3개)
+  const displayNews = computed(() => {
+    return newsData.value.length > 0
+      ? newsData.value
+      : [
+          {
+            id: 1,
+            title: "뉴스 데이터를 불러오는 중입니다...",
+            date: "2025.01.01",
+            link: "#",
+          },
+        ];
+  });
+
+  // 컴포넌트 마운트 시 데이터 로드 및 팝업 초기화
+  onMounted(() => {
+    fetchNewsList();
+    initPopups();
+  });
+</script>