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

🎯 학습 목표

• 메인 슬라이드 오른쪽 영역에 있는 콘텐츠 리스트 구현
• 각 콘텐츠는:
  • 아이콘 or 썸네일 이미지
  • 제목 + 짧은 설명
• 1열 세로 배치 카드 + 반응형 대응 포함

✅ 구성 예시

📁 폴더 구성

components/
├── MainRightContent.vue   ← 전체 리스트
├── RightCard.vue          ← 콘텐츠 카드 1개
└── StickyPanel.vue        ← 기존 파일, 내부에 MainRightContent 추가
└── TeacherPromoSection.vue ← 기존 파일, scss 수정

views
├── HomePage.vue           ← 메인 페이지 scss 수정

✅ 1. RightCard.vue

<template>
  <div class="right-card">
    <img class="icon" :src="img" :alt="title" />
    <div class="text">
      <p class="title">{{ title }}</p>
      <p class="desc">{{ description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "RightCard",
  props: {
    img: String,
    title: String,
    description: String,
  },
};
</script>

<style lang="scss" scoped>
.right-card {
  display: flex;
  align-items: center;
  margin-bottom: 22px;
  transition: 0.2s ease;
  &:last-of-type {
    margin-bottom: 0;
  }
}

.icon {
  width: 140px;
  height: 90px;
  object-fit: cover;
  margin-right: 12px;
  border-radius: 8px;
}

.text .title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
}

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

✅ 2. MainRightContent.vue

<template>
  <div class="right-section">
    <RightCard
      v-for="(item, i) in items"
      :key="i"
      :img="item.img"
      :title="item.title"
      :description="item.description"
    />
  </div>
</template>

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

export default {
  components: { RightCard },
  data() {
    return {
      items: [
        {
          img: "https://files.megagong.net/board_data/banner/main/97372942848_20250718175514.png",
          title: "2026 커리큘럼 안내",
          description: "전범위 탄탄한 개념이해와 \n추론훈련으로 고득점 완성",
        },
        {
          img: "https://files.megagong.net/board_data/banner/main/111851706690_20250711084722.png",
          title: "2026 행정학 커리큘럼",
          description: "전범위 탄탄한 개념이해와 \n추론훈련으로 고득점 완성",
        },
        {
          img: "https://files.megagong.net/board_data/banner/main/60393398016_20250623113547.png",
          title: "7-8월 업데이트 강좌",
          description: "최신 커리큘럼 반영!",
        },
      ],
    };
  },
};
</script>

<style scoped>
.right-section {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid #ddd;
  border-radius: 20px;
}
</style>

✅ 3. StickyPanel.vue에 삽입 및 sticky 기능 추가

<template>
  <div class="sticky-panel">
    <MainRightContent />
  </div>
</template>

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

export default {
  components: { MainRightContent },
};
</script>

<style scoped>
.sticky-panel {
  position: sticky;
  top: 30px;
}
</style>

✅ 4. views/Homepage.vue에 scss 전체 수정

<style lang="scss" scoped>
.layout-container {
  display: flex;
  position: relative;
}

.main-content {
  display: flex;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 0;
  gap: 30px;
}

.main-left {
  display: flex;
  flex-direction: column;
  width: 790px;
  gap: 30px;
}

.main-right {
  width: 380px;
  position: relative;
  top: 0;
  gap: 30px;
}
</style>

✅ 5. components/TeacherPromoSection.vue에 css 부분 수정

<style scoped>
.teacher-promo-section {
  /* margin-top: 60px; */
  padding: 0 20px;
  width: 790px;
}

.section-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 24px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
</style>

✅ 결과

• MainSlide 오른쪽에 정적인 세로 카드들이 나타남
• 향후 “기획전”, “무료 콘텐츠”, “홍보배너” 등의 내용으로 확장 가능
• PC 화면 기준 너비 약 300px 이상으로 고정, position: sticky 가능

GitHub - heroyooi/vue2-megagong at ch5

🎯 다음 과제

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

1. MainRightSlide.vue 새로운 컴포넌트를 생성해서 전체 슬라이드로 구현