From 6fb2fce5d57e30e34753e3d141bdc4e29b584e74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=84=B1=ED=83=9C=EA=B2=BD?= <taegyeong0320@naver.com>
Date: Sun, 15 Mar 2026 20:20:08 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=A9=94=EB=AA=A8=20=EC=9E=91=EC=84=B1?=
 =?UTF-8?q?=20API=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/memo.ts                         | 13 +++++
 src/components/recording/MemoTab.tsx    | 71 ++++++++++++++++---------
 src/components/recording/RightPanel.tsx |  4 +-
 src/pages/RecordingPage.tsx             | 12 ++++-
 4 files changed, 72 insertions(+), 28 deletions(-)
 create mode 100644 src/api/memo.ts

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<void> {
+  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<void>;
 }
 
-export default function MemoTab({ memos }: MemoTabProps) {
-  if (memos.length === 0) {
-    return (
-      <div className="px-[32px] pt-[35px]">
-        <p className="text-[16px] leading-normal font-medium text-black">
-          ✍️ 중요한 포인트인가요?
-          <br />
-          여기에 기록하세요.
-        </p>
-        <p className="mt-[24px] ml-5 text-[15px] text-[#727272]">
-          메모를 여기에 시작해보세요!
-        </p>
-      </div>
-    );
-  }
+export default function MemoTab({ memos, onSubmit }: MemoTabProps) {
+  const [text, setText] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      const trimmed = text.trim();
+      if (!trimmed) return;
+      setIsSubmitting(true);
+      await onSubmit(trimmed);
+      setText('');
+      setIsSubmitting(false);
+    }
+  };
 
   return (
-    <div className="flex flex-col gap-[16px] px-[35px] pt-[26px]">
-      {memos.map((memo, index) => (
-        <div key={index}>
-          <p className="text-[16px] leading-normal font-bold text-[#c4c4c4]">
-            {memo.timestamp}
-          </p>
-          <p className="text-[16px] leading-normal whitespace-pre-wrap text-black">
-            {memo.content}
-          </p>
+    <div className="flex h-full flex-col px-[32px] pt-[35px] pb-[24px]">
+      <p className="text-[16px] leading-normal font-medium text-black">
+        ✍️ 중요한 포인트인가요?
+        <br />
+        여기에 기록하세요.
+      </p>
+
+      {memos.length > 0 && (
+        <div className="mt-[24px] flex flex-col gap-[16px]">
+          {memos.map((memo, index) => (
+            <div key={index}>
+              <p className="text-[16px] leading-normal font-bold text-[#c4c4c4]">
+                {memo.timestamp}
+              </p>
+              <p className="text-[16px] leading-normal whitespace-pre-wrap text-black">
+                {memo.content}
+              </p>
+            </div>
+          ))}
         </div>
-      ))}
+      )}
+
+      <textarea
+        className="mt-[24px] flex-1 resize-none text-[15px] text-black outline-none placeholder:text-[#727272]"
+        placeholder="메모를 여기에 시작해보세요!"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        disabled={isSubmitting}
+      />
     </div>
   );
 }
diff --git a/src/components/recording/RightPanel.tsx b/src/components/recording/RightPanel.tsx
index ec63880..66c2388 100644
--- a/src/components/recording/RightPanel.tsx
+++ b/src/components/recording/RightPanel.tsx
@@ -8,12 +8,14 @@ type Tab = 'summary' | 'memo';
 interface RightPanelProps {
   memos: MemoEntry[];
   summaries: string[];
+  onMemoSubmit: (text: string) => Promise<void>;
   defaultTab?: Tab;
 }
 
 export default function RightPanel({
   memos,
   summaries,
+  onMemoSubmit,
   defaultTab = 'summary',
 }: RightPanelProps) {
   const [activeTab, setActiveTab] = useState<Tab>(defaultTab);
@@ -54,7 +56,7 @@ export default function RightPanel({
 
       {/* 탭 콘텐츠 */}
       <div className="flex-1 overflow-y-auto">
-        {activeTab === 'summary' ? <SummaryTab summaries={summaries} /> : <MemoTab memos={memos} />}
+        {activeTab === 'summary' ? <SummaryTab summaries={summaries} /> : <MemoTab memos={memos} onSubmit={onMemoSubmit} />}
       </div>
     </div>
   );
diff --git a/src/pages/RecordingPage.tsx b/src/pages/RecordingPage.tsx
index f941635..e19f3da 100644
--- a/src/pages/RecordingPage.tsx
+++ b/src/pages/RecordingPage.tsx
@@ -6,7 +6,8 @@ import RightPanel from '@/components/recording/RightPanel';
 import RecordingBar from '@/components/recording/RecordingBar';
 import { useSocket } from '@/hooks/useSocket';
 import { createAudioCapture, type AudioCapture } from '@/utils/audioCapture';
-import type { TranscriptEntry } from '@/types/recording';
+import type { TranscriptEntry, MemoEntry } from '@/types/recording';
+import { createMemo } from '@/api/memo';
 
 const DAY_NAMES = ['일', '월', '화', '수', '목', '금', '토'];
 
@@ -33,6 +34,7 @@ function formatElapsed(ms: number): string {
 export default function RecordingPage() {
   const [entries, setEntries] = useState<TranscriptEntry[]>([]);
   const [summaries, setSummaries] = useState<string[]>([]);
+  const [memos, setMemos] = useState<MemoEntry[]>([]);
   const [isRecording, setIsRecording] = useState(false);
   const [isPaused, setIsPaused] = useState(false);
 
@@ -113,6 +115,12 @@ export default function RecordingPage() {
     setEntries([]);
   }, [disconnect]);
 
+  const handleMemoSubmit = useCallback(async (text: string) => {
+    const elapsed = Math.floor(getElapsed() / 1000);
+    await createMemo(text, elapsed);
+    setMemos((prev) => [...prev, { timestamp: formatElapsed(elapsed * 1000), content: text }]);
+  }, [getElapsed]);
+
   return (
     <div className="flex h-screen w-full">
       <Sidebar />
@@ -131,7 +139,7 @@ export default function RecordingPage() {
           <div className="flex-1 overflow-y-auto">
             <TranscriptArea entries={entries} />
           </div>
-          <RightPanel memos={[]} summaries={summaries} defaultTab="summary" />
+          <RightPanel memos={memos} summaries={summaries} onMemoSubmit={handleMemoSubmit} defaultTab="summary" />
         </div>
       </div>