[Vue3] 탭 만들기 & 탭으로 사진 업로드 페이지 만들기

1️⃣ 탭 UI 만들기

• step 상태를 이용하여 현재 선택된 탭을 관리
• 버튼을 클릭하면 step을 변경하여 해당하는 내용만 표시

<template>
  <div>
    <!-- 탭 콘텐츠 -->
    <div v-if="step === 0">내용 0</div>
    <div v-if="step === 1">내용 1</div>
    <div v-if="step === 2">내용 2</div>

    <!-- 탭 버튼 -->
    <button @click="step = 0">버튼 0</button>
    <button @click="step = 1">버튼 1</button>
    <button @click="step = 2">버튼 2</button>
  </div>
</template>

<script setup>
import { ref } from "vue";

const step = ref(0);
</script>

---

2️⃣ 사진 업로드 페이지 (탭 사용)

• step 상태를 사용하여 업로드 페이지 이동
• 0: 기본 화면, 1: 필터 선택, 2: 글 작성

<template>
  <div>
    <!-- 탭 버튼 -->
    <button @click="step = 0">업로드</button>
    <button @click="step = 1">필터 선택</button>
    <button @click="step = 2">글 작성</button>

    <!-- 첫 번째 화면 (기존 게시물) -->
    <div v-if="step === 0">
      <Post v-for="(post, i) in posts" :key="i" :게시물="post" />
    </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 setup>
import { ref } from "vue";
import Post from "@/components/Post.vue"; // Post 컴포넌트 가져오기

const step = ref(0);
const posts = ref([
  { id: 1, title: "첫 번째 게시물" },
  { id: 2, title: "두 번째 게시물" },
]); // 게시물 데이터 예시
</script>

<style>
.upload-image {
  width: 100%;
  height: 450px;
  background: cornflowerblue;
  background-size: cover;
}
.filters {
  overflow-x: scroll;
  white-space: nowrap;
}
.filter-1 {
  width: 100px;
  height: 100px;
  background-color: cornflowerblue;
  margin: 10px 10px 10px auto;
  padding: 8px;
  display: inline-block;
  color: white;
  background-size: cover;
}
.filters::-webkit-scrollbar {
  height: 5px;
}
.filters::-webkit-scrollbar-track {
  background: #f1f1f1;
}
.filters::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}
.filters::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.write-box {
  border: none;
  width: 90%;
  height: 100px;
  padding: 15px;
  margin: auto;
  display: block;
  outline: none;
}
</style>

---

📌 정리

• step 상태를 사용하여 탭 전환

• 탭 UI를 사용하면 vue-router 없이도 간단한 페이지 전환 가능