Merge pull request YJU-OKURA#169 from Lainari/feat/class-board-api

クラス参加とメンバーAPI接続、ライブチャット機能を追加

package.json

@@ -26,7 +26,10 @@
   "dependencies": {
     "@tanstack/react-query": "^5.17.10",
     "@types/js-cookie": "^3.0.6",
+    "@types/event-source-polyfill": "^1.0.5",
     "axios": "^1.6.5",
+    "event-source-polyfill": "^1.0.31",
+
     "date-fns": "^3.6.0",
     "ion-sdk-js": "^1.8.2",
     "js-cookie": "^3.0.5",

public/svgs/_class/index.ts

@@ -1,4 +1,5 @@
 const icons = {
+  copy: '/svgs/_class/copyButton.svg',
   favorite: '/svgs/_class/favorite.svg',
   folder: '/svgs/_class/folder.svg',
   noneFavorite: '/svgs/_class/noneFavorite.svg',

public/svgs/_class/member/index.ts

@@ -0,0 +1,6 @@
+const icons = {
+  admin: '/svgs/_class/member/admin.svg',
+  assistant: '/svgs/_class/member/assistant.svg',
+};
+
+export default icons;

src/api/_class/getClassesRole.ts

@@ -1,7 +1,11 @@
 import req from '@/src/api/apiUtils';
 
 const getClassesRole = async (uid: number, roleID: string) => {
-  const response = await req(`/cu/${uid}/classes?role=${roleID}`, 'get', 'gin');
+  const response = await req(
+    `/cu/${uid}/classes/by-role?role=${roleID}`,
+    'get',
+    'gin'
+  );
 
   return response;
 };

src/api/_class/index.ts

@@ -2,17 +2,17 @@ import getClassInfo from './getClassInfo';
 import getClasses from './getClasses';
 import getClassesRole from './getClassesRole';
 import getFavoriteClasses from './getFavoriteClasses';
-// import patchClassRole from './patchClassRole';
-// import patchToggleFavoriteClass from './patchToggleFavoriteClass';
+import patchClassRole from './patchClassRole';
+import patchToggleFavoriteClass from './patchToggleFavoriteClass';
 import postCreateClass from './postCreateClass';
 
 const classAPI = {
   getClassInfo,
   getClasses,
   getClassesRole,
   getFavoriteClasses,
-  // patchClassRole,
-  // patchToggleFavoriteClass,
+  patchClassRole,
+  patchToggleFavoriteClass,
   postCreateClass,
 };
 

src/api/chatRoom/URLList.ts

@@ -0,0 +1,5 @@
+const URLList = {
+  liveURL: 'http://43.203.66.25/api/gin/chat/stream/',
+};
+
+export default URLList;

src/api/chatRoom/getLiveMessages.ts

@@ -0,0 +1,30 @@
+import URLList from './URLList';
+import {NativeEventSource, EventSourcePolyfill} from 'event-source-polyfill';
+import Cookies from 'js-cookie';
+
+const getLiveMessages = (
+  scheduleId: number,
+  onMessage: (message: string) => void
+) => {
+  const token = Cookies.get('access_token');
+  const url = `${URLList.liveURL}${scheduleId}`;
+
+  const EventSource = EventSourcePolyfill || NativeEventSource;
+  const eventSource = new EventSource(url, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
+
+  eventSource.onmessage = function (event) {
+    onMessage(event.data);
+  };
+
+  eventSource.onerror = function (event) {
+    console.error('EventSource failed:', event);
+  };
+
+  return eventSource;
+};
+
+export default getLiveMessages;

src/api/chatRoom/getMessages.ts

@@ -0,0 +1,8 @@
+import req from '../apiUtils';
+
+const getMessages = async (scheduleId: number) => {
+  const response = await req(`/chat/messages/${scheduleId}`, 'get', 'gin');
+  return response;
+};
+
+export default getMessages;

src/api/chatRoom/index.ts

@@ -0,0 +1,13 @@
+import getLiveMessages from './getLiveMessages';
+import getMessages from './getMessages';
+import postMessage from './postMessage';
+import URLList from './URLList';
+
+const chatRoomAPI = {
+  getMessages,
+  postMessage,
+  getLiveMessages,
+  URLList,
+};
+
+export default chatRoomAPI;

src/api/chatRoom/postMessage.ts

@@ -0,0 +1,21 @@
+import req from '../apiUtils';
+
+const postMessage = async (
+  scheduleId: number,
+  user: string,
+  message: string
+) => {
+  const formData = new FormData();
+  formData.append('user', user);
+  formData.append('message', message);
+  const response = await req(
+    `/chat/room/${scheduleId}`,
+    'post',
+    'gin',
+    formData
+  );
+
+  return response.data;
+};
+
+export default postMessage;

src/api/classCode/getVerifySecret.ts

@@ -6,7 +6,9 @@ const getVerifySecret = async (
   uid: number
 ) => {
   const response = await req(
-    `/cc/VerifyClassCode?code=${classCode}secret=${secret}&uid=${uid}`,
+    `/cc/verifyAndRequestAccess?code=${classCode}${
+      secret ? `&secret=${secret}` : ''
+    }&uid=${uid}`,
     'get',
     'gin'
   );

src/api/classUser/getClassUsers.ts

@@ -0,0 +1,13 @@
+import req from '../apiUtils';
+
+const getClassUsers = async (cid: number, role: string) => {
+  const response = await req(
+    `/cu/class/${cid}/members?role=${role}`,
+    'get',
+    'gin'
+  );
+
+  return response.data;
+};
+
+export default getClassUsers;

src/app/classes/[cId]/[mId]/components/chatComponents/page.tsx

@@ -0,0 +1,171 @@
+'use client';
+
+import {useRef, useState, useEffect} from 'react';
+import {useParams} from 'next/navigation';
+import Image from 'next/image';
+import {useRecoilValue} from 'recoil';
+import userState from '@/src/recoil/atoms/userState';
+import chatRoomAPI from '@/src/api/chatRoom';
+import getUserInfo from '@/src/api/classUser/getUserInfo';
+import ChatInput from '@/src/app/classes/[cId]/[mId]/components/subComponents/ChatInput';
+import {User} from '@/src/interfaces/user';
+
+interface UserInfo extends User {
+  id: number;
+}
+
+const ShowMain = () => {
+  const user = useRecoilValue(userState) as User;
+  const [message, setMessage] = useState('');
+  const [messages, setMessages] = useState<string[]>([]);
+  const [chatUsers, setChatUsers] = useState<{[key: string]: User}>({});
+  const params = useParams();
+  const getClassId = Number(params.cId);
+  const getScheduleId = 14;
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+
+  const handleGetMessages = () => {
+    chatRoomAPI
+      .getMessages(getScheduleId)
+      .then(res => {
+        if (res && 'data' in res) {
+          const {data} = res;
+          setMessages(data || []);
+        } else {
+          console.error('응답에서 data를 찾을 수 없습니다.');
+          setMessages([]);
+        }
+      })
+      .catch(error => {
+        console.error('메시지를 가져오는 중 오류 발생:', error);
+      });
+  };
+
+  const handleGetLiveStart = () => {
+    const eventSource = chatRoomAPI.getLiveMessages(getScheduleId, message => {
+      setMessages(prevMessages => [...prevMessages, message]);
+    });
+
+    eventSource.onerror = function (event) {
+      console.error('EventSource failed:', event);
+    };
+
+    return eventSource;
+  };
+
+  const handleGetUserInfo = async (uid: number) => {
+    const userInfo = await getUserInfo(uid, getClassId);
+    return userInfo;
+  };
+
+  useEffect(() => {
+    if (message === '') return;
+    chatRoomAPI
+      .postMessage(getScheduleId, user.id.toString(), message)
+      .then(res => {
+        setMessage('');
+        console.log(res);
+      });
+  }, [message]);
+
+  useEffect(() => {
+    const fetchChatUsers = async () => {
+      const newChatUsers: {[id: string]: UserInfo} = {};
+      for (const msg of messages) {
+        const [id] = msg.split(': ');
+        if (!newChatUsers[id]) {
+          newChatUsers[id] = await handleGetUserInfo(Number(id));
+        }
+      }
+      setChatUsers(newChatUsers);
+    };
+
+    fetchChatUsers();
+  }, [messages]);
+
+  useEffect(() => {
+    if (messagesEndRef.current) {
+      messagesEndRef.current.scrollIntoView({behavior: 'smooth'});
+    }
+  }, [messages]);
+
+  useEffect(() => {
+    const eventSource = handleGetLiveStart();
+    return () => {
+      eventSource.close();
+    };
+  }, [getScheduleId]);
+
+  useEffect(() => {
+    handleGetMessages();
+  }, [getScheduleId]);
+
+  return (
+    <div className="flex justify-center mt-10">
+      <div className="w-full max-w-md">
+        <div className="w-full mt-2">
+          <div className="border-4 rounded-lg border-gray-500 p-2 h-[550px] overflow-auto">
+            <p className="text-center inline-block px-4 py-2 text-sm text-white bg-violet-300 rounded-lg w-full">
+              최상단 채팅 내용입니다
+            </p>
+            {messages.map((msg, index) => {
+              const [id, message] = msg.split(': ');
+              const chatUser = chatUsers[id];
+              if (!chatUser) {
+                return null;
+              }
+              return (
+                <div
+                  key={index}
+                  className={
+                    Number(id) === user.id
+                      ? 'flex justify-end items-start'
+                      : 'flex justify-start items-start'
+                  }
+                >
+                  {Number(id) !== user.id && (
+                    <div className="flex items-center mt-2">
+                      <div className="rounded-full w-8 h-8 overflow-hidden max-w-20">
+                        <Image
+                          src={chatUser.image || user.image}
+                          alt={'userImage'}
+                          width={40}
+                          height={40}
+                        />
+                      </div>
+                      <div className="ml-2">
+                        <p>{chatUser.nickname || user.name}</p>
+                        <p
+                          className={
+                            'inline-block px-3 py-2 text-sm text-white bg-gray-500 rounded-lg max-w-72'
+                          }
+                        >
+                          {message}
+                        </p>
+                      </div>
+                    </div>
+                  )}
+                  {Number(id) === user.id && (
+                    <div className="mt-2">
+                      <p
+                        className={
+                          'inline-block px-4 py-2 text-sm text-white bg-blue-400 rounded-lg max-w-72'
+                        }
+                      >
+                        {message}
+                      </p>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+            <div ref={messagesEndRef} />
+          </div>
+        </div>
+        <ChatInput setMsg={setMessage} />
+      </div>
+    </div>
+  );
+};
+
+export default ShowMain;

src/app/classes/[cId]/[mId]/components/manageSubComponents/ManageSubContainer.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, {useState} from 'react';
 import LiveClass from './LiveClass';
 import {useParams} from 'next/navigation';
 import {useRecoilValue} from 'recoil';
 import {User} from '@/src/interfaces/user';
 import userState from '@/src/recoil/atoms/userState';
+import ShowMain from '../chatComponents/page';
 
 const ManageSubContainer: React.FC = () => {
+  const [showMain, setShowMain] = useState(false);
   const {cId} = useParams<{cId: string}>();
   const classId = parseInt(cId, 10);
   const user = useRecoilValue(userState) as User;
@@ -17,6 +19,17 @@ const ManageSubContainer: React.FC = () => {
   return (
     <div>
       <LiveClass classId={classId} userId={user.id} />
+      <button
+        onClick={() => setShowMain(!showMain)}
+        className="fixed top-1 right-4 z-50 bg-primary text-primary-foreground rounded-full p-3 shadow-lg hover:bg-primary/90"
+      >
+        {showMain ? '💬' : '💬'}
+      </button>
+      {showMain && (
+        <div className="fixed top-0 right-0 w-96 h-full bg-white shadow-lg z-10">
+          <ShowMain />
+        </div>
+      )}
     </div>
   );
 };