[Feature] 구글 로그인 회원가입 및 온보딩 페이지 구현

[cobocho]

PR Type

• 기능 추가

Overview

• 소셜 로그인 (구글) 기능 구현
• 회원가입 페이지 구현
• 온보딩 페이지 구현
• 미들웨어를 통한 페이지 접근 권한 관리 구현

Additional Comment

서버 사이드 환경과 클라이언트 사이드 환경에서 동시에 JWT 토큰을 통한 권한 관리를 할 수 있도록 토큰 저장 위치를 쿠키로 설정하였습니다.
API 요청의 경우 쿠키에 존재하는 토큰을 네트워크 요청 시 헤더에 담아주는 로직을 통해 작동합니다.

페이지에 대한 접근 권한의 경우는 미들웨어를 통해 이루어집니다.

Usage

// middleware.ts

// 미들웨어 생성 함수
const onlyRegisteredMiddleware = checkUserStatusMiddleware([
  UserStatus.Registered,
  UserStatus.Withdrawn,
 // ...포함 시킬 유저 권한
])

export async function middleware(req: NextRequest) {
  const response = NextResponse.next()

  if (
   // ... 미들웨어를 실행시킬 조건
  ) {
    return onlyRegisteredMiddleware(req, response, '/login')
  }
}

Issue

related on #19

Check List

• 관련된 이슈를 연결하였나요?
• 올바른 PR 컨벤션을 작성했나요?
• 적절한 라벨을 선택했나요?
• Assignee와 Reviewer를 설정했나요?

References

[hin6150]

고생하셨습니다 !!
수, 목 교육 일정이 있어서 조금 늦게 확인했습니다 ㅠㅠ