[Vue3] 글 발행기능 만들기(커스텀 이벤트)

1️⃣ Next 버튼 기능 개발

• 목적:
  • 상단에 Next 버튼을 두고, 버튼 클릭 시 다음 step으로 넘어가도록 함.
  • 메인페이지에서는 step이 0일 때 Next 버튼이 보이지 않아야 함.
• App.vue

  <template>
    <!-- Next 버튼: step이 1일 때만 보임 -->
    <li v-if="step === 1" @click="step++">Next</li>
    <!-- 발행 버튼: step이 2일 때만 보임 -->
    <li v-if="step === 2" @click="publish()">발행</li>
  
    <!-- Container 컴포넌트에서 사용자가 글을 입력 -->
    <Container @write="작성한글 = $event" />
  
    <div v-for="(post, index) in 게시물" :key="index">
      <Post :data="post" />
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import Container from './Container.vue'
  import Post from './Post.vue'
  
  // 반응형 상태 변수들
  const step = ref(0)
  const 작성한글 = ref('')
  // 실제 이미지 입력은 추후 구현; 기본 이미지 사용
  const 이미지 = ref('https://picsum.photos/600?random=1')
  // 게시물 데이터 배열 (게시물 개수에 따라 <Post/>가 렌더링됨)
  const 게시물 = ref([])
  
  // 게시물 발행 기능
  const publish = () => {
    const myPost = {
      name: "Kim Hyun",
      userImage: "https://picsum.photos/100?random=1",
      postImage: 이미지.value,
      likes: 36,
      date: "May 15",
      liked: false,
      content: 작성한글.value,
      filter: "perpetua"
    }
    게시물.value.unshift(myPost)
    step.value = 0
  }
  </script>
  

---

2️⃣ 발행 버튼 및 게시물 추가 기능

• 발행 버튼 조건:
  • Next 버튼 옆에 위치하며, step이 2일 때만 보입니다.
  • 버튼 클릭 시 publish() 함수가 실행되어 게시물 데이터를 추가합니다.
• 게시물 추가 로직:
  • 게시물이라는 데이터에 새로운 게시물 객체를 unshift()하여 추가합니다.
  • 발행 후 step을 0으로 리셋.

---

3️⃣ 사용자 입력 글을 App.vue로 전달하기

• 목적:
  • 사용자가 입력한 글은 Container.vue의 <textarea>에 입력되며, 이를 커스텀 이벤트로 App.vue에 전달.
  • App.vue는 전달받은 데이터를 작성한글 변수에 저장.
• Container.vue (Vue3 <script setup>):

  <template>
    <textarea
      class="write-box"
      @input="$emit('write', $event.target.value)"
      placeholder="글을 입력하세요..."
    ></textarea>
  </template>
  
  <script setup>
  // 커스텀 이벤트 'write'를 정의
  const emit = defineEmits(['write'])
  </script>
  

• App.vue에서 커스텀 이벤트 수신:

  <!-- App.vue 템플릿 일부 -->
  <Container @write="작성한글 = $event" />
  

• 데이터 저장 (Vue3 <script setup>):

  const 작성한글 = ref('')