🧩 Vue 2로 배우는 프론트엔드 기초

🎯 학습 목표

• 메가공무원 메인처럼 탭 클릭 시 콘텐츠가 변경되는 슬라이드를 구현합니다.
• MainTabs.vue 컴포넌트 내부에 Swiper를 연동하고, 선택된 탭에 따라 슬라이드 콘텐츠가 동적으로 바뀌게 만듭니다.

📁 파일 구조

src/
├── components/
│   └── MainTabs.vue
│   └── TabSlide.vue ← 새로 생성

🧩 1. MainTabs.vue 구현

<template>
  <div class="main-tabs">
    <h3 class="title">넥스트공무원 1위 강사진</h3>
    <div class="tab-slide">
      <div class="tabs">
        <button
          v-for="(tab, idx) in tabs"
          :key="idx"
          :class="{ active: currentTab === idx }"
          @click="changeTab(idx)"
        >
          {{ tab.label }}
        </button>
      </div>

      <TabSlide v-if="mounted" :key="renderKey" :slides="tabs[currentTab].slides" />
    </div>
  </div>
</template>

<script>
import TabSlide from "./TabSlide.vue";

export default {
  components: { TabSlide },
  data() {
    return {
      currentTab: 0,
      renderKey: 0,
      mounted: true,
      tabs: [
        {
          label: "국어",
          slides: [
            {
              img: "https://img.megagong.net/profphoto/gong/gilltoraebi/main_intro.png",
              alt: "이윤주",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/jhssam1003/main_intro.png",
              alt: "임지혜",
            },
          ],
        },
        {
          label: "영어",
          slides: [
            {
              img: "https://img.megagong.net/profphoto/gong/tjenglish08/main_intro.png",
              alt: "조태정",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/megamega2/main_intro.png",
              alt: "성정혜",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/incredvoc/main_intro.png",
              alt: "경선식",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/nojoony1/main_intro.png",
              alt: "박노준",
            },
          ],
        },
        {
          label: "한국사",
          slides: [
            {
              img: "https://img.megagong.net/profphoto/gong/gosabu88/main_intro.png",
              alt: "고종훈",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/vision0911/main_intro.png",
              alt: "라영환",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/duwo20405/main_intro.png",
              alt: "최영재",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/jeonhangil/main_intro.png",
              alt: "전한길",
            },
          ],
        },
        {
          label: "행정학",
          slides: [
            {
              img: "https://img.megagong.net/profphoto/gong/plower3362/main_intro.png",
              alt: "황철곤",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/happy0308/main_intro.png",
              alt: "이상헌",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/shin242/main_intro.png",
              alt: "신용한",
            },
          ],
        },
        {
          label: "행정법",
          slides: [
            {
              img: "https://img.megagong.net/profphoto/gong/allawyer/main_intro.png",
              alt: "유휘운",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/wjsgywls1/main_intro.png",
              alt: "전효진",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/geek2991/main_intro.png",
              alt: "정인국",
            },
            {
              img: "https://img.megagong.net/profphoto/gong/ysw7/main_intro.png",
              alt: "양승우",
            },
          ],
        },
      ],
    };
  },
  methods: {
    changeTab(index) {
      this.currentTab = index;
      this.mounted = false;
      this.$nextTick(() => {
        this.renderKey++;
        this.mounted = true;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.main-tabs {
  width: 790px;
  .title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 16px;
  }

  .tab-slide {
    .tabs {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;

      button {
        background: #f2f2f2;
        border: none;
        padding: 8px 16px;
        border-radius: 6px;
        cursor: pointer;
        font-weight: 500;
        color: #333;

        &.active {
          background: #0055ff;
          color: #fff;
        }
      }
    }
  }
}
</style>

🧩 2. TabSlide.vue 구현

Swiper를 사용하여 슬라이드 구성합니다.

<template>
  <swiper ref="mySwiper" :options="swiperOption" class="swiper-container">
    <swiper-slide v-for="(item, i) in slides" :key="i" class="teacher-slide">
      <div class="teacher-box">
        <img :src="item.img" :alt="item.alt" />
        <p class="teacher-name">{{ item.alt }}</p>
      </div>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
  </swiper>
</template>

<script>
export default {
  props: {
    slides: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      swiperOption: {
        slidesPerView: 4,
        spaceBetween: 10,
        pagination: {
          el: ".swiper-pagination",
        },
        loop: false,
      },
    };
  },
  watch: {
    slides() {
      this.$nextTick(() => {
        const swiper = this.$refs.mySwiper?.swiper;
        if (swiper) {
          swiper.update();
          swiper.slideTo(0);
        }
      });
    },
  },
};
</script>

<style scoped>
.swiper-container {
  width: 100%;
  overflow: hidden;
}

.swiper-slide {
  /* width: auto !important; */
  flex-shrink: 0;
  display: flex;
  justify-content: center;
}

.teacher-box {
  width: 100%;
  max-width: 200px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}

.teacher-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.teacher-box img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  margin-bottom: 8px;
}

.teacher-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}
</style>

✅ 실행 결과

• 상단 탭을 클릭하면 해당하는 슬라이드 콘텐츠가 자동으로 바뀝니다.
• 각각의 슬라이드는 Swiper로 슬라이드 이동이 가능합니다.

🎯 다음 과제

아래 기능을 추가해보세요!

1. 각 슬라이드 아이템에 과목 텍스트도 함께 출력

   예시:

   { img: "...", alt: "라영환", subject: "한국사" }
   

2. 반응형 처리 (768px 이하에서 슬라이드 수 줄이기)

   Swiper 옵션에서 breakpoints 설정 추가.