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

✅ LeftQuickMenu.vue

<template>
  <div class="left-quickmenu">
    <!-- ✅ 상단 1타 배너 슬라이드 -->
    <swiper :options="topSwiperOption" class="tea-swiper">
      <swiper-slide v-for="(banner, index) in teaItems" :key="index">
        <div class="quick-banner teacher-banner">
          <img :src="banner.img" alt="상단 배너" />
        </div>
      </swiper-slide>
      <div class="swiper-pagination top-pagination" slot="pagination"></div>
    </swiper>

    <!-- ✅ 가운데 메가폰 -->
    <div class="quick-banner megaphone-banner">
      <img src="https://img.megagong.net/m/2025/0703_notice/bn_left_sky.png" alt="megaphone" />
    </div>

    <!-- ✅ 하단 OX 퀴즈 - Swiper -->
    <swiper :options="quizSwiperOption" class="ox-swiper">
      <swiper-slide v-for="(quiz, index) in quizItems" :key="index">
        <div class="quick-banner quiz-banner">
          <img :src="quiz.img" alt="퀴즈 배너" />
        </div>
      </swiper-slide>
      <div class="swiper-pagination ox-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import "swiper/css/swiper.css";

export default {
  name: "LeftQuickMenu",
  data() {
    return {
      teaItems: [
        {
          img: "https://img.megagong.net/m/2025/0710_allawyer/left_sky_bn_gong.png",
        },
        {
          img: "https://img.megagong.net/m/2025/0714_tjenglish08/con_img31.png",
        },
      ],
      quizItems: [
        {
          img: "https://img.megagong.net/m/2025/0625_next/side_left_1_4.png",
        },
        {
          img: "https://img.megagong.net/m/2025/0512_main/side_left_1_2.png",
        },
      ],
      topSwiperOption: {
        slidesPerView: 1,
        loop: true,
        autoplay: {
          delay: 3500,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".top-pagination",
          clickable: true,
        },
      },
      quizSwiperOption: {
        slidesPerView: 1,
        loop: true,
        autoplay: {
          delay: 3000,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".ox-pagination",
          clickable: true,
        },
      },
    };
  },
};
</script>

<style scoped lang="scss">
.left-quickmenu {
  position: absolute;
  top: 40px;
  right: 50%;
  margin-right: 630px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 106px;
  z-index: 99;
}

.quick-banner {
  width: 100%;

  img {
    width: 100%;
    border-radius: 12px;
  }

  .text {
    font-size: 12px;
    color: #222;
    line-height: 1.4;

    strong {
      font-weight: bold;
      color: #0070f3;
    }
  }
}

.tea-swiper,
.ox-swiper {
  width: 106px;
}
</style>

✅ src/components/RightQuickMenu.vue

좌측 퀵메뉴 너비에 맞춰서 우측 퀵메뉴 너비도 조정해줍니다.

<style lang="scss" scoped>
.right-quick-menu {
  position: absolute;
  top: 40px;
  left: 50%;
  margin-left: 630px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 99;
  width: 106px;
}

.quick-card {
  width: 100%;
  padding: 10px 5px;
  border-radius: 12px;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  border: 1px solid #ddd;
  background: #fff;
}

/* 생략 */
</style>

GitHub - heroyooi/vue2-megagong at ch7

이제 전반적인 넥스트공무원 클론 작업이 끝났습니다.

1단계에서는 Express서버(BE)에 있는 데이터들을 Axios로 요청하여서 **Vuex**로 중앙데이터 관리하는 실습을 해보았습니다. 2단계 8강부터는 Express 서버(BE)에 메인에서 생성한 슬라이드 데이터들을 DB에 저장하고 Axios로 요청하여서 Vuex보다 사용법이 심플한 **Pinia**로 중앙데이터 관리하는 실습을 해보겠습니다.