idea-manager 0.1.0

package/src/app/globals.css

@@ -0,0 +1,437 @@
+@import "tailwindcss";
+
+:root {
+  --background: 224 20% 10%;
+  --foreground: 210 40% 98%;
+  --card: 224 20% 13%;
+  --card-hover: 220 15% 18%;
+  --border: 220 15% 28%;
+  --input: 220 15% 24%;
+  --primary: 210 85% 60%;
+  --primary-hover: 210 85% 50%;
+  --accent: 265 70% 60%;
+  --success: 142 71% 45%;
+  --warning: 38 92% 50%;
+  --destructive: 0 70% 55%;
+  --muted: 220 15% 20%;
+  --muted-foreground: 215 15% 60%;
+}
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-hover: hsl(var(--card-hover));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-primary: hsl(var(--primary));
+  --color-primary-hover: hsl(var(--primary-hover));
+  --color-accent: hsl(var(--accent));
+  --color-success: hsl(var(--success));
+  --color-warning: hsl(var(--warning));
+  --color-destructive: hsl(var(--destructive));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --font-sans: 'Pretendard', var(--font-geist-sans), system-ui, sans-serif;
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-sans);
+  font-weight: 500;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+}
+::-webkit-scrollbar-track {
+  background: hsl(var(--background));
+}
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 3px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground));
+}
+
+/* Input/Textarea focus ring */
+input:focus,
+textarea:focus {
+  outline: none;
+  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.3);
+}
+
+/* Editor container with overlay support */
+.editor-container {
+  position: relative;
+  flex: 1;
+  display: flex;
+  min-height: 0;
+}
+
+/* Memo overlay */
+.memo-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  overflow: hidden;
+}
+
+.memo-pin {
+  position: absolute;
+  pointer-events: auto;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.memo-pin-icon {
+  font-size: 14px;
+  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));
+  transition: transform 0.15s;
+}
+
+.memo-pin:hover .memo-pin-icon {
+  transform: scale(1.3);
+}
+
+.memo-tooltip {
+  position: absolute;
+  right: 24px;
+  top: -4px;
+  width: 240px;
+  padding: 8px 12px;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
+  z-index: 20;
+}
+
+.memo-tooltip-anchor {
+  font-size: 11px;
+  color: hsl(var(--muted-foreground));
+  font-style: italic;
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.memo-tooltip-question {
+  font-size: 12px;
+  color: hsl(var(--foreground));
+  line-height: 1.4;
+}
+
+/* Resize handle */
+.resize-handle {
+  flex-shrink: 0;
+  height: 6px;
+  cursor: row-resize;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: hsl(var(--background));
+  border-top: 1px solid hsl(var(--border));
+  border-bottom: 1px solid hsl(var(--border));
+  transition: background 0.15s;
+}
+
+.resize-handle:hover {
+  background: hsl(var(--muted));
+}
+
+.resize-handle-bar {
+  width: 32px;
+  height: 2px;
+  border-radius: 1px;
+  background: hsl(var(--muted-foreground) / 0.4);
+}
+
+.resize-handle:hover .resize-handle-bar {
+  background: hsl(var(--muted-foreground));
+}
+
+/* Chat panel */
+.chat-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.chat-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  border-bottom: 1px solid hsl(var(--border));
+  flex-shrink: 0;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 12px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 0;
+}
+
+.chat-empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  color: hsl(var(--muted-foreground));
+  font-size: 12px;
+}
+
+/* Chat messages */
+.chat-message {
+  display: flex;
+  flex-direction: column;
+  max-width: 85%;
+}
+
+.chat-message-ai {
+  align-self: flex-start;
+}
+
+.chat-message-user {
+  align-self: flex-end;
+}
+
+.chat-bubble {
+  padding: 8px 12px;
+  border-radius: 12px;
+  font-size: 13px;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+.chat-bubble-ai {
+  background: hsl(var(--muted));
+  color: hsl(var(--foreground));
+  border-bottom-left-radius: 4px;
+}
+
+.chat-bubble-user {
+  background: hsl(var(--accent));
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+
+.chat-time {
+  font-size: 10px;
+  color: hsl(var(--muted-foreground));
+  margin-top: 2px;
+  padding: 0 4px;
+}
+
+.chat-message-user .chat-time {
+  text-align: right;
+}
+
+/* Loading dots */
+.chat-loading {
+  display: flex;
+  gap: 4px;
+  padding: 12px 16px;
+}
+
+.chat-loading .dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: hsl(var(--muted-foreground));
+  animation: chatDotBounce 1.4s infinite ease-in-out both;
+}
+
+.chat-loading .dot:nth-child(1) { animation-delay: -0.32s; }
+.chat-loading .dot:nth-child(2) { animation-delay: -0.16s; }
+.chat-loading .dot:nth-child(3) { animation-delay: 0s; }
+
+@keyframes chatDotBounce {
+  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
+  40% { transform: scale(1); opacity: 1; }
+}
+
+/* Chat input */
+.chat-input-area {
+  display: flex;
+  gap: 8px;
+  padding: 8px 12px;
+  border-top: 1px solid hsl(var(--border));
+  flex-shrink: 0;
+}
+
+.chat-input {
+  flex: 1;
+  padding: 6px 12px;
+  background: hsl(var(--input));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  color: hsl(var(--foreground));
+  font-size: 13px;
+  resize: none;
+  font-family: var(--font-sans);
+}
+
+.chat-input::placeholder {
+  color: hsl(var(--muted-foreground) / 0.5);
+}
+
+.chat-send-btn {
+  padding: 6px 14px;
+  background: hsl(var(--accent));
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: opacity 0.15s;
+  flex-shrink: 0;
+}
+
+.chat-send-btn:hover:not(:disabled) {
+  opacity: 0.85;
+}
+
+.chat-send-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Lock toggle */
+.lock-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  padding: 0;
+  flex-shrink: 0;
+  transition: transform 0.15s;
+}
+
+.lock-toggle:hover:not(:disabled) {
+  transform: scale(1.2);
+}
+
+.lock-toggle:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+/* Status badge */
+.status-badge {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 1px 4px;
+  border-radius: 4px;
+  flex-shrink: 0;
+  transition: background 0.15s;
+}
+
+.status-badge:hover:not(:disabled) {
+  background: hsl(var(--muted));
+}
+
+.status-badge-label {
+  font-size: 10px;
+  color: hsl(var(--muted-foreground));
+}
+
+/* Item detail */
+.item-detail {
+  margin: 0 8px 8px;
+  padding: 12px;
+  background: hsl(var(--card));
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+}
+
+/* Prompt section */
+.prompt-section {
+  border-top: 1px solid hsl(var(--border));
+  padding-top: 8px;
+}
+
+.prompt-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+}
+
+.prompt-action-btn {
+  padding: 2px 8px;
+  font-size: 10px;
+  color: hsl(var(--muted-foreground));
+  background: hsl(var(--muted));
+  border: 1px solid hsl(var(--border));
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.prompt-action-btn:hover:not(:disabled) {
+  color: hsl(var(--foreground));
+  background: hsl(var(--card-hover));
+}
+
+.prompt-action-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.prompt-generate-btn {
+  color: hsl(var(--accent));
+  border-color: hsl(var(--accent) / 0.3);
+}
+
+.prompt-generate-btn:hover:not(:disabled) {
+  background: hsl(var(--accent) / 0.1);
+  color: hsl(var(--accent));
+}
+
+.prompt-content {
+  font-size: 12px;
+  line-height: 1.6;
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+  padding: 8px 12px;
+  border-radius: 6px;
+  border: 1px solid hsl(var(--border));
+  white-space: pre-wrap;
+  font-family: var(--font-mono);
+}
+
+.prompt-edit-textarea {
+  width: 100%;
+  padding: 8px 12px;
+  font-size: 12px;
+  line-height: 1.6;
+  color: hsl(var(--foreground));
+  background: hsl(var(--background));
+  border: 1px solid hsl(var(--accent) / 0.5);
+  border-radius: 6px;
+  resize: vertical;
+  font-family: var(--font-mono);
+}

package/src/app/layout.tsx

@@ -0,0 +1,42 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "IM - 아이디어 매니저",
+  description: "자유롭게 아이디어를 쏟아내면, AI가 구조화해드립니다",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="ko">
+      <head>
+        <link
+          rel="stylesheet"
+          as="style"
+          crossOrigin="anonymous"
+          href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
+        />
+      </head>
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

package/src/app/page.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface IProject {
+  id: string;
+  name: string;
+  description: string;
+  created_at: string;
+  updated_at: string;
+}
+
+export default function Dashboard() {
+  const router = useRouter();
+  const [projects, setProjects] = useState<IProject[]>([]);
+  const [showForm, setShowForm] = useState(false);
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  const fetchProjects = useCallback(async () => {
+    const res = await fetch('/api/projects');
+    const data = await res.json();
+    setProjects(data);
+    setLoading(false);
+  }, []);
+
+  useEffect(() => {
+    fetchProjects();
+  }, [fetchProjects]);
+
+  const handleCreate = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) return;
+
+    const res = await fetch('/api/projects', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name: name.trim(), description: description.trim() }),
+    });
+
+    if (res.ok) {
+      const project = await res.json();
+      setName('');
+      setDescription('');
+      setShowForm(false);
+      router.push(`/projects/${project.id}`);
+    }
+  };
+
+  const handleDelete = async (id: string, e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (!confirm('이 프로젝트를 삭제하시겠습니까?')) return;
+
+    await fetch(`/api/projects/${id}`, { method: 'DELETE' });
+    fetchProjects();
+  };
+
+  const formatDate = (dateStr: string) => {
+    return new Date(dateStr).toLocaleDateString('ko-KR', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  return (
+    <div className="min-h-screen p-8 max-w-4xl mx-auto">
+      <header className="flex items-center justify-between mb-10">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">
+            IM <span className="text-muted-foreground font-normal text-lg ml-2">아이디어 매니저</span>
+          </h1>
+          <p className="text-muted-foreground mt-1 text-sm">
+            자유롭게 아이디어를 쏟아내면, AI가 구조화해드립니다
+          </p>
+        </div>
+        <button
+          onClick={() => setShowForm(!showForm)}
+          className="px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg
+                     transition-colors font-medium text-sm"
+        >
+          + 새 프로젝트
+        </button>
+      </header>
+
+      {showForm && (
+        <form
+          onSubmit={handleCreate}
+          className="mb-8 p-5 bg-card rounded-lg border border-border"
+        >
+          <input
+            type="text"
+            placeholder="프로젝트 이름"
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            className="w-full bg-input border border-border rounded-lg px-4 py-2.5 mb-3
+                       focus:border-primary focus:outline-none text-foreground"
+            autoFocus
+          />
+          <input
+            type="text"
+            placeholder="설명 (선택사항)"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            className="w-full bg-input border border-border rounded-lg px-4 py-2.5 mb-4
+                       focus:border-primary focus:outline-none text-foreground"
+          />
+          <div className="flex gap-2 justify-end">
+            <button
+              type="button"
+              onClick={() => setShowForm(false)}
+              className="px-4 py-2 text-muted-foreground hover:text-foreground transition-colors text-sm"
+            >
+              취소
+            </button>
+            <button
+              type="submit"
+              className="px-4 py-2 bg-primary hover:bg-primary-hover text-white rounded-lg
+                         transition-colors text-sm"
+            >
+              만들기
+            </button>
+          </div>
+        </form>
+      )}
+
+      {loading ? (
+        <div className="text-center text-muted-foreground py-20">로딩 중...</div>
+      ) : projects.length === 0 ? (
+        <div className="text-center py-20">
+          <div className="text-5xl mb-4">💡</div>
+          <p className="text-muted-foreground text-lg mb-2">아직 프로젝트가 없습니다</p>
+          <p className="text-muted-foreground text-sm">
+            &quot;새 프로젝트&quot; 버튼을 눌러 시작하세요
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {projects.map((project) => (
+            <div
+              key={project.id}
+              onClick={() => router.push(`/projects/${project.id}`)}
+              className="p-5 bg-card hover:bg-card-hover border border-border rounded-lg
+                         cursor-pointer transition-colors group"
+            >
+              <div className="flex items-start justify-between">
+                <div className="flex-1">
+                  <h2 className="text-lg font-semibold group-hover:text-primary transition-colors">
+                    {project.name}
+                  </h2>
+                  {project.description && (
+                    <p className="text-muted-foreground text-sm mt-1">{project.description}</p>
+                  )}
+                  <p className="text-muted-foreground text-xs mt-2">
+                    수정일 {formatDate(project.updated_at)}
+                  </p>
+                </div>
+                <button
+                  onClick={(e) => handleDelete(project.id, e)}
+                  className="text-muted-foreground hover:text-destructive transition-colors opacity-0
+                             group-hover:opacity-100 p-1 text-sm"
+                  title="프로젝트 삭제"
+                >
+                  삭제
+                </button>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}