bottom-sheet 만들기

오늘의 목표가 첫번째 페이지에서 +버튼을 누르면 추가페이지를 bottom-sheet를 적용해서 만들려고 한다.

<!-- Bottom Sheet -->
    <div
      v-if="isBottomSheetOpen"
      class="bottom-sheet-overlay"
      @click="closeBottomSheet"
    >
      <div class="bottom-sheet" @click.stop>
        <!-- 닫기 버튼 -->
        <div class="bottom-sheet-header">
          <button class="close-btn" @click="closeBottomSheet">
            <i class="fa-solid fa-times"></i>
          </button>
        </div>
        <!-- 나중에 추가될 내용 -->
      </div>
    </div>

우선 템플릿쪽에 코드를 삽입하고

<script>
export default {
  data() {
    return {
      isBottomSheetOpen: false, // bottom-sheet 상태
    };
  },
  methods: {
    toggleBottomSheet() {
      this.isBottomSheetOpen = !this.isBottomSheetOpen;
    },
    closeBottomSheet() {
      this.isBottomSheetOpen = false;
    },
  },
};
</script>

기존 코드에서 스크립트 쪽에 코드를 추가하였다

여기까지 뜨게 만들었지만 올라오는 애니메이션 기능이 없어서 추가해야 된다.