에버노트 앱웹 개발일기

당신은 시니어 풀스택 개발자입니다. 우리는 'Next.js 14 (App Router)'를 기반으로 에버노트(Evernote) 클론 웹앱을 만들 것입니다. 목표는 프로덕션 레벨의 품질입니다.

다음 기술 스택을 필수적으로 사용해주세요:
1. **Frontend:** Next.js 14, TypeScript, Tailwind CSS, Lucide React (아이콘), Shadcn/UI (컴포넌트 라이브러리).
2. **Backend/DB:** Supabase (PostgreSQL) 또는 Prisma ORM.
3. **Auth:** NextAuth.js (v5) 또는 Supabase Auth (이메일/비밀번호 로그인 필수).
4. **State Management:** Zustand (전역 상태 관리).
5. **Editor:** Tiptap (WYSIWYG 에디터).

첫 번째 단계로, 프로젝트의 폴더 구조를 제안하고, 필요한 패키지들의 `package.json` 설치 명령어를 알려주세요. 특히 에버노트와 같은 '3-Pane Layout' (사이드바, 노트 리스트, 에디터)을 구현하기 위한 레이아웃 구조를 설계해주세요.

에버노트의 데이터 구조를 완벽하게 모방하기 위한 Prisma Schema (schema.prisma)를 작성해주세요. 다음 요구사항을 반드시 포함해야 합니다:

1. **User:** 이메일, 비밀번호(해시), 프로필 정보.
2. **Notebook:** 노트들의 집합. 계층 구조(스택)가 가능해야 함.
3. **Note:** 제목, 본문(JSON or HTML), 생성일, 수정일, 즐겨찾기 여부.
4. **Tag:** 노트에 붙는 태그. 다대다(Many-to-Many) 관계.
5. **Trash:** 삭제된 노트가 임시 보관되는 상태 필드.

각 모델 간의 Relation(1:N, N:M)을 명확히 정의하고, 인덱싱이 필요한 필드도 제안해주세요.

NextAuth.js (또는 Supabase Auth)를 사용하여 'Credentials Provider' 방식의 이메일/비밀번호 로그인 및 회원가입 기능을 구현해주세요.

1. 로그인 페이지와 회원가입 페이지의 UI 코드를 작성해주세요. (깔끔하고 모던한 디자인)
2. 로그인 세션이 유지되도록 미들웨어(Middleware) 설정을 통해 보호된 라우트(/dashboard 등)에 접근 제어를 구현해주세요.
3. 로그인 성공 시 에버노트 메인 화면으로 리다이렉트 되는 로직을 포함해주세요.

에버노트의 데스크탑 웹 버전과 100% 동일한 'Resizable 3-Pane Layout'을 구현하고 싶습니다.

1. **Left Sidebar:**
   - 사용자 프로필 드롭다운.
   - 검색창.
   - 메뉴: 홈, 바로가기, 노트(모든 노트), 할 일, 노트북, 태그, 휴지통.
   - 각 메뉴는 클릭 시 활성화(Active) 스타일이 적용되어야 합니다.
   - 사이드바는 접기/펼치기가 가능해야 합니다.

2. **Middle Pane (Note List):**
   - 선택된 노트북이나 태그에 해당하는 노트 리스트를 카드 형태로 보여줍니다.
   - 각 카드는 제목, 본문 요약, 날짜, 태그, 썸네일 이미지를 포함합니다.

3. **Right Pane (Editor):**
   - 실제 노트가 렌더링되는 영역입니다.

Tailwind CSS를 사용하여 위 구조를 잡는 `layout.tsx`와 컴포넌트 코드를 작성해주세요.

에버노트의 노트 작성 경험을 제공하기 위해 'Tiptap' 라이브러리를 사용하여 강력한 에디터 컴포넌트를 만들어주세요.

요구사항:
1. **Toolbar:** 굵게, 기울임, 취소선, H1~H3, 체크리스트, 글머리 기호, 번호 매기기, 인용구, 코드 블럭.
2. **Features:**
   - 이미지 드래그 앤 드롭 업로드 기능.
   - '/' (슬래시)를 입력했을 때 메뉴가 나오는 'Slash Command' 기능 구현.
   - 링크(URL) 자동 감지 및 미리보기.
