first commit

frontend/components/ImagePlaceholder.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// 이미지 자리표시자 — 실제 사진이 준비되기 전 영역을 채우는 플레이스홀더
+// (원본 디자인의 <image-slot> 대체. 실제 이미지가 생기면 <img> 로 교체)
+interface Props {
+  label?: string
+}
+withDefaults(defineProps<Props>(), {
+  label: '이미지',
+})
+</script>
+
+<template>
+  <div class="ph" role="img" :aria-label="label">
+    <span class="ph-cap">{{ label }}</span>
+  </div>
+</template>
+
+<style scoped>
+.ph {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  place-items: center;
+  background: linear-gradient(135deg, #eef0f3 0%, #dfe2e7 100%);
+}
+
+.ph-cap {
+  font-size: 0.75rem; /* 12px */
+  letter-spacing: 0.1em;
+  color: rgba(27, 26, 23, 0.38);
+  font-weight: 600;
+  text-align: center;
+  padding: 0 1rem;
+}
+</style>