search

Hipspot / hipspot-web

MIT License
5 stars 0 forks source link

Fix: infowindow가 슬라이드 이후 X 버튼 작동하지 않는 버그 수정 #79

Closed Sangjun-man closed 1 year ago

Sangjun-man commented 1 year ago

Motivation

75

인포윈도우가 슬라이드 이후 X버튼이 작동하게 버그 수정했습니다


Key Changes

PopUpWindow의 컴포넌트 구조가 변경되었습니다

기존 PopUpWindow 컴포넌트의 경우, infowindow의 터치와 마우스 이벤트를 인식하는 리스너가 S.ResizeTab 컴포넌트에 등록되어 있었습니다. 대략적인 구조는 다음과 같았는데요

<PopUpWindow>
    {children}
    <ResizeTab />
</PopUpWindow>

팝업윈도우를 모듈 형태로 컴포넌트를 분리하여 제작하여, 내부의 이미지 슬라이더라던지, 타이틀, 카페 정보들은 모두 children으로 받아서 ui를 구성하고 있었습니다 문제는 ResizeTab과 children은 형제관계이기 때문에, 이벤트를 인식하려면 어쩔수없이 ResizeTab이 children을 덮게 되어서, 이벤트 타겟팅을 resize탭에서 마지고 내부 children을 인식하지 못한다는 것이었습니다

따라서 ResizeTab을 children과 같은 부모를 갖게 하여 같은 쌓임맥락에 위치하게 하기 위해 PopUpWindow의 컴포넌트를 재설계하여 코드를 작성했습니다.

PopUpWindow를 Layout, Handler, CloseButton 세개의 컴포넌트로 분리하였고, 해당 컴포넌트들을 하나의 객체에 담아 Export하면, 실제 내용이 담기는 children에 해당하는 컴포넌트(즉 InfoWindow 컴포넌트)에서 Import하여 원하는 위치에 컴포넌트를 넣어 구현했습니다.

스크린샷

https://user-images.githubusercontent.com/66112027/233674333-c61fd3fa-ad4a-4d46-a785-7ef88da5b0a7.mov

https://user-images.githubusercontent.com/66112027/233674380-b8b8969b-31c1-4e55-8271-5e3df4b1411d.mov

To Reviewers

netlify[bot] commented 1 year ago

Deploy Preview for hipspot-webview ready!

Name Link
Latest commit 66af980c82ee08aacd969d7fd6430a6373cc7418
Latest deploy log https://app.netlify.com/sites/hipspot-webview/deploys/6442ad17fb707e000882493b
Deploy Preview https://deploy-preview-79--hipspot-webview.netlify.app/
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.