<script setup>
// 작성해둔 Store를 불러옵니다.
import { useCounterStore } from '@/stores/counter';

// Store 객체를 가져옵니다.
const store = useCounterStore();
</script>

<template>
  <div class="p-6 bg-slate-800 rounded-lg border-2 border-slate-700 text-center">
    <h2 class="text-xl font-bold text-purple-400">컴포넌트 A</h2>
    
    <!-- store 객체 안의 상태(count)를 바로 갖다 씁니다. -->
    <p class="text-3xl my-4">현재 카운트: {{ store.count }}</p>
    
    <!-- store 객체 안의 함수(increment)를 이벤트에 연결합니다. -->
    <button @click="store.increment" class="bg-purple-600 text-white px-6 py-2 rounded-full font-bold shadow hover:bg-purple-700">
      +1 증가시키기
    </button>
  </div>
</template>