Component modularization

apps/desktop/package.json

@@ -17,6 +17,7 @@
     "@radix-ui/react-form": "^0.1.1",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-menubar": "^1.1.3",
+    "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.3",
     "@radix-ui/react-switch": "^1.1.2",

apps/desktop/src/App.tsx

@@ -39,4 +39,4 @@ function App() {
   );
 }
 
-export default App;
+export default App;

apps/desktop/src/components/layout/ExportMenu.tsx

@@ -1,46 +1,55 @@
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { useClickOutside } from "../../hooks/useClickOutside";
+import { Share, Copy, File, FileText } from "lucide-react";
 
-interface ExportMenuProps {
-  isOpen: boolean;
-  onToggle: () => void;
-}
-
-export default function ExportMenu({ isOpen, onToggle }: ExportMenuProps) {
+export default function ExportMenu() {
+  const [isOpen, setIsOpen] = useState(false);
   const exportRef = useRef<HTMLDivElement>(null);
 
   useClickOutside(exportRef, () => {
-    if (isOpen) onToggle();
+    if (isOpen) setIsOpen(false);
   });
 
   return (
     <div className="relative" ref={exportRef}>
       <button
-        onClick={onToggle}
-        className="rounded-md border px-2.5 py-2 text-xs text-gray-700 hover:bg-gray-100"
+        onClick={() => setIsOpen(!isOpen)}
+        className="rounded-md p-2 text-gray-700 hover:bg-gray-100"
         aria-label={isOpen ? "Close export menu" : "Open export menu"}
       >
-        Export
+        <Share className="h-4 w-4" />
       </button>
       {isOpen && (
-        <div className="absolute right-0 mt-2 w-48 rounded-lg border bg-white shadow-lg">
+        <div className="absolute right-0 mt-2 w-56 rounded-lg border bg-white shadow-lg">
           <div className="py-1">
+            <button
+              onClick={() => {
+                /* 클립보드 복사 로직 */
+                setIsOpen(false);
+              }}
+              className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+            >
+              <Copy className="h-4 w-4" />
+              클립보드에 복사
+            </button>
             <button
               onClick={() => {
                 /* MD 다운로드 로직 */
-                onToggle();
+                setIsOpen(false);
               }}
-              className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+              className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
             >
+              <File className="h-4 w-4" />
               Markdown으로 내보내기
             </button>
             <button
               onClick={() => {
                 /* PDF 다운로드 로직 */
-                onToggle();
+                setIsOpen(false);
               }}
-              className="w-full px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
+              className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100"
             >
+              <FileText className="h-4 w-4" />
               PDF로 내보내기
             </button>
           </div>

apps/desktop/src/components/layout/NavBar.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useCallback } from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import SearchModal from "../modals/search/SearchModal";
 import SettingsModal from "../modals/settings/SettingsModal";
@@ -10,7 +10,6 @@ import NavigationButtons from "./NavigationButtons";
 
 export default function NavBar() {
   const { isPanelOpen, setIsPanelOpen } = useUI();
-  const [isExportMenuOpen, setIsExportMenuOpen] = useState(false);
   const navigate = useNavigate();
   const location = useLocation();
 
@@ -29,10 +28,6 @@ export default function NavBar() {
     window.dispatchEvent(new Event("openSearch"));
   }, []);
 
-  const toggleExportMenu = useCallback(() => {
-    setIsExportMenuOpen((prev) => !prev);
-  }, []);
-
   const togglePanel = useCallback(() => {
     setIsPanelOpen(!isPanelOpen);
   }, [setIsPanelOpen, isPanelOpen]);
@@ -63,12 +58,7 @@ export default function NavBar() {
             <div className="flex items-center gap-4">
               <SearchBar onSearchClick={handleSearchClick} />
 
-              {isNotePage && (
-                <ExportMenu
-                  isOpen={isExportMenuOpen}
-                  onToggle={toggleExportMenu}
-                />
-              )}
+              {isNotePage && <ExportMenu />}
 
               {/* New Note Button */}
               {isNotePage ? (

apps/desktop/src/components/modals/search/SearchModal.tsx

@@ -1,6 +1,6 @@
 import "../../../styles/cmdk.css";
 
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
 import { Command } from "cmdk";
 import { useNavigate } from "react-router-dom";
 import { mockNotes } from "../../../mocks/data";
@@ -61,33 +61,32 @@ const SearchModal = () => {
         />
       )}
       {open && (
-        <Command
-          onKeyDown={handleKeyDown}
-          className="fixed left-[50%] top-[50%] z-[51] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-white shadow-lg dark:bg-gray-800"
-        >
-          <Command.Input
-            value={search}
-            onValueChange={setSearch}
-            placeholder="Search notes..."
-            className="w-full"
-            autoFocus
-          />
-          <Command.List>
-            <Command.Empty>No notes found.</Command.Empty>
-            <Command.Group>
-              {filteredNotes.map((note) => (
-                <Command.Item
-                  key={note.id}
-                  onSelect={() => {
-                    navigate(`/note/${note.id}`);
-                    setOpen(false);
-                  }}
-                >
-                  {note.title}
-                </Command.Item>
-              ))}
-            </Command.Group>
-          </Command.List>
+        <Command label="Search" onKeyDown={handleKeyDown}>
+          <Command className="fixed left-[50%] top-[50%] z-[51] max-h-[85vh] w-[90vw] max-w-[450px] translate-x-[-50%] translate-y-[-50%] rounded-lg bg-white shadow-lg dark:bg-gray-800">
+            <Command.Input
+              value={search}
+              onValueChange={setSearch}
+              placeholder="Search notes..."
+              className="w-full"
+              autoFocus
+            />
+            <Command.List>
+              <Command.Empty>No notes found.</Command.Empty>
+              <Command.Group>
+                {filteredNotes.map((note) => (
+                  <Command.Item
+                    key={note.id}
+                    onSelect={() => {
+                      navigate(`/note/${note.id}`);
+                      setOpen(false);
+                    }}
+                  >
+                    {note.title}
+                  </Command.Item>
+                ))}
+              </Command.Group>
+            </Command.List>
+          </Command>
         </Command>
       )}
     </>