[Vue.js] 탭 만들기 및 탭을 이용한 사진 업로드 페이지 만들기

💡 실습 포인트!

• 다른 페이지가 필요하다면 vue-router 를 사용해도 되지만 간단한 UI 들은 탭으로 만드는 것이 더욱 편하다는 것을 알게 되었다.
• 다만, 페이지 이동(앞으로가기, 뒤로가기) 와 같은 기능을 사용할 것이라면 vue-router 를 사용하는 것이 좋다.
• 필터 선택 페이지와 글 작성 페이지는 아직 데이터바인딩을 해주지 않아 레이아웃만 뜨는 것을 볼 수 있다.

💜 step 이 0 인 경우 (메인 포스트 페이지)

---

💜 step 이 1 인 경우 (필터 선택 페이지/사진 업로드 페이지)

---

💜 step 이 2 인 경우 (글 작성 페이지)

---

💜 사진 업로드 화면 만들기

• Instagram 을 보면 기본적으로 posts 를 보여주는 페이지가 있고, 이미지를 업로드할 때 이미지를 꾸미는 페이지 및 글을 적는 페이지가 있다.
• 위와 유사하게 기능을 만들기 위해서 Container.vue 파일 안에 모든 페이지 레이아웃을 만들어 넣어둔 후에, 탭을 선택하면 해당 탭의 레이아웃 및 내용을 보여주는 것처럼 특정 조건이 충족될 때 특정 페이지를 보여주도록 해주었다.

🤍 App.vue

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div class="header">
    <ul class="header-button-left">
      <li>Cancel</li>
    </ul>
    <ul class="header-button-right">
      <li>Next</li>
    </ul>
    <img src="./assets/logo.png" class="logo" />
  </div>

  <Container :posts="posts" :step="step" />

  <button class="btn" @click="more" v-if="step === 0">더보기</button>

  <div class="footer">
    <ul class="footer-button-plus">
      <input type="file" id="file" class="inputfile" />
      <label for="file" class="input-plus">+</label>
    </ul>
  </div>
</template>

<script>
import Container from "./components/Container.vue";
import posts from "./assets/posts";
import axios from "axios";
export default {
  name: "App",
  data() {
    return {
      posts: posts,
      moreCnt: 0,
      step: 0,
    };
  },
  methods: {
    more() {
      axios
        .get(`https://codingapple1.github.io/vue/more${this.moreCnt}.json`)
        .then((result) => {
          this.posts.push(result.data);
          this.moreCnt++;
        })
        .catch(() => {
          console.log("GET 요청을 실패했습니다.");
        });
    },
  },
  components: {
    Container: Container,
  },
};
</script>

<style>
</style>

• 먼저, data 보관함에 step 이라는 항목을 만들어서 0~2까지의 숫자를 저장하기로 했다.
• step 이 0 인 경우에는 메인화면인 Post.vue 를 보여주도록 하고 step 이 1 인 경우에는 필터 선택 페이지를, step 이 2 인 경우에는 글 작성 페이지를 보여주도록 말이다.
• 각 페이지 레이아웃의 경우 Container.vue 파일에 있으므로, step 을 step 이라는 이름으로 props 문법을 사용하여 Container.vue 로 전송해주었다.
• 이와는 별개로 사진 업로드 페이지를 만드는 것과는 상관 없지만, "더보기" 버튼의 경우 Post.vue 를 보여줄 때에만 보이는 게 자연스러워서, v-if 문을 추가하여 step 이 0 인 경우에만 보이도록 해주었다.

---

🤍 Container.vue

// 전체 코드 미리보기
// 전체 코드의 내용이 길어 css 부분은 제외했다.

<template>
  <div>
    <div v-if="step === 0">
      <Post :post="post" v-for="(post, i) in posts" :key="i" />
    </div>

    <!-- 필터선택페이지 -->
    <div v-if="step === 1">
      <div class="upload-image"></div>
      <div class="filters">
        <div class="filter-1"></div>
        <div class="filter-1"></div>
        <div class="filter-1"></div>
        <div class="filter-1"></div>
        <div class="filter-1"></div>
      </div>
    </div>

    <!-- 글작성페이지 -->
    <div v-if="step === 2">
      <div class="upload-image"></div>
      <div class="write">
        <textarea class="write-box">write!</textarea>
      </div>
    </div>
  </div>
</template>

<script>
import Post from "./Post.vue";
export default {
  name: "Container",
  data() {
    return {};
  },
  components: {
    Post: Post,
  },
  props: {
    posts: Array,
    step: Number,
  },
};
</script>

<style>
</style>

• 이제 App.vue 에서 props 문법으로 Container.vue 로 전달받은 step 을 props 에 등록해주었다.
• 그 다음으로, v-if 문을 사용하여 각 step 의 숫자에 따라 보여줄 페이지들을 묶어주었다.
• 따라서, 이제 step 이 0 인 경우에는 데이터 개수만큼 Post.vue 를 보여주고, step 이 1 인 경우에는 필터 선택 페이지를 보여주고, step 이 2 인 경우에는 글 작성 페이지가 보여지게 되는 것이다.