Merge pull request #88 from Hanjuri/feature/#49

feat:카카오로그인 구현중

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 (
     <Router>
@@ -24,6 +26,8 @@ function App() {
         <Route path="/list" element={<PeopleListPage />} />
         <Route path="/details" element={<PeopleDetailPage />} />
         <Route path="/login" element={<KakaoLogin />} />
+        <Route path="/auth/code/kakao" element={<KakaoRedirect />} />
+        <Route path= "/join" element = {<JoinPage />} />
       </Routes>
     </Router>
   );

src/api/JoinInfoPost.js → 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 인스턴스 사용

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 (
     <styles.TotalWrapper>
       <styles.ContentWrapper>
         <styles.ProfileWrapper>
-          <styles.Profile src={smile}></styles.Profile>
+          <styles.Profile src={profileimg}></styles.Profile>
         </styles.ProfileWrapper>
         <styles.NameContentWrapper>
           <styles.UserName>{props.name}</styles.UserName>
@@ -22,9 +22,6 @@ const ChatList = (props) => {
       </styles.ContentWrapper>
       <styles.TimeAlramWrapper>
         <styles.Time>{props.time}</styles.Time>
-        <styles.AlramWrapper>
-          <styles.Alram>{props.alramcount}</styles.Alram>
-        </styles.AlramWrapper>
       </styles.TimeAlramWrapper>
     </styles.TotalWrapper>
   );

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);
       }
     };
 

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}</Text>
             </styles.NameWrapper>
             <styles.ChatRoomWrapper>
-                {Array.isArray(messages) && messages.map((each, id) => (
+                {Array.isArray(dummyChatMessages) && dummyChatMessages.map((each, id) => (
                     <ChatMessage
-                        key={each.id}
                         name={each.username}
                         message={each.message}
                         time={each.time}

src/pages/chat/dummyChatData/dummyChatMessages1

@@ -0,0 +1,29 @@
+const dummyChatMessages1 = [ {
+    "username" : "pjh2",
+    "nickname" : "justin",
+    "message" : "거기는 어때?",
+    "sendAt" : "2024-08-18T21:01:13.382868"
+  }, {
+    "username" : "pjh2",
+    "nickname" : "justin",
+    "message" : "엄청 더워...",
+    "sendAt" : "2024-08-18T21:01:13.382866"
+  }, {
+    "username" : "문보경",
+    "nickname" : "park",
+    "message" : "거기 날씨 어때?",
+    "sendAt" : "2024-08-18T21:01:13.382864"
+  }, {
+    "username" : "문보경",
+    "nickname" : "park",
+    "message" : "반가워",
+    "sendAt" : "2024-08-18T21:01:13.38286"
+  }, {
+    "username" : "pjh2",
+    "nickname" : "justin",
+    "message" : "안녕",
+    "sendAt" : "2024-08-18T21:01:13.382837"
+  } ]
+
+
+  export default dummyChatMessages1;

src/pages/chat/styled/ChatList.styled.js

@@ -9,17 +9,25 @@ export const TotalWrapper = styled.div`
   height: 130px;
   align-items: center;
   justify-content: space-between;
-  border-top: 1px solid gray;
-  border-bottom: 1px solid gray;
+    border-bottom: 1px solid #d3cba1;
+    border-radius: 20px;
+    margin: 3px;
+    background: rgba(255, 255, 255, 0.5);;
+
+    &:hover {
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
+        border: 3px solid #d3cba1;
+    }
 `;
 
 export const ContentWrapper = styled.div`
   display: flex;
   flex-direction: row;
-  width: 60%;
-  height: 100%;
+  width: 70%;
+  height: 90%;
   align-items: center;
   justify-content: center;
+    margin:5px;
 `;
 
 export const ProfileWrapper = styled.div`
@@ -28,10 +36,12 @@ export const ProfileWrapper = styled.div`
   height: 85px;
   align-items: flex-start;
   justify-content: center;
+   
 `;
 export const Profile = styled.img`
-  width: 90%;
-  height: 90%;
+  width: 100%;
+  height: 100%;
+    border-radius: 50px;
 `;
 export const NameContentWrapper = styled.div`
   display: flex;
@@ -40,6 +50,7 @@ export const NameContentWrapper = styled.div`
   justify-content: flex-start;
   width: 60%;
   height: 60%;
+    margin-left: 10px;
 `;
 
 export const UserName = styled.div`
@@ -49,8 +60,9 @@ export const UserName = styled.div`
 `;
 
 export const TalkContent = styled.div`
-  font-size: ${(props) => props.fontSize || "17px"};
+  font-size: ${(props) => props.fontSize || "15spx"};
   margin-top: 5px;
+    width: 170px;
 `;
 
 export const TimeAlramWrapper = styled.div`

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;
 `;

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(){

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 (

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 (
+        <div>
+            <h2>카카오 로그인 중...</h2>
+        </div>
+    );
+};
+
+export default KakaoRedirect;

vite.config.js

@@ -12,4 +12,5 @@ export default defineConfig({
   define: {
     global: 'window', // 글로벌 변수를 브라우저 환경에서 사용할 수 있도록 설정
   },
-});
+
+});