Merge pull request #8 from 5wonju/feat/#1/login

Feat/#1/login

frontend/app/api/logout/route.ts

@@ -1,7 +1,7 @@
 import { NextResponse } from 'next/server'
 
 export async function GET(req: Request) {
-	let response = NextResponse.next()
+	let response = NextResponse.json({})
 	// 액세스 토큰 제거
 	response.cookies.delete('access-token')
 	return response

frontend/app/api/socketToken/route.ts

@@ -0,0 +1,11 @@
+import { randomUUID } from 'crypto'
+import { NextRequest, NextResponse } from 'next/server'
+
+export async function GET(req: NextRequest) {
+	const access_token = req.cookies.get('access_token')?.value
+	if (access_token && access_token === 'asdasdasfdsf') {
+		const socketToken = randomUUID()
+		return NextResponse.json({ socketToken: socketToken }, { status: 200 })
+	}
+	return NextResponse.json({ error: '하하 바보' }, { status: 401 })
+}

frontend/app/channel/lib/api.ts

@@ -0,0 +1,16 @@
+import { tokenInstance } from '@/app/axios'
+
+export const getSocketToken = async () => {
+	try {
+		const response = await tokenInstance.get('/api/socketToken')
+		return response.data
+	} catch (error) {
+		console.error(error)
+		throw error
+	}
+}
+
+export const connectServerSocket = async (region: string, socketToken: string) => {
+	const ws = new WebSocket(`wss://yourdomain.com/ws/${region}`, [socketToken])
+	return ws
+}

frontend/app/channel/page.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { connectServerSocket, getSocketToken } from './lib/api'
+
+const serverData = [
+	{ name: '구미', count: '654/1000' },
+	{ name: '서울', count: '200/1000' },
+	{ name: '아귀찮ㄷ', count: '23/321' },
+]
+
+const Channel = () => {
+	let ws
+	const handleConnectSocket = async (region: string) => {
+		const response = await getSocketToken()
+		const newSocketToken = response.socketToken
+		localStorage.setItem('socketToken', newSocketToken)
+		ws = await connectServerSocket(region, newSocketToken)
+	}
+	return (
+		<div className="flex flex-col">
+			<h1>Channel</h1>
+			{serverData.map((data, key) => (
+				<button
+					key={key}
+					className="flex items-center justify-between w-96"
+					onClick={() => handleConnectSocket(data.name)}
+				>
+					<p>{data.name}</p>
+					<p>{data.count}</p>
+				</button>
+			))}
+			<div className="flex"></div>
+		</div>
+	)
+}
+
+export default Channel

frontend/app/login/callback/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { useRouter, useSearchParams } from 'next/navigation'
-import React, { useEffect } from 'react'
+import React, { Suspense, useEffect } from 'react'
 import { useAuth } from '@/app/lib/hooks/useAuth'
 
 const LoginCallbackPage = () => {
@@ -22,7 +22,11 @@ const LoginCallbackPage = () => {
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [])
 
-	return <div>Logging in...</div>
+	return (
+		<Suspense fallback={<div>Loading...</div>}>
+			<div>Logging in...</div>
+		</Suspense>
+	)
 }
 
 export default LoginCallbackPage