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

이제 6강, 7강은 좀 더 속도감있게 좌우측 퀵메뉴를 구성하도록 하겠습니다.

✅ src/components/RightQuickMenu.vue

<template>
  <div class="right-quick-menu">
    <div class="quick-card play-card">
      <img
        src="https://img.megagong.net/m/2025/0715_playground/bnr_right_gong1.png"
        alt="이벤트 이미지"
      />
    </div>

    <div class="quick-card coupon-card">
      <p class="badge">30% 할인<br />쿠폰 증정</p>
      <p class="main-text">e-교재<br /><span class="blue">첫 구매 이벤트</span></p>
      <button class="detail-btn">자세히 보기</button>
    </div>

    <div class="quick-card nextpass-card">
      <p class="small">모든 수험생을 위한</p>
      <p class="blue-bold">공무원 넥스트패스<br />맞춤 할인 혜택</p>
      <button class="tag-btn on">전·현직 공무원</button>
      <button class="tag-btn">희망 인기가<br />(저소득/차상위)</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "RightQuickMenu",
};
</script>

<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;
}

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

.play-card {
  padding: 0;
  border: 0;
}

.badge {
  font-weight: bold;
  color: #222;
}

.main-text {
  margin: 4px 0;
}

.main-text .blue {
  color: #0070f3;
  font-weight: 700;
}

.detail-btn {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 2px 8px;
  font-size: 11px;
  margin-top: 4px;
}

.nextpass-card .blue-bold {
  color: #0070f3;
  font-weight: 700;
  margin: 4px 0;
}

.nextpass-card .tag-btn {
  background-color: #eee;
  border: none;
  font-size: 11px;
  border-radius: 3ch;
  padding: 2px 6px;
  margin-bottom: 4px;
  &.on {
    background: #0070f3;
    color: #fff;
  }
  &:last-child {
    margin-bottom: 0;
  }
}

.sub-text {
  font-size: 11px;
  color: #666;
}
</style>

✅ src/components/LeftQuickMenu.vue

<template>
  <div class="left-quickmenu">
    <div>[ 좌측 사이드 고정 메뉴 ]</div>
  </div>
</template>

<style scoped>
.left-quickmenu {
  position: absolute;
}
</style>

컨텐츠 영역 좌우 균형을 위해서 좌측 사이드메뉴를 먼저 position: absolute 로 띄어줍니다.

✅ src/assets/base.scss

*,
*::before,
*::after {
  box-sizing: border-box;
}

🎯 다음 과제

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

1. RigthQuickMenu.vue 내부 .tab-btn에 클래스 on이 3초에 한번씩 자동전환되게 해보세요.

GitHub - heroyooi/vue2-megagong at ch6