24일차

2024. 8. 29. 18:13FCB2O4

기능 하나가 더 생각나서 하나 더 추가. 유저 아이디를 검색하고 그 아이디가 적어왔던 채팅 기록들을 보여주는 것이다.

 

먼저 백엔드 쪽

 

//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>
                            &nbsp;
                            <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으로 변경해도 즉각적으로 그 사용자에게 반영이 안된다. 

 

일단은 여기까지 하고 더 자세한 문제는 다음에 해결

'FCB2O4' 카테고리의 다른 글

26일차  (0) 2024.09.09
25일차  (2) 2024.08.30
23일차  (0) 2024.08.29
22일차  (2) 2024.08.28
21일차  (0) 2024.08.27