Add login page in Tauri

apps/desktop/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/styles/global.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "src/components",
+    "utils": "src/lib/utils",
+    "ui": "src/components/ui",
+    "lib": "src/lib",
+    "hooks": "src/hooks"
+  },
+  "iconLibrary": "lucide"
+}

apps/desktop/package.json

@@ -21,17 +21,20 @@
     "@radix-ui/react-select": "^2.1.3",
     "@radix-ui/react-switch": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.2",
+    "@remixicon/react": "^4.5.0",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2.2.0",
     "@tauri-apps/plugin-fs": "^2.0.3",
     "@tauri-apps/plugin-log": "^2.2.0",
     "@tauri-apps/plugin-updater": "^2.0.0",
     "@tiptap/extension-highlight": "^2.10.3",
+    "@tiptap/extension-placeholder": "^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",
-    "clsx": "^2.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "cmdk": "^1.0.4",
     "date-fns": "^4.1.0",
     "embla-carousel": "^8.5.1",
@@ -41,7 +44,8 @@
     "react-dom": "^18.2.0",
     "react-resizable-panels": "^2.1.7",
     "react-router": "^7.0.2",
-    "tailwind-merge": "^2.1.0",
+    "tailwind-merge": "^2.5.5",
+    "tailwindcss-animate": "^1.0.7",
     "zustand": "^5.0.2"
   },
   "devDependencies": {

apps/desktop/src/App.tsx

@@ -1,11 +1,20 @@
 import { useEffect } from "react";
-import { BrowserRouter, Routes, Route } from "react-router";
-
+import { BrowserRouter, Routes, Route, Navigate } from "react-router";
 import { UIProvider } from "./contexts/UIContext";
-
 import NavBar from "./components/layout/NavBar";
 import Home from "./pages/Home";
 import Note from "./pages/Note";
+import Login from "./pages/Login";
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+}
+
+const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+  // Replace this with your actual authentication check
+  const isAuthenticated = localStorage.getItem("isAuthenticated") === "true";
+  return isAuthenticated ? <>{children}</> : <Navigate to="/login" />;
+};
 
 function App() {
   useEffect(() => {
@@ -28,13 +37,35 @@ function App() {
     <BrowserRouter>
       <UIProvider>
         <div className="flex h-screen flex-col">
-          <NavBar />
-          <main className="w-full flex-1">
-            <Routes>
-              <Route path="/" element={<Home />} />
-              <Route path="/note/:id" element={<Note />} />
-            </Routes>
-          </main>
+          <Routes>
+            <Route path="/login" element={<Login />} />
+            <Route
+              path="/"
+              element={
+                <ProtectedRoute>
+                  <>
+                    <NavBar />
+                    <main className="w-full flex-1 overflow-auto bg-gray-50">
+                      <Home />
+                    </main>
+                  </>
+                </ProtectedRoute>
+              }
+            />
+            <Route
+              path="/note/:id"
+              element={
+                <ProtectedRoute>
+                  <>
+                    <NavBar />
+                    <main className="w-full flex-1 overflow-auto bg-gray-50">
+                      <Note />
+                    </main>
+                  </>
+                </ProtectedRoute>
+              }
+            />
+          </Routes>
         </div>
       </UIProvider>
     </BrowserRouter>

apps/desktop/src/components/home/NewUserBanner.tsx

@@ -1,4 +1,4 @@
-import { ArrowRight } from "lucide-react";
+import { RiArrowRightLine } from "@remixicon/react";
 
 interface NewUserBannerProps {
   onDemoClick: () => void;
@@ -14,7 +14,7 @@ export const NewUserBanner = ({ onDemoClick }: NewUserBannerProps) => {
           className="flex items-center gap-2 rounded-full bg-white px-4 py-2 text-blue-600 transition-colors hover:bg-blue-50"
         >
           <span>데모 체험</span>
-          <ArrowRight className="h-4 w-4" />
+          <RiArrowRightLine className="h-4 w-4" />
         </button>
       </div>
     </div>

apps/desktop/src/components/home/UpcomingEvents.tsx

@@ -1,7 +1,7 @@
 import useEmblaCarousel from "embla-carousel-react";
 import { Note } from "../../types";
 import { EventCard } from "./EventCard";
-import { ChevronLeft, ChevronRight } from "lucide-react";
+import { RiArrowLeftSLine, RiArrowRightSLine } from "@remixicon/react";
 import { useCallback } from "react";
 
 interface UpcomingEventsProps {
@@ -50,13 +50,13 @@ export const UpcomingEvents = ({
               onClick={scrollPrev}
               className="absolute -left-4 top-1/2 -translate-y-1/2 rounded-full bg-white p-2 shadow-lg hover:bg-gray-50"
             >
-              <ChevronLeft className="size-5" />
+              <RiArrowLeftSLine className="size-5" />
             </button>
             <button
               onClick={scrollNext}
               className="absolute -right-4 top-1/2 -translate-y-1/2 rounded-full bg-white p-2 shadow-lg hover:bg-gray-50"
             >
-              <ChevronRight className="size-5" />
+              <RiArrowRightSLine className="size-5" />
             </button>
           </>
         )}

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

@@ -1,5 +1,10 @@
 import { useRef, useState } from "react";
-import { Share, Copy, File, FileText } from "lucide-react";
+import {
+  RiShareLine,
+  RiFileCopyLine,
+  RiFileTextLine,
+  RiFileTextFill,
+} from "@remixicon/react";
 
 import { useClickOutside } from "../../hooks/useClickOutside";
 
@@ -20,7 +25,7 @@ export default function ExportMenu() {
         className="rounded-md p-2 text-gray-700 hover:bg-gray-100"
         aria-label={isOpen ? "Close export menu" : "Open export menu"}
       >
-        <Share className="h-4 w-4" />
+        <RiShareLine className="h-4 w-4" />
       </button>
       {isOpen && (
         <div className="absolute right-0 mt-2 w-56 rounded-lg border bg-white shadow-lg">
@@ -32,7 +37,7 @@ export default function ExportMenu() {
               }}
               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" />
+              <RiFileCopyLine className="h-4 w-4" />
               클립보드에 복사
             </button>
             <button
@@ -42,7 +47,7 @@ export default function ExportMenu() {
               }}
               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" />
+              <RiFileTextLine className="h-4 w-4" />
               Markdown으로 내보내기
             </button>
             <button
@@ -52,7 +57,7 @@ export default function ExportMenu() {
               }}
               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" />
+              <RiFileTextFill className="h-4 w-4" />
               PDF로 내보내기
             </button>
           </div>

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

@@ -1,6 +1,10 @@
 import { useCallback } from "react";
 import { useNavigate, useLocation } from "react-router";
-import { PanelRightClose, PanelRightOpen, Menu } from "lucide-react";
+import {
+  RiMenuLine,
+  RiSidebarUnfoldLine,
+  RiSidebarFoldLine,
+} from "@remixicon/react";
 
 import SearchModal from "../modals/search/SearchModal";
 import SettingsModal from "../modals/settings/SettingsModal";
@@ -51,7 +55,7 @@ export default function NavBar() {
                   onClick={handleSettingsClick}
                   className="flex items-center rounded p-2 hover:bg-gray-100"
                 >
-                  <Menu className="size-5" />
+                  <RiMenuLine className="size-5" />
                 </button>
               )}
             </div>
@@ -70,9 +74,9 @@ export default function NavBar() {
                   aria-label={isPanelOpen ? "Close panel" : "Open panel"}
                 >
                   {isPanelOpen ? (
-                    <PanelRightClose className="size-5" />
+                    <RiSidebarUnfoldLine className="size-5" />
                   ) : (
-                    <PanelRightOpen className="size-5" />
+                    <RiSidebarFoldLine className="size-5" />
                   )}
                 </button>
               ) : (

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

@@ -1,4 +1,4 @@
-import { Home, ChevronLeft } from "lucide-react";
+import { RiHome2Line, RiArrowLeftSLine } from "@remixicon/react";
 
 interface NavigationButtonsProps {
   onHomeClick: () => void;
@@ -12,10 +12,10 @@ export default function NavigationButtons({
   return (
     <>
       <button onClick={onHomeClick} className="rounded p-2 hover:bg-gray-100">
-        <Home className="size-5" />
+        <RiHome2Line className="size-5" />
       </button>
       <button onClick={onBackClick} className="rounded p-2 hover:bg-gray-100">
-        <ChevronLeft className="size-5" />
+        <RiArrowLeftSLine className="size-5" />
       </button>
     </>
   );

apps/desktop/src/components/modals/settings/SettingsTabs.tsx

@@ -1,13 +1,13 @@
 import * as Tabs from "@radix-ui/react-tabs";
 import {
-  Settings,
-  MessageSquare,
-  CreditCard,
-  Calendar,
-  Bell,
-  UserCircle,
-  Cable,
-} from "lucide-react";
+  RiSettings4Line,
+  RiMessage2Line,
+  RiBankCardLine,
+  RiCalendarLine,
+  RiNotification3Line,
+  RiUser3Line,
+  RiPlugLine,
+} from "@remixicon/react";
 
 interface TabItem {
   value: string;
@@ -17,13 +17,13 @@ interface TabItem {
 
 export function SettingsTabs() {
   const mainTabs: TabItem[] = [
-    { value: "profile", label: "프로필", icon: UserCircle },
-    { value: "general", label: "일반", icon: Settings },
-    { value: "feedback", label: "피드백", icon: MessageSquare },
-    { value: "billing", label: "결제", icon: CreditCard },
-    { value: "calendar", label: "캘린더", icon: Calendar },
-    { value: "notification", label: "알림", icon: Bell },
-    { value: "integrations", label: "연동", icon: Cable },
+    { value: "profile", label: "프로필", icon: RiUser3Line },
+    { value: "general", label: "일반", icon: RiSettings4Line },
+    { value: "feedback", label: "피드백", icon: RiMessage2Line },
+    { value: "billing", label: "결제", icon: RiBankCardLine },
+    { value: "calendar", label: "캘린더", icon: RiCalendarLine },
+    { value: "notification", label: "알림", icon: RiNotification3Line },
+    { value: "integrations", label: "연동", icon: RiPlugLine },
   ];
 
   const TabButton = ({ tab }: { tab: TabItem }) => (
@@ -32,7 +32,7 @@ export function SettingsTabs() {
       value={tab.value}
       className="flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm text-gray-600 hover:bg-gray-100 focus:outline-none data-[state=active]:bg-white data-[state=active]:text-blue-600"
     >
-      <tab.icon className="h-5 w-5" />
+      <tab.icon className="size-5" />
       {tab.label}
     </Tabs.Trigger>
   );

apps/desktop/src/components/modals/settings/tabs/Integrations.tsx

@@ -1,6 +1,8 @@
-import SlackIcon from "../../../../constants/icons/SlackIcon";
-import NotionIcon from "../../../../constants/icons/NotionIcon";
-import { ExternalLink } from "lucide-react";
+import {
+  RiSlackFill,
+  RiNotionFill,
+  RiExternalLinkLine,
+} from "@remixicon/react";
 
 interface IntegrationCardProps {
   title: string;
@@ -28,7 +30,7 @@ function IntegrationCard({
         onClick={onClick}
         className="inline-flex items-center gap-2 rounded-md border border-transparent bg-blue-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
       >
-        <ExternalLink className="h-4 w-4" />
+        <RiExternalLinkLine className="h-4 w-4" />
         연결하기
       </button>
     </div>
@@ -40,16 +42,15 @@ export function Integrations() {
     {
       title: "Slack 연동하기",
       description: "Slack에서 미팅 알림을 받고 상태를 자동으로 업데이트하세요",
-      icon: <SlackIcon />,
+      icon: <RiSlackFill className="h-8 w-8 text-[#E01E5A]" />,
       onClick: () => {
         /* TODO: Implement Slack connection */
       },
     },
     {
       title: "Notion 연동하기",
       description: "미팅 노트를 Notion에 자동으로 동기화하세요",
-      icon: <NotionIcon />,
-
+      icon: <RiNotionFill className="h-8 w-8 text-black" />,
       onClick: () => {
         /* TODO: Implement Notion connection */
       },

apps/desktop/src/components/modals/settings/tabs/Profile.tsx

@@ -1,5 +1,5 @@
 import { useState, useRef } from "react";
-import { UserCircle } from "lucide-react";
+import { RiUser3Line } from "@remixicon/react";
 
 export function Profile() {
   const [fullName, setFullName] = useState("");
@@ -46,7 +46,7 @@ export function Profile() {
                 className="h-full w-full object-cover"
               />
             ) : (
-              <UserCircle className="h-full w-full text-gray-400" />
+              <RiUser3Line className="h-full w-full text-gray-400" />
             )}
             <button
               type="button"