📝 오늘 한 일
✔️ 주석 제거
폰트 import버전 Light house 넣어놓기
로딩스피너 삭제, 스켈레톤으로 수정
(단체 채팅방)
✔️ - 제목 - 길어지고있음 생략필요
✔️ - 상대 프로필사진 이미지 찌그러짐
✔️ - 제목, 그리너 간격 좁히기 다시 시도해보자
✔️ - 그룹채팅방에 시간넣기
✔️ - 발표준비
😮 최종발표날
액션 내부모달창 제대로 안뜨던거 진짜 일주일 이주일동안 해결 못했던건데
발표 직전에 해결했다 타이밍 미쳤다....
🏹 트러블 슈팅
문제
- 채팅방 내부에서 뜨던 모달창이 뜨는 위치가 채팅내용 스크롤에 따라 계속 바뀌어서 모달창이 뜨는 위치를 채팅내용이 아니라 고정된 채팅방 태그에 relative를 걸고 싶었으나 번번이 실패함
원인
- Next Ui에서 가져온 모달창이라서 커스텀이 잘 안된다고 생각했었는데, 해결이 가능한 것이었다!
해결
-
내부 모달창을
absolute에서sticky로 속성 변경 -
컴포넌트에서 내부모달창 붙여넣어놨던 위치를 아래로 뺐음
(ModalBody안에서 띄우고있었는데 바깥으로 뺐음)
🤔 어디에 붙어있길래 계속 스크롤에 따라 내부모달이 움직이는건지 콘솔 elements보면서 계속 분석 !!!
(div element를 콘솔창 안에서 복사 붙여넣기 해가면서 변화 상태를 추적)
➡️ header보다 위인 section태그에 붙어있어야 한다는걸 깨달음 !!!
(사실 여기까진 기존에도 생각했던 것... section태그는 next ui로 가져온 Modal이나 ModalContent에 숨어있는 태그라서 수정이 어려우니 이거 안되겠구나 생각했었음....)
➡️ section 밖에 붙여봤더니 모달이 아닌 페이지 기준으로 붙는걸 파악했고, 그럼 section태그 안에서 불러와야한다는건데, vscode상에서 ModalHeader의 바로 위의 태그가 뭔가 봤더니 ModalContent였다.
➡️ 스크롤에 영향을 안받으려면 ModalContent에 내부모달을 붙여야한다는 결론!!
➡️ 기존에는 ModalBody 안에서 내부 모달 컴포넌트를 불러오고 있었던것...!!
➡️ ⭐️ 내부 모달 컴포넌트를ModalBody 바깥으로뺌,absolute를sticky로 속성 변경
➡️ ❤️🔥 해결!!!! ㅠㅠㅠㅠ
해결 코드
- 기존
// GroupInsideModal.tsx
return (
<div className="absolute bottom-0 w-[100%] inset-0 z-30 flex bg-black bg-opacity-30">
<div className="w-full flex justify-end">
// ❌ absolute로 설정해두었던 기존 코드// GroupChatRoom.tsx
</div>
</div>
{isActionInfoOpen && (
<GroupInsideModal
onActionInfoClose={onActionInfoClose}
actionInfo={actionInfo}
participantsInfo={participantsInfo}
roomId={roomId}
actionId={actionId}
onClose={onClose}
/>
)}
</ModalBody>
</>
)}
</ModalContent>
// ❌ GroupInsideModal 컴포넌트가 ModalBody 안에 있는걸 볼 수 있다.- 해결
// GroupInsideModal.tsx
return (
<div className="sticky bottom-0 w-[100%] inset-0 z-30 flex bg-black bg-opacity-30">
<div className="w-full flex justify-end">
// ✅ sticky로 속성 변경// GroupChatRoom.tsx
</div>
</div>
</ModalBody>
{isActionInfoOpen && (
<GroupInsideModal
onActionInfoClose={onActionInfoClose}
actionInfo={actionInfo}
participantsInfo={participantsInfo}
roomId={roomId}
actionId={actionId}
onClose={onClose}
/>
)}
</>
)}
</ModalContent>
// ✅ GroupInsideModal을 ModalBody 바깥, ModalContent 안으로 수정오늘의 느낀점
원래 사다리타기로 발표자 선정해서 리허설하고 튜터님께도 보여드렸는데...
말로 뚜드려 맞았다...
차라리 잘됐다 튜터님 덕에 훨씬 발전된 발표를 할 수 있게 됐다.
발표자료 수정하느라 3시반에 자는거 실화냐...😂
얼른자자...
