아이콘(svg 이미지)을 클릭해서 다른 링크로 이동하는 방법

요즘 콘서트나 뮤지컬 티켓을 예매하는

'티켓링크' 라는 사이트의 클론코딩을

하는 중이다.

 

어려운 부분은 남겨놓고

할 수 있는 부분만 하는 중인데

생각보다 쉽게 끝낼거라고 생각했던 부분이

생각보다 시간이 좀 걸렸다......

 

블로그, 유튜브, 페이스북, 인스타, X(구 트위터)

아이콘 뒤에 회색 원을 위치했고

아이콘을 클릭했을 때,

내가 입력한 링크로 이동을 시키려고 했다.

 

아무리 생각해도 어떻게 넣어야할지 모르겠어서

튜터님을 찾아뵀다.

 

폰트어썸은 div, p, span 처럼 

<FontAwesomeIcon icon={faMessage} size="xl" />

태그명으로 되어있는게 아닌

FontAwesomeIcon이라고 되어있어서

(내가 사용하려고 했던)

Link태그를 사용할 수 없었고 대신

a태그를 사용할 수 밖에 없었다.

 

근데

a태그는 클릭할 때마다 새로고침이 돼서

권장하지 않는 방법이 아니지 않나요..??

했는데 지금 이 상황에서는

a태그를 사용하는 방법 밖에는 없다고 하셨다..

 

그렇게 a태그를 사용하니까 잘 작동이 됐다 ㅎㅎ

 

<SnsIconsDiv>

        <SnsIcons>

          <SnsIconDiv href="https://blog.naver.com/t_link">

            <FontAwesomeIcon icon={faMessage} size="xl" />

          </SnsIconDiv>

          <SnsIconDiv href="https://www.youtube.com/@ticketlink012">

            <FontAwesomeIcon icon={faYoutube} size="xl" />

          </SnsIconDiv>

          <SnsIconDiv href="https://www.facebook.com/ticketlink">

            <FontAwesomeIcon icon={faFacebook} size="xl" />

          </SnsIconDiv>

          <SnsIconDiv href="https://www.instagram.com/ticketlink.co.kr/">

            <FontAwesomeIcon icon={faSquareInstagram} size="xl" />

          </SnsIconDiv>

          <SnsIconDiv href="https://x.com/nhn_ticketlink">

            <FontAwesomeIcon icon={faXTwitter} size="xl" />

          </SnsIconDiv>

        </SnsIcons>

      </SnsIconsDiv>

아, 참고로

// sns 아이콘 전체를 감싸는 div

const SnsIconsDiv = styled.div`

  width: 50%;

  display: flex;

  justify-content: center;

  padding: 1.5rem;

`;

// sns 아이콘 각각을 감싸는 div

// fontawesome 자체에 Link태그를

// 넣을 수 없기 때문에 a태그를 사용

const SnsIconDiv = styled.a`

  width: 40px;

  height: 40px;

  border-radius: 50%;

  background-color: #ccc;

  display: flex;

  flex-direction: column;

  justify-content: center;

  color: white;

`;

// sns 아이콘 전체를 감싸는 div

const SnsIcons = styled.div`

  display: flex;

  justify-content: space-between;

  width: 270px;

  margin-top: 200px;

  cursor: pointer;

`;