Feat. 요청 페이지 개선, access_token 로직 수정, 실시간 요청 조회 개발 [중요]

[de-novo]

1. 요청페이지 개선

• 요청 관련 issue #19 에 따라 페이지네이션이아닌 전체조회로 변경하였습니다.
• 시간 및 정렬 기능 추가하였습니다 ( ui는 개선할 예정입니다)

2. access token 로직 수정

• 서버의 변경( access_token 위치 cookie -> header)에 따라 auth로직을 수정하였습니다.
• use{Method}Api 에도 헤더 적용완료했습니다.
• 훅을 사용하지않았던 api역시 header적용완료하였습니다.
• 훅으로 변경하려하였으나 생각보다 많아 우선은 헤더만 적용하였습니다.

3. request 소켓 연결

• 요청이후 새로운 요청이 생성될시 들어오는 소켓 알림로직을 처리하였습니다.

4. Socket Util 함수 개발

• 기존 nextjs 에서 제공하는 rewrite를 이용하여 소켓처리를 하려하였으나, 소켓연결이 원할하게 되지않는 이슈가 있어 따로 util함수를 만들었습니다.

access token 로직수정이유

소켓서버에서 auth관련 로직을 처리하기위해서는 쿠키를 분석할 수 있어야하나 같은 domain이 아닐경우 브라우저가 cookie를 보내지 않아 auth로직을 처리할 수 없었습니다.

이를 해결할 방법은 2가지가 있으나 조금더 시간을 절약할수 있는 방법을 택했습니다.

해결방법 1.

각 개발자(서버, 프론트)는 nginx 및 hosts파일을 설정하여 개발환경과 prod환경을 같은 도메인선상에 둔다.

예시.
PROD 환경
api.domain.com (prod api)
socket.domain.com (prod socket)
ems.domain.com (prod ems)
er.domain.com (prod er)

DEV 환경
dev.api.domain.com (dev api)
dev.socket.domain.com (dev socket)
dev.ems.domain.com (dev ems)
dev.er.domain.com (dev er)

이렇게 두는 이유는 인증관련된 옵션인 {credential : true} 를 사용하기위해서는 쿠키의 domain 옵션을 줘야함
domain옵션을 줄경우 해당 도메인이 아닌경우 쿠키를 사용할수없게됨.

즉 개발환경에서 사용하는 localhost는 사용하기 어려워짐.

해결방법 2.
기존 쿠키로 관리하던 access token을 header로 관리

로그인시 access token을 json으로 응답
프론트는 해당 토큰을 저장하여 api호출시 사용.

해당방법은 코드분리와 모듈화가 잘되어있다면 금방 바꿀수 있는 부분
따라서 방법2를 선택함.