chat 페이지 코드 오류 질문입니다. 도와주세요..

4 글 보임 - 1 에서 4 까지 (총 4 중에서)

글쓴이

글

2023년 10월 6일 11:48 #100164

참가자

관리자 모드로 로그인해서 챗 페이지로 넘어갔는데 제대로 적용되지 않고 이상하게 깨지는거 같아요
그리고 관리자 계정 말고, 다른 일반 계정으로 로그인하면 전송버튼 눌러도 적용되지 않아요

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>TextBookHub</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <!-- Bootstrap core CSS -->
    <link href="bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="shop-homepage.css" rel="stylesheet">
</head>

<body>

  <!-- <script defer src="/__/firebase/8.6.5/firebase-app-compat.js"></script> -->
    <!-- include only the Firebase features as you need -->
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-firestore.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-storage.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>

    <script>
      const firebaseConfig = {
    apiKey: "AIzaSyBeFhSAptsMOcDoZvvknf82nZJ7q6N08bQ",
    authDomain: "digitcom-baf18.firebaseapp.com",
    projectId: "digitcom-baf18",
    storageBucket: "digitcom-baf18.appspot.com",
    messagingSenderId: "928440144391",
    appId: "1:928440144391:web:7f523a408f0b8295fa90a2"
    };

    firebase.initializeApp(firebaseConfig);
    </script>

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
    <div class="container">
      TextBookHub
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
           ABOUT US

<li class="nav-item"> 로그인/로그아웃 <span class="sr-only">(current)</span>

<li class="nav-item"> 책 등록

<li class="nav-item"> 장바구니

</div> </div> </nav>

  <div class="container mt-3">
    
  </div>

  <div class="container p-4 detail">
    <div class="row">
      <div class="col-3 p-0">
        <ul class="list-group chat-list">
          <li class="list-group-item">
            <h6></h6>
            <h6 class="text-large">채팅목록</h6>

</div> <div class="col-9 p-0"> <div class="chat-room"> <ul class="list-group chat-content">

<span class="chat-box"></span>

<span class="chat-box"></span>

<span class="chat-box mine"></span>

<span class="text-small"></span>

 <script>
  const db = firebase.firestore();
  const storage = firebase.storage();
  var userid = JSON.parse( localStorage.getItem('user') ).uid;
  var username = JSON.parse( localStorage.getItem('user') ).displayName;

  $('#send').click(function(){
    var 데이터 = {
      content : $('#chat-input').val(),
      date : new Date(),
      uid : userid,
      uname : username
    }
    db.collection('chatroom').doc(채팅방id).collection('messages').add(데이터)
  })

  var 채팅방id;

  db.collection('chatroom').where('who','array-contains', userid).get().then((result)=>{
    result.forEach((a)=>{
      console.log(a.data());
      var template = `<li class="list-group-item">
            <h6>${ a.data().product }</h6>
            <h6 class="text-small">${ a.data().uname }</h6>
          </li>`
        $('.chat-list').append(template)

        $('.list-group-item').click(function(e){
          //<h6 class="text-trans">${ a.id }</h6>
          //채팅방id = $(this).children('.text-trans').text();
          채팅방id = a.id;

          e.stopImmediatePropagation();

          db.collection('chatroom').doc(a.id).collection('messages').orderBy('date').onSnapshot((result)=>{
            $('.chat-content').html('');
            result.forEach((a)=>{
              messageUid = a.data().uid;
              if(userid == messageUid){
                var mine = `<li><span class="chat-box mine">
                  <h6 class="text-small">${ a.data().uname }</h6>
                  ${a.data().content}</span>
                  </li>`;
                var date = `<li><span class ="text-small mine">
                  ${a.data().date.toDate()}</span></li>`;
                $('.chat-content').append(mine)
                $('.chat-content').append(date)
              }
              else{
                var yours = `<li><span class="chat-box">
                  <h6 class="text-small">${ a.data().uname }</h6>
                  ${a.data().content}</span></li>`;
                var date = `<li><span class ="text-small">
                  ${a.data().date.toDate()}</span></li>`;
                $('.chat-content').append(yours)
                $('.chat-content').append(date)
              }
            })
          })

        })
    })
  })

 </script>

</body>

</html>

2023년 10월 6일 13:00 #100166

codingapple

키 마스터

css파일에 채팅관련 스타일 잘 있나 확인해봅시다

2023년 10월 6일 14:49 #100175

박은경

참가자

채팅 관련 css 코드가 이렇게 있는데 안되네요..
어느 부분이 잘못된건가요?


 .chat-content {
    height: 450px;
    overflow-y: scroll;
    padding: 10px;
  }
  .chat-content li {
    margin-top: 10px;
  }
  .text-small {
    font-size: 12px;
    color: gray;
    margin-bottom: 0;
  }
  .text-large {
    font-size: 16px;
    color: gray;
    margin-bottom: 0;
  }
 .text-trans {
    font-size: 1px;
    color: rgba(128, 128, 128, 0);
    margin-bottom: 0;
  }
  .chat-box {
    background: #eee;
    padding: 5px;
    border-radius: 5px;
    float: left;
  }
  .mine {
    float: right;
  }

2023년 10월 6일 18:28 #100187