당근마켓 채팅방 구현 관련 질문

[다민]

j쿼리를 사용하지 않고 순수 자바스크립트로 당근 마켓을 만들고 있는데 

db.collection('chatroom').where('who', 'array-contains', 내uid).get().then((result)=>{ 
result.forEach((a)=>{ var template = `<li class="list-group-item"> 
<h6>${a.data().product}</h6> <h6 class="text-small">${a.id}</h6> </li>` 
$('.chat-list').append(template) //저거 박스 누르면 채팅방 id 가져오는 코드 
$('.list-group-item').click(function(){ var 채팅방id = $(this).children('.text-small').text() }); }) })

부분에서 var 채팅방id = $(this).children('.text-small').text() 을 순수 자바스크립 코드로 변환하여 진행하는 것에 어려움을 느끼고 있습니다. 
어떤 방식으로 구현해야 할 지 조언 부탁드립니다. 

아래는 제 채팅방 js 파일입니다. 

const ChatList = document.querySelector(".chat-list") ;
const SendButton = document.getElementById("send") ; 
const ChatInput = document.getElementById("chat-input") ;

const LIST = document.getElementById("list") ; 
const TXT = document.getElementById("txt") ;

// const ChatItem = document.querySelectorAll(".list-group-item")
// const ChatID = document.querySelector(".text-small") ;

const db = firebase.firestore() ; 
const storage = firebase.storage() ;

let 내uid = JSON.parse(localStorage.getItem('user')).uid ; 
db.collection('chatroom').where('who', 'array-contains', 내uid)
 .get()
 .then((result)=>{
result.forEach((chat)=>{
console.log(chat.data())
// console.log("채팅방 리스트")
const templete = document.createElement("ul")
templete.innerHTML =
`<li class="list-group-item">
 <h6>${chat.data().product}</h6>
 <h6 class="text-small">${chat.id}</h6>
 </li>`
ChatList.append(templete) ; 
 })
})

let CHATID ;

const onClickSend = () => {
let chatDate = {
Date : new Date(),
Content : ChatInput.value,
uid : 내uid,
 }
db.collection('chatroom').doc(CHATID).collection('messages').add(chatDate)
}
SendButton.addEventListener("click", onClickSend) ;

[codingapple]

.append 말고 .insertAdjacentHTML 이런거 써야합니다
this에다가 querySelector를 붙여보거나 자식요소 출력하는 property같은걸 붙여보거나 합시다

[다민]

답변 감사합니다! 말씀해주신 대로 insertAdjacentHTML 사용해서 진행했고 채팅방 아이디 클릭 시 메세지 내용이 보이는 것 까지 구현했는데 다른 채팅방 클릭 시에 기존 채팅방 내용이 삭제되는 것에서 또 막혔습니다...  조언 부탁드립니다.

db.collection('chatroom').where('who', 'array-contains', 내uid)
 .get()
 .then((result)=>{
result.forEach((chat)=>{
// console.log(chat.data())
// console.log("채팅방 리스트")
// const templete = document.createElement("ul")
// templete.innerHTML =
// `<li class="list-group-item">
// <h6>${chat.data().product}</h6>
// <h6 class="text-small">${chat.id}</h6>
// </li>`
// ChatList.append(templete) ; 
const chatList = document.querySelector(".chat-list")
chatList.insertAdjacentHTML('beforeend', `<li class="list-group-item" id="list">
 <h6>${chat.data().product}</h6>
 <h6 class="text-small">${chat.id}</h6>
 </li>`)
const onClickItem = (event) => {
let dv = event.currentTarget;
let ch = dv.children[1].innerText ;
CHATID = ch ; 
// console.log(ch)
event.stopImmediatePropagation() ;

db.collection('chatroom').doc(CHATID)
 .collection('messages').get().then((result) => {
result.forEach((message) => {
console.log(message.data())

const beforeChat = document.querySelector(".chat-content")
beforeChat.innerHTML = "" ; 
const ChatContent = document.querySelector(".chat-content")
ChatContent.insertAdjacentHTML('beforeend', `<li><span class="chat-box">${message.data().Content}</span></li>`)

 })
 })
 }
let chatFor = document.querySelectorAll(".list-group-item")
for (let i = 0; i < chatFor.length; i++) {
chatFor[i].addEventListener("click", onClickItem)} 
 })
})

[codingapple]

현재 보이고있는 채팅방 uid같은걸 어디 저장해두고
다른 채팅방 uid를 클릭하면 html을 비우라고 코드짭시다

[다민]

조언 해주셔서 감사합니다! 확인하면서 코드 완성 했고 중간 테스트로 기능 전부 확인했는데 수정 기능이 uid가 동일함에도 불구하고 firebase 오류가 확인됩니다. 
아래는 제 firebase 규칙 코드입니다. 오류가 있을까요?? ㅠ

    match /product/{all} {
    	allow read : if true ; 
    	allow create : if request.auth != null 
      	&& request.resource.data.keys()
        	.hasOnly(['TITLE', 'PRICE', 'CONTENT', 'DATE', 'IMAGE', 'UID', 'NAME']) ;
        // && request.resource.data.TITLE.size() > 0 
        // && request.resource.data.TITLE.string() > 0 ;  
      allow update : if request.auth.uid == resource.data.uid
      	|| checkAdmin() ; 
    }

[codingapple]

수정시 콘솔창에 firebase permission 오류가나면 잘 작동하고 있다는 뜻입니다

[글쓴이]

글