feat(travel): AlbumCard 컴포넌트 — 대표사진 + 그라디언트 + 메타정보

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/pages/travel/AlbumCard.jsx

@@ -0,0 +1,55 @@
+import React, { useRef, useCallback } from 'react';
+import { getRegionAccent } from './MiniMap';
+import './AlbumCard.css';
+
+/* ─────────────────────────────────────────────
+   AlbumCard — cover image + gradient + meta
+───────────────────────────────────────────── */
+export default function AlbumCard({ album, onClick }) {
+  const cardRef = useRef(null);
+  const accent = getRegionAccent(album.region || '');
+
+  const handleClick = useCallback(() => {
+    if (!onClick) return;
+    const rect = cardRef.current?.getBoundingClientRect();
+    onClick(album, rect);
+  }, [album, onClick]);
+
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === 'Enter') handleClick();
+    },
+    [handleClick],
+  );
+
+  return (
+    <div
+      ref={cardRef}
+      className="album-card"
+      style={{ '--card-accent': accent }}
+      role="button"
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+    >
+      {/* cover */}
+      <img
+        className="album-card__cover"
+        src={album.coverThumb}
+        alt={album.name}
+        loading="lazy"
+        draggable={false}
+      />
+
+      {/* gradient overlay */}
+      <div className="album-card__gradient" />
+
+      {/* meta */}
+      <div className="album-card__meta">
+        <span className="album-card__region-badge">{album.regionName}</span>
+        <h3 className="album-card__name">{album.name}</h3>
+        <span className="album-card__count">{album.photoCount} frames</span>
+      </div>
+    </div>
+  );
+}