as

client/kakao-config.json

-{
-    "REACT_APP_KAKAO_KEY": "783f1ca14e1f14bc6442eedcd37c76a1"
-}
\ No newline at end of file

client/src/components/Home/RoomList.js

 import AddRoom from "./AddRoom";
 import RoomSingle from "./RoomSingle";
+//import userApi from "../../apis/user.api";
 
 const RoomList = () => {
+  // const userid = localStorage.getItem("user");//로컬 스토리지에 있는 내 유저 아이디 받아온것.
+
+  // useEffect(async() => {
+  //   const { data } = await userApi.getUser(userid);
+
+  //   return () => {
+  //     cleanup
+  //   }
+  // }, [input])
+  // // 내 유저 아이디로 서버에서 그 아이디에 맞는 정보 가져오기
+  // const allroomid = data.roomNumber; //내가 속해있는 방의 id전부 불러와서
+  // const i = null;
+
+  // function joinedroom(allroomid) { //그 갯수만큼 반복을 시킨다. 이때, 
+  //   for (i=0; i<allroomid.length; i++) {
+  //     <RoomSingle />
+  //     localStorage.setItem(`joinroomid${i+1}`, allroomid[i]);
+  //   }
+  // }
   return (
     <div>
       <AddRoom />

client/src/components/Home/RoomSingle.js

@@ -6,7 +6,8 @@ import userApi from '../../apis/user.api';
 const RoomSingle = () => {
   const [roomNum, setRoomNum] = useState('')
   const [room, setRoom] = useState([])
-  const roomId = localStorage.getItem('user');
+  // const roomId = localStorage.getItem('user');
+  const roomId = "abc7654321"
   const channelId = 1
   const A = []
 

client/src/components/Room/LeftHamberger.js

-import UserState from "./UserState";
-import { Link } from "react-router-dom";
-import KakaoShareButton from "../KakaoShareButton";
-import { useEffect } from "react";
-
-const LeftHamberger = () => {
-  useEffect(() => {
-    const script = document.createElement("script");
-    script.src = "https://developers.kakao.com/sdk/js/kakao.js";
-    script.async = true;
-    document.body.appendChild(script);
-    return () => {
-      document.body.removeChild(script);
-    };
-  }, []);
-
-  // function KakaoCode() {
-  //   window.location.href
-  //   ="https://kauth.kakao.com/oauth/authorize?client_id=ca4c7126765a1dfd4c127c27415d4abc&redirect_uri=http://localhost:3000/room/Invite&response_type=code&prompt=login&scope=talk_message,friends"
-  // }
-  function roomIdCopy() {
-    const t = document.querySelector("#roomId").innerText;
-    console.log(t);
-    navigator.clipboard.writeText(t);
-    //document.execCommand("copy");
-  }
-  return (
-    <div>
-      <div>
-        <button
-          className="navbar-toggler"
-          type="button"
-          data-bs-toggle="offcanvas"
-          data-bs-target="#left-hamburger"
-          aria-controls="left-hamburger"
-          aria-expanded="false"
-          aria-label="Toggle navigation"
-          style={{ border: "#f4c1f2" }}
-        >
-          <span className="navbar-toggler-icon"></span>
-        </button>
-      </div>
-
-      <div
-        className="offcanvas offcanvas-start"
-        style={{ width: "330px" }}
-        tabIndex="-1"
-        id="left-hamburger"
-        aria-labelledby="hamburgerLabel"
-      >
-        <div className="offcanvas-header">
-          <p
-            className="col-6 offcanvas-title"
-            id="offcanvasExampleLabel"
-            style={{
-              fontWeight: "bold",
-              fontSize: "15px",
-              width: "150px",
-              color: "#000000",
-            }}
-          >
-            온/오프라인 사용자
-          </p>
-          <h6 className="mt-2" id="roomId">
-            {" "}
-            #ASV2AE985{" "}
-          </h6>
-        </div>
-        <UserState />
-        <div>
-          <div className="d-flex flex-row-reverse">
-            <button
-              type="button"
-              className="m-3 rounded"
-              data-bs-toggle="modal"
-              data-bs-target="#InviteRoom"
-              style={{
-                height: "30px",
-                fontWeight: "bold",
-                backgroundColor: "#E0CEE8",
-                color: "black",
-                border: "1px #D64D61",
-              }}
-            >
-              초대
-            </button>
-            <div
-              className="modal fade"
-              id="InviteRoom"
-              tabIndex="-1"
-              aria-labelledby="InviteRoomLabel"
-              aria-hidden="true"
-            >
-              <div className="modal-dialog">
-                <div className="modal-content">
-                  <div className="modal-header">
-                    <button
-                      type="button"
-                      className="btn-close"
-                      data-bs-dismiss="modal"
-                      aria-label="Close"
-                    ></button>
-                  </div>
-                  <div className="modal-body d-flex justify-content-center">
-                    어떤 방식으로 초대하시겠습니까?
-                  </div>
-                  <div className="row mb-3">
-                    <div className="d-flex justify-content-evenly">
-                      {/* <button
-                        type="submit"
-                        className="col-2 p-1 btn btn-primary"
-                        data-bs-dismiss="modal"
-                        style={{ width: "120px" }}
-                        onClick={KakaoCode}
-                      >
-                      카카오로 초대
-                      </button> */}
-                      <KakaoShareButton />
-                      <button
-                        type="submit"
-                        className="col-2 p-1 btn btn-primary"
-                        data-bs-dismiss="modal"
-                        style={{ width: "120px" }}
-                        onClick={roomIdCopy}
-                      >
-                        방 Id 복사
-                      </button>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default LeftHamberger;

client/src/components/Room/LeftHamburger.js

 import UserState from "./UserState";
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import KakaoShareButton from "../KakaoShareButton";
 import { useEffect } from "react";
 
 const LeftHamburger = () => {
+  const { roomId } = useParams();
   useEffect(() => {
     const script = document.createElement("script");
     script.src = "https://developers.kakao.com/sdk/js/kakao.js";
@@ -14,16 +15,11 @@ const LeftHamburger = () => {
     };
   }, []);
 
-  // function KakaoCode() {
-  //   window.location.href
-  //   ="https://kauth.kakao.com/oauth/authorize?client_id=ca4c7126765a1dfd4c127c27415d4abc&redirect_uri=http://localhost:3000/room/Invite&response_type=code&prompt=login&scope=talk_message,friends"
-  // }
   function roomIdCopy() {
-    const t = document.querySelector("#roomId").innerText;
-    console.log(t);
-    navigator.clipboard.writeText(t);
+    navigator.clipboard.writeText(link[4]);
     //document.execCommand("copy");
   }
+
   return (
     <div>
       <div>
@@ -62,8 +58,7 @@ const LeftHamburger = () => {
             온/오프라인 사용자
           </p>
           <h6 className="mt-2" id="roomId">
-            {" "}
-            #ASV2AE985{" "}
+            {`${roomId}`}
           </h6>
         </div>
         <UserState />

client/src/components/Room/RightHamburger.js

-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { useParams } from "react-router-dom";
 import ChannelSingle from './ChannelSingle';
 import Rightimg from '../../images/RightHamburgerImg.png'
 import RoomApi from "../../apis/room.api";
 
+// const INIT_Room = {
+//     id: '',
+//     name: '',
+//     member: '',
+//     profileimg: '',
+//     channel: ''
+//   }
+
 const RightHamburger = () => {
     const [admin, setAdmin] = useState('true')
+    const { roomId } = useParams();
+    // const [Room, setRoom] = useState(INIT_Room)
+    // async function Roomstate(Roomid) {
+    //     try {
+    //       const data = await RoomApi.getRoom(Roomid)
+    //         console.log("여기 데이터 표시")
+    //       setRoom(data)
+    //     } catch (error) {
+    //       // catchErrors(error, setError)
+    //     }
+    //   }
     
+    //   useEffect(() => {
+    //     Roomstate(link[4])
+    //   }, []) 이거 getRoom이 작동 안하는것 같다.
     /*
     1. 서버에서 현재 입장한 Roomid 받아다가 보여주기(좌,우 공통)
     2. Roomid확인 후 그 방의 channel 받아다가 보여주기(각 채널과, 그 안에 있는 사람들. 이때, 각 채널은 일종의 버튼이고, 클릭하면 거기로 나의 정보를 옮긴다.)
@@ -47,9 +70,9 @@ const RightHamburger = () => {
                             color: '#000000',
                         }}
                     >
-                        방 이름
+                        방 이름{/*Room.name*/}
                     </p>
-                    <h6 className="mt-2" id="roomId" > Roomid </h6>
+                    <h6 className="mt-2" id="roomId" > {`${roomId}`} </h6>
                     <button
                         type="button"
                         className="btn-close text-reset"