diff --git a/src/api/memo.ts b/src/api/memo.ts new file mode 100644 index 0000000..f4e729c --- /dev/null +++ b/src/api/memo.ts @@ -0,0 +1,13 @@ +import axios from 'axios'; + +const API_URL = import.meta.env.VITE_API_URL as string; +const CONTENT_ID = 1; + +export async function createMemo(memoText: string, timestamp: number): Promise { + await axios.post(`${API_URL}/memo/${CONTENT_ID}`, { memoText, timestamp }); +} + +export async function getMemos(): Promise<{ memoText: string; timestamp: number }[]> { + const res = await axios.get(`${API_URL}/memo/${CONTENT_ID}`); + return res.data.data ?? []; +} diff --git a/src/components/recording/MemoTab.tsx b/src/components/recording/MemoTab.tsx index a80e82e..25b09fb 100644 --- a/src/components/recording/MemoTab.tsx +++ b/src/components/recording/MemoTab.tsx @@ -1,37 +1,58 @@ +import { useState } from 'react'; import type { MemoEntry } from '@/types/recording'; interface MemoTabProps { memos: MemoEntry[]; + onSubmit: (text: string) => Promise; } -export default function MemoTab({ memos }: MemoTabProps) { - if (memos.length === 0) { - return ( -
-

- ✍️ 중요한 포인트인가요? -
- 여기에 기록하세요. -

-

- 메모를 여기에 시작해보세요! -

-
- ); - } +export default function MemoTab({ memos, onSubmit }: MemoTabProps) { + const [text, setText] = useState(''); + const [isSubmitting, setIsSubmitting] = useState(false); + + const handleKeyDown = async (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault(); + const trimmed = text.trim(); + if (!trimmed) return; + setIsSubmitting(true); + await onSubmit(trimmed); + setText(''); + setIsSubmitting(false); + } + }; return ( -
- {memos.map((memo, index) => ( -
-

- {memo.timestamp} -

-

- {memo.content} -

+
+

+ ✍️ 중요한 포인트인가요? +
+ 여기에 기록하세요. +

+ + {memos.length > 0 && ( +
+ {memos.map((memo, index) => ( +
+

+ {memo.timestamp} +

+

+ {memo.content} +

+
+ ))}
- ))} + )} + +