메인 스와이퍼

app/assets/scss/style.scss

@@ -1,17 +1,189 @@
 @import "pretendard/dist/web/static/pretendard.css";
 
 * {
-  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+    &::after, &::before{
+        display: inline-block;
+    }
+}
+
+.ico{
+    display: inline-block;
+    background-repeat: no-repeat;
+    background-position: center;
 }
 
 .header--wrap{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 1000;
     .header--container{
         width: 100%;
+        max-width: 1280px;
         margin: 0 auto;
         background-color: transparent;
-        
+        justify-content: space-between;
+        display: flex;
+        align-items: center;
+        height: 80px;
         .logo--wrap{
             max-width: 138px;
+            img{
+                width: 100%;
+
+            }
+        }
+        .menu--wrap{
+            display: flex;
+            li{
+                a{
+                    color: #fff;
+                    font-weight: normal;
+                    padding: 0 30px;
+                    display: inline-block;
+                    height: 80px;
+                    font-weight: 700;
+                    font-size: 16px;
+                    line-height: 80px;
+                    position: relative;
+                    &::before{
+                        position: absolute;
+                        content: '';
+                        bottom: 20px;
+                        left: 50%;
+                        transition: width 0.3s;
+                        transform: translateX(-50%);
+                        height: 2px;
+                        width: 0;
+                        background-color: #fff;
+                    }
+                    &:hover{
+                        &::before{
+                            width: calc(100% - 50px);
+                        }
+                    }
+                }
+            }
+        }
+        .lang--wrap{
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            cursor: pointer;
+            .ico{
+                width: 24px;
+                height: 24px;
+                background-image: url(/img/ico--lang.svg);
+            }
+            >p{
+                color: #fff;
+                line-height: 1;
+                font-size: 16px;
+                font-weight: 700;
+            }
+        }
+    }
+}
+
+.main--visual--wrap{
+    .main--swiper--wrap{
+        width: 100%;
+        position: relative;
+        .main--swiper{
+            .visual--img{
+                position: relative;
+                .txt--wrap{
+                    width: 100%;
+                    text-align: center;
+                    height: 100%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    position: absolute;
+                    h2{
+                        color: #fff;
+                        font-size: 48px;
+                        font-weight: 800;
+                        line-height: 1.4;
+                    }
+                }
+                .img--wrap{
+                    img{
+                        width: 100%;
+                        height: 100vh;
+                        object-fit: cover;
+                    }
+                }
+            }
+        }
+        .swiper--control--wrap{
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            height: 84px;
+            display: flex;
+            justify-content: center;
+            gap: 16px;
+            align-items: center;
+            z-index: 10;
+            width: 100%;
+            .pagination--wrap{
+                display: flex;
+                gap: 12px;
+                align-items: center;
+                .current{
+                    color: #fff;
+                    font-size: 14px;
+                    font-weight: 700;
+                }
+                .bar{
+                    opacity: 0.5;
+                    background-color: #fff;
+                    width: 1px;
+                    height: 12px;
+                }
+                .total{
+                    font-size: 14px;
+                    font-weight: 700;
+                    color: #fff;
+                    opacity: 0.5;
+                }
+            }
+            .swiper--pagination{
+                width: 150px;
+                position: relative;
+                height: 2px;
+                background-color: rgba(255,255,255,0.5);
+                .swiper-pagination-progressbar-fill{
+                    background-color: #fff;
+                }
+            }
+            .swiper--btn--wrap{
+                display: flex;
+                gap:4px;
+                align-items: center;
+                justify-content: center;
+                .swiper--btn--prev{
+                    width: 20px;
+                    height: 20px;
+                    background-image: url(/img/ico--swiper--prev.svg);
+                }
+                .swiper--btn--next{
+                    width: 20px;
+                    height: 20px;
+                    background-image: url(/img/ico--swiper--next.svg);
+                }
+                .play--btn{
+                    width: 20px;
+                    height: 20px;
+                    background-image: url(/img/ico--pause.svg);
+                    &.pause{
+                        background-image: url(/img/ico--play.svg);
+                    }
+                }
+            }
         }
     }
 }

app/components/header.vue

@@ -3,14 +3,16 @@
         <div class="header--wrap">
             <div class="header--container">
                 <div class="logo--wrap">
-                    <img src="/img/header--logo.svg" alt="">
+                    <NuxtLink to="/">
+                        <img src="/img/header--logo.svg" alt="">
+                    </NuxtLink>
                 </div>
                 <ul class="menu--wrap">
