Feature/#3 common header 및 기타 작업사항

[wei756]

📌 관련 이슈

#3

✨ PR 세부 내용

공통 헤더와 로그인 기능 및 그 외 작업내용 전체(footer, front 페이지 일부 등등)

✅ 리뷰 요구사항

공통

.env.local에 요거 넣어주세요

NEXT_PUBLIC_BASE_URL=프론트 서버 주소(예: http://localhost:3000)
NEXT_PUBLIC_API_URL=api 서버 주소

로그인 관련

accessToken 및 refreshToken은 보안상의 이유로 httpOnly 쿠키로 저장하도록 구현했기 때문에 클라이언트 사이드 코드(document.cookie로의 접근 등)에서 임의로 접근할 수 없습니다.

따라서 accessToken의 접근은 fetch시 credentials: 'include' 옵션을 통해 api 요청에 삽입함으로써 사용이 가능합니다. 백엔드 서버 측에서 토큰을 Authorization 헤더에 넣어서 요청하도록 요구하고 있기 때문에, 모든 api 요청은 nextjs의 api route를 거쳐서 사용해야 하며, 해당하는 api route를 만들어 두었습니다.(src/app/api/[domain]/[func1] 참고)

기존에

{api 주소}/api/v1/users/check-nickname?nickname=asdf

이런 식으로 요청하던 것을

{nextjs 주소}/api/users/check-nickname?nickname=asdf

이런 식으로 수정해주시기만 하면 됩니다.

api 요구사항에 userId가 있는 경우 api route에서 자동으로 삽입해서 요청하기 때문에 이 부분은 무시하셔도 됩니다.

사용자의 권한 변경, 토큰 refresh 등 accessToken의 수정이 필요할 때는 서버 사이드에서 response를 반환할 때 set-cookie 헤더를 삽입하여 변경하면 됩니다.(src/app/api/tokens/refresh/route.ts의 response.cookies.set 참고)

토큰 리프레시가 아직 제대로 구현되지 않았기 때문에 30분마다 쿠키 삭제후 재로그인 부탁드립니다.(__)

Header 관련

props.title에 page title 넣으면 파란 글씨로 표시됩니다.

position: fixed;로 구현되어 있기 때문에 기존 content에 padding-top 4.5rem 정도 추가로 넣어주셔야 윗부분 안 잘립니다.

[Jinoko01]

화긴