✍️ PR 한 줄 요약

34

네이버, 카카오, 구글 로그인 기능 추가

✏ 상세 작업 내용

1. 네이버 로그인 기능 추가 (참고 자료)

 // 사이트 URL
 https://genisisu.vercel.app
 // callback URL
https://genisisu.vercel.app/api/auth/callback/naver
https://hyundai-morgans.vercel.app/api/auth/callback/naver
http://localhost:3000/api/auth/callback/naver

‘expires_in’ 타입 에러 해결 (참고 자료)
- 알고보니 네이버 측에서 OAuth 2.0 스펙을 준수하지 않고, expires_in변수를 number 타입이 아닌, string 으로 반환하고 있었음
- npm으로는 해결이 안되고 계속 에러가 발생함
- 빌드 캐시를 제거하고 pnpm으로 시도해하여 해결함.
```
// pnpm 설치
npm i -g pnpm
```

// package.json ...json

"pnpm": { "overrides": { "oauth4webapi": "npm:@jacobkim/oauth4webapi@^2.10.4" } }

- user 타입 에러 발생
  - next-auth에 있는 AuthBase를 상속 받아서 추가 속성으로 type을 넣어줘야 한다. 수정해야 할 파일은 auth.d.ts 이다.
```TypeScript
import { AuthBase as Base } from 'next-auth';

declare module 'next-auth' {
  interface ExtraInfo {
    gender: string;
    age: number;
  }

  interface AuthBase extends Base {
    _id: number;
    type: string;
    email?: string;
    name?: string;
    profileImage?: string;
    accessToken: string;
    refreshToken: string;
    createdAt?: string;
    updatedAt?: string;
    extra?: ExtraInfo;
  }

  interface User extends AuthBase {}

  interface Session extends AuthBase {
    user: User;
  }
}

export declare module 'next-auth/jwt' {
  interface JWT {
    accessToken: string;
    refreshToken: string;
  }
}

2. 카카오, 구글 로그인 기능 추가

OAuth 요청을 보낼 사이트 정의를 위해 next.config.mjs 파일 코드 추가


/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
  {
    protocol: 'https',
    hostname: 'api.fesp.shop',
    pathname: '/files/**',
  },
  {
    protocol: 'http',
    hostname: 'localhost',
    pathname: '/files/**',
  },
  {
    protocol: 'https',
    hostname: '*.githubusercontent.com',
    pathname: '**',
  },
  {
    protocol: 'https',
    hostname: '*.googleusercontent.com',
    pathname: '**',
  },
  {
    protocol: 'https',
    hostname: '*.kakaousercontent.com',
    pathname: '**',
  },
],
},
};

export default nextConfig;

- 카카오 Web 사이트 도메인, Redirect URI 추가

// 카카오 Web 사이트 도메인 추가 https://genisisu.vercel.app https://hyundai-morgans.vercel.app http://localhost:3000

// 카카오 Redirect URI https://genisisu.vercel.app/api/auth/callback/kakao https://hyundai-morgans.vercel.app/api/auth/callback/kakao http://localhost:3000/api/auth/callback/kakao

- 카카오 로그인 에러 해결
카카오로 로그인이 가능한데, email은 필수 값으로 들어가야 하며 이미지의 경우 undefined이면 기본값으로 넣어주자
자동 회원가입을 할 떄 ''를 넣지 않고 디폴드 값으로 랜덤 값을 주도록 한다.
이메일 형식에 맞춰서 아래 코드를 수정하면 된다.
```TypeScript
// auth.ts
let userInfo: UserData | null = null;
try {
  // 자동 회원 가입
  const newUser: OAuthUser = {
    type: 'user',
    loginType: account.provider,
    name: user.name || '',
    email: user.email || `${Date.now()}@genisisu.com`,
    image: user.image || `${SERVER}/files/${CLIENT}/user-jayg.webp`,
    extra: { ...profile, providerAccountId: account.providerAccountId },
  };

3. 로그인 페이지의 버튼 스타일 변경

4. 게시물 삭제 기능 타입 에러 해결

button의 formAction의 경우에 받을 수 있는 타입은 3가지 종류이다. 수정 전 타입은 Promise이다. CoreRes -> void 로 수정을 해야 한다.

(property) ButtonHTMLAttributes<HTMLButtonElement>.formAction? : string | ((formData: FormData) => void | Promise<void>) | undefined

게시물 삭제 deletePost 함수 코드 수정 (변경사항) res.json()은 JSON 객체를 반환하므로 Promise와 일치하지 않는다. deletePost 함수가 Promise를 반환하도록 하기 위해 반환값을 수정. 즉, return await res.json(); 부분을 제거

// 게시물 삭제
// export async function deletePost(formData: FormData): Promise<CoreRes> {
export async function deletePost(formData: FormData): Promise<void> {
const session = await auth();
const boardName = formData.get('boardName');
const res = await fetch(`${SERVER}/posts/${formData.get('_id')}`, {
method: 'DELETE',
headers: {
  'Content-Type': 'application/json',
  Authorization: `Bearer ${session?.accessToken}`,
  'client-Id': CLIENT,
},
});
setTimeout(() => redirect(`/${boardName}`), 100);
// return await res.json();
}

✅ PR 양식 체크리스트

[x] 💭 이슈는 등록했나요?
[x] 🏷️ 라벨은 등록했나요?
[x] 🔀 PR 제목의 형식을 잘 작성했나요?

NINI-Bros / GENISISU

:sparkles: feat: 네이버, 카카오, 구글 로그인 기능 추가 #62