Merge pull request #96 from KakaoTech-BootCamp-Team-2/dev

🚀 Deploy

.github/workflows/deploy.yaml

@@ -23,6 +23,10 @@ jobs:
         run: |
           echo "VITE_BASE_URL=${{ secrets.VITE_BASE_URL }}" > .env
           echo "VITE_RTC_SERVER=${{ secrets.VITE_RTC_SERVER }}" >> .env
+          echo "VITE_AUTH_BASE_URL=${{ secrets.VITE_AUTH_BASE_URL }}" >> .env
+          echo "VITE_KAKAO_CLIENT_ID=${{ secrets.VITE_KAKAO_CLIENT_ID }}" >> .env
+          echo "VITE_KAKAO_REDIRECT_URI=${{ secrets.VITE_KAKAO_REDIRECT_URI }}" >> .env
+
       - name: Build the Docker image
         run: docker build . --file Dockerfile --tag ${{ env.DOCKER_IMAGE_NAME }}:latest
 

src/App.jsx

@@ -12,10 +12,10 @@ import GlobalStyle from "./components/Common/GlobalStyle";
 import { PeopleListPage } from "./pages/PeopleListPage/PeopleListPage.jsx";
 import { PeopleDetailPage } from "./pages/PeopleDetailPage/PeopleDetailPage.jsx";
 import ChatPage from "./pages/chat/ChatPage";
-import RTCPage from "./pages/VideoPage";
 import KakaoLogin from "./pages/join/KakaoLogin.jsx";
 import KakaoRedirect from "./pages/join/KakoRedirect.jsx";
 import JoinPage from "./pages/join/JoinPage.jsx";
+import RTCPage from "./pages/WebRTC/VideoPage.jsx";
 function App() {
   return (
     <Router>
@@ -27,7 +27,7 @@ function App() {
         <Route path="/details" element={<PeopleDetailPage />} />
         <Route path="/login" element={<KakaoLogin />} />
         <Route path="/auth/code/kakao" element={<KakaoRedirect />} />
-        <Route path= "/join" element = {<JoinPage />} />
+        <Route path="/join" element={<JoinPage />} />
       </Routes>
     </Router>
   );

src/components/Common/Layout.styled.js

@@ -4,7 +4,7 @@ import styled from "@emotion/styled";
 export const LayoutContainer = styled.div`
   position: relative;
   width: 100vw;
-  
+
   display: flex;
   flex-direction: column; // 세로 방향으로 정렬
   z-index: 0; // 배경보다 앞에 위치
@@ -16,7 +16,7 @@ export const MainContent = styled.main`
   flex: 1;
   padding: 0px; /* 콘텐츠 패딩 */
   display: flex;
-  justify-content: center;
+  /* justify-content: space-around; */
   align-items: center;
   flex-direction: column;
 `;

src/pages/Homepage/HomePage.jsx

@@ -1,6 +1,5 @@
 import React from "react";
 import Layout from "../../components/Common/Layout";
-
 function HomePage() {
   return (
     <Layout>

src/pages/LoginPage.jsx

@@ -0,0 +1,30 @@
+import React from "react";
+
+function LoginPage() {
+  const handleLogin = async () => {
+    try {
+      console.log("Attempting to redirect to OAuth provider...");
+
+      // Redirection URL 로그 추가
+      // const redirectUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${kakaoClientId}&redirect_uri=${redirectUri}&response_type=code`;
+      const redirectUrl =
+        "https://api.kaboo.site:8081/oauth2/authorization/kakao";
+      console.log("Redirect URL:", redirectUrl);
+
+      window.location.href = redirectUrl;
+
+      console.log(res);
+    } catch (error) {
+      console.error("Error during redirection:", error);
+    }
+  };
+
+  return (
+    <div>
+      <h2>Login Page</h2>
+      <button onClick={handleLogin}>Login with kakao</button>
+    </div>
+  );
+}
+
+export default LoginPage;

src/pages/VideoPage.jsx → src/pages/WebRTC/VideoPage.jsx

@@ -1,4 +1,6 @@
 import React, { useEffect, useRef } from "react";
+import Layout from "../../components/Common/Layout";
+import * as S from "./style";
 import { io } from "socket.io-client";
 
 const RTCPage = () => {
@@ -111,16 +113,29 @@ const RTCPage = () => {
   }, []);
 
   return (
-    <div>
-      <h1>WebRTC Video Call</h1>
-      <video ref={myVideoRef} autoPlay playsInline style={{ width: "300px" }} />
-      <video
-        ref={remoteVideoRef}
-        autoPlay
-        playsInline
-        style={{ width: "300px" }}
-      />
-    </div>
+    <Layout>
+      <h1>실시간 화상 채팅</h1>
+
+      <S.StyledDiv>
+        <video
+          ref={myVideoRef}
+          autoPlay
+          playsInline
+          style={{ width: "300px", borderRadius: "20px" }}
+        />
+        <video
+          ref={remoteVideoRef}
+          autoPlay
+          playsInline
+          style={{
+            width: "300px",
+            transform: "rotateY(180deg)",
+            WebkitTransform: "rotateY(180deg)",
+            MozTransform: "rotateY(180deg)",
+          }}
+        />
+      </S.StyledDiv>
+    </Layout>
   );
 };
 

src/pages/WebRTC/style.jsx

@@ -0,0 +1,22 @@
+/** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+
+export const StyledDiv = ({ children }) => {
+  const defaultYellow = "#FFF496";
+  const defaultBrown = "#715F00";
+  const liteBrwon = "#D3CBA1";
+  const black = "#000";
+  return (
+    <div
+      css={css`
+        background-color: ${defaultYellow};
+        font-size: 24px;
+        border-radius: 20px;
+        display: flex;
+        gap: 20px;
+      `}
+    >
+      {children}
+    </div>
+  );
+};

src/pages/home/HomeMain.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import * as main from "./HomeMain_styled";
+import Header from "../../components/Header";
+
+function HomeMain() {
+  const test = async () => {
+    const res = await instance.get("/api/auth/member/all");
+    console.log(res);
+  };
+  React.useEffect(() => {
+    test();
+  }, []);
+  return (
+    <main.Container>
+      <main.Main></main.Main>
+    </main.Container>
+  );
+}
+
+export default HomeMain;

src/pages/homepages/HomeMain.jsx

@@ -1,7 +1,15 @@
 import React from "react";
 import Layout from "../../components/Common/Layout";
+import { instance } from "../../api/instance";
 
 function HomeMain() {
+  React.useEffect(() => {
+    const test = async () => {
+      const res = await instance.get("api/auth/member/all");
+      console.log(res);
+    };
+    test();
+  }, []);
   return (
     <Layout>
       <h1>햄스터</h1>