Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat : Portal, Popup창 구현 #10

Merged
merged 11 commits into from
Aug 5, 2023
Merged

Feat : Portal, Popup창 구현 #10

merged 11 commits into from
Aug 5, 2023

Conversation

guesung
Copy link
Collaborator

@guesung guesung commented Aug 5, 2023

💡 왜 PR을 올렸나요?

  • 신규 피처

💁 무엇이 어떻게 바뀌나요?

  1. Portal 및 Popup을 구현하였습니다.
    스크린샷 2023-08-05 오후 2 56 55

💬 리뷰어분들께

자유롭게 해주세용 ~

@guesung guesung self-assigned this Aug 5, 2023
@guesung guesung requested a review from seondal as a code owner August 5, 2023 05:56
Base automatically changed from OZ-35-F-pick-page to develop August 5, 2023 10:19
@seondal seondal added this to the DND Final Project ⛳️ milestone Aug 5, 2023
@seondal seondal added ✨ Feat 새로운 기능 개발 💄 Style 화면 그리기, 스타일링 labels Aug 5, 2023
Copy link
Member

@seondal seondal left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

전역적으로 사용할 수 있는 재사용성 높은 모달컴포넌트 인 것 같습니다..! 구현 방식 참고하여 Bottom Sheet도 구현해보겠습니다..!

@@ -15,6 +15,7 @@
"@types/react-dom": "18.2.7",
"eslint": "^8.46.0",
"eslint-config-next": "^13.4.12",
"framer-motion": "^10.15.0",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

라이브러리를 사용하셨군요..! Bottom Sheet 구현시에도 필요하다면 사용해보겠습니답

Comment on lines +17 to +22
document.addEventListener('mousedown', listener);
document.addEventListener('touchstart', listener);

return () => {
document.removeEventListener('mousedown', listener);
document.removeEventListener('touchstart', listener);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

return 문 밖에 있는 코드와 안에 있는 코드 사이의 차이가 있을까요 ?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

useEffect의 첫 번째인자인 콜백함수의 내부함수는 mount될 때 실행됩니다. 그리고, return문의 함수는 unmount될 때 실행됩니다.

그래서, 위 코드에서는 컴포넌트가 mount되었을 때 이벤트가 추가되고, unmount될 때 이벤트가 제거 되며 이벤트를 cleanup해줍니다.

참고 : https://react.vlpt.us/basic/16-useEffect.html

@seondal seondal merged commit f472b28 into develop Aug 5, 2023
1 check passed
@seondal seondal deleted the OZ-51-f-portal branch August 5, 2023 10:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Feat 새로운 기능 개발 💄 Style 화면 그리기, 스타일링
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants