[Fix] fetcher 클래스에서 클라이언트, 서버 로직 둘 다 수용할 수 있도록 수정

[ghdtjgus76]

🎉 변경 사항

fetcher 클래스에서 클라이언트, 서버 로직 둘 다 수용할 수 있도록 수정했습니다.

이전에 유진님이 언급하신 것처럼 fetcher 클래스 내부에 next/headers의 cookies 관련 import문이 최상단에 포함되면 클라이언트 컴포넌트쪽에서도 해당 import문을 읽어오기 때문에 클라이언트 컴포넌트 쪽에서 에러가 발생했습니다.

해당 에러는 You're importing a component that needs next/headers. 라는 내용이었는데, app 라우터 외부에서 next/headers 관련 로직을 사용하게 되면 발생하는 에러라고 합니다.
저희는 모노레포 구조 + 클라이언트와 서버에서 공통으로 사용해야 하는 코드이기 때문에 별도 패키지로 분리할 수밖에 없습니다.

그래서 해당 이슈에 기재된 것처럼 서버 환경에서만 동적 import문을 사용해서 next/headers의 cookies를 불러오도록 했고, 클라이언트 환경에서는 api 요청 시 인증 정보가 포함되어야 하기 때문에 credentials: include 로직을 추가해주었습니다.
현재 서버분들께서 심어주시는 쿠키가 httpOnly로 설정되어 있어 클라이언트에서는 읽을 수 없기 때문에 해당 옵션으로 해결했습니다.

세은님이 올려주신 api 요청 PR에서 클라이언트 측, 서버 측에서 요청이 잘 되는지 확인 완료하고 올립니다...
@hamo-o @eugene028 님께서는 프록시 사용해서 확인이 가능하니 문제 없이 요청되는지 확인 부탁드립니다.

🚩 관련 이슈

• [Bug] fetcher 클래스에서 클라이언트, 서버 로직 둘 다 수용할 수 있도록 수정 #32

🙏 여기는 꼭 봐주세요!

[eugene028]

수고하셨습니다! 저는 잘 되는 것 같아용 👏

[SeieunYoo]

수고하셨어요~!!