chore: 깃헙 로그인 구현

package.json

@@ -25,6 +25,9 @@
 	},
 	"type": "module",
 	"dependencies": {
-		"@supabase/supabase-js": "^2.39.0"
+		"@supabase/auth-helpers-sveltekit": "^0.10.7",
+		"@supabase/auth-ui-shared": "^0.1.8",
+		"@supabase/auth-ui-svelte": "^0.2.8",
+		"@supabase/supabase-js": "^2.39.1"
 	}
 }

src/app.d.ts

@@ -0,0 +1,17 @@
+// src/app.d.ts
+
+import { SupabaseClient, Session } from '@supabase/supabase-js'
+
+declare global {
+  namespace App {
+    interface Locals {
+      supabase: SupabaseClient
+      getSession(): Promise<Session | null>
+    }
+    interface PageData {
+      session: Session | null
+    }
+    // interface Error {}
+    // interface Platform {}
+  }
+}

src/components/nav.svelte

@@ -2,20 +2,42 @@
 	import { page } from '$app/stores';
 	import { derived } from 'svelte/store';
 
+	export let signInWithGithub;
+	export let signOut;
+	export let currentUser;
+
+	let user;
+	$: currentUser().then((u) => {
+		user = u;
+	});
+
 	const currentPath = derived(page, ($page) => $page.url.pathname);
 </script>
 
