{"parentUuid":null,"isSidechain":true,"promptId":"5133440f-aae7-476a-a711-d167704ffd2e","agentId":"a032ed5c48b5f9fc9","type":"user","message":{"role":"user","content":"Sea & Catch (낚시가자) 앱 낚시 예약 기능의 UI + 알람 태스크를 적용하라. 작업 디렉토리: `/home/lucas/Android-app/SeaAndCatch/app`. 브랜치 main. 코드 주석은 아래 한국어 그대로. **push 금지**.\n\n이미 존재(이전 태스크): `src/lib/reservationTypes.ts`(Reservation/ResStyle/ResStatus/AlarmLeads/STYLE_LABEL/STATUS_LABEL/LEADS/leadDate/notifId/buildSchedules), `src/lib/reservations.ts`(addReservation/updateReservation/removeReservation/getReservation/listByMonth), `src/lib/db.ts`. `@capacitor/local-notifications@8.2.0` 설치됨. `src/lib/store.ts`에 `useSpot()`(setSpot), `src/lib/api.ts`에 `api.tide(spot, date)`(spot은 {id,name,lat,lon}), `src/lib/types.ts`에 `TideDay`(events[], multtae?) 있음.\n\n**빌드 순서 주의**: `TideTable.tsx`가 `alarms.ts`/`ReservationForm`/`ReservationDetail`를 import하므로, 먼저 alarms.ts와 세 컴포넌트를 만든 뒤 TideTable을 수정하고 마지막에 빌드하라. 중간 빌드는 깨질 수 있다.\n\n아래 순서대로 파일을 생성/수정하라. 코드는 그대로 사용.\n\n=== 1) `app/src/lib/alarms.ts` 생성 ===\n```ts\n// 예약 → 로컬 알림 스케줄/취소 — @capacitor/local-notifications\nimport { LocalNotifications } from \"@capacitor/local-notifications\";\nimport { buildSchedules, notifId, LEADS } from \"./reservationTypes\";\nimport type { Reservation } from \"./reservationTypes\";\n\n// 최초 호출 시 권한 요청 — 거부 시 false\nexport async function ensurePermission(): Promise {\n const cur = await LocalNotifications.checkPermissions();\n if (cur.display === \"granted\") return true;\n const req = await LocalNotifications.requestPermissions();\n return req.display === \"granted\";\n}\n\n// 예약의 모든 리드 알림 취소 (수정/삭제 전 호출)\nexport async function cancelAlarms(resId: string): Promise {\n const ids = LEADS.map((_, i) => ({ id: notifId(resId, i) }));\n try { await LocalNotifications.cancel({ notifications: ids }); } catch { /* 없으면 무시 */ }\n}\n\n// 기존 알림 취소 후, 켜진 미래 리드만 재스케줄\nexport async function syncAlarms(res: Reservation): Promise {\n await cancelAlarms(res.id);\n if (res.status === \"canceled\") return;\n const granted = await ensurePermission();\n if (!granted) return;\n const schedules = buildSchedules(res, new Date());\n if (schedules.length === 0) return;\n await LocalNotifications.schedule({\n notifications: schedules.map((s) => ({\n id: s.id,\n title: `낚시 ${LEADS[s.lead].label} — ${res.date}`,\n body: `${res.species || \"낚시\"} · ${res.place || \"\"}${res.charter ? \" · \" + res.charter : \"\"}`,\n schedule: { at: s.at },\n extra: { reservationId: res.id },\n })),\n });\n}\n```\n\n=== 2) `app/android/app/src/main/AndroidManifest.xml` 수정 ===\n`` 안, `` 시작 전에 한 줄 추가:\n```xml\n \n```\n\n=== 3) `app/src/components/ReservationSheet.tsx` 생성 ===\n```tsx\n// 날짜 탭 시 하단 시트 — 그날 예약 목록 + 추가 버튼\nimport type { Reservation } from \"../lib/reservationTypes\";\nimport { STYLE_LABEL, STATUS_LABEL } from \"../lib/reservationTypes\";\n\ninterface Props {\n date: string;\n items: Reservation[];\n onAdd: () => void;\n onOpen: (r: Reservation) => void;\n onClose: () => void;\n}\n\nexport function ReservationSheet({ date, items, onAdd, onOpen, onClose }: Props) {\n return (\n
\n
e.stopPropagation()}>\n
\n

{date} 예약

\n {items.length === 0 &&

등록된 예약이 없습니다.

}\n
    \n {items.map((r) => (\n
  • onOpen(r)}>\n {r.species || \"(어종 미정)\"}\n {STYLE_LABEL[r.style]} · {r.place || \"장소 미정\"}\n {STATUS_LABEL[r.status]}\n
    • \n ))}\n
\n \n
\n
\n );\n}\n```\n\n=== 4) `app/src/components/ReservationForm.tsx` 생성 ===\n```tsx\n// 예약 등록/수정 폼 — 필드 입력 + 해당 날짜 물때 미리보기 + 저장 시 알람 동기화\nimport { useEffect, useState } from \"react\";\nimport { api } from \"../lib/api\";\nimport { addReservation, updateReservation } from \"../lib/reservations\";\nimport { syncAlarms } from \"../lib/alarms\";\nimport { LEADS, STYLE_LABEL, STATUS_LABEL } from \"../lib/reservationTypes\";\nimport type { Reservation, ResStyle, ResStatus, AlarmLeads } from \"../lib/reservationTypes\";\nimport type { TideDay } from \"../lib/types\";\n\nconst STYLES: ResStyle[] = [\"boat\", \"rock\", \"walk\"];\nconst STATUSES: ResStatus[] = [\"planned\", \"done\", \"canceled\"];\n\nfunction newId(): string {\n return \"r\" + Date.now().toString(36) + Math.floor(Math.random() * 1e6).toString(36);\n}\n\ninterface Props {\n date: string;\n initial: Reservation | null;\n onSaved: () => void;\n onCancel: () => void;\n}\n\nexport function ReservationForm({ date, initial, onSaved, onCancel }: Props) {\n const [r, setR] = useState(initial ?? {\n id: newId(), date, departTime: \"05:00\", species: \"\", place: \"\", spotId: null,\n lat: null, lon: null, style: \"boat\", price: null, charter: \"\", charterPhone: null,\n status: \"planned\", memo: \"\", alarmTime: \"08:00\",\n alarmLeads: { w1: true, d3: true, d1: true, d0: true }, createdAt: Date.now(),\n });\n const [tide, setTide] = useState(null);\n const [saving, setSaving] = useState(false);\n\n // 지점 좌표가 있으면 그 날짜 물때 미리보기\n useEffect(() => {\n if (r.lat == null || r.lon == null) { setTide(null); return; }\n api.tide({ id: r.spotId ?? \"MDL\", name: r.place, lat: r.lat, lon: r.lon }, r.date)\n .then(setTide).catch(() => setTide(null));\n }, [r.lat, r.lon, r.spotId, r.date, r.place]);\n\n const set = (k: K, v: Reservation[K]) => setR((p) => ({ ...p, [k]: v }));\n const toggleLead = (k: keyof AlarmLeads) => setR((p) => ({ ...p, alarmLeads: { ...p.alarmLeads, [k]: !p.alarmLeads[k] } }));\n\n async function save() {\n setSaving(true);\n try {\n if (initial) await updateReservation(r); else await addReservation(r);\n await syncAlarms(r);\n onSaved();\n } catch (e) {\n alert(\"저장 실패: \" + String(e));\n setSaving(false);\n }\n }\n\n return (\n
\n
e.stopPropagation()}>\n
\n

{initial ? \"예약 수정\" : \"예약 추가\"} · {r.date}

\n\n \n \n\n
\n \n \n
\n\n
\n {STYLES.map((s) => (\n \n ))}\n
\n\n \n \n