[Feat] 프로필 모달창 구현 #44
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
바깥 누르면 모달창 닫히는 것 좋은 것 같습니다~ 수고하셨습니다! |
yongaricode
reviewed
Jan 23, 2025
| onClick={() => setModalOpen(false)} // 닫힘 | ||
| > | ||
| <div | ||
| className="absolute top-10 flex flex-col py-5 w-1/3 h-3/5 bg-primary_100 rounded-[16px]" |
There was a problem hiding this comment.
w를 1/3로 주니까 모바일에서 화면 확인했을 때 이렇게 나오네요! min-width를 줘서 최소 크기를 정하는게 좋을 것 같습니다!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
🔥 Issues
#19
✅ What to do
📄 Description
학생 아이콘을 누르면 모달창이 나온다.
바깥부분을 누르면 모달창이 꺼지고 바깥 부분의 다른 기능은 사용할 수 없다.
🤔 Considerations
모달창 css 구현 고민
-> fixed, absolute를 사용.
-> inset-0으로 top, right, bottom, left를 모두 0으로 설정하여 배경이 화면 전체를 차지하도록 함.
-> z-50로 모달이 다른 UI 요소보다 위에 표시되도록 함
바깥 부분을 누르면 모달창이 종료되도록 하였는데 모달 내부를 눌렀을 때도 종료가 된다.
-> e.stopPropagation()를 이용하여 이벤트가 상위 DOM으로 전파되지 않도록 막는다.
🛠️ Improvements to Make
API 받아오는 부분 수정해야 할 것 같다.
디자인 완성되면 UI 수정해야 한다.
👀 References
https://bolob.tistory.com/entry/JavaScript-epreventDefault%EC%99%80-estopPropagation%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90
https://joylee-developer.tistory.com/184