-<nav class="fixed top-0 left-0 w-full z-10 flex justify-center bg-mainPurple py-4">
-	<div class="w-full max-w-6xl text-base text-gray-200 flex justify-center md:justify-end">
-		<a class="mx-4 nav-link" href="/" class:font-bold={$currentPath === '/'}>월간 메이커스</a>
-		<a class="mx-4 nav-link" href="/projects" class:font-bold={$currentPath === '/projects'}
-			>프로젝트 등록</a
-		>
-		<a class="mx-4 nav-link" href="/my" class:font-bold={$currentPath === '/my'}>내 프로젝트 관리</a
-		>
-		<a class="mx-4 nav-link" href="/community" class:font-bold={$currentPath === '/community'}
-			>커뮤니티</a
-		>
+<nav class="fixed top-0 left-0 w-full z-10 flex justify-center bg-mainPurple py-4 h-16">
+	<div
+		class="w-full max-w-6xl text-base text-gray-200 flex justify-center md:justify-between items-center"
+	>
+		<div>
+			<a class="mx-4 nav-link" href="/" class:font-bold={$currentPath === '/'}>월간 메이커스</a>
+			<a class="mx-4 nav-link" href="/projects" class:font-bold={$currentPath === '/projects'}
+				>프로젝트 등록</a
+			>
+			<a class="mx-4 nav-link" href="/my" class:font-bold={$currentPath === '/my'}
+				>내 프로젝트 관리</a
+			>
+			<a class="mx-4 nav-link" href="/community" class:font-bold={$currentPath === '/community'}
+				>커뮤니티</a
+			>
+		</div>
+		<div class="mx-4 flex justify-center md:justify-start">
+			{#if user}
+				<img class="w-8 h-8 rounded-full mx-4" src={user.user_metadata.avatar_url} alt="avatar" />
+				<button on:click={signOut}>Sign out</button>
+			{:else}
+				<button on:click={signInWithGithub}>Sign in with GitHub</button>
+			{/if}
+		</div>
 	</div>
 </nav>
 

src/hooks.server.ts

@@ -0,0 +1,28 @@
+// src/hooks.server.ts
+import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public'
+import { createSupabaseServerClient } from '@supabase/auth-helpers-sveltekit'
+import type { Handle } from '@sveltejs/kit'
+
+export const handle: Handle = async ({ event, resolve }) => {
+  event.locals.supabase = createSupabaseServerClient({
+    supabaseUrl: PUBLIC_SUPABASE_URL,
+    supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
+    event,
+  })
+
+  /**
+   * A convenience helper so we can just call await getSession() instead const { data: { session } } = await supabase.auth.getSession()
+   */
+  event.locals.getSession = async () => {
+    const {
+      data: { session },
+    } = await event.locals.supabase.auth.getSession()
+    return session
+  }
+
+  return resolve(event, {
+    filterSerializedResponseHeaders(name) {
+      return name === 'content-range'
+    },
+  })
+}

src/routes/+layout.server.ts

@@ -0,0 +1,6 @@
+// src/routes/+layout.server.ts
+export const load = async ({ locals: { getSession } }) => {
+    return {
+      session: await getSession(),
+    }
+  }

src/routes/+layout.svelte

@@ -1,19 +1,67 @@
 <script>
-    import "../app.css";
-    import Nav from '../components/nav.svelte';
-</script>
+	import '../app.css';
+	import Nav from '../components/nav.svelte';
 
-<style>
-    :global(body) {
-      /* background-color: #0e0719; */
-      background-color: #F3F4F6;
-    }
-  </style>
+	import { invalidate } from '$app/navigation';
+	import { onMount } from 'svelte';
+
+	export let data;
+
+	let { supabase, session } = data;
+	$: ({ supabase, session } = data);
+
+	onMount(() => {
+		const { data } = supabase.auth.onAuthStateChange((event, _session) => {
+			if (_session?.expires_at !== session?.expires_at) {
+				invalidate('supabase:auth');
+			}
+		});
+
+		return () => data.subscription.unsubscribe();
+	});
+
+	async function currentUser() {
+		try {
+			const { data } = await supabase.auth.getUser();
+			return data.user;
+		} catch (error) {
+			console.error('Error fetching user:', error);
+			return null;
+		}
+	}
+	async function signInWithGithub() {
+		const { data, error } = await supabase.auth.signInWithOAuth({
+			provider: 'github',
+			options: {
+				redirectTo: '/'
+			}
+		});
+		console.log(error);
+	}
+
+	async function signOut() {
+		const { error } = await supabase.auth.signOut();
+		if (!error) {
+			// 로그아웃 성공 후 페이지 새로고침
+			location.reload();
+		} else {
+			// 오류 처리 (필요한 경우)
+			console.error('Logout failed:', error);
+		}
+	}
+</script>
 
 <div class="mx-auto">
-<Nav></Nav>
+	<Nav {signInWithGithub} {signOut} {currentUser}></Nav>
 </div>
 
 <div class="max-w-6xl mx-auto mt-32">
-<slot />
-</div>
+	<slot />
+</div>
+
+<style>
+	:global(body) {
+		/* background-color: #0e0719; */
+		background-color: #f3f4f6;
+	}
+</style>

src/routes/+layout.ts

@@ -0,0 +1,20 @@
+// src/routes/+layout.ts
+import { PUBLIC_SUPABASE_ANON_KEY, PUBLIC_SUPABASE_URL } from '$env/static/public'
+import { createSupabaseLoadClient } from '@supabase/auth-helpers-sveltekit'
+
+export const load = async ({ fetch, data, depends }) => {
+  depends('supabase:auth')
+
+  const supabase = createSupabaseLoadClient({
+    supabaseUrl: PUBLIC_SUPABASE_URL,
+    supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
+    event: { fetch },
+    serverSession: data.session,
+  })
+
+  const {
+    data: { session },
+  } = await supabase.auth.getSession()
+
+  return { supabase, session }
+}

src/routes/+page.svelte

@@ -16,20 +16,6 @@
 	}
 
 	export let data;
-
-	async function signInWithGithub() {
-		const { data, error } = await supabase.auth.signInWithOAuth({
-			provider: 'github',
-			options: {
-				redirectTo: '/'
-			}
-		});
-		console.log(data);
-	}
-
-	async function signOut() {
-		const { error } = await supabase.auth.signOut();
-	}
 </script>
 
 <svelte:head>
@@ -62,7 +48,3 @@
 		<li>{project.title}</li>
 	{/each}
 </ul>
-
-<button on:click={signInWithGithub}>Sign in with GitHub</button>
-
-<button on:click={signOut}>Sign out</button>