3. 노트의 제목(Title) 영역은 본문과 분리하여 상단에 크게 배치해주세요.
4. 작성 중인 내용은 자동으로 State에 반영되거나, 디바운스(Debounce)를 통해 DB에 자동 저장되도록 로직을 구상해주세요.

지금까지 만든 UI와 DB를 연결하는 로직을 작성합니다.

1. **API Routes:** Next.js App Router의 Server Actions를 사용하여 노트를 생성(Create), 조회(Read), 수정(Update), 삭제(Delete)하는 함수를 작성해주세요.
2. **Client Integration:**
   - 사이드바에서 '새 노트' 버튼 클릭 시 즉시 노트가 생성되고 에디터로 포커스 이동.
   - 에디터에서 글을 쓰면 2초마다 자동 저장(Auto-save)되는 훅(Hook) 구현.
   - 노트 리스트에서 항목 클릭 시 URL 쿼리 파라미터(?noteId=...)를 변경하여 에디터 내용을 갱신.
   - Zustand를 사용하여 현재 선택된 노트, 노트북 리스트 등의 전역 상태를 관리하는 코드를 작성해주세요.

npx create-next-app@latest my-evernote-clone
# 설정 질문에 다음과 같이 답하세요:
# - TypeScript: Yes
# - ESLint: Yes
# - Tailwind CSS: Yes
# - src/ directory: No (루트 레벨 app 추천)
# - App Router: Yes
# - Import alias: @/* (기본값)

cd my-evernote-clone
npx shadcn-ui@latest init
# 설정 질문:
# - Style: Default
# - Base Color: Slate (Evernote와 유사)
# - CSS Variables: Yes

npx shadcn-ui@latest add button input label avatar dropdown-menu separator scroll-area sheet dialog tooltip skeleton

npm install zustand lucide-react clsx tailwind-merge
npm install prisma --save-dev
npm install @prisma/client
npx prisma init

my-evernote-clone/
├── app/
│   ├── (auth)/          # 로그인/회원가입 관련 라우트 그룹
│   │   ├── login/
│   │   └── register/
│   ├── (main)/          # 로그인 후 진입하는 메인 앱 그룹
│   │   ├── _components/ # 메인 레이아웃 전용 컴포넌트 (Sidebar 등)
│   │   ├── (routes)/
│   │   │   ├── documents/
│   │   │   └── trash/
│   │   └── layout.tsx   # 3-Pane 레이아웃이 적용될 파일
│   ├── api/             # 백엔드 API 엔드포인트
│   └── layout.tsx       # Root Layout
├── components/
│   ├── providers/       # Theme, Auth Provider 등
│   ├── ui/              # Shadcn 컴포넌트들
│   └── editor/          # Tiptap 에디터 관련
├── lib/                 # 유틸리티 함수
│   ├── prisma.ts        # DB 클라이언트
│   └── utils.ts
├── hooks/               # 커스텀 훅 (use-scroll-top 등)
└── prisma/
    └── schema.prisma    # DB 스키마

// prisma/schema.prisma

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider  = "postgresql" // Supabase 사용 시 postgresql
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

model User {
  id        String   @id @default(uuid())
  email     String   @unique
  password  String   // 해시된 비밀번호 저장
  name      String?
  image     String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  notes     Note[]
}

model Note {
  id          String   @id @default(uuid())
  userId      String
  title       String
  content     String?  @db.Text // JSON 문자열로 저장 (Tiptap 호환)
  coverImage  String?
  icon        String?
  isArchived  Boolean  @default(false) // 휴지통 여부
  isPublished Boolean  @default(false) // 웹 게시 여부

  createdAt   DateTime @default(now())
  updatedAt   DateTime @updatedAt

  user        User     @relation(fields: [userId], references: [id], onDelete: Cascade)

  // 부모-자식 관계 (계층형 노트/노트북 구조 구현용)
  parentNoteId String?
  parentNote   Note?   @relation("ParentChild", fields: [parentNoteId], references: [id])
  children     Note[]  @relation("ParentChild")

  @@index([userId])
  @@index([userId, parentNoteId])
}

// lib/prisma.ts
import { PrismaClient } from "@prisma/client";

declare global {
  var prisma: PrismaClient | undefined;
}

