[Vue3] 모달창 내에 상세페이지 만들기

1️⃣ 개요

• 목표: 상품 제목을 클릭하면 해당 상품의 상세정보(제목, 가격, 설명 등)가 모달창에 출력되도록 구현
• 핵심 아이디어:
  1. 사용자가 클릭한 상품의 인덱스를 저장하는 누른거 변수를 둔다.
  2. 모달창은 모달창열렸니 상태가 true일 때 보여지고, 내부에서 원룸들[누른거] 데이터를 출력한다.

---

2️⃣ Vue3 <script setup>를 활용한 코드 예제

2.1. 전체 구조

<template>
  <!-- 모달창: 모달열림 상태일 때만 보임 -->
  <div class="black-bg" v-if="모달창열렸니">
    <div class="white-bg">
      <h4>{{ 원룸들[누른거].title }}</h4>
      <p>{{ 원룸들[누른거].description }}</p>
      <p>{{ 원룸들[누른거].price }}</p>
      <!-- 모달 닫기 버튼 -->
      <button @click="closeModal">닫기</button>
    </div>
  </div>

  <!-- 상품 목록: 각 상품 클릭 시 모달창 열림 -->
  <div v-for="(a, i) in 원룸들" :key="i" class="product">
    <img :src="a.image" class="room-img" />
    <h4 @click="openModal(i)">{{ a.title }}</h4>
    <p>{{ a.price }}</p>
  </div>

  <!-- v-if, v-else, v-else-if 예제 -->
  <div v-if="false">
    안녕하세요
  </div>
  <div v-else-if="false">
    안녕하세요2
  </div>
  <div v-else>
    안녕하세요3
  </div>
</template>

<script setup>
import { ref } from 'vue'

// 모달창 상태 (열렸는지 여부)
const 모달창열렸니 = ref(false)
// 사용자가 클릭한 상품의 인덱스 저장 (초기값: 0)
const 누른거 = ref(0)

// 예시 데이터: 상품 배열 (원룸들)
const 원룸들 = ref([
  { title: '상품 0', price: '₩100,000', description: '상품 0 상세설명', image: 'img0.png' },
  { title: '상품 1', price: '₩200,000', description: '상품 1 상세설명', image: 'img1.png' },
  { title: '상품 2', price: '₩300,000', description: '상품 2 상세설명', image: 'img2.png' },
  // ... 추가 데이터
])

// 상품 클릭 시 모달 열기 & 해당 인덱스 저장
const openModal = (index) => {
  누른거.value = index
  모달창열렸니.value = true
}

// 모달 닫기 함수
const closeModal = () => {
  모달창열렸니.value = false
}
</script>

<style scoped>
.black-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.white-bg {
  background: #fff;
  padding: 20px;
  border-radius: 5px;
}

.room-img {
  width: 100%;
  max-width: 200px;
}

.product {
  margin-bottom: 10px;
  cursor: pointer;
}
</style>

---

3️⃣ 코드 설명

1. 데이터 및 상태 관리
   • 모달창열렸니: 모달창의 표시 여부를 ref(false)로 초기화
   • 누른거: 사용자가 클릭한 상품의 인덱스를 저장 (ref(0))
   • 원룸들: 상품 정보를 담은 배열 (제목, 가격, 설명, 이미지)
2. 모달창 내용
   • 모달창은 v-if="모달창열렸니" 조건이 참일 때 보이며, 내부에서는 원룸들[누른거]의 데이터를 출력
   • 모달창 내 "닫기" 버튼 클릭 시 closeModal() 함수로 상태를 변경
3. 상품 목록 렌더링
   • v-for를 이용하여 원룸들 데이터를 순회하며 상품 정보를 출력
   • 상품 제목(h4)에 @click="openModal(i)" 이벤트를 달아, 클릭 시 해당 상품의 인덱스를 저장하고 모달창을 열도록 함
4. v-if, v-else, v-else-if 문법
   • 조건식에 따라 서로 다른 내용을 출력할 수 있음
   • 예제에서는 간단한 텍스트로 사용됨

---

📌 정리

1. 상품 클릭 → 누른거 업데이트 → 모달창 내용 실시간 재렌더링
2. v-if / v-else / v-else-if 조건문을 사용하여 다양한 상태에 따른 UI를 구현 가능