You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
// frontend/components/inbox/CaptureComposer.tsx
|
|
"use client";
|
|
import { useState } from "react";
|
|
import { Icon } from "@/components/Icon";
|
|
|
|
// MVP 스텁: 음성/이미지는 더미 transcript/caption 주입
|
|
const VOICE_STUB = "음성 메모 0:09 — 엄마 생신 선물 미리 알아보기";
|
|
const IMAGE_STUB = "이미지 캡처 — 영수증/스크린샷 (자동 인식 결과)";
|
|
|
|
export default function CaptureComposer({
|
|
onSubmit,
|
|
}: {
|
|
onSubmit: (raw: string, kind: "text" | "voice" | "image") => void;
|
|
}) {
|
|
const [input, setInput] = useState("");
|
|
|
|
const submitText = () => {
|
|
const t = input.trim();
|
|
if (!t) return;
|
|
onSubmit(t, "text");
|
|
setInput("");
|
|
};
|
|
|
|
return (
|
|
<div className="sb-cmd">
|
|
<Icon name="spark" />
|
|
<input
|
|
value={input}
|
|
onChange={(e) => setInput(e.target.value)}
|
|
onKeyDown={(e) => e.key === "Enter" && submitText()}
|
|
placeholder="갑자기 생각난 것 아무거나… 예) 다음 주 한국 가는 비행기 티켓 사기"
|
|
aria-label="인박스에 빠르게 캡처"
|
|
/>
|
|
<button
|
|
className="sb-mode"
|
|
aria-label="음성으로 캡처(MVP 스텁)"
|
|
title="음성 입력은 MVP에서 더미 메모로 동작합니다"
|
|
onClick={() => onSubmit(VOICE_STUB, "voice")}
|
|
>
|
|
<Icon name="mic" />
|
|
</button>
|
|
<button
|
|
className="sb-mode"
|
|
aria-label="이미지로 캡처(MVP 스텁)"
|
|
title="이미지 입력은 MVP에서 더미 캡션으로 동작합니다"
|
|
onClick={() => onSubmit(IMAGE_STUB, "image")}
|
|
>
|
|
<Icon name="image" />
|
|
</button>
|
|
<button className="sb-send" onClick={submitText} aria-label="보내기">
|
|
<Icon name="arrow" />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|