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

✅ 과제 1 줄내림 처리 구현 - computed로 <br> 처리 후 v-html 사용

🔁 수정된 TeacherPromoCard.vue

<template>
  <div class="promo-card">
    <div class="text-area">
      <h4 class="title" v-html="formattedTitle"></h4>
      <p class="desc">{{ description }}</p>
      <p class="subject">{{ subject }} {{ name }}</p>
    </div>
    <img class="profile-img" :src="img" :alt="name" />
  </div>
</template>

<script>
export default {
  name: "TeacherPromoCard",
  props: {
    title: String,
    description: String,
    name: String,
    subject: String,
    img: String,
  },
  computed: {
    formattedTitle() {
      return this.title.replace(/\n/g, "<br />");
    },
  },
};
</script>

🔒 보안 주의사항

• v-html을 사용할 때는 외부 입력값을 그대로 넣지 않도록 주의하세요.
• 이 경우엔 내부 하드코딩된 데이터이므로 괜찮습니다.

✅ 결과

• title: "흐름은 새롭게,\n본질은 그대로" 형태일 때

  → 흐름은 새롭게,<br>본질은 그대로 로 렌더되어 줄바꿈 처리가 됩니다.

✅ 과제 2 전역 폰트 수정

🔁 수정된 .base.scss

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");

:root {
  --font-noto: "Noto Sans KR";
  --font-gothic: "맑은 고딕", "Malgun Gothic", "돋움", "Dotum", sans-serif;
  // 생략
}

/* reset */
html,
body {
  **font-family: var(--font-noto);**
  font-size: 13px;
  color: #000;
  letter-spacing: -0.05em;
  line-height: 1.3;
  margin: 0;
  padding: 0;
  border: 0;
}