Framework7 + TailwindCSS로 커스텀 다이얼로그 만들기

Framework7을 사용하다 보면 기본 다이얼로그(Alert, Confirm 등)의 스타일을 커스터마이징하고 싶을 때가 있습니다. 하지만 Framework7의 기본 다이얼로그는 HTML 커스터마이징이 어렵기 때문에, <f7-popup>을 활용하여 TailwindCSS 기반의 커스텀 다이얼로그를 직접 만들어보겠습니다.

---

✅ 왜 <f7-dialog> 대신 <f7-popup>을 쓰나요?

Framework7의 다이얼로그는 빠르게 만들 수 있지만:

• 내부 마크업이 고정되어 있음
• TailwindCSS로 직접 커스터마이징하기가 제한적임

반면 <f7-popup>은 완전히 내 마음대로 마크업을 구성할 수 있어서,
디자인 자유도와 유연성이 매우 높습니다.

---

🧱 Step 1. 커스텀 다이얼로그 컴포넌트 만들기

components/CustomDialog.vue 파일을 만들어 아래와 같이 작성합니다:

<template>
  <f7-popup v-model:opened="opened" class="rounded-2xl overflow-hidden">
    <f7-page class="bg-white flex flex-col items-center justify-center p-6 h-full">
      <div class="w-full max-w-sm text-center">
        <h2 class="text-xl font-bold mb-2 text-gray-900">{{ title }}</h2>
        <p class="text-sm text-gray-600 mb-6">{{ message }}</p>
        <div class="flex justify-center gap-4">
          <f7-button
            fill
            class="bg-gray-300 text-gray-800 font-medium px-4 py-2 rounded-lg"
            @click="onCancel"
          >
            {{ cancelText }}
          </f7-button>
          <f7-button
            fill
            class="bg-blue-500 text-white font-medium px-4 py-2 rounded-lg"
            @click="onConfirm"
          >
            {{ confirmText }}
          </f7-button>
        </div>
      </div>
    </f7-page>
  </f7-popup>
</template>

<script setup>
import { ref, defineProps, defineEmits, watch } from 'vue'

const props = defineProps({
  modelValue: Boolean,
  title: { type: String, default: '알림' },
  message: { type: String, default: '' },
  confirmText: { type: String, default: '확인' },
  cancelText: { type: String, default: '취소' },
})

const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

const opened = ref(props.modelValue)
watch(() => props.modelValue, val => (opened.value = val))
watch(opened, val => emit('update:modelValue', val))

const onConfirm = () => {
  emit('confirm')
  opened.value = false
}
const onCancel = () => {
  emit('cancel')
  opened.value = false
}
</script>

---

⚙️ Step 2. 실제 페이지에서 사용하기

<template>
  <f7-page>
    <f7-button @click="showDialog = true">커스텀 다이얼로그 열기</f7-button>

    <CustomDialog
      v-model="showDialog"
      title="삭제하시겠습니까?"
      message="이 작업은 되돌릴 수 없습니다."
      confirmText="삭제"
      cancelText="취소"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </f7-page>
</template>

<script setup>
import { ref } from 'vue'
import CustomDialog from '@/components/CustomDialog.vue'

const showDialog = ref(false)

function handleConfirm() {
  console.log('✅ 확인 눌림')
}

function handleCancel() {
  console.log('❌ 취소 눌림')
}
</script>

---

💡 마무리 팁

• 버튼 스타일, 아이콘, 배경 블러 등은 Tailwind 클래스로 자유롭게 조정 가능합니다.
• <f7-sheet>도 유사하게 사용 가능하며, 더 다양한 형태의 UX에 대응할 수 있습니다.
• 다크모드나 반응형도 Tailwind로 간단히 처리 가능해요.

---

✅ 결론

Framework7의 기본 다이얼로그가 너무 정해진 스타일이라 아쉬웠다면, <f7-popup>을 활용한 커스텀 다이얼로그를 적극 추천드립니다. TailwindCSS와 함께라면 훨씬 더 직관적이고 예쁜 UI를 만들 수 있어요!

---

✍️ 관련 기술

• Framework7 v8+
• Vue 3 <script setup>
• TailwindCSS v3