24일차
2024. 8. 29. 18:13ㆍFCB2O4
기능 하나가 더 생각나서 하나 더 추가. 유저 아이디를 검색하고 그 아이디가 적어왔던 채팅 기록들을 보여주는 것이다.
먼저 백엔드 쪽
//Controller
//검색한 사용자의 채팅목록 가져오기
@GetMapping("/search/chat")
public ResponseEntity<List<ChatLog>> showWhosChat(@RequestParam("memberId") String memberId){
List<ChatLog> chatLog = chatService.showWhosChat(memberId);
return ResponseEntity.ok(chatLog);
}
------------------------------------------------------------------------------
//Mapper
//특정 사용자 채팅 기록 불러오기
List<ChatLog> showWhosChat(@Param("memberId") String memberId);
------------------------------------------------------------------------------
//Service
@Override
public List<ChatLog> showWhosChat(String memberId) {
return mapper.showWhosChat(memberId);
}
<!-- 검색한 사용자의 채팅목록 가져오기 -->
<select id="showWhosChat" parameterType="b2o4.dto.ChatLog">
SELECT * from livechatmessage where memberId = #{memberId}
</select>
그리고 리액트쪽
기존의 LiveStreamingPage.js를 수정해 채팅 부검 기능을 추가했다.
import React, { useContext, useEffect, useState } from "react";
import WebCam from "./WebCam";
import LiveChat from "./LiveChat";
import '../css/Streaming.css';
import MyPageContext from "../MyPageContext";
import axios from "axios";
const LiveStreamingPage = () => {
const [searchWord, setSearchWord] = useState('');
const [searchedChat, setSearchedChat] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const chatLogPerPage = 20; // 페이지당 항목 수
const { loginMember } = useContext(MyPageContext);
useEffect(() => {
axios.get("/search/chat", {
params: { memberId: searchWord }
})
.then(res => {
setSearchedChat(res.data);
setCurrentPage(1); // 검색할 때마다 첫 페이지로 이동
});
}, [searchWord]);
const handleSearchChatMessage = (e) => {
setSearchWord(e.target.value);
};
const indexOfLastChat = currentPage * chatLogPerPage;
const indexOfFirstChat = indexOfLastChat - chatLogPerPage;
const currentChats = searchedChat.slice(indexOfFirstChat, indexOfLastChat);
// 페이지 수 계산
const totalPages = Math.ceil(searchedChat.length / chatLogPerPage);
// 페이지 변경
const handlePageChange = (pageNumber) => {
setCurrentPage(pageNumber);
};
if (!loginMember) {
return null;
}
return (
<div className="livePage-container">
<div className="livePage-wrapper">
<WebCam />
<LiveChat />
</div>
{loginMember.memberType === 'A' &&
<div className="chat-search-container">
<h2>채팅 부검</h2>
<input
className="chat-search-bar"
type="text"
value={searchWord}
onChange={handleSearchChatMessage}
placeholder="아이디 입력"
/>
<div className="search-memberinfo">
<h3>"{searchWord}"의 채팅 내역</h3>
</div>
<table className="chat-search-result-table">
<thead>
<tr>
<th className="col-msgContent">내용</th>
<th className="col-memberId">작성자</th>
<th className="col-msgAt">작성시간</th>
</tr>
</thead>
<tbody>
{currentChats.map(chatlog => (
<tr key={chatlog.msgNo}>
<td>{chatlog.msgContent}</td>
<td>{chatlog.memberId}</td>
<td>{chatlog.msgAt}</td>
</tr>
))}
</tbody>
</table>
<div className="pagination">
{Array.from({ length: totalPages }, (_, index) => (
<button key={index + 1} onClick={() => handlePageChange(index + 1)}
className={currentPage === index + 1 ? 'active' : ''}
>
{index + 1}
</button>
))}
</div>
</div>
}
</div>
);
};
export default LiveStreamingPage;
간단하게 성공.
하다가 욕심이 나서 하나를 더 추가했다.
검색한 아이디에게 채팅 금지 / 허용 권한을 주는 버튼을 주는 것.
그래서 member 테이블에 chatable 컬럼을 새롭게 만들고 백엔드 쪽에 다시 추가 구문을 작성
//Controller
//채팅 금지 / 허용 전환
@PutMapping("switch/chat")
public ResponseEntity<String> switchAuthToChat(
@RequestParam("memberId") String memberId,
@RequestParam("chatable") char chatable){
String res = chatService.switchAuthToChat(memberId, chatable);
return ResponseEntity.ok(res);
}
-------------------------------------------------------------------------
//Mapper
//채팅 금지 / 허용 업데이트
int switchAuthToChat(@Param("memberId") String memberId, @Param("chatable") char chatable);
-------------------------------------------------------------------------
//Service
@Override
public String switchAuthToChat(String memberId, char chatable) {
int result = mapper.switchAuthToChat(memberId, chatable);
System.out.println(result);
return "변경성공";
}
<!-- 채팅 금지 / 허용 -->
<update id="switchAuthToChat" parameterType="Map">
UPDATE member SET chatable = #{chatable} where memberId = #{memberId}
</update>
그리고 LiveStreaimngPage.js에 또 채팅 권한 관련 버튼을 추가
import React, { useContext, useEffect, useState } from "react";
import WebCam from "./WebCam";
import LiveChat from "./LiveChat";
import '../css/Streaming.css';
import MyPageContext from "../MyPageContext";
import axios from "axios";
const LiveStreamingPage = () => {
const [searchWord, setSearchWord] = useState('');
const [searchedChat, setSearchedChat] = useState([]);
const [currentPage, setCurrentPage] = useState(1);
const [chatable, setChatable] = useState(true);
const chatLogPerPage = 20; // 페이지당 항목 수
const { loginMember } = useContext(MyPageContext);
useEffect(() => {
axios.get("/search/chat", {
params: { memberId: searchWord }
})
.then(res => {
setSearchedChat(res.data);
setCurrentPage(1); // 검색할 때마다 첫 페이지로 이동
});
}, [searchWord]);
const handleSearchChatMessage = (e) => {
setSearchWord(e.target.value);
};
const indexOfLastChat = currentPage * chatLogPerPage;
const indexOfFirstChat = indexOfLastChat - chatLogPerPage;
const currentChats = searchedChat.slice(indexOfFirstChat, indexOfLastChat);
// 페이지 수 계산
const totalPages = Math.ceil(searchedChat.length / chatLogPerPage);
// 페이지 변경
const handlePageChange = (pageNumber) => {
setCurrentPage(pageNumber);
};
// 채팅 금지 / 허용 전환
const toggleChatable = (newStatus) => {
axios.put("/switch/chat", null, {
params: {
memberId: searchWord,
chatable: newStatus
}
})
.then(res => {
setChatable(newStatus === "Y");
})
.catch(error => {
console.error('채팅 상태 업데이트 오류:', error);
});
};
if (!loginMember) {
return null;
}
return (
<div className="livePage-container">
<div className="livePage-wrapper">
<WebCam />
<LiveChat />
</div>
{loginMember.memberType === 'A' &&
<div className="chat-search-container">
<h2>채팅 부검</h2>
<input
className="chat-search-bar"
type="text"
value={searchWord}
onChange={handleSearchChatMessage}
placeholder="아이디 입력"
/>
<div className="search-memberinfo">
<h3>"{searchWord}"의 채팅 내역</h3>
<div className="auth-chat-btn">
<button className="btn btn-outline-success" onClick={() => toggleChatable("Y")}>
채팅 허용
</button>
<button className='btn btn-outline-danger' onClick={() => toggleChatable("N")}>
채팅 금지
</button>
</div>
</div>
<table className="chat-search-result-table">
<thead>
<tr>
<th className="col-msgContent">내용</th>
<th className="col-memberId">작성자</th>
<th className="col-msgAt">작성시간</th>
</tr>
</thead>
<tbody>
{currentChats.map(chatlog => (
<tr key={chatlog.msgNo}>
<td>{chatlog.msgContent}</td>
<td>{chatlog.memberId}</td>
<td>{chatlog.msgAt}</td>
</tr>
))}
</tbody>
</table>
<div className="pagination">
{Array.from({ length: totalPages }, (_, index) => (
<button key={index + 1} onClick={() => handlePageChange(index + 1)}
className={currentPage === index + 1 ? 'active' : ''}
>
{index + 1}
</button>
))}
</div>
</div>
}
</div>
);
};
export default LiveStreamingPage;
채팅 허용을 누르면 DB의 chatable이 Y 로, 금지를 누르면 N으로 변경하는 것을 확인했다.
근데 문제가 발생.
여기서 특정 아이디를 검색하고 그 값을 Y or N으로 변경해도 즉각적으로 그 사용자에게 반영이 안된다.
일단은 여기까지 하고 더 자세한 문제는 다음에 해결