모달 컴포넌트 생성 완료 #12
모달 컴포넌트 생성 완료 #12
Conversation
1. 버튼에 출력되는 이미지 경로 설정 (완석님이 올린 사진에 맞춰서) 2. 모달창에 출력될 텍스트 글씨체 변경 (ModalPortal 사용으로 인해 root에서 Modal이 벗어남이 원인) Merge branch 'weekly' of https://github.com/GhoRid/Team14_FE into weekly
| @@ -0,0 +1,6 @@ | |||
| import ReactDOM from "react-dom"; | |||
|
|
|||
| export const ModalPortal = ({ children }) => { | |||
| document.removeEventListener("mousedown", modalListener); | ||
| }; | ||
| }, [$isVisibleModal, handleShowModal]); | ||
|
|
There was a problem hiding this comment.
넹 꼭이요... 만들면서도 이게 맞나 싶어서..
|
|
||
| const [buttonText, setButtonText] = useState(""); | ||
| const [logoImg, setLogoImg] = useState(""); | ||
|
|
There was a problem hiding this comment.
버튼 안에 들어갈 내용은 화면이 변할 필요가 없으니 state로 관리하지 않아도 될 것 같다고 생각해요!
버튼은 제가 만든 걸 사용하는게 어떨까요?
There was a problem hiding this comment.
내용을 직접 받아서 쓰는 건 모달을 사용할 때 입력할 값이 너무 많아져서(함수, 텍스트, 상태 등등,..) 일부러 Type에 따라 알아서 바뀌게 해놓았습니다. Type에 따라 바뀌게 하려면 당장 state밖에 생각나지 않아서 이대로 했는데 회의할 때 다시 얘기해보아용
| }, [$modalType]) | ||
|
|
||
| return ( | ||
| <ModalTemplate handleShowModal={handleShowModal} $isVisibleModal={$isVisibleModal}> |
There was a problem hiding this comment.
handle로 컨벤션 맞추기로 했었는데
저는 까먹고 onClick으로 썼었네요. ㅋㅋㅋㅋ 고쳐야겠어요.
덕분에 알아갑니당!
| return "black"; | ||
| default: | ||
| return "white"; | ||
| }}}; |
There was a problem hiding this comment.
요런 경우엔 삼항 연산자가 더 나을 수도 있을 것 같습니다!
| `; | ||
|
|
||
| const TwoBtnModal = ( { handleShowModal, $isVisibleModal, $modalType, execution, children} ) => { | ||
| // 모달 타입 4개 |
There was a problem hiding this comment.
버튼 1개, 2개로 모달을 두 개 만드는 방식도 있지만,
모달의 버튼에 위치하는 영역을 flex로 만들어서 1개는 그대로 받고 2개는 gap으로 떨어뜨려 받는 방식을 생각해볼 수도 있겠습니다!
사실 상상만 해봐서 직접해봐야 알것 같긴 합니다. 저도 한 번 모달 구현해볼까요?!
| </IconButton> | ||
| <> | ||
| <Layout> | ||
|
|
There was a problem hiding this comment.
슬쩍 실제 적용한 예시도 남겨주시면 더 이해하기 쉬울 것 같습니다!!
There was a problem hiding this comment.
아 그게 PR에 있는 내용이겠네요!! ㅋㅋㅋㅋ 죄송합니다.
ModalTemplat을 기준으로 버튼 1개일 때, 버튼 2개일 때 따로 작성
->ModalType에 따라 다른 모달창 띄우기
. 인스타 연동 모달
. 로그인 안내 모달
. 폭죽 보내기 모달
. 신고 접수 완료 모달
. 폭죽 부족 안내 모달
. 신고하기 모달
. 계정 탈퇴 모달
. 로그아웃 모달
-> 모달이 어떤 것인지 지정하면 버튼의 색상과 텍스트가 알아서 설정됨.
-> 로그인 모달일 경우 modalType="login" 버튼 색상이 노란색, 글자색 검정색, 버튼 내 텍스트 자동 지정
(모달태그)
페이지 컴포넌트에서 다음과 같이 Layout 태그 바깥에 ModalPortal로 감싸주어 모달을 불러오게 함.
-> 장점: root 바깥에 modal이 존재하기 때문에 스타일링 영향을 받지 않음