Feat naver map

frontend/next.config.js

@@ -60,6 +60,12 @@ const nextConfig = {
         port: '',
         pathname: '/**',
       },
+      {
+        protocol: 'https',
+        hostname: 'phinf.pstatic.net',
+        port: '',
+        pathname: '/**',
+      },
     ],
   },
   output: 'standalone',

frontend/src/app/(without-header)/login/page.tsx

@@ -8,13 +8,18 @@ import LoginLogo from '/public/logo/yigil_logo.svg';
 import CloseButton from '@/app/_components/ui/button/CloseButton';
 
 import { kakaoOAuthEndpoint } from '@/app/endpoints/api/auth/callback/kakao/constants';
+import { naverOAuthEndPoint } from '@/app/endpoints/api/auth/callback/naver/constants';
+import GoogleLoginButton from '@/app/_components/ui/button/GoogleLoginButton';
+import NaverLoginButton from '@/app/_components/ui/button/NaverLoginButton';
+import { googleOAuthEndPoint } from '@/app/endpoints/api/auth/callback/google/constants';
 // import { googleOAuthEndPoint } from '@/app/endpoints/api/auth/callback/google/constants';
 
 export default async function LoginPage() {
-  const { KAKAO_ID, GOOGLE_CLIENT_ID } = process.env;
+  const { KAKAO_ID, GOOGLE_CLIENT_ID, NAVER_SEARCH_ID } = process.env;
 
   const kakaoHref = await kakaoOAuthEndpoint(KAKAO_ID);
-  // const googleHref = await googleOAuthEndPoint(GOOGLE_CLIENT_ID);
+  const googleHref = await googleOAuthEndPoint(GOOGLE_CLIENT_ID);
+  const naverHref = await naverOAuthEndPoint(NAVER_SEARCH_ID);
 
   return (
     <div className="w-full h-full bg-main flex flex-col items-center">
@@ -34,7 +39,8 @@ export default async function LoginPage() {
         </div>
         <div className="w-full mt-10 px-7 flex flex-col items-center justify-center gap-4">
           <KakaoBtn href={kakaoHref} />
-          {/* <GoogleLoginButton href={googleHref} /> */}
+          <NaverLoginButton href={naverHref} />
+          <GoogleLoginButton href={googleHref} />
         </div>
       </div>
     </div>

frontend/src/app/_components/ui/button/NaverLoginButton.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import NaverLogo from '@/../public/loginBtns/naver_logo.svg';
+import Link from 'next/link';
+
+export default function NaverLoginButton({ href }: { href: string }) {
+  return (
+    <Link
+      href={href}
+      className="w-full py-3 rounded-2xl bg-[#03C75A] border-none flex gap-2 justify-center items-center hover:cursor-pointer hover:bg-[#00bc3a] active:bg-[#00ac31]"
+    >
+      <NaverLogo className="mr-2" />
+      <span className="text-lg leading-none text-white py-[2px]">
+        네이버 로그인
+      </span>
+    </Link>
+  );
+}

frontend/src/app/endpoints/api/auth/callback/naver/constants.ts

@@ -0,0 +1,17 @@
+import { getCallbackUrlBase } from '../kakao/constants';
+
+export const NAVER_BASE_URL = 'https://openapi.naver.com/v1/nid/me';
+export const NAVER_AUTH_BASE_URL = 'https://nid.naver.com/oauth2.0';
+
+export async function naverRedirectUri() {
+  const callbackUrlBase = await getCallbackUrlBase();
+  return `${callbackUrlBase}/endpoints/api/auth/callback/naver`;
+}
+
+export async function naverOAuthEndPoint(clientId: string) {
+  const endPoint = `${NAVER_AUTH_BASE_URL}/authorize`;
+  const redirectUri = await naverRedirectUri();
+  const queryParams = `client_id=${clientId}&redirect_uri=${redirectUri}&response_type=code`;
+
+  return `${endPoint}?${queryParams}`;
+}

frontend/src/app/endpoints/api/auth/callback/naver/route.ts

@@ -0,0 +1,126 @@
+import { backendLoginRequest } from '@/app/_components/api/action';
+import { NextRequest, NextResponse } from 'next/server';
+import {
+  NAVER_AUTH_BASE_URL,
+  NAVER_BASE_URL,
+  naverOAuthEndPoint,
+  naverRedirectUri,
+} from './constants';
+import { getCallbackUrlBase } from '../kakao/constants';
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+
+  const code = searchParams.get('code');
+
+  if (!code) {
+    return NextResponse.json(
+      { message: 'Failed to get Authorization codew' },
+      { status: 400 },
+    );
+  }
+
+  const { NAVER_SEARCH_ID, NAVER_SEARCH_SECRET, ENVIRONMENT } = process.env;
+
+  const redirectUri = await naverRedirectUri();
+
+  const userTokenResponse = await userTokenRequest(
+    NAVER_SEARCH_ID,
+    redirectUri,
+    code,
+    NAVER_SEARCH_SECRET,
+  );
+
+  if (!userTokenResponse.ok) {
+    return NextResponse.json({
+      message: 'Failed to get user',
+      status: 400,
+    });
+  }
+  const userTokenJson = await userTokenResponse.json();
+
+  const userInfoResponse = await userInfoRequest(userTokenJson.access_token);
+  if (!userInfoResponse.ok) {
+    return NextResponse.json({
+      message: 'Failed to get user info',
+      status: 400,
+    });
+  }
+  const { response: userInfoJson } = await userInfoResponse.json();
+
+  const backendRequestData = {
+    id: userInfoJson.id,
+    nickname: userInfoJson.nickname,
+    profile_image_url: userInfoJson.profile_image,
+    email: userInfoJson.email,
+    provider: 'naver',
+    accessToken: userTokenJson.access_token,
+  };
+
+  const backendResponse = await backendLoginRequest(backendRequestData);
+
+  if (!backendResponse.ok) {
+    return NextResponse.json(
+      { message: 'Failed to login to backend server' },
+      { status: 400 },
+    );
+  }
+
+  const [key, value] = backendResponse.headers
+    .getSetCookie()[0]
+    .split('; ')[0]
+    .split('=');
+
+  const baseUrl = await getCallbackUrlBase();
+
+  const response = NextResponse.redirect(new URL('/', baseUrl), {
+    status: 302,
+  });
+
+  response.cookies.set({
+    name: key,
+    value,
+    secure: ENVIRONMENT === 'production',
+  });
+
+  return response;
+}
+
+function userTokenRequest(
+  clientId: string,
+  redirectUri: string,
+  code: string,
+  secret: string,
+) {
+  const requestData = new Map<string, string>();
+  requestData.set('grant_type', 'authorization_code');
+  requestData.set('client_id', clientId);
+  requestData.set('redirect_uri', redirectUri);
+  requestData.set('code', code);
+  requestData.set('client_secret', secret);
+  const queryString = Array.from(requestData.entries())
+    .map(([key, value]) => `${key}=${value}`)
+    .join('&');
+
+  const userTokenUrl = `${NAVER_AUTH_BASE_URL}/token?${queryString}`;
+
+  return fetch(userTokenUrl, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
+    },
+    cache: 'no-store',
+  });
+}
+
+function userInfoRequest(accessToken: string) {
+  const userInfoUrl = `${NAVER_BASE_URL}`;
+
+  return fetch(userInfoUrl, {
+    headers: {
+      'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
+      Authorization: `Bearer ${accessToken}`,
+    },
+    cache: 'no-store',
+  });
+}