diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..03d9549 --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/jsLinters/eslint.xml b/.idea/jsLinters/eslint.xml new file mode 100644 index 0000000..541945b --- /dev/null +++ b/.idea/jsLinters/eslint.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index 1885062..bb4b2b6 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -14,6 +14,8 @@ 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"; function App() { return ( @@ -24,6 +26,8 @@ function App() { } /> } /> } /> + } /> + } /> ); diff --git a/src/api/JoinInfoPost.js b/src/api/postMemberData.js similarity index 84% rename from src/api/JoinInfoPost.js rename to src/api/postMemberData.js index 3fff134..f109016 100644 --- a/src/api/JoinInfoPost.js +++ b/src/api/postMemberData.js @@ -2,7 +2,9 @@ import { instance } from "./instanceAuth"; // 설정된 Axios 인스턴스 임포트 export async function postMemberData(data) { - const url = `/api/auth/member?name=${encodeURIComponent(data.koreanName)}`; + const userName = localStorage.getItem('kakao_access_tocken') + const url = `/api/auth/member?name=${encodeURIComponent(data.koreaName)}`; + console.log(url); try { const response = await instance.post(url, data); // Axios 인스턴스 사용 diff --git a/src/pages/chat/ChatList.jsx b/src/pages/chat/ChatList.jsx index 4bb148e..9f548ab 100644 --- a/src/pages/chat/ChatList.jsx +++ b/src/pages/chat/ChatList.jsx @@ -1,19 +1,19 @@ import React from "react"; import * as styles from "./styled/ChatList.styled"; -import smile from "../../assets/images/smiles.png"; +import profileimg from "../../assets/dummyImages/peopleList2.png"; const ChatList = (props) => { const truncatedContent = - props.content.length > 20 - ? `${props.content.slice(0, 15)}...` + props.content.length > 15 + ? `${props.content.slice(0, 12)}...` : props.content; - console.log(props); + return ( - + {props.name} @@ -22,9 +22,6 @@ const ChatList = (props) => { {props.time} - - {props.alramcount} - ); diff --git a/src/pages/chat/ChatMain.jsx b/src/pages/chat/ChatMain.jsx index 5068062..a580a95 100644 --- a/src/pages/chat/ChatMain.jsx +++ b/src/pages/chat/ChatMain.jsx @@ -18,10 +18,10 @@ function ChatMain() { const fetchChatList = async () => { try { const response = await getChatList(nowUser); // 사용자 이름을 동적으로 설정 가능 - setChatList(response.data); - console.log('채팅방리스트', response); + setChatList(response); + console.log('채팅방리스트 불러오기 성공', response); } catch (error) { - console.error("Failed to fetch chat list", error); + console.error("채팅방리스트 불러오기 실패", error); } }; diff --git a/src/pages/chat/ChatRoom.jsx b/src/pages/chat/ChatRoom.jsx index 0152630..144de93 100644 --- a/src/pages/chat/ChatRoom.jsx +++ b/src/pages/chat/ChatRoom.jsx @@ -5,6 +5,7 @@ import * as styles from "./styled/ChatRoom.styled"; import Text from "../../components/Common/Text"; import ChatMessage from "./ChatMessage.jsx"; import { getChatMessages } from "../../api/ChatMessageCall.js"; +import dummyChatMessages from "./dummyChatData/dummyChatMessages1"; const ChatRoom = (props) => { const { uuid, name } = props; @@ -124,9 +125,8 @@ const ChatRoom = (props) => { >{name} - {Array.isArray(messages) && messages.map((each, id) => ( + {Array.isArray(dummyChatMessages) && dummyChatMessages.map((each, id) => ( props.fontSize || "17px"}; + font-size: ${(props) => props.fontSize || "15spx"}; margin-top: 5px; + width: 170px; `; export const TimeAlramWrapper = styled.div` diff --git a/src/pages/chat/styled/ChatMain.styled.js b/src/pages/chat/styled/ChatMain.styled.js index 0583283..8d4bfa1 100644 --- a/src/pages/chat/styled/ChatMain.styled.js +++ b/src/pages/chat/styled/ChatMain.styled.js @@ -28,23 +28,24 @@ export const Title = styled.h1` export const ChatWrapper = styled.div` width: 90%; height: 90%; - background-color: white; display: flex; flex-direction: row; jusitfy-content: center; align-items: center; - border-top: 3px solid black; - border-bottom: 3px solid black: + border-radius: 20px; + border: 4px solid #d3cba1; `; export const LeftWrapper = styled.div` width: 50%; height: 100%; - background-color: #fff9d9; + background-color: transparent; + border-right: 4px solid #d3cba1; overflow-y: auto; `; export const ChatListButton = styled.div``; export const RightWrapper = styled.div` width: 50%; height: 100%; + border-radius:20px; `; diff --git a/src/pages/join/JoinPage.jsx b/src/pages/join/JoinPage.jsx index 30d177e..ec8199a 100644 --- a/src/pages/join/JoinPage.jsx +++ b/src/pages/join/JoinPage.jsx @@ -2,7 +2,7 @@ import React, {useState} from "react"; import Layout from "../../components/Common/Layout"; import * as styles from "../join/styled/JoinPage.styled.js"; import Text from "@/components/Common/Text.jsx"; -import {postMemberData} from '../../api/JoinInfoPost.js' +import {postMemberData} from '../../api/postMemberData.js' import {ContentLineTitleWrapper} from "../join/styled/JoinPage.styled.js"; function JoinPage(){ diff --git a/src/pages/join/KakaoLogin.jsx b/src/pages/join/KakaoLogin.jsx index 80ae394..7bdd879 100644 --- a/src/pages/join/KakaoLogin.jsx +++ b/src/pages/join/KakaoLogin.jsx @@ -1,17 +1,50 @@ -import React from "react"; -import { useNavigate } from "react-router-dom"; +import React, { useEffect } from "react"; import Layout from "../../components/Common/Layout.jsx"; import MiniLayout from "../../components/Common/miniLayout.jsx"; import kakaologin from "../../assets/images/kakaologin.png"; +import { useNavigate } from "react-router-dom"; function KakaoLogin() { - const CLIENT_ID = import.meta.env.REACT_APP_KAKAO_CLIENT_ID; // 환경변수에 CLIENT_ID 설정 - const REDIRECT_URL = import.meta.env.REACT_APP_KAKAO_REDIRECT_URL; // 환경변수에 REDIRECT_URL 설정 + const CLIENT_ID = import.meta.env.VITE_KAKAO_CLIENT_ID; + const REDIRECT_URL = import.meta.env.VITE_KAKAO_REDIRECT_URI; + const navigate = useNavigate(); + + useEffect(() => { + const accessToken = localStorage.getItem("kakao_access_token"); + if (accessToken) { + alert("이미 로그인 되어있습니다!"); + navigate("/list"); + } + if (!window.Kakao) { + const script = document.createElement("script"); + script.src = "https://developers.kakao.com/sdk/js/kakao.js"; + script.async = true; + document.body.appendChild(script); + + script.onload = () => { + if (!window.Kakao.isInitialized()) { + window.Kakao.init(CLIENT_ID); + console.log("Kakao SDK initialized"); + } + }; + } else if (!window.Kakao.isInitialized()) { + window.Kakao.init(CLIENT_ID); + console.log("Kakao SDK initialized"); + } + }, [CLIENT_ID]); + + // 카카오 로그인 버튼 클릭시 인증 요청 const handleKakaoLogin = () => { + if (!window.Kakao.isInitialized()) { + console.error("Kakao SDK가 초기화되지 않았습니다."); + return; + } - const kakaoLoginUrl = `https://api.kaboo.site:8081/oauth2/authorization/kakao?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URL}&response_type=code`; - window.location.href = kakaoLoginUrl; // URL로 리디렉션 + window.Kakao.Auth.authorize({ + redirectUri: REDIRECT_URL + }); + navigate("/join"); }; return ( diff --git a/src/pages/join/KakoRedirect.jsx b/src/pages/join/KakoRedirect.jsx new file mode 100644 index 0000000..4d724c7 --- /dev/null +++ b/src/pages/join/KakoRedirect.jsx @@ -0,0 +1,57 @@ +import React, { useEffect } from "react"; +import {useLocation, useNavigate} from "react-router-dom"; +import axios from "axios"; + +const KakaoRedirect = () => { + const location = useLocation(); + const navigate = useNavigate(); + + useEffect(() => { + + const searchParams = new URLSearchParams(location.search); + const code = searchParams.get("code"); + + if (code) { + console.log("인가 코드:", code); + // 백엔드로 넘겨주기 구현 필요! + getAccessToken(code); + } else { + console.error("카카오 로그인 실패: 인가 코드를 받지 못했습니다."); + } + }, [location]); + + // 인가 코드를 통해 토큰을 받아오는 함수 + const getAccessToken = async (code) => { + try { + const response = await axios.post( + `https://kauth.kakao.com/oauth/token`, + null, { + params: { + grant_type: "authorization_code", + client_id: import.meta.env.VITE_KAKAO_CLIENT_ID, + redirect_uri: import.meta.env.VITE_KAKAO_REDIRECT_URI, + code: code, + }, + headers: { + "Content-Type": "application/x-www-form-urlencoded", + } + } + ); + console.log("Access Token:", response.data.access_token); + // 받은 토큰을 localStorage 또는 백엔드로 전달 + localStorage.setItem("kakao_access_token", response.data.access_token); + navigate("/join") + + } catch (error) { + console.error("토큰 요청 실패:", error); + } + }; + + return ( +
+

카카오 로그인 중...

+
+ ); +}; + +export default KakaoRedirect; \ No newline at end of file diff --git a/vite.config.js b/vite.config.js index 6d32319..11695b8 100644 --- a/vite.config.js +++ b/vite.config.js @@ -12,4 +12,5 @@ export default defineConfig({ define: { global: 'window', // 글로벌 변수를 브라우저 환경에서 사용할 수 있도록 설정 }, -}); + +}); \ No newline at end of file