로그인 기능 추가

app/auth/callback/route.ts

@@ -0,0 +1,15 @@
+import { createRouteHandlerClient } from "@supabase/auth-helpers-nextjs";
+import { cookies } from "next/headers";
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+  const supabase = createRouteHandlerClient({ cookies });
+  const { searchParams } = new URL(req.url);
+  const code = searchParams.get("code");
+
+  if (code) {
+    await supabase.auth.exchangeCodeForSession(code);
+  }
+
+  return NextResponse.redirect(new URL("/", req.url));
+}

app/auth/login/AuthForm.tsx

@@ -0,0 +1,21 @@
+"use client";
+import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
+import { Auth } from "@supabase/auth-ui-react";
+import { ThemeSupa } from "@supabase/auth-ui-shared";
+
+export function AuthForm() {
+  const supabase = createClientComponentClient();
+  const host = process.env.NEXT_PUBLIC_VERCEL_URL
+    ? `https://${process.env.NEXT_PUBLIC_VERCEL_URL}`
+    : `http://localhost:3000`;
+  return (
+    <Auth
+      supabaseClient={supabase}
+      appearance={{ theme: ThemeSupa }}
+      showLinks={false}
+      providers={["google"]}
+      redirectTo={`${host}/auth/callback`}
+      onlyThirdPartyProviders={true}
+    />
+  );
+}

app/auth/login/page.tsx

@@ -0,0 +1,5 @@
+import { AuthForm } from "./AuthForm";
+
+export default function App() {
+  return <AuthForm />;
+}

app/feedbacker/Feedbacker.tsx

@@ -0,0 +1,44 @@
+"use client";
+import { BlockNoteEditor, Editor } from "@/components/Editor";
+import { EmojiContainer } from "@/components/EmojiContainer";
+import { User } from "@supabase/auth-helpers-nextjs";
+import { useState } from "react";
+
+export function Feedbacker({ user }: { user: User | null }) {
+  console.log("user", user);
+  const [editor, setEditor] = useState<BlockNoteEditor | null>(null);
+
+  const handleEditorReady = (editor: BlockNoteEditor | null) => {
+    console.log("handleEditorReady");
+    setEditor(editor);
+  };
+
+  const [editable, setEditable] = useState(false);
+
+  return (
+    <>
+      <div className="w-full">
+        <div className="flex justify-center">
+          {editor ? <EmojiContainer editor={editor} /> : null}
+        </div>
+        <div className="flex justify-center items-center mt-2">
+          <input
+            type="checkbox"
+            id="checkbox"
+            checked={editable}
+            onChange={() => setEditable(!editable)}
+            className="h-5 w-5 mr-2"
+          />
+          <label htmlFor="checkbox">편집 활성화</label>
+        </div>
+        <div className="p-28">
+          <Editor
+            editable={editable}
+            onEditorReady={handleEditorReady}
+            userName={user?.user_metadata?.full_name}
+          />
+        </div>
+      </div>
+    </>
+  );
+}

app/feedbacker/page.tsx

@@ -1,61 +1,17 @@
-"use client";
-import { BlockNoteEditor, Editor, PartialBlock } from "@/components/Editor";
-import { EmojiContainer } from "@/components/EmojiContainer";
-import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";
-import { useState } from "react";
-const emojis = ["👍", "🤔", "🌟", "👎"]; // Your emoji list
+import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+import { cookies } from "next/headers";
+import { Feedbacker } from "./Feedbacker";
 