export const db = globalThis.prisma || new PrismaClient();

if (process.env.NODE_ENV !== "production") globalThis.prisma = db;

npm install next-auth bcryptjs zod react-hook-form @hookform/resolvers
npm install -D @types/bcryptjs

// app/api/auth/[...nextauth]/route.ts
import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";
import { db } from "@/lib/prisma";
import bcrypt from "bcryptjs";

const handler = NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials?.password) {
          throw new Error("이메일과 비밀번호를 입력해주세요.");
        }

        // 1. 사용자 찾기
        const user = await db.user.findUnique({
          where: { email: credentials.email }
        });

        if (!user || !user.password) {
          throw new Error("등록되지 않은 사용자입니다.");
        }

        // 2. 비밀번호 일치 여부 확인
        const isValid = await bcrypt.compare(credentials.password, user.password);

        if (!isValid) {
          throw new Error("비밀번호가 일치하지 않습니다.");
        }

        return user;
      }
    })
  ],
  pages: {
    signIn: "/login", // 커스텀 로그인 페이지 경로
  },
  session: {
    strategy: "jwt",
  },
  callbacks: {
    // 세션에 사용자 ID 추가
    async session({ session, token }) {
        if (token && session.user) {
            session.user.name = token.sub; // token.sub는 보통 user ID
        }
        return session;
    }
  }
});

export { handler as GET, handler as POST };

// actions/register.ts
"use server";

import { db } from "@/lib/prisma";
import bcrypt from "bcryptjs";
import { z } from "zod";

// 유효성 검사 스키마
const RegisterSchema = z.object({
  email: z.string().email({ message: "유효한 이메일 주소를 입력해주세요." }),
  password: z.string().min(6, { message: "비밀번호는 최소 6자 이상이어야 합니다." }),
  name: z.string().min(1, { message: "이름을 입력해주세요." }),
});

export const register = async (values: z.infer<typeof RegisterSchema>) => {
  // 1. 데이터 검증
  const validatedFields = RegisterSchema.safeParse(values);

  if (!validatedFields.success) {
    return { error: "입력 양식이 올바르지 않습니다." };
  }

  const { email, password, name } = validatedFields.data;

  // 2. 중복 이메일 확인
  const existingUser = await db.user.findUnique({
    where: { email },
  });

  if (existingUser) {
    return { error: "이미 사용 중인 이메일입니다." };
  }

  // 3. 비밀번호 해시화 및 사용자 생성
  const hashedPassword = await bcrypt.hash(password, 10);

  await db.user.create({
    data: {
      email,
      name,
      password: hashedPassword,
    },
  });

  return { success: "회원가입이 완료되었습니다! 로그인해주세요." };
};

// app/(auth)/login/page.tsx
"use client";

import { useState } from "react";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import * as z from "zod";
import { signIn } from "next-auth/react";
import { useRouter } from "next/navigation";
import { register } from "@/actions/register"; // 위에서 만든 액션
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Loader2 } from "lucide-react";

// 스키마 정의
const authSchema = z.object({
  email: z.string().email("유효한 이메일을 입력하세요."),
  password: z.string().min(6, "비밀번호는 6자 이상이어야 합니다."),
  name: z.string().optional(), // 로그인 시에는 불필요
});

