[React/TypeScript] SNS 공유하기 만들기(네이버, X(트위터), 페이스북)

SNS 공유하기 기능이 필요해서 만들다가

대부분 공식 문서의 가이드는 JavaScript 기반으로 되어 있어서

TypeScript에 맞게 작업하다가 과정을 정리해본다!

 

이런식으로 네이버, X(트위터), 페이스북 세 가지로 만들었고,

카카오톡 공유는 만드려고 설정은 다 했으나..

https 인증을 받지 않은 http 환경에서는 테스트 할 수 없어서

환경설정한 코드까지만 살려두고 추후 다시 해보는걸로..

 

카카오톡으로 공유하기 위해서는 Kakao Developers 사이트에 로그인한 뒤

앱을 생성하고 키를 발급받아서 사용해야 한다.

https://developers.kakao.com/

 

env 파일에 발급 받은 JavaScript 키를 입력하고 사용하면 된다.

# kakao 공유하기 API KEY 개발
REACT_KAKAO_API_KEY= (JavaScript 키 입력)

 

window.kakao 이렇게 사용하려면 global.d.ts 에서 다음과 같이 정의해주면 된다.

# global.d.ts
declare global {
  interface Window {
    Kakao: any // window.kakao 추가
  }
}

export {}

 

카카오톡 관련된 내용은 짧게만 쓰고 나중에 실제적으로 개발하게 되면 다시 작성해보기로 하고...

나머지 네이버, X, 페이스북에 대해서만 작성한다.

사실 카카오톡이 제일 복잡하고 나머지는 url만 전달하면 되는 방식이라서 간단하다.

 

일단 효율적인 관리를 위해서 interface로 ShareList를 만든 다음에 이름, 이미지 위치, 이미지 텍스트 순으로 넣었다.

이미지는 import 문으로 png를 직접 불러와서 <img> 태그로 불러오다보니 src로 접근할 수 있도록 만들어줬다.

interface ShareList {
  name: string
  src: string
  alt: string
}

const shareLists: ShareList[] = [
    {
      name: 'naver',
      src: (naver as any).src,
      alt: '네이버 공유하기 버튼 이미지',
    },
    {
      name: 'x',
      src: (x as any).src,
      alt: 'x 공유하기 버튼 이미지',
    },
    {
      name: 'faceBook',
      src: (facebook as any).src,
      alt: '페이스북 공유하기 버튼 이미지',
    },
]

 

네이버는 가장 간단하고 가이드도 잘 나와있는 편이다.

공식문서(https://developers.naver.com/docs/share/navershare/)에서 가이드를 확인할 수 있으며,

아이콘도 쉽게 다운로드 받을 수 있다.

url에서 공유하고자 하는 url과 공유할 제목을 title로 적어주면 된다.

참고로 url, title은 변수로 관리했다.

공유를 클릭했을 때 화면

 // naver
  const shareNaver = () => {
    window.open(
      `https://share.naver.com/web/shareView?url=${url}&title=${title}`,
    )
  }

 

X(트위터)...

X라고 검색하니까 검색 결과도 잘 안나오길래 다른 블로그글을 참고해서 공유 url을 만들었다.

이름은 X지만 아직까지 url 주소는 트위터를 사용하는 거 같다.

마찬가지로 공유하고자 하는 url을 입력하면 끝이다.

이미지는 구글에서 다운로드 받아서 썼더니 너무 커서 살짝 가공해서 사용했다.

 // x
  const shareX = () => {
    window.open(
      `https://twitter.com/intent/tweet?text=custom%20text&url=${url}`,
    )
  }

 

페이스북도 공유하고자 하는 url을 입력하면 끝이다.

// faceBook
  const shareFaceBook = () => {
    window.open(`https://www.facebook.com/sharer/sharer.php?u=${url}`, title)
  }

 

만든거 하나씩 map으로 button 생성하면 끝!

return (
    <>
      <div className="share-list">
        {shareLists.map((item, i) => (
          <button
            onClick={
              item.name === 'naver'
                ? shareNaver
                : item.name === 'x'
                  ? shareX
                  : item.name === 'faceBook'
                    ? shareFaceBook
            }
            key={item.name}
          >
            <img src={item.src} alt={item.alt} />
          </button>
        ))}
      </div>
    </>
  )

 

height, margin은 현재 디자인에 맞게 수정해서 css까지 수정 완료

.share-list{
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 35px;
  padding: 0px;
  box-sizing: border-box;
  gap: 0;
  border-radius: 10px;
  position: relative;
  margin-left: 4px;
}

.share-list button{
  background-color: transparent;
  border: none;
  padding: 0;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  height: 100%;
  width: auto;
  margin-left: 4px;
}

.share-list img{
  width: 35px;
  height: 35px;
  object-fit: contain;
  border-radius: 5px;
}

 

 

📋 참고자료

https://zindex.tistory.com/280

https://velog.io/@aborile/%EC%9B%B9-%EB%A7%81%ED%81%AC-SNS-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0

https://velog.io/@aborile/%EC%9B%B9-%EB%A7%81%ED%81%AC-SNS-%EA%B3%B5%EC%9C%A0%ED%95%98%EA%B8%B0#%ED%8A%B8%EC%9C%84%ED%84%B0-%EA%B3%B5%EC%9C%A0