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

✅ 과제 1 구현 – MainTabs.vue, abSlide.vue 코드 수정

🔁 MainTabs.vue 내부 변경:

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

🔁 TabSlide.vue <swiper-slide> 내부 변경:

<swiper-slide v-for="(item, i) in slides" :key="i" class="teacher-slide">
  <div class="teacher-box">
    <img :src="item.img" :alt="item.name" />
    <p class="teacher-name">{{ item.name }}</p>
    <p class="teacher-subject">{{ item.subject }}</p>
  </div>
</swiper-slide>

✅ 스타일 추가

.teacher-subject {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

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

이미 swiperOption에 반응형을 넣으면 됩니다:

swiperOption: {
  slidesPerView: 4,
  spaceBetween: 10,
  pagination: {
    el: ".swiper-pagination",
  },
  loop: false,
  breakpoints: {
    1200: { slidesPerView: 4 },
    1024: { slidesPerView: 3 },
    768: { slidesPerView: 2 },
    480: { slidesPerView: 1 },
  },
},

✅ 최종 적용 정리

🔁 TabSlide.vue 완성 예시

<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>
        <p class="teacher-subject">{{ item.subject }}</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,
        breakpoints: {
          1200: { slidesPerView: 4 },
          1024: { slidesPerView: 3 },
          768: { slidesPerView: 2 },
          480: { slidesPerView: 1 },
        },
      },
    };
  },
  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;
}

.teacher-subject {
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}
</style>

✅ 이제 이름과 과목이 슬라이드에 잘 표시되고,

✅ 768px 이하에서 슬라이드 수가 자동으로 줄어들며 반응형으로 자연스럽게 작동합니다.

GitHub - heroyooi/vue2-megagong at ch3_resolve