카공실록 - Web Share API 사용, mixed content 오류

2023-08-17·2 min read

오늘 한 일

gloddy 모임 상세 페이지 디자인에 맞게 리팩토링
카공실록 배포

카공실록

모바일 웹으로 들어갔을 때 공유하기 모달 대신 네이티브 공유하기 기능이 켜지도록 구현하기 위해 Web Share API를 사용했다.

사용법

사용법은 단순하다. navigator.share 함수를 호출하면 된다.

const handleShareClick = () => {
  if (navigator.share) {
    navigator.share({
      title: '카공실록',
      url: window.location.href,
    })
  } else {
    setIsShareSheetOpen(true)
  }
}

단, 웹에서는 동작하지 않기 때문에 navigator.share가 없을 경우에는 공유하기 모달을 띄워준다.

mixed content 오류

서버 주소가 http로 시작해서 배포 시 mixed content 에러가 발생했다. 이를 해결하기 위해 여러 방법이 있지만, 백엔드 분들에게 https로 바꿔달라고 요청했다.

내일 할 일

gloddy 모임 상세 페이지 쪽 마무리
카공실록 기록 swiper 구현 및 마무리

← 2023.08.18 2023.08.16 →