export default function AuthPage() {
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // 폼 훅 설정
  const form = useForm<z.infer<typeof authSchema>>({
    resolver: zodResolver(authSchema),
    defaultValues: { email: "", password: "", name: "" },
  });

  // 로그인 처리
  const onLogin = async (values: z.infer<typeof authSchema>) => {
    setIsLoading(true);
    setError(null);
    
    try {
      const res = await signIn("credentials", {
        email: values.email,
        password: values.password,
        redirect: false,
      });

      if (res?.error) {
        setError("이메일 또는 비밀번호가 잘못되었습니다.");
      } else {
        router.push("/documents"); // 로그인 성공 시 이동할 경로
        router.refresh();
      }
    } catch (error) {
      setError("로그인 중 오류가 발생했습니다.");
    } finally {
      setIsLoading(false);
    }
  };

  // 회원가입 처리
  const onRegister = async (values: z.infer<typeof authSchema>) => {
    if (!values.name) return setError("이름을 입력해주세요.");
    
    setIsLoading(true);
    setError(null);

    try {
      const res = await register({ 
        email: values.email, 
        password: values.password, 
        name: values.name 
      });
      
      if (res.error) {
        setError(res.error);
      } else {
        alert("가입 성공! 로그인 탭에서 로그인해주세요.");
        form.reset();
      }
    } catch (error) {
      setError("회원가입 중 오류가 발생했습니다.");
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <div className="flex items-center justify-center min-h-screen bg-gray-100">
      <Card className="w-[400px] shadow-lg">
        <CardHeader className="text-center">
          <CardTitle className="text-2xl font-bold text-green-600">Evernote Clone</CardTitle>
          <CardDescription>기억하고 싶은 모든 것을 기록하세요.</CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="login" className="w-full">
            <TabsList className="grid w-full grid-cols-2 mb-4">
              <TabsTrigger value="login">로그인</TabsTrigger>
              <TabsTrigger value="register">회원가입</TabsTrigger>
            </TabsList>

            {/* 로그인 폼 */}
            <TabsContent value="login">
              <form onSubmit={form.handleSubmit(onLogin)} className="space-y-4">
                <Input placeholder="이메일" {...form.register("email")} disabled={isLoading} />
                <Input type="password" placeholder="비밀번호" {...form.register("password")} disabled={isLoading} />
                {error && <p className="text-sm text-red-500">{error}</p>}
                <Button type="submit" className="w-full bg-green-600 hover:bg-green-700" disabled={isLoading}>
                  {isLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
                  로그인
                </Button>
              </form>
            </TabsContent>

            {/* 회원가입 폼 */}
            <TabsContent value="register">
              <form onSubmit={form.handleSubmit(onRegister)} className="space-y-4">
                <Input placeholder="이름" {...form.register("name")} disabled={isLoading} />
                <Input placeholder="이메일" {...form.register("email")} disabled={isLoading} />
                <Input type="password" placeholder="비밀번호" {...form.register("password")} disabled={isLoading} />
                {error && <p className="text-sm text-red-500">{error}</p>}
                <Button type="submit" className="w-full bg-green-600 hover:bg-green-700" disabled={isLoading}>
                  {isLoading ? <Loader2 className="w-4 h-4 animate-spin mr-2" /> : null}
                  가입하기
                </Button>
              </form>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  );
}

// hooks/use-media-query.ts
import { useState, useEffect } from "react";

export function useMediaQuery(query: string) {
  const [value, setValue] = useState(false);

  useEffect(() => {
    function onChange(event: MediaQueryListEvent) {
      setValue(event.matches);
    }

    const result = matchMedia(query);
    result.addEventListener("change", onChange);
    setValue(result.matches);

    return () => result.removeEventListener("change", onChange);
  }, [query]);

  return value;
}

"use client";

import { ElementRef, useEffect, useRef, useState } from "react";
import { usePathname } from "next/navigation";
import { useMediaQuery } from "@/hooks/use-media-query";
import { cn } from "@/lib/utils";
import { 
  ChevronsLeft, Menu, Plus, Search, Settings, 
  Trash, FileText, Home, LogOut 
} from "lucide-react";
import { signOut, useSession } from "next-auth/react";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Separator } from "@/components/ui/separator";
import { Button } from "@/components/ui/button";

export const Navigation = () => {
  const pathname = usePathname();
  const isMobile = useMediaQuery("(max-width: 768px)");
  const { data: session } = useSession();

  const isResizingRef = useRef(false);
  const sidebarRef = useRef<ElementRef<"aside">>(null);
  const navbarRef = useRef<ElementRef<"div">>(null);
  const [isResetting, setIsResetting] = useState(false);
  const [isCollapsed, setIsCollapsed] = useState(isMobile);

  // 마우스 이벤트로 사이드바 크기 조절
  const handleMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
    event.preventDefault();
    event.stopPropagation();
    isResizingRef.current = true;
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
  };

  const handleMouseMove = (event: MouseEvent) => {
    if (!isResizingRef.current) return;
    let newWidth = event.clientX;

    if (newWidth < 240) newWidth = 240; // 최소 너비
    if (newWidth > 480) newWidth = 480; // 최대 너비

    if (sidebarRef.current && navbarRef.current) {
      sidebarRef.current.style.width = `${newWidth}px`;
      navbarRef.current.style.setProperty("left", `${newWidth}px`);
      navbarRef.current.style.setProperty("width", `calc(100% - ${newWidth}px)`);
    }
  };

  const handleMouseUp = () => {
    isResizingRef.current = false;
    document.removeEventListener("mousemove", handleMouseMove);
    document.removeEventListener("mouseup", handleMouseUp);
  };

  // 사이드바 접기/펼치기
  const resetWidth = () => {
    if (sidebarRef.current && navbarRef.current) {
      setIsCollapsed(false);
      setIsResetting(true);

      sidebarRef.current.style.width = isMobile ? "100%" : "240px";
      navbarRef.current.style.setProperty("width", isMobile ? "0" : "calc(100% - 240px)");
      navbarRef.current.style.setProperty("left", isMobile ? "100%" : "240px");
      
      setTimeout(() => setIsResetting(false), 300);
    }
  };

  const collapse = () => {
    if (sidebarRef.current && navbarRef.current) {
      setIsCollapsed(true);
      setIsResetting(true);

      sidebarRef.current.style.width = "0";
      navbarRef.current.style.setProperty("width", "100%");
      navbarRef.current.style.setProperty("left", "0");
      
      setTimeout(() => setIsResetting(false), 300);
    }
  };

  // 모바일/데스크탑 전환 시 처리
  useEffect(() => {
    if (isMobile) {
      collapse();
    } else {
      resetWidth();
    }
  }, [isMobile]);

  // 페이지 이동 시 모바일에선 사이드바 닫기
  useEffect(() => {
    if (isMobile) collapse();
  }, [pathname, isMobile]);

  return (
    <>
      <aside
        ref={sidebarRef}
        className={cn(
          "group/sidebar h-full bg-[#f9f9f9] overflow-y-auto relative flex w-60 flex-col z-[99999] border-r shadow-sm",
          isResetting && "transition-all ease-in-out duration-300",
          isMobile && "w-0"
        )}
      >
        {/* 사이드바 닫기 버튼 (Hover시 표시) */}
        <div
          onClick={collapse}
          role="button"
          className={cn(
            "h-6 w-6 text-muted-foreground rounded-sm hover:bg-neutral-300 absolute top-3 right-2 opacity-0 group-hover/sidebar:opacity-100 transition",
            isMobile && "opacity-100"
          )}
        >
          <ChevronsLeft className="h-6 w-6" />
        </div>

        {/* 1. 유저 프로필 섹션 */}
        <div className="p-4">
            <div className="flex items-center gap-x-2 text-sm font-medium mb-4">
                <Avatar className="h-6 w-6">
                    <AvatarImage src={session?.user?.image || ""} />
                    <AvatarFallback>{session?.user?.name?.[0] || "U"}</AvatarFallback>
                </Avatar>
                <span className="truncate text-neutral-600">
                    {session?.user?.name || "사용자"}의 Evernote
                </span>
            </div>
            
            {/* 새 노트 버튼 */}
            <Button className="w-full justify-start bg-green-600 hover:bg-green-700 text-white rounded-full mb-2">
                <Plus className="h-4 w-4 mr-2" />
                새 노트
            </Button>
        </div>

        <Separator />

        {/* 2. 메뉴 리스트 */}
        <div className="flex flex-col gap-y-1 p-2">
            <NavItem icon={Home} label="홈" active={pathname === "/documents"} />
            <NavItem icon={FileText} label="노트" />
            <NavItem icon={Search} label="검색" />
            <NavItem icon={Settings} label="설정" />
            <NavItem icon={Trash} label="휴지통" />
        </div>

        {/* 하단 로그아웃 */}
        <div className="mt-auto p-4">
             <Button variant="ghost" className="w-full justify-start text-muted-foreground" onClick={() => signOut()}>
                <LogOut className="h-4 w-4 mr-2" />
                로그아웃
            </Button>
        </div>

        {/* 3. 리사이즈 핸들바 */}
        <div
          onMouseDown={handleMouseDown}
          onClick={resetWidth}
          className="opacity-0 group-hover/sidebar:opacity-100 transition cursor-ew-resize absolute h-full w-1 bg-primary/10 right-0 top-0"
        />
      </aside>

      {/* 4. 사이드바가 닫혔을 때 보이는 햄버거 메뉴 (Top Navbar) */}
      <div
        ref={navbarRef}
        className={cn(
          "absolute top-0 z-[99999] left-60 w-[calc(100%-240px)]",
          isResetting && "transition-all ease-in-out duration-300",
          isMobile && "left-0 w-full"
        )}
      >
        {isCollapsed && (
            <nav className="bg-transparent px-3 py-2 w-full">
              <Menu role="button" onClick={resetWidth} className="h-6 w-6 text-muted-foreground" />
            </nav>
        )}
      </div>
    </>
  );
};

