51 lines
1.7 KiB
Vue
51 lines
1.7 KiB
Vue
<template>
|
|
<div style="font-family: sans-serif; max-width: 720px; margin: 60px auto; padding: 0 24px;">
|
|
<!-- 헤더 -->
|
|
<div style="margin-bottom: 32px;">
|
|
<NuxtLink to="/" style="font-size: 14px; color: #6b7280; text-decoration: none;">← 목록으로</NuxtLink>
|
|
<div style="display: flex; align-items: center; gap: 12px; margin-top: 12px;">
|
|
<span
|
|
style="font-size: 12px; font-weight: 600; padding: 3px 12px; border-radius: 99px; color: white;"
|
|
:style="{ background: badgeColor }"
|
|
>
|
|
{{ badge }}
|
|
</span>
|
|
<h1 style="margin: 0; font-size: 24px;">{{ title }}</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 데이터 카드 -->
|
|
<div style="background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 10px; padding: 20px; margin-bottom: 24px;">
|
|
<slot />
|
|
</div>
|
|
|
|
<!-- 설명 -->
|
|
<div style="margin-bottom: 24px;">
|
|
<h3 style="font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 8px;">동작 원리</h3>
|
|
<ul style="margin: 0; padding-left: 20px; font-size: 14px; color: #4b5563; line-height: 1.8;">
|
|
<slot name="explain" />
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- 코드 -->
|
|
<div>
|
|
<h3 style="font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 8px;">설정 코드</h3>
|
|
<div style="background: #1e293b; color: #e2e8f0; border-radius: 8px; padding: 16px; font-size: 13px; line-height: 1.6; overflow-x: auto;">
|
|
<slot name="code" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
badge: string
|
|
badgeColor: string
|
|
title: string
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
pre { margin: 0; white-space: pre-wrap; word-break: break-all; }
|
|
</style>
|