Spring WebFlux를 이용한 chat 프로그램 - 채팅방생성(2)

이전에 백엔드에서 여러가지 문제를 해결한다고 길어져서 이제 나눠서 프론트엔드를 작성한다.

DB 라우터 정보에 추가한다.

path : /chatrooms
component_name : chat/ChatRomms

---

src/api/service/chat/ChatRoomService.js

import axiosInstance from "../../instance/axiosInterceptor";

/**
 * 채팅방 관리 Service
 */
class ChatRoomService {

    /**
     * 모든 채팅방 목록을 조회하는 API
     * @returns {Promise<Response<ChatRoom[]>>}
     */
    async selectChatRoom() {
        return await axiosInstance.get('/chat/chatroom')
    }

    
    /**
     * 새로운 채팅방을 생성하는 API
     * @param {string} name - 생성할 채팅방 이름
     * @returns {Promise<Response<ChatRoom>>}
     */
    async createChatRoom(name) {
        return await axiosInstance.post(`/chat/chatroom?name=${encodeURIComponent(name)}`)
    }
}

export const chatRoomService = new ChatRoomService();

 

src/pages/chat/ChatRooms.jsx

import { useEffect, useState } from "react"
import { useNavigate } from "react-router-dom"
import { chatRoomService } from "../../api/service/chat/ChatRoomService"

/**
 * 채팅방 목록 출력 화면
 * @returns 
 */
function ChatRooms() {

    const [rooms, setRooms] = useState([]) //채팅방 목록
    const [roomName, setRoomName] = useState('') //새로 생성될 채팅방 명
    const [message, setMessage] = useState([]) // 안내 메시지

    const navigate = useNavigate()

    //채팅방 목록을 조회한다.
    const loadRooms = async () => {
        try {
            const res = await chatRoomService.selectChatRoom();

            if (res.data.success) {
                setRooms(res.data.data)
            } else {
                setMessage(res.data.message)
            }
        } catch (error) {
            setMessage(error.response?.data?.message || '오류 발생!!!')
        }
    }

    // 채팅방 목록 조회
    useEffect(() => {
        loadRooms()
    }, [])

    // 채팅방 생성 처리
    const handleCreateRoom = async () => {
        if( !roomName.trim() ) return;

        try {
            const res = await chatRoomService.createChatRoom(roomName)
            if( res.data.success ) {
                setMessage('채팅방이 생성되었습니다.')
                setRooms(prev => [...prev, res.data.data])
                setRoomName('')
            } else {
                setMessage(res.data.message)
            }
        } catch (error) {
            setMessage(error.response?.data?.message || '오류 발생!!!')
        }
    }

    //채팅방 입장
    const enterRoom = (roomId) => {
        navigate(`/chat/${roomId}`)
    }

    return (
        <div className="max-w-xl mx-auto mt-10 p-4">
            <h2 className="text-xl font-bold mb-4">채팅방 목록</h2>

            {/* 채팅방 생성 입력창 */}
            <div className="flex gap-2 mb-4">
                <input
                    type="text"
                    className="flex-1 border p-2 rounded"
                    placeholder="새 채팅방 이름"
                    value={roomName}
                    onChange={(e) => setRoomName(e.target.value)}
                />
                <button
                    className="bg-blue-500 text-white px-4 py-2 rounded"
                    onClick={handleCreateRoom}
                >
                    생성
                </button>
            </div>

            {/* 채팅방 목록 */}
            <ul className="space-y-2">
                {rooms.map((room) => (
                    <li
                        key={room.id}
                        className="p-3 border rounded hover:bg-gray-100 cursor-pointer"
                        onClick={() => enterRoom(room.id)}
                    >
                        🗨️ {room.name}
                    </li>
                ))}
            </ul>

            {/* 메시지 출력 */}
            {message && <p className="mt-4 text-center text-red-600">{message}</p>}
        </div>
    )

}

export default ChatRooms

생성된 전체 채팅방 목록을 보여 주도록 했으며 특별한 기능은 없다.

추후 enterRoom 함수를 통해 채팅방에 입장하도록 처리 한다.