[Lexical]Text editor

1. 파일가져오기

D:\000.FrontEnd\099_4.lexical_nextjs

여기 가서
app안에 api,components,hooks,lib 가져온다.

2. 원하는 곳에 가서 불러온다

"use client";
import Image from "next/image";
import RichTextEditor from "@/app/components/RichTextEditor";
import { useState, useEffect } from "react";

export default function Home() {
  const [contents, setContents] = useState("");

  return (
    <div className="min-h-screen bg-gray-50 py-8">
      <RichTextEditor contents={contents} setContents={setContents} />
    </div>
  );
}

3. 필요한 패키지들을 설치한다

npm install @lexical/clipboard@^0.31.2 @lexical/code@^0.31.2 @lexical/history@^0.31.2 @lexical/html@^0.31.2 @lexical/link@^0.31.2 @lexical/list@^0.31.2 @lexical/mark@^0.31.2 @lexical/markdown@^0.31.2 @lexical/react@^0.31.2 @lexical/rich-text@^0.31.2 @lexical/selection@^0.31.2 @lexical/table@^0.31.2 @lexical/utils@^0.31.2 @radix-ui/react-toast@^1.2.14 @supabase/ssr@^0.6.1 @supabase/supabase-js@^2.49.8 class-variance-authority@^0.7.1 clsx@^2.1.1 lexical@^0.31.2 lucide-react@^0.511.0 next@15.1.8 react@^19.0.0 react-dom@^19.0.0 react-icons@^5.5.0 tailwind-merge@^3.3.0 tailwindcss-animate@^1.0.7 --save-dev @types/node@^20 @types/react@^19 @types/react-dom@^19 postcss@^8 tailwindcss@^3.4.1 typescript@^5

4. .env.local에서 슈파베이스 환경변수 셋팅한다

NEXT_PUBLIC_SUPABASE_URL=ABCD
NEXT_PUBLIC_SUPABASE_ANON_KEY=ABCD