{def.name}
diff --git a/src/components/game/VillageView.tsx b/src/components/game/VillageView.tsx
index 03328db..8627a23 100644
--- a/src/components/game/VillageView.tsx
+++ b/src/components/game/VillageView.tsx
@@ -5,6 +5,7 @@ import { engine, catRate, canPlaceAt } from "@/lib/game/engine";
import {
BOARD_COLS,
BOARD_ROWS,
+ BUILDING_IMG,
catSprite,
HALL_TILE,
TOOL_IMG,
@@ -536,22 +537,29 @@ export default function VillageView({
const stored = Math.floor(b.stored);
const isKitchen = b.type === "kitchen";
// 건물 본체 → 정보 패널
- hitRectsRef.current.push({ id: b.id, kind: "open", x: x - 30, y: y - 38, w: 60, h: 66 });
+ hitRectsRef.current.push({ id: b.id, kind: "open", x: x - 44, y: y - 52, w: 88, h: 80 });
// 배지 → 빠른 회수 (생산 건물만)
if (!isKitchen && stored > 0)
hitRectsRef.current.push({ id: b.id, kind: "collect", x: x - 40, y: y - 62, w: 80, h: 26 });
sprites.push({
y,
draw: () => {
- shadow(x, y + 6, 24);
- const img = toolImagesRef.current.get(b.aptitude);
- if (img) {
- // 세로가 긴 일러스트 — 높이 56px 기준으로 비율 유지
- const h = 56;
- const w = (img.width / img.height) * h;
- ctx.drawImage(img, x - w / 2, y + 8 - h, w, h);
+ const bImg = getImage(BUILDING_IMG[b.type]);
+ if (bImg) {
+ // 건물 일러스트 (자체 잔디 베이스 포함 — 그림자 불필요)
+ const w = 96;
+ const h = (bImg.height / bImg.width) * w;
+ ctx.drawImage(bImg, x - w / 2, y + 14 - h, w, h);
} else {
- drawEmoji(b.emoji, x, y + 8, 42);
+ shadow(x, y + 6, 24);
+ const img = toolImagesRef.current.get(b.aptitude);
+ if (img) {
+ const h = 56;
+ const w = (img.width / img.height) * h;
+ ctx.drawImage(img, x - w / 2, y + 8 - h, w, h);
+ } else {
+ drawEmoji(b.emoji, x, y + 8, 42);
+ }
}
ctx.font = `13px ${juaFamily}`;
ctx.textAlign = "center";
@@ -597,14 +605,10 @@ export default function VillageView({
? "walk1"
: "walk2"
: "idle";
- // 품종 스프라이트 → (cook 없으면 work) → 기본 스프라이트 순 폴백
+ // 품종 스프라이트 → (cook 없으면 work) → 이모지 순 폴백
let sprite = getImage(catSprite(cat.breed, frameName));
if (!sprite && frameName === "cook")
sprite = getImage(catSprite(cat.breed, "work"));
- if (!sprite)
- sprite = getImage(
- catSprite("", frameName === "cook" ? "work" : frameName),
- );
if (sprite) {
const sh = 42;
const sw = (sprite.width / sprite.height) * sh;
@@ -658,12 +662,14 @@ export default function VillageView({
// 고스트 건물
const gx = isoX(hover.i, hover.j);
const gy = isoY(hover.i, hover.j) + TH / 2;
- const img = toolImagesRef.current.get(placing.aptitude);
+ const gImg =
+ getImage(BUILDING_IMG[placing.type]) ??
+ toolImagesRef.current.get(placing.aptitude);
ctx.globalAlpha = 0.75;
- if (img) {
- const h = 56;
- const w = (img.width / img.height) * h;
- ctx.drawImage(img, gx - w / 2, gy + 8 - h, w, h);
+ if (gImg) {
+ const w = 96;
+ const h = (gImg.height / gImg.width) * w;
+ ctx.drawImage(gImg, gx - w / 2, gy + 14 - h, w, h);
} else {
drawEmoji("🏗️", gx, gy + 8, 40);
}
diff --git a/src/lib/game/data.ts b/src/lib/game/data.ts
index 0cc2f13..28e224d 100644
--- a/src/lib/game/data.ts
+++ b/src/lib/game/data.ts
@@ -23,6 +23,14 @@ export function catSprite(breed: string, frame: CatFrame): string {
return dir ? `/assets/cats/${dir}/${frame}.png` : `/assets/cats/${frame}.png`;
}
+// 건물 일러스트 (public/assets/buildings/)
+export const BUILDING_IMG: Record