[React] React.js로 전화걸기 링크 제공 하기

 

기업협업중

 

import React from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import * as S from './CallModal.style';

const CallModal = ({ detailMartList, handleModal }) => {
  const handleCopy = () => {
    alert('복사되었습니다.');
  };
  return (
    <S.ModalBackground>
      <S.ModalContainer>
        <S.ModalTitleBox>
          <S.ModalTitle>
            {detailMartList[0].martPhoneNumber.replace(
              /(\d{2})(\d{3,4})(\d{4})/,
              '$1-$2-$3'
            )}
          </S.ModalTitle>
          <S.ModalCloseImg
            src="./images/closeImg.png"
            onClick={handleModal}
            alt="닫기"
          />
        </S.ModalTitleBox>
        <S.ModalContentBox>
          <S.ModalText>전화 걸기</S.ModalText>
          <S.ModalText>연락처 저장하기</S.ModalText>
          <CopyToClipboard
            text={detailMartList[0].martPhoneNumber}
            onCopy={handleCopy}
          >
            <S.ModalText>클립보드 복사하기</S.ModalText>
          </CopyToClipboard>
        </S.ModalContentBox>
      </S.ModalContainer>
    </S.ModalBackground>
  );
};
export default CallModal;

부모 컴포넌트로 부터 detailMartList를 가져와서 구현중이다.

 

지금 컴포넌트는 자식컴포넌트인 CallModal 컴포넌트이고, 

'전화걸기'를 누르면 저장하기를 따로 하지 않고, 바로 전화를 걸 수 있는 링크를 제공하게 구현해보았다. 

 

<a href={`tel:${detailMartList[0].martPhoneNumber}`}>전화 걸기</a>

이 코드를 대입해 주었다! 

 

그러자, 맥북에 FaceTime을 연결할 것인지, 아니면 chrome에 로그인하라고 팝업창이 떴다!!!

 

캡쳐를 하고싶었으나, 캡쳐시도할 때마다 해당 팝업창이 사라졌다 ㅠㅠ..

 

 

 

href 속성에 tel:이라는 프로토콜을 추가하여, 전화를 걸기 위한 URL을 만들 수 있다고 한다!

 

그래서 이때 tel: 다음에는 전화번호를 입력해야 하고, 나는 가져온 detailMartList에 있는 번호를 이용했다!