import ChannelSingle from "./ChannelSingle"; import catchErrors from "../../context/catchError"; import roomApi from "../../apis/room.api"; import { useState, useEffect } from "react"; import { useParams } from "react-router-dom"; const userId = localStorage.getItem('user'); const INIT_ROOM = { name: '', owner: userId, member: userId, profileimg: '', } const INIT_CHANNEL = { channelName: "", joinName: [], }; const LeftHamberger = () => { const [channel, setChannel] = useState([INIT_CHANNEL]); const { roomId } = useParams(); const [error, setError] = useState(""); async function getChannel(roomId) { console.log('roomId', roomId) const ID = roomId try { const data = await roomApi.getRoom([ID]); const Channel = data[0].channel console.log('방데이터:', Channel[0]) const channelList = []; for (const prop in Channel) { // Channel의 항목(prop)으로 작업을 실행합니다 for (const key in Channel[prop]) { console.log(key) console.log(prop) console.log(Channel[prop][key]) channelList.push({ channelName: key, joinName: Channel[prop][key] }); } } setChannel(channelList); } catch (error) { catchErrors(error, setError); } } console.log(channel) useEffect(() => { console.log('roomId', roomId) getChannel(roomId); }, [roomId]); function roomIdCopy() { const t = document.querySelector("#roomId").innerText; console.log(t); navigator.clipboard.writeText(t); document.execCommand("copy"); } return (

온/오프라인 사용자

{" "} {" "}
온라인 사용자
{channel.map((el) => (
{el.joinName && el.joinName.map((e) => (
  • {e}

))}
))}
오프라인 사용자
  • CHERRY
  • JAEYEON
  • SEOYEON
  • JIWEON
  • BYOUNGYUN
); }; export default LeftHamberger;