글 발행기능 만들기

말 그대로 글 발행기능을 만들어보자

그래서 글 발행이 뭔디;

이런식으로 내가 쓴글과 다른 포스트들이 함께 보여야 한다.

  <div v-if="step == 0"> 
    <Post :게시물="게시물[i]" v-for="(a, i) in 게시물" :key="i" />
  </div>

우리는 컨테이너에서 게시물의 개수

즉, post를 관리하고 있다

post를 늘리려면 그냥 데이터인 게시물만 건들면 됨

  data(){
    return{ 
      게시물 : Postdata,
      더보기 : 0,
      step : 0,
      이미지 : '',
    }

app.vue에 있는 게시물 데이터를 하나 추가해주면 그게 글 발행의 끝임

그냥 기존에 만든 JS파일임

내가 올린 게시물도 다른 데이터와 똑같은 형식으로 작동해야할듯

---

일단 글 발행 버튼 부터

이미지 업로드를 하면 업로드 되고 next 버튼 이후 발행이라는 버튼이 있어야함ㅋ

그러니깐 여기서 발행을 해야함

근데 버튼이 없음

당장 만드러

    <ul class="header-button-right">
      <li v-if="step == 1" @click="step++;">Next</li>
      <li v-if="step == 2" @click="publish">발행</li>
    </ul>

기존 코드도 if문 사용해서 step의 조건을 달아주며 동적이게 수정하였다

그래서 발행 버튼 만듬

근데 버튼만 있고 넘어가는 페이지가 없넹;ㅋ

그래서 publish 라고 함수 따로 빼서 만듬 ㅎ

publish

publish에는 어떤 기능이 들어가야 할까?

발행 버튼은 누르면 기존의 데이터JS파일에 내가 쓴 데이터를 밀어넣기만 해주고 메인 화면으로 이동하면 된다

publish(){
  var 내게시물 = {
      name: "Kim Joo Hyun",
      userImage: "내가 업로드한 이미지 URL",
      postImage: "내가 업로드한 이미지 URL",
      likes: 36,
      date: "May 15",
      liked: false,
      content: "오늘 무엇을 했냐면요 아무것도 안했어요 ?",
      filter: "perpetua"
  };
  this.게시물.unshift(내게시물);
  this.step = 0;
},

걍 이런식으로 짜주면됨

내게시물이라는 데이터 set은 기존 데이터파일의 구조와 맞춰서 작성해주고

this.게시물.unshift(내게시물); → 데이터 밀어 넣는 코드

step=0으로 해줌으로 다시 메인페이지로 돌아가는 거임

글 발행기능은 contianer에서 textarea 박스에서 데이터를 가져오면 됨

→ custo, event

→하위컴포넌트에서 상위컴포넌트로 메세지 전송

<!-- 글작성페이지 -->
<div v-if="step == 2">
  <div class="upload-image" :style="`background-image:url(${이미지})`"></div>
  <div class="write">
    <textarea class="write-box">write!</textarea>
  </div>
</div> 

근데 게시물이 임시게시물이라서 이것만 수정하면 됩니다.

실제 유저가입력한

1. 글과

2. 이미지를

App.vue 안에 그 var 내게시물 = {} 안에 잘 입력하면 기능개발 끝입니다.

일단 유저가 입력한 글을 거기 집어넣으려면 일단 유저가 입력한 글은 Container.vue에 있습니다.

거기 textarea에 입력할 수 있는게 거기 입력한 글을 App.vue로 보내려면

저는 다음과 같이 커스텀이벤트 문법으로 App.vue에게 사용자가 입력한 글을 전송했습니다.

(Container.vue)
<textarea @input="$emit('write', $event.target.value)" class="write-box">write!</textarea>

그 다음 App.vue는 이 데이터를 저장할 공간을 하나 마련하고

이벤트를 수신하면 그곳에 저장하기로 했습니다.

(App.vue)
<Container @write="작성한글 = $event" />

data(){
  return {
    작성한글 : '',
  }
}

그럼 사용자가 @input 할 때마다 App.vue에 작성한글 부분에 데이터가 저장됩니다.

끝

그 다음에 App.vue에 있던 publish함수를 다시 찾아서 var 내게시물 = {} 이걸 꾸며봅시다.

내 게시물 {} object에 실제 입력한 글과 이미지를 집어넣는겁니다. 그럼 마무리될 듯요

(App.vue)

publish(){
    var 내게시물 = {
        name: "Kim Hyun",
        userImage: "https://picsum.photos/100?random=1",
        postImage: this.이미지,
        likes: 36,
        date: "May 15",
        liked: false,
        content: this.작성한글,
        filter: "perpetua"
    };
    this.게시물.unshift(내게시물);
    this.step = 0;
},

그럼 이제 사용자가 입력한 이미지, 글이 제대로 반영되어서 포스팅이 생성됩니다.