<!-- ========================================== -->
<!-- 📂 App.vue (Vue 3 Composition API SFC) -->
<!-- ========================================== -->
<script setup>
// 이 안에 선언된 모든 변수와 함수는 템플릿(<template>)에서 즉시 사용 가능합니다!
// 귀찮게 return {} 을 적어줄 필요가 1도 없습니다.
import { ref } from 'vue';

// [1. 상태(State) 선언]
// ref()를 사용하여 변수를 반응형으로 만듭니다. (값이 바뀌면 화면도 자동으로 렌더링 됨)
const count = ref(0);

// [2. 함수(Method) 선언]
// 그냥 평범한 화살표 함수나 일반 함수를 만들면 됩니다.
const increment = () => {
  // ✨ script 안에서 ref 변수의 값을 변경할 때는 반드시 '.value'를 붙여야 합니다!
  count.value += 1;
};
</script>

<template>
  <div class="container">
    <h1>Vue 3 시작하기 🚀</h1>
    
    <!-- ✨ 템플릿(HTML) 영역에서는 .value 없이 변수 이름만 쓰면 됩니다! (Vue가 알아서 값을 까줍니다) -->
    <p class="counter">{{ count }}</p>
    
    <!-- 버튼 클릭 이벤트는 @click (또는 v-on:click) 으로 연결합니다. -->
    <button @click="increment" class="btn">
      +1 증가시키기
    </button>
  </div>
</template>

<style scoped>
/* style 영역: scoped를 붙이면 이 컴포넌트에만 스타일이 적용됩니다. */
.container {
  padding: 2rem;
  max-width: 400px;
  margin: 2rem auto;
  text-align: center;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.counter {
  font-size: 4rem;
  font-weight: 900;
  color: #10b981;
}
.btn {
  padding: 0.75rem 2rem;
  background: #10b981;
  color: white;
  border: none;
  border-radius: 9999px;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}
.btn:hover {
  background: #059669;
}
</style>