0802

client/src/components/KakaoShareButton.js

 import React, { useEffect } from "react";
+import kakao_key from "../kakao-config.json"
 
 const KakaoShareButton = () => {
   useEffect(() => {
@@ -12,7 +13,7 @@ const KakaoShareButton = () => {
       // 중복 initialization 방지
       if (!kakao.isInitialized()) {
         // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
-        kakao.init(process.env.REACT_APP_KAKAO_KEY);
+        kakao.init(kakao_key.REACT_APP_KAKAO_KEY);
       }
       kakao.Link.createDefaultButton({
         container: '#kakao-link-btn',

client/src/components/Room/LeftHamburger.js

+import UserState from "./UserState";
+import { Link } from "react-router-dom";
+import KakaoShareButton from "../KakaoShareButton";
+import { useEffect } from "react";
+
+const LeftHamburger = () => {
+  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 LeftHamburger;

client/src/components/Room/RightHamburger.js

 import { useState } from "react";
-import ChannelSingle from './ChannelSingle'
+import ChannelSingle from './ChannelSingle';
+import Rightimg from '../../images/RightHamburgerImg.png'
+import RoomApi from "../../apis/room.api";
 
-const RightHamberger = () => {
+const RightHamburger = () => {
     const [admin, setAdmin] = useState('true')
+
+    /*
+    1. 서버에서 현재 입장한 Roomid 받아다가 보여주기(좌,우 공통)
+    2. Roomid확인 후 그 방의 channel 받아다가 보여주기(각 채널과, 그 안에 있는 사람들. 이때, 각 채널은 일종의 버튼이고, 클릭하면 거기로 나의 정보를 옮긴다.)
+    3. 서버에서 로그인 on/off 구분해서 받아다가 일치하는 userid가 있으면 그사람의 on/off요소 보여주기
+    */
     return (
         <div>
             <div>
@@ -16,10 +24,9 @@ const RightHamberger = () => {
                     aria-label="Toggle navigation"
                     style={{ border: '#f4c1f2' }}
                 >
-                    <span className="navbar-toggler-icon"></span>
+                    <img src={Rightimg} width="50px" height="30px"/>
                 </button>
             </div>
-
             <div
                 className="offcanvas offcanvas-end"
                 style={{ width: '330px' }}
@@ -40,9 +47,9 @@ const RightHamberger = () => {
                             color: '#000000',
                         }}
                     >
-                        데계데계데계데계데계데계데계데계데계데계 재밌는 수학과
+                        방 이름
                     </p>
-                    <h6 className="mt-2" id="roomId" > #ASV2AE985 </h6>
+                    <h6 className="mt-2" id="roomId" > Roomid </h6>
                     <button
                         type="button"
                         className="btn-close text-reset"
@@ -135,4 +142,4 @@ const RightHamberger = () => {
 
 }
 
-export default RightHamberger
\ No newline at end of file
+export default RightHamburger
\ No newline at end of file

client/src/kakao-config.json

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

package.json

@@ -3,17 +3,12 @@
   "version": "1.0.0",
   "description": "Streaming Service",
   "main": "index.js",
+  "type": "module",
   "scripts": {
-    "start": "nodemon index.js",
-    "dev": "nodemon -r esm index.js",
-    "build": "tsc -p ."
-  },
-  "nodemonConfig": {
-    "ignore": [
-      "test/*",
-      "docs/*",
-      "client/*"
-    ]
+    "start": "node dist/index.js",
+    "build": "tsc",
+    "dev": "nodemon",
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
     "type": "git",
@@ -27,21 +22,21 @@
     "cookie-parser": "^1.4.5",
     "cors": "2.8.5",
     "dotenv": "^10.0.0",
-    "esm": "^3.2.25",
     "express": "4.17.1",
     "http": "0.0.1-security",
     "jsonwebtoken": "^8.5.1",
     "multer": "^1.4.2",
-    "nanoid": "^3.1.23",
+    "nanoid": "^3.1.20",
     "nodemon": "^2.0.7",
     "pg": "^8.6.0",
     "pg-hstore": "^2.3.4",
     "postgres": "^1.0.2",
     "sequelize": "^6.6.5",
-    "socket.io": "2.3.0",
-    "wrtc": "0.4.6"
+    "socket.io": "^4.1.3",
+    "wrtc": "^0.4.7"
   },
   "devDependencies": {
+    "@types/socket.io": "^3.0.2",
     "nodemon": "2.0.7"
   }
 }