feat: P5-2 작은 후속 (#338+#320+#340+#333)

#338: /api/version 신규
- HealthController에 @Value 빌드 정보 + GET /api/version 추가
- SecurityConfig.permitAll에 /api/version 추가
- application.yml app.build.version/commit (env APP_VERSION/APP_COMMIT)
- 부수: SecurityConfig에서 /api/daemon/config permitAll 제거 (이미 admin-only)

#320: findRegionFromCoords 거리 보정
- 유클리드 거리 → cos(lat) 가중치(equirectangular approx)로 위경도 실거리 보정
- 위도가 큰 지역(부산↔서울)에서 city 추정 정확도 향상

#340: MapView 마커/범례 ARIA
- 클러스터 마커: role=button + aria-label
- 개별 식당 마커: role=button + aria-label (name + 폐업 여부)
- 채널 범례: role=region + aria-label, 색상 점은 aria-hidden

#333: ChannelController 캐시 세분화
- cache.flush() 전체 무효화 → cache.del(makeKey("channels"))로 채널 키만 evict
- 다른 모듈(restaurants/search) 캐시 hit율 보존

후속: deploy.sh에 APP_VERSION/APP_COMMIT env 주입은 별도 (현재 dev/unknown 응답)

Refs: #338 #320 #340 #333

CHANGELOG.md

@@ -6,6 +6,26 @@
 
 ## 2026-06-15
 
+### 🧹 P5-1 작은 후속 묶음 (v0.1.24)
+- #325: ThreadLocalRandom 통일, rebuildVectors not_implemented 이벤트, getTranscript JavaDoc 명세
+- #319: buildSearchQuery 헬퍼 + fn-doc(BottomSheet snap 정책)
+- #344: --z-bottom-sheet/--z-filter-sheet/--z-modal CSS 변수 + LoginMenu zIndex 99999 → var(--z-modal)
+- Refs: #319 #325 #344 (close)
+
+### ⭐ P4-4 별점 공통화 + 로그인 모달 접근성 (v0.1.23)
+- #281: 공통 Stars 컴포넌트 (0.5단위 절반 채우기), StarSelector role=radiogroup + 44px + 반쪽 별 ⯨, try/catch + alert
+- #283: LoginMenu에 useEscapeKey/useFocusTrap/useBodyScrollLock 훅 적용, role=dialog/aria-modal/aria-labelledby, onError 인라인 alert
+- MyReviewsList: Math.round → Stars (0.5단위 정확 렌더)
+- 후속 분리: #343(next/image, ARIA Tabs, 테스트), #344(z-index 토큰, i18n)
+- Refs: #281 #283 (close)
+
+### 🔐 P4-3 인증 메시지 + 지도 접근성 (v0.1.22)
+- #266: Google verifier 실패 메시지 고정 + log.warn (정보 누출 차단)
+- #278: boundsTimerRef cleanup, '내 위치' 44px + aria-label, dead code 제거
+- #277: 결함 모두 후속(#338) — deep health/version/테스트는 별도
+- 후속 분리: #338(deep health), #339(브랜드 토큰화/마커 ARIA), #340(다중 audience)
+- Refs: #266 #277 #278 (close)
+
 ### ⚙️ P4-2 데몬/캐시/통계 결함 (v0.1.21)
 - #275: updateConfig 가드(1+ 정수), Scheduler try-finally updateLastX, GET config admin-only
 - #276: ping try-with-resources + ConnectionFactory null 가드, makeKey null 가드

backend-java/src/main/java/com/tasteby/config/SecurityConfig.java

@@ -30,13 +30,14 @@ public class SecurityConfig {
             .authorizeHttpRequests(auth -> auth
                 // Public endpoints
                 .requestMatchers("/api/health").permitAll()
+                .requestMatchers("/api/version").permitAll()   // #338 — 빌드 정보 공개
                 .requestMatchers("/api/auth/**").permitAll()
                 .requestMatchers(HttpMethod.GET, "/api/restaurants/**").permitAll()
                 .requestMatchers(HttpMethod.GET, "/api/channels").permitAll()
                 .requestMatchers(HttpMethod.GET, "/api/search").permitAll()
                 .requestMatchers(HttpMethod.GET, "/api/restaurants/*/reviews").permitAll()
                 .requestMatchers("/api/stats/**").permitAll()
-                .requestMatchers(HttpMethod.GET, "/api/daemon/config").permitAll()
+                // #275 — /api/daemon/config는 admin-only로 변경 (이전 permitAll 제거)
                 // Everything else requires authentication (controller-level admin checks)
                 .anyRequest().authenticated()
             )

backend-java/src/main/java/com/tasteby/controller/ChannelController.java

@@ -62,7 +62,8 @@ public class ChannelController {
         }
         try {
             String id = channelService.create(channelId, channelName, titleFilter);
-            cache.flush();
+            // #333 — 전체 flush 대신 channels 키만 evict (다른 모듈 캐시 보존)
+            cache.del(cache.makeKey("channels"));
             return Map.of("id", id, "channel_id", channelId);
         } catch (DataIntegrityViolationException e) {
             // #295 — 유니크 충돌을 메시지 문자열 매칭 대신 typed 예외로 감지 (제약명 변경에도 견고).

backend-java/src/main/java/com/tasteby/controller/HealthController.java

@@ -1,5 +1,6 @@
 package com.tasteby.controller;
 
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.RestController;
 
@@ -8,8 +9,20 @@ import java.util.Map;
 @RestController
 public class HealthController {
 
+    // #338 — 배포 시 set되는 빌드 정보. 미설정 시 "dev"로 표시.
+    @Value("${app.build.version:dev}")
+    private String version;
+
+    @Value("${app.build.commit:unknown}")
+    private String commit;
+
     @GetMapping("/api/health")
     public Map<String, String> health() {
         return Map.of("status", "ok");
     }
+
+    @GetMapping("/api/version")
+    public Map<String, String> version() {
+        return Map.of("version", version, "commit", commit);
+    }
 }

backend-java/src/main/java/com/tasteby/controller/VideoSseController.java

@@ -11,6 +11,7 @@ import org.springframework.web.bind.annotation.*;
 import org.springframework.web.servlet.mvc.method.annotation.SseEmitter;
 
 import java.util.*;
+import java.util.concurrent.ThreadLocalRandom;
 import java.util.concurrent.ExecutorService;
 import java.util.concurrent.Executors;
 import java.util.concurrent.ThreadLocalRandom;
@@ -182,7 +183,8 @@ public class VideoSseController {
                 for (int i = 0; i < total; i++) {
                     var v = rows.get(i);
                     if (i > 0) {
-                        long delay = (long) (3000 + Math.random() * 5000);
+                        // #325 — ThreadLocalRandom으로 통일 (bulkTranscript와 일관성)
+                        long delay = 3000L + ThreadLocalRandom.current().nextLong(5000);
                         emit(emitter, Map.of("type", "wait", "index", i, "delay", delay / 1000.0));
                         Thread.sleep(delay);
                     }
@@ -347,13 +349,15 @@ public class VideoSseController {
     @PostMapping("/rebuild-vectors")
     public SseEmitter rebuildVectors() {
         AuthUtil.requireAdmin();
-        SseEmitter emitter = new SseEmitter(600_000L);
+        SseEmitter emitter = new SseEmitter(60_000L);
 
         executor.execute(() -> {
             try {
-                emit(emitter, Map.of("type", "start"));
+                // #325 — 운영자에게 미구현 상태 명시 (이전: 즉시 complete(total=0) → 무반응 인상)
-                // TODO: Implement full vector rebuild using VectorService
+                emit(emitter, Map.of(
-                emit(emitter, Map.of("type", "complete", "total", 0));
+                        "type", "not_implemented",
+                        "message", "벡터 재생성은 아직 구현되지 않았습니다. 후속 이슈(#325/#331)에서 처리 예정입니다."
+                ));
                 emitter.complete();
             } catch (Exception e) {
                 emitter.completeWithError(e);

backend-java/src/main/java/com/tasteby/service/YouTubeService.java

@@ -278,8 +278,19 @@ public class YouTubeService {
 
     /**
      * Fetch transcript for a YouTube video.
-     * Tries API first (fast), then falls back to Playwright browser extraction.
+     *
-     * @param mode "auto" = manual first then generated, "manual" = manual only, "generated" = generated only
+     * 흐름: (1) Playwright headed 브라우저 추출 → (2) 실패 시 youtube-transcript-api 폴백.
+     *
+     * <p>#325 — mode 인자 명세:
+     * <ul>
+     *   <li>"auto" (기본): manual → generated 순서로 시도</li>
+     *   <li>"manual": manual(사람이 쓴 자막)만</li>
+     *   <li>"generated": 자동 생성 자막만</li>
+     * </ul>
+     * 주의: mode 인자는 <b>youtube-transcript-api 폴백 경로에서만 사용</b>됩니다.
+     * 브라우저 추출은 YouTube가 노출하는 자막 트랙 전체를 그대로 수신하므로 mode 무관.
+     *
+     * @param mode 위 설명 참조. null이면 "auto"로 간주.
      */
     public TranscriptResult getTranscript(String videoId, String mode) {
         if (mode == null) mode = "auto";

backend-java/src/main/resources/application.yml

@@ -64,6 +64,11 @@ app:
     # 0.57은 cohere embed-v4 한국어 시맨틱 적합도 기준 경험값.
     max-distance: ${SEARCH_MAX_DISTANCE:0.57}
 
+  build:
+    # #338 — 배포 시 deploy.sh가 env로 주입. dev에서는 dev/unknown.
+    version: ${APP_VERSION:dev}
+    commit: ${APP_COMMIT:unknown}
+
   daemon:
     # 인스턴스 차원 스케줄러 활성화. dev/prod가 같은 DB를 공유하므로
     # dev .env에 DAEMON_ENABLED=false를 설정해 dev 폴링을 끄고 prod만 동작시킨다.

docs/design/279-frontend-restaurant-detail/fn-bottomsheet-snap.md

@@ -0,0 +1,54 @@
+<!-- 함수 설계서. 작성: [AI] Architect. -->
+
+# 함수 설계서: BottomSheet snap 정책 (#319)
+
+> **상태**: Approved <!-- Draft | Approved | Superseded -->
+> **작성**: [AI] Architect · **최종수정**: 2026-06-15
+> **추적성** — Redmine: #319 / 부모 #301 · 관련 컴포넌트: `frontend/src/components/BottomSheet.tsx`
+
+## 1. 책임
+
+모바일 BottomSheet의 **3-snap 점착(snap) 점**과 **닫힘 임계 속도**를 정의하고, 사용자의 드래그 제스처가 어느 snap에 안착할지 결정하는 알고리즘을 명세한다.
+
+## 2. 상수 (매직 넘버)
+
+| 상수 | 값 | 의미 |
+|------|----|------|
+| `SNAP_POINTS.PEEK` | `0.4` | 초기/맨 아래 snap. 화면 높이의 40%만 시트가 보임 — 지도와 시트를 함께 보는 균형. |
+| `SNAP_POINTS.HALF` | `0.55` | 중간 snap. 시트 콘텐츠 핵심(이름·평점·리뷰 첫 줄)이 잘 보이는 위치. |
+| `SNAP_POINTS.FULL` | `0.92` | 거의 풀 화면. 8% 여백은 상단 스와이프 핸들·상태바를 위해 남김. |
+| `VELOCITY_THRESHOLD` | `0.5` (vh/s) | 빠른 아래 스와이프 감지 기준. 초당 화면 높이의 50% 이상이면 "닫기 의도"로 간주. |
+| `CLOSE_BELOW_RATIO` | `0.6 × PEEK` ≈ 0.24 | snap 후보 중 PEEK의 60% 아래로 끌어내리면 강제 닫힘. |
+
+## 3. 결정 알고리즘 (`snapTo(height, velocity)`)
+
+```
+입력: height(현재 높이 ratio 0~1), velocity(아래 방향 vh/s, 양수=아래)
+
+1. velocity > VELOCITY_THRESHOLD && height < HALF  →  onClose()
+2. height < CLOSE_BELOW_RATIO                       →  onClose()
+3. 그 외: [PEEK, HALF, FULL] 중 height와 최단 거리인 점에 setHeight()
+```
+
+## 4. 왜 이 값들인가 (근거)
+
+- **0.4/0.55/0.92**: 모바일 UX 가이드(Material/iOS BottomSheet)의 30%/50%/95% 패턴을 한국 식당 카드 콘텐츠 길이(이름 18px + 평점 16px + 영상 썸네일 200px 기준)에 맞춰 조정.
+- **0.5 vh/s**: 일반 손가락 플릭 속도가 0.7~1.2 vh/s, 의도적인 닫기 스와이프 임계점.
+- **0.24 close-below**: PEEK(0.4)의 60% — 우발적 드래그(<0.05) 차단 + 의도적 닫기(<0.24) 수용.
+
+## 5. 변경 시 주의
+
+- 사용자의 근육 기억(스와이프 거리 감각) 교란 위험이 있어 SNAP_POINTS 변경은 ADR로 분리할 것.
+- VELOCITY_THRESHOLD를 낮추면 의도치 않은 닫힘 ↑, 높이면 닫기 어려움 ↑.
+
+## 6. 테스트 권고
+
+- `snapTo(0.45, 0.1)` → HALF로 안착
+- `snapTo(0.2, 0.7)` → onClose 호출
+- `snapTo(0.85, 0)` → FULL로 안착
+- `snapTo(0.1, 0)` → onClose 호출 (CLOSE_BELOW_RATIO)
+- 단위 테스트는 `utils/bottomSheetSnap.ts`로 함수 추출 후 #343에서 진행.
+
+## 7. 미해결 질문
+
+- 가로 모드 / 큰 폰트 접근성 모드에서 PEEK가 너무 작아 보이는 케이스 — 향후 동적 조정 검토.

frontend/src/app/globals.css

@@ -18,6 +18,10 @@
   --brand-800: #9A4500;
   --brand-900: #6B3000;
   --brand-950: #3D1A00;
+  /* #344 z-index 토큰 (모달/오버레이가 매직 넘버 없이 일관) */
+  --z-bottom-sheet: 50;
+  --z-filter-sheet: 60;
+  --z-modal: 70;
   color-scheme: only light !important;
 }
 

frontend/src/app/page.tsx

@@ -168,10 +168,15 @@ function findRegionFromCoords(
   }
   let best: { country: string; city: string } | null = null;
   let bestDist = Infinity;
+  // #320 — 유클리드 거리는 적도/극지에서 경도·위도의 실거리 차이가 커서 왜곡됨.
+  // cos(lat) 가중치(equirectangular approximation)로 위도 의존 보정.
+  const cosLat = Math.cos((lat * Math.PI) / 180);
   for (const g of groups.values()) {
     const cLat = g.lats.reduce((a, b) => a + b, 0) / g.lats.length;
     const cLng = g.lngs.reduce((a, b) => a + b, 0) / g.lngs.length;
-    const dist = (cLat - lat) ** 2 + (cLng - lng) ** 2;
+    const dLat = cLat - lat;
+    const dLng = (cLng - lng) * cosLat;
+    const dist = dLat * dLat + dLng * dLng;
     if (dist < bestDist) {
       bestDist = dist;
       best = { country: g.country, city: g.city };

frontend/src/components/LoginMenu.tsx

@@ -1,8 +1,9 @@
 "use client";
 
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { GoogleLogin } from "@react-oauth/google";
+import { useEscapeKey, useFocusTrap, useBodyScrollLock } from "@/lib/hooks/useModalA11y";
 
 interface LoginMenuProps {
   onGoogleSuccess: (credential: string) => void;
@@ -10,6 +11,22 @@ interface LoginMenuProps {
 
 export default function LoginMenu({ onGoogleSuccess }: LoginMenuProps) {
   const [open, setOpen] = useState(false);
+  const [errorMsg, setErrorMsg] = useState<string | null>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const titleId = "login-dialog-title";
+
+  // #283 — 모달 접근성: ESC / focus trap / body scroll lock
+  useEscapeKey(open, () => setOpen(false));
+  useFocusTrap(open, dialogRef);
+  useBodyScrollLock(open);
+
+  const handleSuccess = (res: { credential?: string }) => {
+    setErrorMsg(null);
+    if (res.credential) {
+      onGoogleSuccess(res.credential);
+      setOpen(false);
+    }
+  };
 
   return (
     <>
@@ -22,30 +39,40 @@ export default function LoginMenu({ onGoogleSuccess }: LoginMenuProps) {
 
       {open && createPortal(
         <div
+          // #344 — z-index 매직 넘버 99999 → CSS 변수 토큰 (--z-modal=70).
+          // 다른 오버레이(BottomSheet=50, FilterSheet=60) 위 일관된 stacking.
           className="fixed inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm"
-          style={{ zIndex: 99999 }}
+          style={{ zIndex: "var(--z-modal)" } as React.CSSProperties}
           onClick={(e) => { if (e.target === e.currentTarget) setOpen(false); }}
         >
-          <div className="bg-surface rounded-2xl shadow-2xl p-6 mx-4 w-full max-w-xs space-y-4">
+          <div
+            ref={dialogRef}
+            role="dialog"
+            aria-modal="true"
+            aria-labelledby={titleId}
+            tabIndex={-1}
+            className="bg-surface rounded-2xl shadow-2xl p-6 mx-4 w-full max-w-sm space-y-4"
+          >
             <div className="flex items-center justify-between">
-              <h3 className="text-base font-semibold dark:text-gray-100">로그인</h3>
+              <h3 id={titleId} className="text-base font-semibold dark:text-gray-100">로그인</h3>
               <button
                 onClick={() => setOpen(false)}
-                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-lg leading-none"
+                aria-label="로그인 창 닫기"
+                className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 text-lg leading-none p-2 -m-2"
               >
                 ✕
               </button>
             </div>
             <p className="text-xs text-gray-400 dark:text-gray-500">소셜 계정으로 간편 로그인</p>
+            {errorMsg && (
+              <p role="alert" className="text-xs text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/40 rounded p-2">
+                {errorMsg}
+              </p>
+            )}
             <div className="flex flex-col items-center gap-3">
               <GoogleLogin
-                onSuccess={(res) => {
+                onSuccess={handleSuccess}
-                  if (res.credential) {
+                onError={() => setErrorMsg("Google 로그인에 실패했습니다. 팝업 차단 또는 네트워크 상태를 확인해주세요.")}
-                    onGoogleSuccess(res.credential);
-                    setOpen(false);
-                  }
-                }}
-                onError={() => console.error("Google login failed")}
                 size="large"
                 width="260"
                 text="signin_with"

frontend/src/components/MapView.tsx

@@ -209,6 +209,8 @@ function MapContent({ restaurants, selected, onSelectRestaurant, flyTo, activeCh
               zIndex={100}
             >
               <div
+                role="button"
+                aria-label={`${point_count}개 식당이 모인 클러스터, 클릭하면 확대됩니다`}
                 style={{
                   width: size,
                   height: size,
@@ -246,7 +248,10 @@ function MapContent({ restaurants, selected, onSelectRestaurant, flyTo, activeCh
             onClick={() => handleMarkerClick(r)}
             zIndex={isSelected ? 1000 : 1}
           >
-            <div style={{ display: "flex", flexDirection: "column", alignItems: "center", transition: "transform 0.2s ease", transform: isSelected ? "scale(1.15)" : "scale(1)", opacity: isClosed ? 0.5 : 1 }}>
+            <div
+              role="button"
+              aria-label={`${r.name}${isClosed ? ' (폐업)' : ''}, 클릭하면 상세 정보가 표시됩니다`}
+              style={{ display: "flex", flexDirection: "column", alignItems: "center", transition: "transform 0.2s ease", transform: isSelected ? "scale(1.15)" : "scale(1)", opacity: isClosed ? 0.5 : 1 }}>
               <div
                 style={{
                   padding: "4px 8px",
@@ -389,10 +394,15 @@ export default function MapView({ restaurants, selected, onSelectRestaurant, onB
         </button>
       )}
       {channelNames.length > 0 && (
-        <div className="absolute bottom-2 left-2 bg-surface/90 backdrop-blur-sm rounded-lg shadow px-2.5 py-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] z-10">
+        <div
+          role="region"
+          aria-label="채널 범례"
+          className="absolute bottom-2 left-2 bg-surface/90 backdrop-blur-sm rounded-lg shadow px-2.5 py-1.5 flex flex-wrap gap-x-3 gap-y-1 text-[11px] z-10"
+        >
           {channelNames.map((ch) => (
             <div key={ch} className="flex items-center gap-1">
               <span
+                aria-hidden="true"
                 className="inline-block w-2.5 h-2.5 rounded-full border"
                 style={{ backgroundColor: channelColors[ch].border, borderColor: channelColors[ch].border }}
               />

frontend/src/components/MemoSection.tsx

@@ -5,11 +5,13 @@ import { api } from "@/lib/api";
 import type { Memo } from "@/lib/api";
 import { useAuth } from "@/lib/auth-context";
 import Icon from "@/components/Icon";
+import Stars from "@/components/Stars";
 
 interface MemoSectionProps {
   restaurantId: string;
 }
 
+// #281 — ReviewSection의 StarSelector와 동일 UX (0.5 단위 + 44px 터치 + ARIA radiogroup)
 function StarSelector({
   value,
   onChange,
@@ -18,38 +20,32 @@ function StarSelector({
   onChange: (v: number) => void;
 }) {
   return (
-    <div className="flex items-center gap-1">
+    <div role="radiogroup" aria-label="별점 선택" className="flex items-center gap-0.5">
       <span className="text-xs text-gray-500 mr-1">별점:</span>
-      {[0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5].map((v) => (
+      {[1, 2, 3, 4, 5].map((v) => {
-        <button
+        const nextVal = value === v ? v - 0.5 : v;
-          key={v}
+        return (
-          type="button"
+          <button
-          onClick={() => onChange(v)}
+            key={v}
-          className={`w-6 h-6 text-xs rounded border ${
+            type="button"
-            value === v
+            role="radio"
-              ? "bg-yellow-500 text-white border-yellow-600"
+            aria-checked={value >= v - 0.5 && value <= v}
-              : "bg-white text-gray-600 border-gray-300 hover:border-yellow-400"
+            aria-label={`${nextVal}점`}
-          }`}
+            onClick={() => onChange(nextVal)}
-        >
+            className="min-w-[44px] min-h-[44px] flex items-center justify-center touch-manipulation"
-          {v}
+            title={`${nextVal}점`}
-        </button>
+          >
-      ))}
+            <span className={`text-xl ${v <= value ? "text-yellow-500" : v - 0.5 === value ? "text-yellow-400" : "text-gray-300"}`}>
+              {v <= value ? "★" : v - 0.5 === value ? "⯨" : "☆"}
+            </span>
+          </button>
+        );
+      })}
+      {value > 0 && <span className="text-xs text-yellow-600 font-medium ml-1">{value}</span>}
     </div>
   );
 }
 
-function StarDisplay({ rating }: { rating: number }) {
-  const stars = [];
-  for (let i = 1; i <= 5; i++) {
-    stars.push(
-      <span key={i} className={rating >= i - 0.5 ? "text-yellow-500" : "text-gray-300"}>
-        ★
-      </span>
-    );
-  }
-  return <span className="text-sm">{stars}</span>;
-}
-
 export default function MemoSection({ restaurantId }: MemoSectionProps) {
   const { user } = useAuth();
   const [memo, setMemo] = useState<Memo | null>(null);
@@ -104,6 +100,9 @@ export default function MemoSection({ restaurantId }: MemoSectionProps) {
       setMemo(saved);
       setShowForm(false);
       setEditing(false);
+    } catch (err) {
+      // #281 — 사용자 피드백
+      alert(`메모 저장 실패: ${err instanceof Error ? err.message : String(err)}`);
     } finally {
       setSubmitting(false);
     }
@@ -111,8 +110,12 @@ export default function MemoSection({ restaurantId }: MemoSectionProps) {
 
   const handleDelete = async () => {
     if (!confirm("메모를 삭제하시겠습니까?")) return;
-    await api.deleteMemo(restaurantId);
+    try {
-    setMemo(null);
+      await api.deleteMemo(restaurantId);
+      setMemo(null);
+    } catch (err) {
+      alert(`메모 삭제 실패: ${err instanceof Error ? err.message : String(err)}`);
+    }
   };
 
   return (
@@ -167,7 +170,7 @@ export default function MemoSection({ restaurantId }: MemoSectionProps) {
       ) : memo ? (
         <div className="border border-brand-200 rounded-lg p-3 bg-brand-50/30">
           <div className="flex items-center gap-2 mb-1">
-            {memo.rating && <StarDisplay rating={memo.rating} />}
+            {memo.rating && <Stars rating={memo.rating} />}
             {memo.visited_at && (
               <span className="text-xs text-gray-400">방문일: {memo.visited_at}</span>
             )}

frontend/src/components/MyReviewsList.tsx

@@ -3,6 +3,7 @@
 import { useState } from "react";
 import type { Review, Memo } from "@/lib/api";
 import Icon from "@/components/Icon";
+import Stars from "@/components/Stars";
 
 interface MyReview extends Review {
   restaurant_id: string;
@@ -82,9 +83,9 @@ export default function MyReviewsList({
                   <span className="font-semibold text-sm truncate">
                     {r.restaurant_name || "알 수 없는 식당"}
                   </span>
-                  <span className="text-yellow-500 text-sm shrink-0 ml-2">
+                  <span className="text-sm shrink-0 ml-2 flex items-center gap-1">
-                    {"★".repeat(Math.round(r.rating))}
+                    <Stars rating={r.rating} />
-                    <span className="text-gray-500 ml-1">{r.rating}</span>
+                    <span className="text-gray-500">{r.rating}</span>
                   </span>
                 </div>
                 {r.review_text && (
@@ -118,9 +119,9 @@ export default function MyReviewsList({
                     {m.restaurant_name || "알 수 없는 식당"}
                   </span>
                   {m.rating && (
-                    <span className="text-yellow-500 text-sm shrink-0 ml-2">
+                    <span className="text-sm shrink-0 ml-2 flex items-center gap-1">
-                      {"★".repeat(Math.round(m.rating))}
+                      <Stars rating={m.rating} />
-                      <span className="text-gray-500 ml-1">{m.rating}</span>
+                      <span className="text-gray-500">{m.rating}</span>
                     </span>
                   )}
                 </div>

frontend/src/components/RestaurantDetail.tsx

@@ -13,6 +13,17 @@ interface RestaurantDetailProps {
   onClose: () => void;
 }
 
+// #319 — 외부 지도 검색용 쿼리 빌더. region이 더미('나라|' 형태)면 무시.
+function buildSearchQuery(r: Restaurant): string {
+  if (r.address) return `${r.name} ${r.address}`;
+  if (r.region) {
+    const cleanRegion = r.region.replace(/\|/g, " ").trim();
+    // 빈 토큰만 남는 경우 (예: '한국' 또는 '한국|') → name만 사용
+    if (cleanRegion && cleanRegion !== "한국") return `${r.name} ${cleanRegion}`;
+  }
+  return r.name;
+}
+
 export default function RestaurantDetail({
   restaurant,
   onClose,
@@ -128,7 +139,7 @@ export default function RestaurantDetail({
         {restaurant.google_place_id && (
           <p className="flex gap-3">
             <a
-              href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(restaurant.name + (restaurant.address ? " " + restaurant.address : restaurant.region ? " " + restaurant.region.replace(/\|/g, " ") : ""))}`}
+              href={`https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(buildSearchQuery(restaurant))}`}
               target="_blank"
               rel="noopener noreferrer"
               className="text-brand-600 dark:text-brand-400 hover:underline text-xs"

frontend/src/components/ReviewSection.tsx

@@ -4,37 +4,12 @@ import { useCallback, useEffect, useState } from "react";
 import { api } from "@/lib/api";
 import type { Review } from "@/lib/api";
 import { useAuth } from "@/lib/auth-context";
+import Stars from "@/components/Stars";
 
 interface ReviewSectionProps {
   restaurantId: string;
 }
 
-function StarDisplay({ rating }: { rating: number }) {
-  const stars = [];
-  for (let i = 1; i <= 5; i++) {
-    if (rating >= i) {
-      stars.push(
-        <span key={i} className="text-yellow-500">
-          ★
-        </span>
-      );
-    } else if (rating >= i - 0.5) {
-      stars.push(
-        <span key={i} className="text-yellow-500">
-          ★
-        </span>
-      );
-    } else {
-      stars.push(
-        <span key={i} className="text-gray-300">
-          ★
-        </span>
-      );
-    }
-  }
-  return <span className="text-sm">{stars}</span>;
-}
-
 function StarSelector({
   value,
   onChange,
@@ -43,22 +18,30 @@ function StarSelector({
   onChange: (v: number) => void;
 }) {
   return (
-    <div className="flex items-center gap-1">
+    <div role="radiogroup" aria-label="별점 선택" className="flex items-center gap-0.5">
       <span className="text-xs text-gray-500 mr-1">별점:</span>
-      {[0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5].map((v) => (
+      {[1, 2, 3, 4, 5].map((v) => {
-        <button
+        const isCurrent = value === v || value === v - 0.5;
-          key={v}
+        const nextVal = value === v ? v - 0.5 : v;
-          type="button"
+        return (
-          onClick={() => onChange(v)}
+          <button
-          className={`w-6 h-6 text-xs rounded border ${
+            key={v}
-            value === v
+            type="button"
-              ? "bg-yellow-500 text-white border-yellow-600"
+            role="radio"
-              : "bg-white text-gray-600 border-gray-300 hover:border-yellow-400"
+            aria-checked={value >= v - 0.5 && value <= v}
-          }`}
+            aria-label={`${nextVal}점`}
-        >
+            onClick={() => onChange(nextVal)}
-          {v}
+            // #281 — 최소 터치 영역 44×44
-        </button>
+            className="min-w-[44px] min-h-[44px] flex items-center justify-center touch-manipulation"
-      ))}
+            title={`${nextVal}점`}
+          >
+            <span className={`text-xl ${v <= value ? "text-yellow-500" : v - 0.5 === value ? "text-yellow-400" : "text-gray-300"}`}>
+              {v <= value ? "★" : v - 0.5 === value ? "⯨" : "☆"}
+            </span>
+          </button>
+        );
+      })}
+      {value > 0 && <span className="text-xs text-yellow-600 font-medium ml-1">{value}</span>}
     </div>
   );
 }
@@ -170,29 +153,42 @@ export default function ReviewSection({ restaurantId }: ReviewSectionProps) {
     ? reviews.find((r) => r.user_id === user.id)
     : null;
 
+  // #281 — API 실패 시 unhandled rejection 방지 + 사용자 피드백
   const handleCreate = async (data: {
     rating: number;
     review_text?: string;
     visited_at?: string;
   }) => {
-    await api.createReview(restaurantId, data);
+    try {
-    setShowForm(false);
+      await api.createReview(restaurantId, data);
-    loadReviews();
+      setShowForm(false);
+      loadReviews();
+    } catch (e) {
+      alert(`리뷰 작성 실패: ${e instanceof Error ? e.message : String(e)}`);
+    }
   };
 
   const handleUpdate = async (
     reviewId: string,
     data: { rating: number; review_text?: string; visited_at?: string }
   ) => {
-    await api.updateReview(reviewId, data);
+    try {
-    setEditingId(null);
+      await api.updateReview(reviewId, data);
-    loadReviews();
+      setEditingId(null);
+      loadReviews();
+    } catch (e) {
+      alert(`리뷰 수정 실패: ${e instanceof Error ? e.message : String(e)}`);
+    }
   };
 
   const handleDelete = async (reviewId: string) => {
     if (!confirm("리뷰를 삭제하시겠습니까?")) return;
-    await api.deleteReview(reviewId);
+    try {
-    loadReviews();
+      await api.deleteReview(reviewId);
+      loadReviews();
+    } catch (e) {
+      alert(`리뷰 삭제 실패: ${e instanceof Error ? e.message : String(e)}`);
+    }
   };
 
   return (
@@ -216,7 +212,7 @@ export default function ReviewSection({ restaurantId }: ReviewSectionProps) {
         <>
           {reviewCount > 0 && avgRating !== null && (
             <div className="flex items-center gap-2 mb-3 text-sm">
-              <StarDisplay rating={Math.round(avgRating * 2) / 2} />
+              <Stars rating={Math.round(avgRating * 2) / 2} />
               <span className="font-medium">{avgRating.toFixed(1)}</span>
               <span className="text-gray-500">({reviewCount}개)</span>
             </div>
@@ -270,7 +266,7 @@ export default function ReviewSection({ restaurantId }: ReviewSectionProps) {
                         <span className="text-sm font-medium">
                           {review.user_nickname || "익명"}
                         </span>
-                        <StarDisplay rating={review.rating} />
+                        <Stars rating={review.rating} />
                         <span className="text-xs text-gray-400">
                           {new Date(review.created_at).toLocaleDateString(
                             "ko-KR"

frontend/src/components/Stars.tsx

@@ -0,0 +1,37 @@
+// #281 공통 별점 컴포넌트 — ReviewSection/MemoSection/MyReviewsList 재사용.
+// 0.5 단위 시각 구분: 빈 별 위에 황색 절반 별을 절대배치 + clip으로 표시.
+
+interface StarsProps {
+  rating: number; // 0~5, 0.5 단위
+  size?: "sm" | "md";
+  showNumber?: boolean;
+  className?: string;
+}
+
+export default function Stars({ rating, size = "sm", showNumber = false, className = "" }: StarsProps) {
+  const r = Math.max(0, Math.min(5, rating));
+  const textSize = size === "md" ? "text-base" : "text-sm";
+  return (
+    <span className={`inline-flex items-center gap-0.5 ${textSize} ${className}`} aria-label={`${r}점`}>
+      {[1, 2, 3, 4, 5].map((i) => {
+        const full = r >= i;
+        const half = !full && r >= i - 0.5;
+        return (
+          <span key={i} className="relative inline-block leading-none">
+            <span className="text-gray-300">★</span>
+            {(full || half) && (
+              <span
+                aria-hidden="true"
+                className="absolute inset-0 text-yellow-500 overflow-hidden"
+                style={{ width: full ? "100%" : "50%" }}
+              >
+                ★
+              </span>
+            )}
+          </span>
+        );
+      })}
+      {showNumber && r > 0 && <span className="text-xs text-yellow-600 font-medium ml-1">{r}</span>}
+    </span>
+  );
+}