-                    <li><a href="#">Company</a></li>
-                    <li><a href="#">Products</a></li>
-                    <li><a href="#">Technology</a></li>
-                    <li><a href="#">Media</a></li>
-                    <li><a href="#">Contact</a></li>
+                    <li><NuxtLink to="/">Company</NuxtLink></li>
+                    <li><NuxtLink to="/">Products</NuxtLink></li>
+                    <li><NuxtLink to="/">Technology</NuxtLink></li>
+                    <li><NuxtLink to="/">Media</NuxtLink></li>
+                    <li><NuxtLink to="/">Contact</NuxtLink></li>
                 </ul>
                 <div class="lang--wrap">
                     <i class="ico"></i>

app/pages/index.vue

@@ -6,36 +6,47 @@
           ref="mainSwiperRef"
           :pagination="{
             type: 'progressbar',
+            el: '.swiper--pagination'
           }"
-          :navigation="true"
-          :autoplay="{
-            delay: 3000,
-            disableOnInteraction: false,
+          :navigation="{
+            nextEl: '.swiper--btn--next',
+            prevEl: '.swiper--btn--prev'
           }"
           :modules="modules"
           class="main--swiper"
+          loop="true"
           @swiper="onSwiper"
         >
+          <!-- :autoplay="{
+            delay: 3000,
+            disableOnInteraction: false,
+          }" -->
           <swiper-slide class="visual--img">
+            <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
             <div class="img--wrap"><img src="/img/main1.png" /></div>
           </swiper-slide>
           <swiper-slide class="visual--img">
+            <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
             <div class="img--wrap"><img src="/img/main2.png" /></div>
           </swiper-slide>
           <swiper-slide class="visual--img">
+            <div class="txt--wrap"><h2>친환경산업의 미래를 선도하는 <br>그린웨일글로벌</h2></div>
             <div class="img--wrap"><img src="/img/main3.png" /></div>
           </swiper-slide>
         </swiper>
 
-        <!-- 커스텀 컨트롤 -->
-        <div class="swiper-controls">
-          <div class="pagination-info">
-            <span class="current-slide">{{ currentSlide }}</span> / {{ totalSlides }}
+        <div class="swiper--control--wrap">
+          <div class="pagination--wrap">
+            <span class="current">{{ currentSlide }}</span>
+            <span class="bar"></span>
+            <span class="total">{{ totalSlides }}</span>
           </div>
-          <div class="control-buttons">
-            <button @click="toggleAutoplay" class="play-pause-btn">
-              {{ isPlaying ? '⏸️' : '▶️' }} ?
+          <div class="swiper--pagination"></div>
+          <div class="swiper--btn--wrap">
+            <div class="swiper--btn--prev"></div>
+            <button @click="toggleAutoplay" :class="['play--btn', { 'pause': !isPlaying }]">
             </button>
+            <div class="swiper--btn--next"></div>
           </div>
         </div>
       </div>
@@ -60,9 +71,9 @@
 
   const onSwiper = (swiper) => {
     swiperInstance.value = swiper
-    totalSlides.value = swiper.slides.length
+    totalSlides.value = 3 // 실제 슬라이드 개수
     swiper.on('slideChange', () => {
-      currentSlide.value = swiper.activeIndex + 1
+      currentSlide.value = swiper.realIndex + 1
     })
   }
 

public/img/ico--pause.svg

@@ -0,0 +1,8 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_2388" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="20">
+<rect x="0.875" width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_2388)">
+<path d="M12.5413 15.4163V4.58301H15.6663V15.4163H12.5413ZM6.08301 15.4163V4.58301H9.20799V15.4163H6.08301Z" fill="white"/>
+</g>
+</svg>

public/img/ico--swiper--next.svg

@@ -0,0 +1,8 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_2389" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="20">
+<rect x="0.875" width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_2389)">
+<path d="M8.61005 17.2639L7.54199 16.1959L13.7392 9.99867L7.54199 3.80146L8.61005 2.7334L15.8753 9.99867L8.61005 17.2639Z" fill="white"/>
+</g>
+</svg>

public/img/ico--swiper--prev.svg

@@ -0,0 +1,8 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_127_2387" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="21" height="20">
+<rect x="0.875" width="20" height="20" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_127_2387)">
+<path d="M13.1403 17.2639L5.875 9.99867L13.1403 2.7334L14.2083 3.80146L8.01114 9.99867L14.2083 16.1959L13.1403 17.2639Z" fill="white"/>
+</g>
+</svg>