// 메뉴 아이템용 작은 컴포넌트
function NavItem({ icon: Icon, label, active }: { icon: any, label: string, active?: boolean }) {
    return (
        <div className={cn(
            "flex items-center gap-x-2 p-2 rounded-md cursor-pointer hover:bg-neutral-200 text-sm text-neutral-700",
            active && "bg-neutral-200 text-neutral-900 font-medium"
        )}>
            <Icon className="h-4 w-4 shrink-0" />
            <span>{label}</span>
        </div>
    )
}

// app/(main)/layout.tsx
import { redirect } from "next/navigation";
import { getServerSession } from "next-auth"; // NextAuth v4/v5 버전에 따라 import 경로 주의
import { Navigation } from "./_components/navigation";

export default async function MainLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  // 1. 서버 사이드 세션 체크 (로그인 안했으면 쫓아내기)
  const session = await getServerSession(); 

  if (!session) {
    return redirect("/login");
  }

  return (
    <div className="h-full flex dark:bg-[#1F1F1F]">
      {/* 2. 좌측 사이드바 */}
      <Navigation />
      
      {/* 3. 메인 컨텐츠 영역 (노트 리스트 + 에디터가 들어올 곳) */}
      <main className="flex-1 h-full overflow-y-auto">
        {children}
      </main>
    </div>
  );
}

