Merge remote-tracking branch 'origin/byoungyun1' into seoyeon2

f06686cb · seoyeon · fa2eeb1e · 293f3283 · f06686cb · f06686cb
Commit f06686cb authored Jul 28, 2021 by seoyeon
--- a/client/.env
+++ b/client/.env
+REACT_APP_KAKAO_KEY=783f1ca14e1f14bc6442eedcd37c76a1
+REACT_FETCH_URL=http://localhost:3000
\ No newline at end of file
--- a/client/public/index.html
+++ b/client/public/index.html
@@ -25,6 +25,11 @@
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>BORA It</title>
+    <script src="//developers.kakao.com/sdk/js/kakao.js"></script>
+    <script>
+      Kakao.init(process.env.REACT_APP_KAKAO_KEY);//SDK초기화
+      console.log(Kakao.isInitialized());// 초기화 여부 판단
+    </script>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>

--- a/client/src/App.js
+++ b/client/src/App.js
@@ -5,6 +5,7 @@ import HomeUserPage from "./pages/HomeUserPage";
 import ProfilePage from "./pages/ProfilePage";
 import RoomPage from "./pages/RoomPage";
 import InfoUpdatePage from "./pages/InfoUpdatePage";
+import InvitePage from "./pages/InvitePage";
 function App() {
  return (
@@ -16,6 +17,7 @@ function App() {
        <Route path="/profile/:id/update" component={InfoUpdatePage} />
        <Route path="/profile/:id" component={ProfilePage} />
        <Route path="/room/:roomId/:channelId" component={RoomPage} />
+        <Route path="/room/Invite" component={InvitePage} />
      </Switch>
      {/* </AuthProvider> */}
    </Router>

--- a/client/src/components/KakaoShareButton.js
+++ b/client/src/components/KakaoShareButton.js
+import React, { useEffect } from "react";
+import kakao_login from "../kakao_login.png";
+const KakaoShareButton = () => {
+  useEffect(() => {
+    createKakaoButton();
+  }, []);
+  const ad = "이름"
+  const createKakaoButton = () => {
+    // kakao sdk script이 정상적으로 불러와졌으면 window.Kakao로 접근이 가능합니다
+    if (window.Kakao) {
+      const kakao = window.Kakao;
+      // 중복 initialization 방지
+      if (!kakao.isInitialized()) {
+        // 두번째 step 에서 가져온 javascript key 를 이용하여 initialize
+        kakao.init(process.env.REACT_APP_KAKAO_KEY);
+      }
+      kakao.Link.createDefaultButton({
+        container: '#kakao-link-btn',
+        objectType: 'text',
+        text:
+          `${ad}`,
+          //'기본 템플릿으로 제공되는 텍스트 템플릿은 텍스트를 최대 200자까지 표시할 수 있습니다. 텍스트 템플릿은 텍스트 영역과 하나의 기본 버튼을 가집니다. 임의의 버튼을 설정할 수도 있습니다. 여러 장의 이미지, 프로필 정보 등 보다 확장된 형태의 카카오링크는 다른 템플릿을 이용해 보낼 수 있습니다.',
+        link: {
+          mobileWebUrl:
+            'http://localhost:3000/room/Invite',
+          webUrl:
+            'http://localhost:3000/room/Invite',
+        },
+      });
+    }
+  };
+  return (
+    <div className="kakao-share-button">
+      {/* Kakao share button */}
+      <button 
+      id="kakao-link-btn"
+      type="submit" 
+      className="col-2 p-1 btn btn-primary"
+      data-bs-dismiss="modal"
+      style={{ width: "120px" }}
+      >카카오로 초대
+      </button>
+    </div>
+  );
+};
+export default KakaoShareButton;
--- a/client/src/components/Room/RightHamburger.js
+++ b/client/src/components/Room/RightHamburger.js
@@ -34,7 +34,7 @@ const RightHamberger = () => {
                        style={{
                            fontWeight: 'bold',
                            fontSize: '15px',
-                            overflow: 'scroll',
+                            overflow: 'hidden',
                            whiteSpace: 'nowrap',
                            width: '150px',
                            color: '#000000',
@@ -109,6 +109,7 @@ const RightHamberger = () => {
                                            <button
                                                type="submit"
                                                className="col-2 p-1 btn btn-primary"
+                                                data-bs-dismiss="modal"
                                            >
                                                예
                                            </button>

--- a/client/src/components/Room/UserState.js
+++ b/client/src/components/Room/UserState.js
+const UserState = () => {
+    return (
+        <div className="overflow-auto" style={{ height: '610px' }}>
+            <div className="mb-3">
+                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
+                    <img className="col-auto mt-2" src="/fullSpeaker.png" width="25px" height="25px" />
+                    <h5 className="col mt-2">Online</h5>
+                </div>
+                <ul className="mx-5">
+                    <li>
+                        CHERRY
+                    </li>
+                    <li>
+                        JAEYEON
+                    </li>
+                    <li>
+                        SEOYEON
+                    </li>
+                    <li>
+                        JIWEON
+                    </li>
+                    <li>
+                        BYOUNGYUN
+                    </li>
+                </ul>
+            </div>
+            <div className="mb-3">
+                <div className="m-3 p-1 row" style={{ backgroundColor: "#E0CEE8" }}>
+                    <img className="col-auto mt-2" src="/emptySpeaker.png" width="25px" height="25px" />
+                    <h5 className="col mt-2">Offline</h5>
+                </div>
+                <ul className="mx-5">
+                    <li>
+                        CHERRY
+                    </li>
+                    <li>
+                        JAEYEON
+                    </li>
+                    <li>
+                        SEOYEON
+                    </li>
+                    <li>
+                        JIWEON
+                    </li>
+                    <li>
+                        BYOUNGYUN
+                    </li>
+                </ul>
+            </div>
+        </div>
+    )
+};
+export default UserState;
--- a/client/src/pages/InvitePage.js
+++ b/client/src/pages/InvitePage.js
+import Header from "../components/Header";
+import UserImage from "../../src/kakao_login.png";
+import RoomImage from "../../src/kakao_login.png";
+const InvitePage = () => {
+  function GoInvitedroom() {
+    // if() : //초대받은 사람이 로그인 o
+    // roomid = //서버에서 받아온 방 번호 저장
+    // //초대받은 사람의 참여한  방 목록에 roomid 추가
+    // else //로그인x
+    // //로그인 하게 보냄.
+  }
+  function Invitereject() {
+    // if () //초대받은 사람이 로그인 o
+    //   <Link to="/user"></Link>//유저 페이지로 이동.
+    // else //로그인x
+    //   <Link to="/"></Link> //메인화면으로 이동.
+  }
+  return (
+    <div>
+      {/*페이지 전체*/}
+      <Header />
+      <div className="d-flex justify-content-evenly">
+        {/* 위 사진,이름 */}
+        <div
+          style={{
+            width: "100%",
+            height: "140px",
+            textAlign: "center",
+            border: "3px",
+            borderStyle: "none solid solid",
+            borderColor: "red",
+            fontSize: "12px",
+          }}
+        >
+          {/* 방 부분 */}
+          <p style={{ marginBottom: "0px", fontSize: "16px" }}>초대받은 방</p>
+          <img src={RoomImage} style={{ width: "90px", height: "90px" }}></img>
+          <p style={{ marginBottom: "0px", fontSize: "16px" }}>
+            방 id: {/*${roomid}*/}
+          </p>
+        </div>
+        {/* <div
+          style={{
+            width: "207px",
+            height: "140px",
+            textAlign: "center",
+            border: "3px",
+            borderStyle: "none solid solid none",
+            borderColor: "red",
+            fontSize: "12px",
+          }}
+        >
+          초대한 사람 부분 
+          <p style={{ marginBottom: "0px", fontSize: "16px" }}>초대한 사람</p>
+          <img src={UserImage} style={{ width: "90px", height: "90px" }}></img>
+          <p style={{ marginBottom: "0px", fontSize: "16px" }}>
+            이름: {/*${nickname} 
+          </p>
+        </div>*/}
+      </div>
+      <div
+        style={{
+          width: "80%",
+          height: "200px",
+          textAlign: "center",
+          fontSize: "18px",
+          marginLeft: "10%",
+          marginRight: "10%",
+        }}
+      >
+        {/* 아래 텍스트 */}
+        <p>
+          <br></br>
+          축하합니다! 친구{/*${InvitePerson.nickname}*/}가 화상회의방{" "}
+          {/*${InvitedRoo.roomid}*/}로 초대하였습니다.
+          <br></br>
+          <br></br>
+          초대를 수락하시겠습니까?
+        </p>
+      </div>
+      <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={GoInvitedroom}
+        >
+          수락
+        </button>
+        <button
+          type="submit"
+          className="col-2 p-1 btn btn-primary"
+          data-bs-dismiss="modal"
+          style={{ width: "120px" }}
+          onClick={Invitereject}
+        >
+          거절
+        </button>
+      </div>
+    </div>
+  );
+};
+export default InvitePage;