feat(ai-character): 캐릭터 관리 기능 구현

src/features/characters/components/CharacterListItem.tsx

@@ -0,0 +1,36 @@
+import { navigateTo } from "@/app/browser-location";
+import { routePaths } from "@/app/route-paths";
+import type { CharacterListItem as CharacterListItemData } from "@/features/characters/model/types";
+
+export function CharacterListItem({ character }: { readonly character: CharacterListItemData }) {
+  const detailPath = routePaths.aiCharacterDetail(String(character.id));
+  const description = character.description.length > 0 ? character.description : "설명이 없습니다.";
+
+  return (
+    <a
+      aria-label={`${character.name} 선택`}
+      className="block rounded-lg border border-border bg-card p-4 text-foreground hover:bg-accent focus-visible:bg-accent"
+      href={detailPath}
+      onClick={(event) => {
+        event.preventDefault();
+        navigateTo(detailPath);
+      }}
+    >
+      <span className="flex items-start gap-3">
+        {character.imageUrl === null ? (
+          <span aria-hidden="true" className="grid size-12 shrink-0 place-items-center rounded-md bg-muted font-semibold text-muted-foreground">
+            {character.name.slice(0, 1)}
+          </span>
+        ) : (
+          <img alt="" className="size-12 shrink-0 rounded-md object-cover" height="48" loading="lazy" src={character.imageUrl} width="48" />
+        )}
+        <span className="min-w-0 flex-1">
+          <span className="block font-semibold">{character.name}</span>
+          <span className="mt-1 line-clamp-2 block text-sm text-muted-foreground">{description}</span>
+          <span className="mt-2 block text-xs font-semibold text-info">ID {character.id} · {character.region}</span>
+          <span className="mt-1 block text-xs text-muted-foreground">{character.tags.join(", ")}</span>
+        </span>
+      </span>
+    </a>
+  );
+}