import { Button } from "@/components/ui/button";
import { PlusCircle } from "lucide-react";

export default function DocumentsPage() {
  return (
    <div className="h-full flex flex-col items-center justify-center space-y-4">
      <h2 className="text-lg font-medium">환영합니다!</h2>
      <p className="text-muted-foreground text-sm">
        왼쪽 사이드바에서 노트를 선택하거나 새로 만드세요.
      </p>
      <Button>
        <PlusCircle className="h-4 w-4 mr-2" />
        노트 만들기
      </Button>
    </div>
  );
}

# 1. Tiptap 에디터 관련
npm install @tiptap/react @tiptap/starter-kit @tiptap/extension-placeholder

# 2. 유틸리티 (날짜, 디바운스)
npm install date-fns use-debounce

# 3. Shadcn Resizable (패널 크기 조절용)
npx shadcn-ui@latest add resizable
npx shadcn-ui@latest add textarea

// actions/note.ts
"use server";

import { db } from "@/lib/prisma";
import { getServerSession } from "next-auth"; // Auth 설정에 맞춰 import
import { revalidatePath } from "next/cache";

// 1. 노트 목록 가져오기
export const getNotes = async () => {
  const session = await getServerSession();
  if (!session?.user?.email) return [];

  const user = await db.user.findUnique({ where: { email: session.user.email } });
  if (!user) return [];

  return await db.note.findMany({
    where: { userId: user.id, isArchived: false },
    orderBy: { updatedAt: "desc" },
  });
};

// 2. 새 노트 생성
export const createNote = async () => {
  const session = await getServerSession();
  if (!session?.user?.email) return null;

  const user = await db.user.findUnique({ where: { email: session.user.email } });
  if (!user) return null;

  const note = await db.note.create({
    data: {
      userId: user.id,
      title: "제목 없음",
      content: "",
    },
  });

  revalidatePath("/documents");
  return note;
};

// 3. 노트 업데이트 (자동 저장용)
export const updateNote = async (id: string, content: string, title: string) => {
  const session = await getServerSession();
  if (!session) return null;

  const note = await db.note.update({
    where: { id },
    data: { title, content, updatedAt: new Date() },
  });
  
  revalidatePath("/documents");
  return note;
};

"use client";