-export default function Feedbacker() {
-  const supabase = createClientComponentClient();
-  const [textCursorPosition, setTextCursorPosition] = useState<{
-    blockId: string | null;
-    nextBlockId: string | null;
-    prevBlockId: string | null;
-  }>({
-    blockId: null,
-    nextBlockId: null,
-    prevBlockId: null,
-  });
+export default async function Page() {
+  const supabase = createServerComponentClient({ cookies });
 
-  const [editor, setEditor] = useState<BlockNoteEditor | null>(null);
-
-  const handleEditorReady = (editor: BlockNoteEditor | null) => {
-    console.log("handleEditorReady");
-    setEditor(editor);
-  };
-
-
-
-  const [editable, setEditable] = useState(false);
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
 
   return (
     <>
-      <div className="w-full">
-        <div className="flex justify-center">
-          {editor ?
-            <EmojiContainer
-              editor={editor}
-            /> : null
-          }
-        </div>
-        <div className="flex justify-center items-center mt-2">
-          <input
-            type="checkbox"
-            id="checkbox"
-            checked={editable}
-            onChange={() => setEditable(!editable)}
-            className="h-5 w-5 mr-2"
-          />
-          <label htmlFor="checkbox">편집 활성화</label>
-        </div>
-        <div className="p-28">
-          <Editor
-            editable={editable}
-            onEditorReady={handleEditorReady}
-            onTextCursorPositionChange={setTextCursorPosition}
-          />
-        </div>
-      </div>
+      <Feedbacker user={user} />
     </>
   );
 }

app/notetaker/page.tsx

@@ -1,12 +1,19 @@
-"use client";
 import { Editor } from "@/components/Editor";
+import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+import { cookies } from "next/headers";
+
+export default async function Notetaker() {
+  const supabase = createServerComponentClient({ cookies });
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
 
-export default function Notetaker() {
   return (
     <>
       <div className="w-full">
         <div className="p-12">
-          <Editor editable={true} />
+          <Editor editable={true} userName={user?.user_metadata?.full_name} />
         </div>
       </div>
     </>

components/Editor.tsx

@@ -51,6 +51,7 @@ export const Editor = ({
   onEditorReady,
   onTextCursorPositionChange,
   editable,
+  userName,
 }: {
   onEditorReady?: (editor: BlockNoteEditor | null) => void;
   setTextCursorBlockId?: (blockId: string | null) => void;
@@ -60,14 +61,15 @@ export const Editor = ({
     prevBlockId: string | null;
   }) => void;
   editable: boolean;
+  userName?: string;
 }) => {
   const [doc, provider] = useMemo(() => {
     const doc = new Y.Doc();
     const provider = new YPartyKitProvider(
       "blocknote-dev.yousefed.partykit.dev",
       // use a unique name as a "room" for your application:
       "jaechan-lee-project",
-      doc
+      doc,
     );
     return [doc, provider];
   }, []);
@@ -107,7 +109,7 @@ export const Editor = ({
                   if (newEmoji.length === 0) {
                     console.log("textBlockId", block.props.textBlockId);
                     const textBlock = editorRef.current?.getBlock(
-                      block.props.textBlockId
+                      block.props.textBlockId,
                     );
                     if (textBlock) {
                       editorRef.current?.updateBlock(block.props.textBlockId, {
@@ -145,7 +147,7 @@ export const Editor = ({
       fragment: doc.getXmlFragment("document-store"),
       // Information (name and color) for this user:
       user: {
-        name: "My Username",
+        name: userName ?? "Anonymous",
         color: "#ff0000",
       },
     },

components/LinkWithRoute.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+export function LinkWithRoute({ href, text }: { href: string; text: string }) {
+  const pathname = usePathname();
+  return (
+    <Link
+      href={href}
+      className={`text-white hover:text-blue-300 ${
+        pathname === href ? "font-bold" : ""
+      }`}
+    >
+      {text}
+    </Link>
+  );
+}

components/NagivationBar.tsx

@@ -1,36 +1,36 @@
-"use client";
-import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
+import { cookies } from "next/headers";
+import { LinkWithRoute } from "./LinkWithRoute";
+import { UserInfo } from "./UserInfo";
 
-export function NavigationBar() {
-  const pathname = usePathname();
+export async function NavigationBar() {
+  const supabase = createServerComponentClient({ cookies });
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  console.log(user);
   return (
     <>
-      <nav className="flex items-center justify-between p-4 bg-blue-500">
-        <div className="flex items-center text-white mr-6">
+      <nav className="flex items-center justify-between p-4 bg-blue-500  text-white">
+        <div className="flex items-center mr-6">
           <span className="font-semibold text-xl">Emobridge</span>
         </div>
         <div className="block">
           <ul className="flex">
             <li className="mr-6">
-              <Link
-                href="/feedbacker"
-                className={`text-white hover:text-blue-300 ${
-                  pathname === "/feedbacker" ? "font-bold" : ""
-                }`}
-              >
-                장애학생 페이지
-              </Link>
+              <LinkWithRoute href="/feedbacker" text="장애학생 페이지" />
+            </li>
+            <li className="mr-6">
+              <LinkWithRoute href="/notetaker" text="지원인력 페이지" />
             </li>
             <li className="mr-6">
-              <Link
-                href="/notetaker"
-                className={`text-white hover:text-blue-300 ${
-                  pathname === "/notetaker" ? "font-bold" : ""
-                }`}
-              >
-                지원인력 페이지
-              </Link>
+              {user ? (
+                <UserInfo user={user} />
+              ) : (
+                <LinkWithRoute href="/auth/login" text="로그인" />
+              )}
             </li>
           </ul>
         </div>

components/UserInfo.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import {
+  User,
+  createClientComponentClient,
+} from "@supabase/auth-helpers-nextjs";
+
+export const UserInfo = ({ user }: { user: User }) => {
+  const supabase = createClientComponentClient();
+  return (
+    <div
+      className="cursor-pointer text-white hover:text-blue-300"
+      onClick={async () => {
+        await supabase.auth.signOut();
+        window.location.reload();
+      }}
+    >
+      {user.email}
+    </div>
+  );
+};