i editor

package.json

@@ -15,6 +15,8 @@
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-fs": "^2.0.3",
     "@tauri-apps/plugin-shell": "^2",
+    "@tiptap/extension-highlight": "^2.10.3",
+    "@tiptap/extension-typography": "^2.10.3",
     "@tiptap/pm": "^2.10.3",
     "@tiptap/react": "^2.10.3",
     "@tiptap/starter-kit": "^2.10.3",

src/components/NoteControl.tsx → src/components/note/NoteControl.tsx

@@ -1,4 +1,4 @@
-import type { Note } from "../types";
+import type { Note } from "../../types";
 
 interface NoteControlProps {
   note: Note | null;

src/components/note/NoteEditor.tsx

@@ -0,0 +1,72 @@
+import "../../styles/editor.css";
+
+import { EditorContent, useEditor } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Highlight from "@tiptap/extension-highlight";
+import Typography from "@tiptap/extension-typography";
+import { useEffect } from "react";
+
+interface NoteEditorProps {
+  content: string;
+  onChange: (content: string) => void;
+}
+
+export default function NoteEditor({ content, onChange }: NoteEditorProps) {
+  const editor = useEditor({
+    extensions: [StarterKit, Highlight, Typography],
+    content,
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+    editorProps: {
+      attributes: {
+        class: "focus:outline-none",
+      },
+      handleDOMEvents: {
+        keydown: (view, event) => {
+          // Tab 키 이벤트 방지
+          if (event.key === "Tab") {
+            return true;
+          }
+          return false;
+        },
+      },
+      // 자동 수정 비활성화
+      transformPastedText: (text) => text,
+      transformPastedHTML: (html) => html,
+    },
+    enableInputRules: false,
+    enablePasteRules: false,
+  });
+
+  useEffect(() => {
+    if (editor && editor.getHTML() !== content) {
+      editor.commands.setContent(content);
+    }
+  }, [content, editor]);
+
+  return (
+    <div
+      className="h-full w-full p-4 px-6"
+      onClick={(e) => {
+        if (!editor) return;
+
+        // 클릭한 위치의 Y 좌표
+        const clickY = e.clientY;
+        // 에디터의 마지막 위치의 Y 좌표
+        const editorRect = editor.view.dom.getBoundingClientRect();
+        const lastLineY = editorRect.bottom;
+
+        // 클릭 위치가 마지막 줄보다 아래인 경우 새로운 줄 추가
+        if (clickY > lastLineY) {
+          editor.commands.setTextSelection(editor.state.doc.content.size);
+          editor.commands.enter();
+        }
+
+        editor.commands.focus();
+      }}
+    >
+      <EditorContent editor={editor} />
+    </div>
+  );
+}

src/components/NoteHeader.tsx → src/components/note/NoteHeader.tsx

@@ -1,4 +1,4 @@
-import type { Note, CalendarEvent } from "../types";
+import type { Note, CalendarEvent } from "../../types";
 import NoteControl from "./NoteControl";
 
 interface NoteHeaderProps {
@@ -45,7 +45,7 @@ export default function NoteHeader({
   };
 
   return (
-    <div className="border-b bg-white p-4 px-6">
+    <div className="sticky top-0 z-10 border-b bg-white p-4 px-6">
       <div className="flex items-center justify-between">
         <div className="flex-1">
           <input

src/hooks/useNoteState.ts

@@ -0,0 +1,101 @@
+import { useState, useEffect } from "react";
+import { Note, CalendarEvent } from "../types";
+import { fetchNote, enhanceNoteWithAI } from "../api/noteApi";
+
+interface NoteState {
+  isNew: boolean;
+  note: Note | null;
+  content: string;
+  title: string;
+  recordingTime: number;
+  showHypercharge: boolean;
+}
+
+export function useNoteState(id: string | undefined) {
+  const [state, setState] = useState<NoteState>({
+    isNew: !id,
+    note: null,
+    content: "",
+    title: "",
+    recordingTime: 0,
+    showHypercharge: false,
+  });
+
+  const updateState = (updates: Partial<NoteState>) => {
+    setState((prev) => ({ ...prev, ...updates }));
+  };
+
+  useEffect(() => {
+    if (id && !state.isNew) {
+      const loadNote = async () => {
+        try {
+          const noteData = await fetchNote(id);
+          updateState({
+            note: noteData,
+            title: noteData.title,
+            content: noteData.rawMemo,
+          });
+        } catch (error) {
+          console.error("Failed to load note:", error);
+        }
+      };
+      loadNote();
+    }
+  }, [id, state.isNew]);
+
+  const shouldStartRecording = (event: CalendarEvent) => {
+    const now = new Date();
+    const startTime = event.start.dateTime
+      ? new Date(event.start.dateTime)
+      : event.start.date
+        ? new Date(event.start.date)
+        : null;
+
+    return startTime ? now >= startTime : false;
+  };
+
+  const updateRecordingTime = () => {
+    setState((prev) => ({
+      ...prev,
+      recordingTime: prev.recordingTime + 1,
+    }));
+  };
+
+  const handlePauseResume = async (
+    isPaused: boolean,
+    resumeRecording: () => void | Promise<void>,
+    pauseRecording: () => void | Promise<void>,
+  ) => {
+    if (isPaused) {
+      await Promise.resolve(resumeRecording());
+      updateState({ showHypercharge: false });
+    } else {
+      await Promise.resolve(pauseRecording());
+      updateState({ showHypercharge: true });
+    }
+  };
+
+  const handleHypercharge = async () => {
+    const enhancedNote = await enhanceNoteWithAI(
+      state.title,
+      state.content,
+      [],
+    );
+    updateState({
+      content: enhancedNote.content,
+      title:
+        !state.title && enhancedNote.suggestedTitle
+          ? enhancedNote.suggestedTitle
+          : state.title,
+    });
+  };
+
+  return {
+    state,
+    updateState,
+    shouldStartRecording,
+    updateRecordingTime,
+    handlePauseResume,
+    handleHypercharge,
+  };
+}

src/pages/NotePage.tsx

@@ -1,25 +1,25 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { useParams } from "react-router-dom";
-import type { Note, CalendarEvent } from "../types";
-import { fetchNote, enhanceNoteWithAI } from "../api/noteApi";
 import { useSpeechRecognition } from "../hooks/useSpeechRecognition";
-import SidePanel from "../components/SidePanel";
+import SidePanel from "../components/note/SidePanel";
 import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
 import { useUI } from "../contexts/UIContext";
-import LiveCaptionDock from "../components/LiveCaptionDock";
-import NoteHeader from "../components/NoteHeader";
-import { EditorContent, useEditor } from "@tiptap/react";
-import StarterKit from "@tiptap/starter-kit";
+import LiveCaptionDock from "../components/note/LiveCaptionDock";
+import NoteHeader from "../components/note/NoteHeader";
+import NoteEditor from "../components/note/NoteEditor";
+import { useNoteState } from "../hooks/useNoteState";
 
 export default function NotePage() {
   const { id } = useParams();
-  const [isNew] = useState(!id);
-  const [note, setNote] = useState<Note | null>(null);
-  const [noteContent, setNoteContent] = useState("");
-  const [noteTitle, setNoteTitle] = useState("");
-  const [recordingTime, setRecordingTime] = useState(0);
-  const [showHypercharge, setShowHypercharge] = useState(false);
   const { isPanelOpen } = useUI();
+  const {
+    state,
+    updateState,
+    shouldStartRecording,
+    updateRecordingTime,
+    handlePauseResume,
+    handleHypercharge,
+  } = useNoteState(id);
 
   const {
     isRecording,
@@ -32,105 +32,63 @@ export default function NotePage() {
     stopRecording,
   } = useSpeechRecognition();
 
-  const editor = useEditor({
-    extensions: [StarterKit],
-    content: noteContent,
-    onUpdate: ({ editor }) => {
-      setNoteContent(editor.getHTML());
-    },
-  });
-
-  useEffect(() => {
-    if (id && !isNew) {
-      const loadNote = async () => {
-        const noteData = await fetchNote(id);
-        setNote(noteData);
-        setNoteTitle(noteData.title);
-        setNoteContent(noteData.rawMemo);
-      };
-      loadNote();
-    }
-  }, [id]);
+  const handlePauseResumeClick = () => {
+    handlePauseResume(isPaused, resumeRecording, pauseRecording);
+  };
 
   useEffect(() => {
     if (
-      isNew ||
-      (note?.calendarEvent && shouldStartRecording(note.calendarEvent))
+      state.isNew ||
+      (state.note?.calendarEvent &&
+        shouldStartRecording(state.note.calendarEvent))
     ) {
       startRecording();
     }
 
     const timer = setInterval(() => {
       if (isRecording && !isPaused) {
-        setRecordingTime((prev) => prev + 1);
+        updateRecordingTime();
       }
     }, 1000);
 
     return () => {
       void stopRecording();
       clearInterval(timer);
     };
-  }, [isNew, note]);
-
-  useEffect(() => {
-    if (editor && editor.getHTML() !== noteContent) {
-      editor.commands.setContent(noteContent);
-    }
-  }, [noteContent, editor]);
-
-  const shouldStartRecording = (event: CalendarEvent) => {
-    const now = new Date();
-    const startTime = event.start.dateTime
-      ? new Date(event.start.dateTime)
-      : event.start.date
-        ? new Date(event.start.date)
-        : null;
-
-    return startTime ? now >= startTime : false;
-  };
-
-  const handlePauseResume = async () => {
-    if (isPaused) {
-      await resumeRecording();
-      setShowHypercharge(false);
-    } else {
-      await pauseRecording();
-      setShowHypercharge(true);
-    }
-  };
-
-  const handleHypercharge = async () => {
-    const enhancedNote = await enhanceNoteWithAI(noteTitle, noteContent, []);
-    setNoteContent(enhancedNote.content);
-    if (!noteTitle && enhancedNote.suggestedTitle) {
-      setNoteTitle(enhancedNote.suggestedTitle);
-    }
-  };
+  }, [
+    state.isNew,
+    state.note,
+    isRecording,
+    isPaused,
+    startRecording,
+    stopRecording,
+    updateRecordingTime,
+  ]);
 
   return (
     <div className="flex h-full flex-col overflow-hidden bg-gray-50">
       <main className="flex-1">
         <PanelGroup direction="horizontal">
           <Panel defaultSize={100} minSize={50}>
-            <div className="flex h-full flex-col">
+            <div className="flex h-full flex-col overflow-auto">
               <NoteHeader
-                note={note}
-                isNew={isNew}
-                noteTitle={noteTitle}
-                showHypercharge={showHypercharge}
+                note={state.note}
+                isNew={state.isNew}
+                noteTitle={state.title}
+                showHypercharge={state.showHypercharge}
                 isRecording={isRecording}
                 isPaused={isPaused}
-                recordingTime={recordingTime}
-                onTitleChange={setNoteTitle}
+                recordingTime={state.recordingTime}
+                onTitleChange={(title) => updateState({ title })}
                 onHypercharge={handleHypercharge}
                 onStartRecording={startRecording}
-                onPauseResume={handlePauseResume}
+                onPauseResume={handlePauseResumeClick}
               />
 
               <div className="relative flex flex-1 flex-col">
-                <EditorContent
-                  editor={editor}
-                  className="prose w-full max-w-none flex-1 p-4 focus:outline-none"
+                <NoteEditor
+                  content={state.content}
+                  onChange={(content) => updateState({ content })}
                 />
                 <LiveCaptionDock currentTranscript={currentTranscript} />
               </div>
@@ -141,7 +99,7 @@ export default function NotePage() {
             <>
               <PanelResizeHandle />
               <Panel defaultSize={30} minSize={30} maxSize={50}>
-                <SidePanel noteContent={noteContent} />
+                <SidePanel noteContent={state.content} />
               </Panel>
             </>
           )}