-
Notifications
You must be signed in to change notification settings - Fork 5
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/11/modal component #22
Feat/11/modal component #22
Conversation
워크플로우 추가를 위한 메인 병합
…1/modal-component
…t/11/modal-component
2b25cf1
to
23b69f0
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
고생하셨습니다 !!
오호 몰랐는데 React DOM에서 createPortal API를 제공하고 있군요...!! 📝
src/app/MainPage.tsx
Outdated
<Modal onClose={close} isModalOpen={isOpen}> | ||
<div>냠냠</div> | ||
</Modal> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
<Modal onClose={close} isModalOpen={isOpen}> | |
<div>냠냠</div> | |
</Modal> | |
{isOpen && | |
<Modal onClose={close}> | |
<div>냠냠</div> | |
</Modal> | |
} |
요렇게 하고 Modal 안에서 스크롤 방지하는 로직을 useModal 훅으로 옮기면 isModalOpen props가 없어져도 될 것 같아요!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
prop로 넘기는 것보다 더 깔끔한 것 같아요~!! 감사합니다:)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
isOpen을 계속 써야하는 번거로움이 있을 것 같아서 코드를 개선해봤습니다~!!
src/component/common/modal/Modal.tsx
Outdated
useEffect(() => { | ||
document.body.style.overflow = isModalOpen ? "hidden" : "auto"; | ||
}, [isModalOpen]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
이 내용을 useModal 훅 안에서 isModalOpen 대신 isOpen으로 대체해서 옮기면 어떨까요 ??
export type ModalType = { | ||
isOpen: boolean; | ||
title: string; | ||
content: JSX.Element | string; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
문자열이랑 컴포넌트도 넘길 수 있군요 ✨
src/types/modal.ts
Outdated
isOpen: boolean; | ||
title: string; | ||
content: JSX.Element | string; | ||
callBack?: () => any; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
callBack을 any
로 정의하신 이유가 궁금합니다!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
void로 해야하는걸 실수 했네요 수정해놓겠습니다:)
src/component/common/modal/Modal.tsx
Outdated
return () => { | ||
document.removeEventListener("mousedown", listener); | ||
}; | ||
}, [close, modalRef]); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
modalRef를 의존성 배열에 넣지 않으면 동작하지 않는 코드인가요?! 궁금해요!🤔
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아이고 체크를 못했네요.. close랑 modalRef 둘다 넣지 않아도 됩니다:)
너무너무 고생하셨습니다 🏄🏼♂️ |
🏄🏼♂️ Summary (요약)
🫨 Describe your Change (변경사항)
🧐 Issue number and link (참고)
2024-07-07.10.44.00.mov
📚 Reference (참조)