[react-icons] preview에서의 아이콘 import code 반응형 오류 해결하기

🎯 주제

 

화면 사이즈가 1025px이하로 줄어들면 import code에 있는 문자들이 외부 영역으로 넘어가는 문제가 있었다.

[Bug]: Import code text in the icon details modal is not responsive on smaller screens · Issue #849 · react-icons/react-icons

 

🤔 해결 과정

 

🗂️ preview를 살펴보다

 

 

웹페이지 상에서의 오류이기 때문에 packages폴더안에 preview-astro폴더를 확인해보았다.

작업에 들어가기에 앞서 packages에 있는 react-icons들을 fetch하고 build하였다.

이후 로컬 서버를 띄우고 페이지에 내에서의 오류를 확인해보기로 하였다.

 

 

사용자가 copy하고 싶은 아이콘을 클릭하면 위와 같은 모달창이 렌더링 된다.

확인해본 결과 화면 사이즈를 1025px이내로 줄일 경우, 내부 code가 box의 영역을 침범하는 문제였다.

때문에 modal을 관리하는 component와 style코드를 확인해볼 필요가 있었다.

 

👀 문제의 component와 style을 찾아서

 

components폴더에 icondetailmodal.tsx에서 관리한다는 것을 알게 되었고, 문제가 있는 요소는 <pre>태그 내부에 있는 <pre>태그의 스타일 문제일 것으로 판단하였다.

해당 component의 스타일링을 담당하는 파일은 무엇인지 확인해보았다.

 

 

styles폴더안에 components들의 스타일들을 담당하는 파일로 확인되었다.

수정해야될 부분의 클래스가 지정되어있는지를 확인하기위해 개발자 모드로 해당 영역의 클래스를 파악해보았다.

모달의 전체 영역에 해당하는 클래스를 확인해본 결과 .icon-detail-modal-content 클래스에서 스타일링을 건든다는 것을 확인할 수 있었다.

해당 클래스 내부의 <pre> 태그를 수정하면 될 것 같다는 생각이 들었다.

 

 

⚠️ 문제의 원인은?

 

overflow를 지정하지 않아서 생긴 오류였다.

때문에 pre태그 내부에 있는 요소들이 외부의 영역으로 침범하지 않도록 overflow를 auto로 설정하여 오류를 해결할 수 있었다.

 

.icon-detail-modal-content {
  .icon {
    text-align: center;
    min-height: 250px;
    padding: 25px;
  }
  pre {
    overflow: auto;  // 외부 영역 침범을 방지
    background-color: #24292e;
    color: #e1e4e8;
    padding: 10px;
    border-radius: 5px;
  }
  ul.copy {
    list-style: none;
    padding: 0;
    li {
      margin-bottom: 0.5rem;
      button {
        border: none;
        background: var(--color-gray-2);
        padding: 5px 7px;
        border-radius: 5px;
        cursor: pointer;
        .text {
          margin-left: 5px;
        }
      }
    }
  }

 

✈️ PR 날리기

 

Fix: Resolve Import Code Text Responsiveness in Icon Details Modal on Smaller Screens by llbllhllk · Pull Request #858 · react

 

 

✍️ 소감

 

이슈를 통해서 문제를 먼저 파악하고 해결하기 위해 코드를 직접 분석하는 과정이 생각보다 재미있게 느껴졌다.

해당 코드는 무슨 역할을 하는지, 전체적으로 어떻게 관리되어지는지에 대한 흐름을 파악하는 과정이 매우 새롭게 느껴지기도 했다.

그리고 처음 시도해본 오프소스 기여인데 머지 당해버렸다!

막상 해보니 생각보다 별거 아니라는거에 감회가 새로웠고, 기여에 대한 막연한 어려움을 극복할 수 있는 기회가 된 것 같다.

내 수준에 해결할 수 있는 또 다른 이슈들은 무엇이 있는지 한번 찾아보고 해결해보는 것에 도전해봐야겠다.