프로필/프로필 편집 아바타를 공용 background avatar 컴포넌트로 교체

Author: hailey21

AGENTS.md

@@ -0,0 +1,23 @@
+"use client";
+
+interface AvatarProps {
+  src: string;
+  className: string;
+  size?: number;
+}
+
+export function Avatar({ src, className, size }: AvatarProps) {
+  return (
+    <span
+      aria-hidden="true"
+      className={className}
+      style={{
+        ...(size ? { width: size, height: size } : {}),
+        display: "block",
+        backgroundImage: `url("${src}")`,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+    />
+  );
+}

apps/web/src/components/screens/avatar.tsx

@@ -7,6 +7,7 @@ import { localized } from "@/lib/i18n";
 import { useAppNav } from "@/lib/nav";
 import { useAppState } from "@/components/app-shell";
 import { UI, Icon } from "./_ui";
+import { Avatar } from "./avatar";
 import type { Theme, User } from "@/domain/types";
 
 interface Props {
@@ -60,7 +61,7 @@ export function ProfileEditView({ user, themes }: Props) {
 
       <div style={{ display: "flex", justifyContent: "center", padding: "14px 0 8px" }}>
         <div style={{ position: "relative" }}>
-          <img className="avatar-lg" src={user.avatarUrl} alt="" style={{ width: 86, height: 86 }} />
+          <Avatar className="avatar-lg" src={user.avatarUrl} size={86} />
           <button className="avatar-cam">
             <Icon.camera />
           </button>

apps/web/src/components/screens/profile-edit.tsx

@@ -6,6 +6,7 @@ import { localized, type Lang } from "@/lib/i18n";
 import { useAppNav } from "@/lib/nav";
 import { useAppState } from "@/components/app-shell";
 import { UI, Icon } from "./_ui";
+import { Avatar } from "./avatar";
 import type { Review, Spot, Theme, User } from "@/domain/types";
 
 const { Signal, ThemeHueBg, Placeholder } = UI;
@@ -182,7 +183,7 @@ function ProfileStats({
 
       <div style={{ padding: "6px 20px 0" }}>
         <div className="profile-head">
-          <img className="avatar-lg" src={user.avatarUrl} alt="" />
+          <Avatar className="avatar-lg" src={user.avatarUrl} />
           <div style={{ flex: 1, minWidth: 0 }}>
             <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
               <span className="serif" style={{ fontSize: 24, lineHeight: 1.15 }}>
@@ -318,7 +319,7 @@ function ProfileList({
 
       <div style={{ padding: "6px 20px 0" }}>
         <button className="profile-head-compact" onClick={() => nav("profileEdit")}>
-          <img className="avatar-md" src={user.avatarUrl} alt="" />
+          <Avatar className="avatar-md" src={user.avatarUrl} />
           <div style={{ flex: 1, minWidth: 0, textAlign: "left" }}>
             <div style={{ fontSize: 17, fontWeight: 700, letterSpacing: "-0.01em" }}>{localized(user.name, lang)}</div>
             <div style={{ marginTop: 4 }}>

apps/web/src/components/screens/profile.tsx

@@ -59,6 +59,18 @@ describe("LiveRepository.getCourse — 코스 정리 에이전트(planItinerary)
     for (const item of out!.items) expect(validRefs.has(item.refId)).toBe(true);
   });
 
+  it("코스 조건 옵션을 에이전트 도구 경로까지 유지한다", async () => {
+    const live = new LiveRepository();
+    const mock = new MockRepository();
+    const themeId = await someThemeWithCourse(mock);
+
+    const out = await live.getCourse(themeId, { days: 1, pace: "calm", transport: "walk" });
+
+    expect(out).not.toBeNull();
+    expect(out!.dayCount).toBe(1);
+    expect(out!.items.every((item) => item.day === 1)).toBe(true);
+  });
+
   it("없는 테마는 null 을 반환한다", async () => {
     const live = new LiveRepository();
     expect(await live.getCourse("__nope__")).toBeNull();

apps/web/src/data/live/agent-wiring.test.ts

@@ -37,6 +37,7 @@ import { getItemDetail, listGangwonItems } from "@/server/public-api/tourapi";
 import { REGIONS, type RegionKey } from "@/server/public-api/regions";
 import { apiCache } from "@/server/cache";
 import { createLogger } from "@/server/log";
+import { buildTravelTimeLookup } from "@/server/routing/travel-time";
 import { L, type LocalizedText } from "@/lib/i18n";
 import { buildTools } from "@/server/agent/tools";
 import { planCourse, planItinerary } from "@/server/agent/planner";
@@ -78,6 +79,12 @@ function withSpotMappingCoords(spot: Spot): Spot {
   return mapping ? { ...spot, lat: mapping.lat, lon: mapping.lon } : spot;
 }
 
+function routeCoordsFromSpots(spots: Spot[]) {
+  return spots
+    .filter((spot): spot is Spot & { lat: number; lon: number } => typeof spot.lat === "number" && typeof spot.lon === "number")
+    .map((spot) => ({ lat: spot.lat, lon: spot.lon, region: spot.region.ko }));
+}
+
 /**
  * 에이전트 trace 의 reorder_by_congestion 결과들을 base 코스에 반영해 최종 Course 를 만든다(순수).
  * planItinerary 에 주입 — LLM 이 "어느 날을 정리할지" 정하면, 여기서 그 도구 결과를 코스에 적용한다.
@@ -211,7 +218,7 @@ export class LiveRepository extends MockRepository {
     if (!base) return base;
 
     try {
-      const ctx = await this.buildAgentContext();
+      const ctx = await this.buildAgentContext(options);
       const result = await planItinerary(
         { intent: `테마 ${themeId} 코스를 현재 혼잡 기준으로 정리`, lang: "ko", themeId, at: nowKst() },
         {
@@ -264,6 +271,10 @@ export class LiveRepository extends MockRepository {
       }),
     );
     const alternativesBySpot = Object.fromEntries(altEntries);
+    const travelSpots = [...spots, ...altEntries.flatMap(([, alternatives]) => alternatives)];
+    const travelTimeLookup = await buildTravelTimeLookup(routeCoordsFromSpots(travelSpots), {
+      mode: options?.transport ?? "car",
+    });
 
     return composeCourse({
       theme,
@@ -272,7 +283,7 @@ export class LiveRepository extends MockRepository {
       eats,
       stays,
       alternativesBySpot,
-    }, options);
+    }, { ...options, travelTimeLookup });
   }
 
   private async getDbSpotProfilesForTheme(themeId: string): Promise<Spot[]> {
@@ -461,7 +472,7 @@ export class LiveRepository extends MockRepository {
    * 정적 데이터(테마/코스/스팟 메타)는 mock(메모리)에서, 동적 데이터(날씨/대기질/POI)는
    * 공공 API 클라이언트 + 캐시에서 가져온다. 도구 코드는 이 포트만 보므로 출처를 모른다.
    */
-  private async buildAgentContext(): Promise<ToolContext> {
+  private async buildAgentContext(options?: ComposeCourseOptions): Promise<ToolContext> {
     const [themes, baseSpots] = await Promise.all([super.listThemes(), super.listSpots()]);
 
     // 매핑이 있는 스팟만 도구의 행동 대상으로 노출(좌표·권역·성격 필요).
@@ -475,7 +486,7 @@ export class LiveRepository extends MockRepository {
     return {
       themes,
       spots,
-      getCourse: (themeId) => this.composeSeedCourse(themeId),
+      getCourse: (themeId) => this.composeSeedCourse(themeId, options),
       weather: async (meta) => {
         const w = await cached(`wx:${meta.id}`, TTL_MS, () => getWeatherByCoords(meta.lat, meta.lon));
         return { tempC: w.tempC, pop: w.pop, windMs: w.windMs, pty: w.pty, desc: w.desc };

apps/web/src/data/live/repository.ts

@@ -4,6 +4,7 @@ import { describe, expect, it } from "vitest";
 import { L } from "@/lib/i18n";
 import type { Course, Eat, Spot, Stay, Theme } from "./types";
 import { composeCourse } from "./course-compose";
+import type { TravelTimeLookup } from "./travel-time";
 
 const theme: Theme = {
   id: "east-sea-sunrise",
@@ -99,6 +100,30 @@ describe("composeCourse", () => {
     expect(course!.items.find((it) => it.kind === "eat")?.refId).toBe("e-gangneung");
   });
 
+  it("baseCourse 템플릿이 있어도 days 조건으로 일정을 줄인다", () => {
+    const twoDayBase: Course = {
+      ...baseCourse,
+      dayCount: 2,
+      items: [
+        ...baseCourse.items,
+        { kind: "spot", day: 2, time: "10:00", refId: "dongmyeong-port", durationMin: 60 },
+      ],
+    };
+    const course = composeCourse(
+      {
+        theme,
+        baseCourse: twoDayBase,
+        spots: [busyBeach, quietBeach, port],
+        eats,
+        stays,
+      },
+      { days: 1 },
+    );
+
+    expect(course!.dayCount).toBe(1);
+    expect(course!.items.every((it) => it.day === 1)).toBe(true);
+  });
+
   it("대체 후보 점수가 높아도 원래 장소에서 너무 멀면 가까운 후보를 우선한다", () => {
     const course = composeCourse({
       theme,
@@ -135,6 +160,38 @@ describe("composeCourse", () => {
     expect(course!.items.find((it) => it.time === "10:00")?.refId).toBe("near-route-beach");
   });
 
+  it("주입된 이동시간 포트가 대체 후보 랭킹에 반영된다", () => {
+    const routeBase: Course = {
+      ...baseCourse,
+      items: [
+        { kind: "spot", day: 1, time: "10:00", refId: "anmok-beach", durationMin: 60 },
+        { kind: "spot", day: 1, time: "14:00", refId: "dongmyeong-port", durationMin: 60 },
+      ],
+    };
+    const normallyGood = spot("api-slow-beach", "강릉", "calm", 90, ["바다", "한적"], { lat: 37.781, lon: 128.95 });
+    const normallyLower = spot("api-fast-beach", "강릉", "calm", 86, ["바다", "한적"], { lat: 37.79, lon: 128.951 });
+    const apiLookup: TravelTimeLookup = {
+      estimate(a, b, mode = "car") {
+        const touchesSlow = [a, b].some((c) => Math.abs(c.lat - normallyGood.lat!) < 0.001);
+        return { distanceKm: touchesSlow ? 8 : 2, driveMinutes: touchesSlow ? 130 : 8, mode, source: "api" };
+      },
+    };
+
+    const course = composeCourse(
+      {
+        theme,
+        baseCourse: routeBase,
+        spots: [busyBeach, normallyGood, normallyLower, port],
+        eats,
+        stays,
+        alternativesBySpot: { "anmok-beach": [normallyGood, normallyLower] },
+      },
+      { travelTimeLookup: apiLookup },
+    );
+
+    expect(course!.items.find((it) => it.time === "10:00")?.refId).toBe("api-fast-beach");
+  });
+
   it("baseCourse 가 없어도 후보 풀에서 간단한 코스를 생성한다", () => {
     const course = composeCourse({
       theme,

apps/web/src/domain/course-compose.test.ts

@@ -14,7 +14,14 @@
 
 import type { Course, CourseItem, Eat, Spot, Stay, Theme } from "./types";
 import { L, localized } from "@/lib/i18n";
-import { estimateDrive, routePenaltyPoints, type RouteContext, type TravelMode } from "./travel-time";
+import {
+  approxTravelTimeLookup,
+  estimateDrive,
+  routePenaltyPoints,
+  type RouteContext,
+  type TravelMode,
+  type TravelTimeLookup,
+} from "./travel-time";
 
 export interface ComposeCourseInput {
   theme: Theme;
@@ -41,6 +48,8 @@ export interface ComposeCourseOptions {
   startRegion?: string;
   /** 이동수단. car=자가용/렌터카, transit=대중교통, walk=도보 중심. */
   transport?: TravelMode;
+  /** 서버 길찾기 API 또는 근사 계산으로 구성한 이동시간 조회 포트. */
+  travelTimeLookup?: TravelTimeLookup;
   /** 하루에 배치할 최대 스팟 수. 기본 3. */
   maxSpotsPerDay?: number;
 }
@@ -52,6 +61,7 @@ interface NormalizedComposeOptions {
   companion?: string;
   startRegion?: string;
   transport: TravelMode;
+  travelTimeLookup: TravelTimeLookup;
   maxSpotsPerDay: number;
 }
 
@@ -163,11 +173,16 @@ function routePenalty(original: Spot, candidate: Spot, context: RouteContext): n
   return routePenaltyPoints(originalCoord, candidateCoord, context);
 }
 
-function routeLegPenalty(prev: Spot | undefined, candidate: Spot, mode: TravelMode): number {
+function routeLegPenalty(
+  prev: Spot | undefined,
+  candidate: Spot,
+  mode: TravelMode,
+  lookup: TravelTimeLookup,
+): number {
   const prevCoord = toRouteCoord(prev);
   const candidateCoord = toRouteCoord(candidate);
   if (!prevCoord || !candidateCoord) return 0;
-  const drive = estimateDrive(prevCoord, candidateCoord, mode);
+  const drive = estimateDrive(prevCoord, candidateCoord, mode, lookup);
   if (!drive || drive.driveMinutes <= 45) return 0;
   return Math.min(30, (drive.driveMinutes - 45) * 0.35);
 }
@@ -265,7 +280,9 @@ function pickScratchSpots(input: ComposeCourseInput, dayCount: number, options:
     const bestIndex = remaining
       .map((spot, index) => ({
         index,
-        score: scoreSpot(input.theme, spot, undefined, options) - routeLegPenalty(prev, spot, options.transport),
+        score:
+          scoreSpot(input.theme, spot, undefined, options) -
+          routeLegPenalty(prev, spot, options.transport, options.travelTimeLookup),
       }))
       .sort((a, b) => b.score - a.score)[0]?.index;
     if (bestIndex === undefined) break;
@@ -293,9 +310,11 @@ function note(changedSpotIds: string[], changedCommerce: boolean): Course["altNo
 
 function composeFromTemplate(input: ComposeCourseInput, options: NormalizedComposeOptions): Course {
   const base = input.baseCourse as Course;
+  const targetDayCount = options.days ?? base.dayCount;
+  const templateItems = base.items.filter((it) => it.day <= targetDayCount);
   const spotsById = new Map(input.spots.map((s) => [s.id, s]));
   const baseSpotItemsByDay = new Map<number, CourseItem[]>();
-  for (const it of base.items) {
+  for (const it of templateItems) {
     if (it.kind !== "spot") continue;
     baseSpotItemsByDay.set(it.day, [...(baseSpotItemsByDay.get(it.day) ?? []), it]);
   }
@@ -306,7 +325,7 @@ function composeFromTemplate(input: ComposeCourseInput, options: NormalizedCompo
   let changedCommerce = false;
 
   const spotRegionByDay = new Map<number, string>();
-  const firstPass: CourseItem[] = base.items.map((it) => {
+  const firstPass: CourseItem[] = templateItems.map((it) => {
     if (it.kind !== "spot") return { ...it };
     const original = spotsById.get(it.refId);
     const daySpotItems = baseSpotItemsByDay.get(it.day) ?? [];
@@ -319,7 +338,7 @@ function composeFromTemplate(input: ComposeCourseInput, options: NormalizedCompo
       input.alternativesBySpot?.[it.refId] ?? [],
       usedSpots,
       options,
-      { prev, next, mode: options.transport },
+      { prev, next, mode: options.transport, lookup: options.travelTimeLookup },
     );
     if (!picked) return { ...it };
     usedSpots.add(picked.id);
@@ -350,6 +369,7 @@ function composeFromTemplate(input: ComposeCourseInput, options: NormalizedCompo
 
   return {
     ...base,
+    dayCount: targetDayCount,
     altNote: note(changedSpotIds, changedCommerce) ?? base.altNote,
     items: sortItems(items),
   };
@@ -401,6 +421,7 @@ export function composeCourse(input: ComposeCourseInput, options: ComposeCourseO
     companion: options.companion,
     startRegion: options.startRegion,
     transport: options.transport ?? "car",
+    travelTimeLookup: options.travelTimeLookup ?? approxTravelTimeLookup,
     maxSpotsPerDay: options.maxSpotsPerDay ?? spotsPerDayForPace(options.pace),
   };