Remove default value of event handler props in Icon component

[heech1013]

Self Checklist

• I wrote a PR title in English.
• I added an appropriate label to the PR.
• I wrote a commit message in English.
• I wrote a commit message according to the Conventional Commits specification.
• I added the appropriate changeset for the changes.
• [Component] I wrote a unit test about the implementation.
• [Component] I wrote a storybook document about the implementation.
• [Component] I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox
• [New Component] I added my username to the correct directory in the CODEOWNERS file.

Related Issue

#1123

Summary

Icon 컴포넌트의 이벤트 핸들러 props에 default value를 할당하지 않도록 수정합니다.

• onClick
• onMouseDown

Details

Icon의 onClick prop에 default value(noop, () => {})가 할당됨으로 인해 문제를 일으키는 경우가 있습니다.
아래의 조건을 만족할 경우 a 태그의 telephone number link(tel:)가 제대로 동작하지 않습니다.

1. iPad의 Safari 브라우저일 때
2. a 태그의 하위 엘리먼트 중 onclick attribute가 등록된 엘리먼트가 존재할 때

예를 들어 아래와 같은 usecase가 있습니다.

<a href="tel:+49.157.0156">
    <div onclick="doSomething()"></div>
</a>

Icon을 활용하여 tel: link로 연결되는 버튼/링크를 만드는 경우 아래와 같은 구조를 가질 수 있습니다.

<a href={telHref} target="_blank">
    <Icon source={CallIcon} size={IconSize.S} />
</a>

이때, iPad의 Safari 브라우저에서는 해당 링크가 동작하지 않게 됩니다.

• a 태그와 Icon 사이에 다른 엘리먼트를 중첩하는 경우에도 여전히 동작하지 않습니다.
• a 태그의 target을 _self, _parent, _top 등으로 변경해도 동작하지 않습니다.
• Icon이 내부적으로 svg 태그에 전달하고 있는 onClick prop을 제거할 경우 정상 동작합니다.

--
참고: a 태그 구현의 파편화

각 환경의 브라우저마다 a 태그의 구현이 제각기 다릅니다. 특히, a 태그의 target attribute에 대해 여러 동작을 가집니다.
예를 들어, 아래와 같은 케이스가 존재합니다.

• iOS의 Chrome 앱에서는 a 태그의 target이 _blank일 때 tel: link가 동작하지 않습니다. (다른 환경에서는 정상 동작)
• iOS의 Safari 앱에서는 a 태그의 target이 _self일 때 tel: link가 동작하지 않습니다. (다른 환경에서는 정상 동작)

--
Workaround

아래와 같은 방법으로 Bezier Icon 컴포넌트의 수정 없이 문제를 해결할 수 있습니다.

<a
  onClick={() => window.open(`tel:${telLink}`, '_blank')}
>
    <Icon source={CallIcon} size={IconSize.S} />
</a>

단, 위와 같은 방법은 실행 환경에 따른 분기 처리를 복잡하게 만들고, iPad의 Safari 브라우저에 a 태그의 tel: link와 관련된 이슈가 있음을 개발자가 미리 알아채고 대응하기 어렵기 때문에 Bezier Icon의 수정을 통해 문제를 해결하기를 바랍니다.

Breaking change or not (Yes/No)

No

References

.

[changeset-bot]

🦋 Changeset detected

Latest commit: 10a77f4

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@channel.io/bezier-react	Patch
bezier-figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[codecov]

Codecov Report

Base: 72.77% // Head: 72.75% // Decreases project coverage by -0.02% ⚠️

Coverage data is based on head (10a77f4) compared to base (70efd99).
Patch has no changes to coverable lines.

Additional details and impacted files

@@             Coverage Diff             @@
##           next-v1    #1122      +/-   ##
===========================================
- Coverage    72.77%   72.75%   -0.02%     
===========================================
  Files          362      362              
  Lines         4374     4371       -3     
  Branches       853      851       -2     
===========================================
- Hits          3183     3180       -3     
  Misses        1117     1117              
  Partials        74       74              

Impacted Files	Coverage Δ
packages/bezier-react/src/components/Icon/Icon.tsx	100.00% <ø> (ø)

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[dinohan]

#1079 와 컨플릭이 있겠네용

[dinohan]

changeset 추가해야겠네요!