import { useEditor, EditorContent } from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
import Placeholder from "@tiptap/extension-placeholder";
import { useEffect } from "react";
import { Bold, Italic, List, ListOrdered, Heading1, Heading2 } from "lucide-react";
import { Toggle } from "@/components/ui/toggle";

interface EditorProps {
  initialContent?: string;
  onChange: (content: string) => void;
  editable?: boolean;
}

export const TiptapEditor = ({ initialContent, onChange, editable = true }: EditorProps) => {
  const editor = useEditor({
    extensions: [
      StarterKit,
      Placeholder.configure({
        placeholder: "여기에 내용을 입력하세요...",
      }),
    ],
    content: initialContent, // 초기 로딩 시 내용
    editable,
    onUpdate: ({ editor }) => {
      onChange(editor.getHTML()); // 내용이 바뀔 때마다 부모에게 알림
    },
    editorProps: {
        attributes: {
            class: "prose prose-sm focus:outline-none max-w-none min-h-[500px]" // Tailwind Typography 적용
        }
    }
  });

  // 노트가 바뀌면 에디터 내용도 강제로 업데이트 (선택 변경 시)
  useEffect(() => {
    if (editor && initialContent !== editor.getHTML()) {
        editor.commands.setContent(initialContent || "");
    }
  }, [initialContent, editor]);

  if (!editor) return null;

  return (
    <div className="flex flex-col h-full">
      {/* 툴바 영역 */}
      {editable && (
        <div className="border-b p-2 flex gap-1 items-center bg-transparent">
          <Toggle size="sm" onPressedChange={() => editor.chain().focus().toggleBold().run()} pressed={editor.isActive("bold")}>
            <Bold className="h-4 w-4" />
          </Toggle>
          <Toggle size="sm" onPressedChange={() => editor.chain().focus().toggleItalic().run()} pressed={editor.isActive("italic")}>
            <Italic className="h-4 w-4" />
          </Toggle>
          <Toggle size="sm" onPressedChange={() => editor.chain().focus().toggleHeading({ level: 1 }).run()} pressed={editor.isActive("heading", { level: 1 })}>
            <Heading1 className="h-4 w-4" />
          </Toggle>
          <Toggle size="sm" onPressedChange={() => editor.chain().focus().toggleBulletList().run()} pressed={editor.isActive("bulletList")}>
            <List className="h-4 w-4" />
          </Toggle>
        </div>
      )}
      
      {/* 에디터 본문 */}
      <div className="flex-1 p-8 overflow-y-auto">
        <EditorContent editor={editor} />
      </div>
    </div>
  );
};

"use client";

import { useEffect, useState, useCallback } from "react";
import { format } from "date-fns";
import { useDebouncedCallback } from "use-debounce";
import { Loader2, Plus, FileText } from "lucide-react";

import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
import { Button } from "@/components/ui/button";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Input } from "@/components/ui/input";

import { TiptapEditor } from "@/components/editor/tiptap-editor";
import { createNote, getNotes, updateNote } from "@/actions/note";
import { cn } from "@/lib/utils";

// 노트 타입 정의 (Prisma 모델과 일치)
type Note = {
  id: string;
  title: string;
  content: string | null;
  updatedAt: Date;
};

