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

Merge into main - feat:카카오로그인 시도

.gitignore

@@ -26,4 +26,4 @@ node_modules
 /dist
 
 .env
-.env*
+.env*

src/App.jsx

@@ -13,15 +13,17 @@ 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";
 function App() {
   return (
     <Router>
       <Routes>
-        <Route path="/" element={<HomeMain />}></Route>
+        <Route path="/" element={<PeopleListPage />}></Route>
         <Route path="/chat" element={<ChatPage />}></Route>
         <Route path="/video" element={<RTCPage />}></Route>
         <Route path="/list" element={<PeopleListPage />} />
         <Route path="/details" element={<PeopleDetailPage />} />
+        <Route path="/login" element={<KakaoLogin />} />
       </Routes>
     </Router>
   );

src/components/Common/Header.jsx

@@ -11,22 +11,25 @@ function Header() {
       <styles.HeaderSubContainer>
         <styles.LogoWrapper
           onClick={() => {
-            navigate("/");
+            navigate("/list");
           }}
         >
           <styles.Logo src={logo} alt="Logo" />
           <styles.ServiceName>카부커넥션</styles.ServiceName>
         </styles.LogoWrapper>
 
         <styles.NavBar>
-          <styles.NavItem href="/">카부 게시판</styles.NavItem>
-          <styles.NavItem href="/">카부 프로젝트</styles.NavItem>
-          <styles.NavItem href="/join">카부 편의</styles.NavItem>
+          <styles.NavItem href="/list">카부 게시판</styles.NavItem>
+          <styles.NavItem href="/list">카부 프로젝트</styles.NavItem>
+          <styles.NavItem href="/list">카부 편의</styles.NavItem>
           <styles.NavItem href="/chat">카부 커넥션</styles.NavItem>
         </styles.NavBar>
       </styles.HeaderSubContainer>
       <styles.PeopleLogoWrapper>
-        <styles.PeopleLogo src={peoplelogo} />
+        <styles.PeopleLogo src={peoplelogo}
+                           onClick={() => {
+                               navigate("/login");
+                           }}/>
       </styles.PeopleLogoWrapper>
     </styles.HeaderContainer>
   );

src/pages/chat/ChatList.jsx

@@ -1,11 +1,13 @@
 import React from "react";
 import * as styles from "./styled/ChatList.styled";
 import smile from "../../assets/images/smiles.png";
+
 const ChatList = (props) => {
   const truncatedContent =
     props.content.length > 20
       ? `${props.content.slice(0, 15)}...`
       : props.content;
+    console.log(props);
 
   return (
     <styles.TotalWrapper>

src/pages/chat/ChatMain.jsx

@@ -4,17 +4,15 @@ import * as styles from "./styled/ChatMain.styled";
 import ChatRoom from "./ChatRoom";
 import ChatList from "./ChatList";
 import {getChatList} from "../../api/ChatListCall.js";
+import dummyChatList from "./dummyChatData/dummyChatList";
+
 
 function ChatMain() {
   const [chatList, setChatList] = useState([])
   const [selectedChatRoom, setSelectedChatRoom] = useState(null);
   const nowUser = 'pjh2';
 
-  const sampleList = [
-    {chatRoomName:'홍창기', chatRoomContent:"홍창기 안타 안타 날려 홍창기 홍창기 안타 날려 버려라", chatRoomUUID:1},
-    {chatRoomName:'문보경', chatRoomContent:"동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세",chatRoomUUID:2},
-    {chatRoomName:'박동원', chatRoomContent:"시원하게 날려버려 무적엘지 박동원 무적엘지의 승리를 위해 날려버려라", chatRoomUUID:3},
-  ]
+
 
   useEffect(() => {
     const fetchChatList = async () => {
@@ -42,7 +40,7 @@ function ChatMain() {
       </styles.TitleWrapper>
       <styles.ChatWrapper>
         <styles.LeftWrapper>
-          {Array.isArray(chatList)&&chatList.map((eachChat, id) => (
+          {Array.isArray(dummyChatList)&&dummyChatList.map((eachChat, id) => (
               <styles.ChatListButton
                   key={eachChat.chatRoomUUID}
                   onClick={(e)=>{
@@ -51,8 +49,8 @@ function ChatMain() {
                 <ChatList
                     uuid={eachChat.chatRoomUUID}
                     name={eachChat.chatRoomName}
-                    content={eachChat.chatRoomName}
-                    time={"pm 10:30"}
+                    content={eachChat.chatContent}
+                    time={eachChat.time}
                     alramcount={3}></ChatList>
               </styles.ChatListButton>
 

src/pages/chat/ChatRoom.jsx

@@ -12,7 +12,7 @@ const ChatRoom = (props) => {
     const [message, setMessage] = useState("");
     const [stompClient, setStompClient] = useState(null);
 
-    const currentUsername = "pjh2"; // 현재 사용자를 pjh2로 가정
+    const currentUsername = '홍창기'; // 현재 사용자를 pjh2로 가정
 
   const roomId = props.uuid;
 

src/pages/chat/dummyChatData/dummyChatList

@@ -0,0 +1,39 @@
+const dummyChatList = [
+  {
+    chatRoomUUID: 1,
+    chatRoomName: "문보경",
+    chatContent: "잘지냈어?? 그동안 뭐하고 지냄?",
+    time: "10:30 AM",
+    alramcount: 2,
+  },
+  {
+    chatRoomUUID: 2,
+    chatRoomName: "박해민",
+    chatContent: "우리 내일 만나는거 맞나?",
+    time: "11:15 AM",
+    alramcount: 0,
+  },
+  {
+    chatRoomUUID: 3,
+    chatRoomName: "이영빈",
+    chatContent: "넵 항상 감사드립니다...!",
+    time: "12:45 PM",
+    alramcount: 1,
+  },
+  {
+    chatRoomUUID: 4,
+    chatRoomName: "김현수",
+    chatContent: "너 파일 나한테 보냈니??",
+    time: "1:20 PM",
+    alramcount: 3,
+  },
+  {
+    chatRoomUUID: 5,
+    chatRoomName: "오지환",
+    chatContent: "그래 곧 만나자~! 오늘 너무 즐거웠어.",
+    time: "2:10 PM",
+    alramcount: 0,
+  },
+];
+
+export default dummyChatList;

src/pages/chat/styled/ChatMain.styled.js

@@ -5,7 +5,7 @@ import { css } from "@emotion/react";
 export const TotalWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  width: 100%;
+  width: 85%;
   height: 100vh;
   align-items: center;
   justify-content: center;

src/pages/join/KakaoLogin.jsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import Layout from "../../components/Common/Layout.jsx";
+import MiniLayout from "../../components/Common/miniLayout.jsx";
+import kakaologin from "../../assets/images/kakaologin.png";
+
+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 handleKakaoLogin = () => {
+
+        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로 리디렉션
+    };
+
+    return (
+        <Layout>
+            <MiniLayout>
+                <button
+                    style={{ border: "none", background: "none", padding: 0, margin: 0, outline: "none", width: "50%" }}
+                    onClick={handleKakaoLogin}
+                >
+                    <img src={kakaologin} style={{ width: "80%" }} alt="Kakao Login" />
+                </button>
+            </MiniLayout>
+        </Layout>
+    );
+}
+
+export default KakaoLogin;