export default function DocumentsPage() {
  const [notes, setNotes] = useState<Note[]>([]);
  const [selectedNoteId, setSelectedNoteId] = useState<string | null>(null);
  const [loading, setLoading] = useState(true);

  // 현재 선택된 노트 객체 찾기
  const activeNote = notes.find((n) => n.id === selectedNoteId);

  // 초기 데이터 로딩
  useEffect(() => {
    const fetchNotes = async () => {
      const data = await getNotes();
      // @ts-ignore: 직렬화 문제 임시 회피 (실제로는 날짜 변환 필요)
      setNotes(data);
      if (data.length > 0) setSelectedNoteId(data[0].id);
      setLoading(false);
    };
    fetchNotes();
  }, []);

  // 새 노트 만들기
  const handleCreate = async () => {
    const newNote = await createNote();
    if (newNote) {
      // @ts-ignore
      setNotes([newNote, ...notes]);
      setSelectedNoteId(newNote.id);
    }
  };

  // 자동 저장 (Debounce: 입력 멈추고 1초 뒤 실행)
  const debouncedSave = useDebouncedCallback(async (id: string, title: string, content: string) => {
    await updateNote(id, content, title);
    // 리스트 상의 정보 업데이트 (낙관적 업데이트)
    setNotes((prev) => 
        prev.map((n) => n.id === id ? { ...n, title, content, updatedAt: new Date() } : n)
    );
  }, 1000);

  // 에디터 내용 변경 핸들러
  const handleContentChange = (content: string) => {
    if (!activeNote) return;
    // UI상 즉시 반영을 원하면 여기서 로컬 state 업데이트 가능
    debouncedSave(activeNote.id, activeNote.title, content);
  };
  
  // 제목 변경 핸들러
  const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    if (!activeNote) return;
    const newTitle = e.target.value;
    
    // 로컬 상태 즉시 업데이트 (반응성)
    setNotes((prev) => 
        prev.map((n) => n.id === activeNote.id ? { ...n, title: newTitle } : n)
    );
    
    debouncedSave(activeNote.id, newTitle, activeNote.content || "");
  };

  if (loading) {
    return <div className="h-full flex items-center justify-center"><Loader2 className="animate-spin text-muted-foreground" /></div>;
  }

  return (
    <div className="h-full">
      <ResizablePanelGroup direction="horizontal">
        
        {/* 1. 중간 패널: 노트 리스트 (25% ~ 40% 크기 조절 가능) */}
        <ResizablePanel defaultSize={25} minSize={20} maxSize={40} className="bg-white border-r">
          <div className="flex items-center justify-between p-4 border-b">
            <h2 className="text-xl font-bold text-neutral-800">노트</h2>
            <Button size="sm" onClick={handleCreate} className="bg-green-600 hover:bg-green-700 text-white">
              <Plus className="h-4 w-4 mr-1" /> 신규
            </Button>
          </div>
          <ScrollArea className="h-[calc(100vh-60px)]">
            <div className="flex flex-col gap-y-2 p-2">
              {notes.map((note) => (
                <div
                  key={note.id}
                  onClick={() => setSelectedNoteId(note.id)}
                  className={cn(
                    "p-3 rounded-lg cursor-pointer transition hover:bg-neutral-100 border border-transparent",
                    selectedNoteId === note.id && "bg-white border-green-500 shadow-sm"
                  )}
                >
                  <h3 className="font-semibold text-sm truncate text-neutral-900">
                    {note.title || "제목 없음"}
                  </h3>
                  <div className="text-xs text-neutral-500 mt-1 flex justify-between">
                    <span>{format(new Date(note.updatedAt), "MM/dd")}</span>
                    <span className="truncate max-w-[100px]">{note.content?.replace(/<[^>]*>?/gm, '').slice(0, 15)}...</span>
                  </div>
                </div>
              ))}
              {notes.length === 0 && (
                <div className="text-center text-sm text-neutral-400 mt-10">
                  <FileText className="h-10 w-10 mx-auto mb-2 opacity-50" />
                  작성된 노트가 없습니다.
                </div>
              )}
            </div>
          </ScrollArea>
        </ResizablePanel>

        <ResizableHandle />

        {/* 2. 우측 패널: 에디터 (나머지 영역) */}
        <ResizablePanel defaultSize={75}>
          {activeNote ? (
            <div className="h-full flex flex-col bg-white">
              {/* 노트 제목 입력 영역 */}
              <div className="p-6 pb-2">
                <Input 
                    value={activeNote.title} 
                    onChange={handleTitleChange}
                    className="text-4xl font-bold border-none shadow-none focus-visible:ring-0 px-0 placeholder:text-neutral-300"
                    placeholder="제목 없음"
                />
              </div>
              
              {/* Tiptap 에디터 */}
              <div className="flex-1 overflow-hidden">
                <TiptapEditor 
                    key={activeNote.id} // 키가 바뀌면 에디터 컴포넌트 리셋 (중요)
                    initialContent={activeNote.content || ""} 
                    onChange={handleContentChange} 
                />
              </div>
            </div>
          ) : (
            <div className="h-full flex items-center justify-center text-neutral-400">
              노트를 선택하거나 새로 만드세요.
            </div>
          )}
        </ResizablePanel>

      </ResizablePanelGroup>
    </div>
  );
}