[deploy] separate layouts and fix chat errors (#30)

src/App.tsx

@@ -14,6 +14,7 @@ import { snackbarActions } from 'store/snackbar-slice';
 // firebase
 import './firebase';
 import NotFound from 'components/errorFallback/NotFound';
+import Layout from 'components/Layout';
 
 // lazy loading
 const LandingPage = lazy(() => import('pages/landing'));
@@ -57,9 +58,11 @@ const App = () => {
           <Route path="games" element={<Games />} />
           <Route path="favgame" element={<SetFavoriteGame />} />
         </Route>
-        <Route path="/mypage" element={<MyPage />} />
-        <Route path="/lol/*" element={<LeagueOfLegends />} />
-        <Route path="*" element={<NotFound />} />
+        <Route path="*" element={<Layout />}>
+          <Route path="mypage" element={<MyPage />} />
+          <Route path="lol/*" element={<LeagueOfLegends />} />
+          <Route path="*" element={<NotFound />} />
+        </Route>
       </Routes>
       <Snackbar
         open={SHOW_SNACKBAR}

src/apis/api/common.ts

@@ -3,15 +3,19 @@ import { getDatabase, push, ref, update, child, set } from 'firebase/database';
 
 /**
  * 게시글 생성
- * @param game 게임 이름
- * @param userInput 사용자 입력 데이터
- * @param oauth2Id 사용자 고유 아이디
- * @param maxMember 최대 인원
- * @param notiToken 사용자 Notification 토큰
+ * @param {string} game 게임 이름
+ * @param {any} userInput 사용자 입력 데이터
+ * @param {string} oauth2Id 사용자 고유 아이디
+ * @param {number} maxMember 최대 인원
+ * @param {string} notiToken 사용자 Notification 토큰
  * @returns {
- * key: string; 생성된 채팅방 난수 값
- * boardId: number; 생성된 게시글의 Id 값
- * }
+ *    key: string; 생성된 채팅방 난수 값
+ *    boardId: number; 생성된 게시글의 Id 값
+ * } - 채팅방 난수 값과 게시글 Id 값
+ *
+ * firebaseDB의 새 채팅방 난수값을 생성한 후 이를 게시글 내용과 함께
+ * 서버에 게시글 생성 요청을 보낸 후,
+ * 해당 요청 성공시, firebaseDB에 게시글 정보를 생성한다.
  */
 
 export const createCard = async (
@@ -76,7 +80,13 @@ export const createCard = async (
 
 /**
  * 게시글 삭제
+ * @param game 게임 이름
+ * @param boardId 게시글 Id
+ * @param chatRoomId 채팅방 Id
+ * @returns null
  *
+ * 서버 DB에 해당 게시글을 삭제 요청을 보낸 후,
+ * 해당 요청 성공시, firebaseDB의 게시글 정보 중 isDeleted 를 수정한다.
  */
 
 export const deleteCard = async (
@@ -89,11 +99,21 @@ export const deleteCard = async (
   await update(ref(getDatabase(), `chatRooms/${chatRoomId}`), {
     isDeleted: true,
   });
+
+  return null;
 };
 
 /**
  * 게시글 업데이트
+ * @param currentGame 현재 게임 이름
+ * @param boardId 게시글 Id
+ * @param chatRoomId 채팅방 Id
+ * @param userInput 사용자 입력 데이터
+ * @param updatedMaxMember 최대 인원
+ * @returns null
  *
+ * 서버 DB에 해당 게시글의 내용을 사용자 입력에 따라 업데이트 요청을 보낸 후,
+ * 해당 요청 성공시, firebaseDB의 게시글 정보를 수정한다.
  */
 
 export const updateCard = async (
@@ -109,4 +129,6 @@ export const updateCard = async (
     content: userInput.content,
     maxMember: updatedMaxMember,
   });
+
+  return null;
 };

src/apis/api/firebase.ts

@@ -48,6 +48,18 @@ export const isBanned = async (chatRoomId: string, oauth2Id: string) => {
   return banned;
 };
 
+/**
+ * firebaseDB 내 멤버 추가
+ * @param newMember 새로운 멤버 객체
+ * @param chatRoomId 채팅방 아이디
+ * @param dispatch - redux dispatch
+ * @returns null
+ *
+ * 채팅방에 새로운 멤버를 추가한다.
+ * 채팅방의 멤버 목록에 새로운 멤버를 추가하고,
+ * 채팅방에 참가했다는 시스템 메시지를 전송한다.
+ */
+
 export const addMemberToFirebaseDB = async (
   newMember: Member,
   chatRoomId: string,
@@ -81,8 +93,24 @@ export const addMemberToFirebaseDB = async (
   });
 
   dispatch(chatroomActions.ADD_JOINED_CHATROOMS_ID(chatRoomId));
+
+  return null;
 };
 
+/**
+ * firebaseDB 내 멤버 삭제
+ * @param targetMember
+ * @param chatRoomId
+ * @param chatRoomsRef
+ * @param messagesRef
+ * @param {ReturnType<typeof useDispatch>}dispatch
+ * @returns null
+ *
+ * 채팅방에서 멤버를 삭제한다.
+ * 채팅방의 멤버 목록에서 타겟 멤버를 삭제하고,
+ * 채팅방에 퇴장했다는 시스템 메시지를 전송한다.
+ */
+
 export const removeMemberFromFirebaseDB = async (
   targetMember: Member,
   chatRoomId: string,
@@ -109,13 +137,25 @@ export const removeMemberFromFirebaseDB = async (
     user: {
       nickname: targetMember.nickname,
       oauth2Id: targetMember.oauth2Id,
+      notiToken: '',
     },
     content: `${targetMember.nickname} 님이 퇴장하였습니다.`,
   });
 
   dispatch(chatroomActions.LEAVE_JOINED_CHATROOMS_ID(chatRoomId));
+
+  return null;
 };
 
+/**
+ * 채팅방 삭제 여부 확인
+ * @param chatRoomId 채팅방 아이디
+ * @param chatRoomsRef 채팅방 레퍼런스
+ * @returns 'false' | 'true' string - 채팅방 삭제 여부
+ *
+ * 채팅방의 isDeleted를 조회하여 삭제 여부를 확인한다.
+ */
+
 export const getIsDeleted = async (
   chatRoomId: string,
   chatRoomsRef: DatabaseReference,
@@ -125,6 +165,16 @@ export const getIsDeleted = async (
   return dataSnapshot.val().isDeleted;
 };
 
+/**
+ * 사용자의 해당 채팅방 마지막 읽은 시간 업데이트
+ * @param oauth2Id 사용자 oauth2Id
+ * @param chatRoomId 채팅방 아이디
+ * @param timeStamp 타임스탬프
+ * @returns null
+ *
+ * 사용자의 해당 채팅방 마지막 읽은 시간을 업데이트한다.
+ */
+
 export const updateALastRead = async (
   oauth2Id: string,
   chatRoomId: string,
@@ -136,6 +186,15 @@ export const updateALastRead = async (
   return null;
 };
 
+/**
+ * 사용자의 모든 채팅방 마지막 읽은 시간 업데이트
+ * @param oauth2Id 사용자 oauth2Id
+ * @param joinedChatRoomsId 사용자가 참여한 채팅방 아이디 목록
+ * @returns null
+ *
+ * 사용자의 모든 채팅방 마지막 읽은 시간을 업데이트한다.
+ */
+
 export const updateLastReads = async (
   oauth2Id: string,
   joinedChatRoomsId: string[],
@@ -149,6 +208,15 @@ export const updateLastReads = async (
   return null;
 };
 
+/**
+ * 채팅방 정보 가져오기
+ * @param chatRoomId 채팅방 아이디
+ * @param chatRoomsRef 채팅방 레퍼런스
+ * @returns 채팅방 정보
+ *
+ * 채팅방 정보를 가져온다.
+ */
+
 export const getAChatRoomInfo = async (
   chatRoomId: string,
   chatRoomsRef: DatabaseReference,

src/apis/api/leagueoflegends.ts

@@ -1,10 +1,41 @@
 import { useEffect, useState } from 'react';
 import { authAxios, defaultAxios } from 'apis/utils';
 
+import {
+  ref,
+  getDatabase,
+  child,
+  get,
+  update,
+  set,
+  push,
+} from 'firebase/database';
+
 import { promiseWrapper } from 'apis/utils/promiseWrapper';
-import { cardActions } from 'store/card-slice';
 
-// 카드 리스트 가져오기 (게시글 목록 가져오기)
+/**
+ * 리그오브레전드 소환사명 존재 여부 확인 및 정확한 소환사명 반환
+ * @param nickname 리그오브레전드 닉네임
+ * @returns 닉네임의 정확한 표기
+ */
+
+export const verifyLOLNickname = async (nickname: string) => {
+  const response = await defaultAxios.get(`/api/lol/user/exist/${nickname}`);
+
+  const exactNickname: string = response.data;
+
+  return exactNickname;
+};
+
+/**
+ * 리그오브레전드 게시글 불러오기
+ * @param url 요청 url
+ * @param config 요청 config
+ * @param deps useEffect deps
+ * @returns - 리그오브레전드 게시글 목록
+ *
+ * 리그오브레전드 게시글을 불러온다.
+ */
 export function fetchCardList(url: string, config: any, deps: any[]) {
   const [resource, setResource] = useState(null);
 
@@ -22,7 +53,11 @@ export function fetchCardList(url: string, config: any, deps: any[]) {
   return resource;
 }
 
-// 카드 디테일 가져오기 (카드 상세보기 가져오기)
+/**
+ * 리그오브레전드 게시글 상세보기 불러오기
+ * @param url
+ * @returns - 리그오브레저드 게시글 상세보기
+ */
 export function fetchCardDetail(url: string) {
   const [resource, setResource] = useState(null);
 
@@ -38,30 +73,69 @@ export function fetchCardDetail(url: string) {
   return resource;
 }
 
-export const getExactSummonerName = async (summonerName: string) => {
-  const response = await defaultAxios.get(
-    `/api/lol/user/exist/${summonerName}`,
-  );
+/**
+ * 리그오브레전드 소환사의 전적 불러오기 trigger
+ * @param summonerName
+ * @returns null
+ */
 
-  if (response.status === 200) {
-    return response.data;
-  }
+export const loadSummonerInfoIntoDB = async (summonerName: string) => {
+  const response = await defaultAxios.get(`/api/lol/user/${summonerName}`);
 
   return null;
 };
 
-export const loadSummonerInfoInDB = async (summonerName: string) => {
-  const response = await defaultAxios.get(`/api/lol/user/${summonerName}`);
+/**
+ * 파티장이 소환사 명으로 파티인원 추가
+ * @param cardId 카드 번호
+ * @param nicknameToAdd 추가하려는 사용자 닉네임
+ * @returns null
+ */
 
-  if (response.status === 200) {
-    return 'success';
-  }
+export const addPartyMemberWithSummonerName = async (
+  cardId: number,
+  nicknameToAdd: string,
+) => {
+  await authAxios.post(`/api/chat/lol/${cardId}/${nicknameToAdd}`);
 
   return null;
 };
 
-/** ------------------------------------------------------------
- * 롤 게시글 수정
- * @param {number} boardId - 게시글 번호
- * @param {any} userInput - 사용자가 입력한 게시글 정보
- */
+export const kickMemberFromParty = async (
+  cardId: number,
+  chatRoomId: string,
+  summonerName: string,
+) => {
+  await authAxios.delete(`/api/chat/lol/${cardId}/${summonerName}/ban`);
+
+  const chatRoomsRef = ref(getDatabase(), 'chatRooms');
+  const messagesRef = ref(getDatabase(), 'messages');
+  const dataSnapshot: any = await get(child(chatRoomsRef, chatRoomId));
+
+  const prevMemberList = [...dataSnapshot.val().memberList];
+
+  const target = prevMemberList.find(
+    (member) => member.nickname === summonerName,
+  );
+  console.log(target);
+
+  const prevBannedList = dataSnapshot.val().bannedList
+    ? [...dataSnapshot.val().bannedList]
+    : [];
+  const newMemberList = prevMemberList.filter(
+    (member) => member.nickname !== summonerName,
+  );
+  const newBannedList = [...prevBannedList, target];
+
+  await update(ref(getDatabase(), `chatRooms/${chatRoomId}`), {
+    memberList: newMemberList,
+    bannedList: newBannedList,
+  });
+
+  await set(push(child(messagesRef, chatRoomId)), {
+    type: 'system',
+    timestamp: Date.now(),
+    user: { nickname: summonerName, oauth2Id: '', notiToken: '' },
+    content: `${summonerName} 님이 퇴장하였습니다.`,
+  });
+};

src/apis/api/overwatch.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+import { authAxios, defaultAxios } from 'apis/utils';
+
+import { promiseWrapper } from 'apis/utils/promiseWrapper';
+
+export const verifyOWNickname = async (nickname: string, battleTag: string) => {
+  const response = await defaultAxios.get(
+    `/api/overwatch/user/exist/${nickname}/${battleTag}`,
+  );
+
+  const exactNickname = response.data;
+
+  return exactNickname;
+};

src/apis/api/pubg.ts

@@ -0,0 +1,17 @@
+import { useEffect, useState } from 'react';
+import { authAxios, defaultAxios } from 'apis/utils';
+
+import { promiseWrapper } from 'apis/utils/promiseWrapper';
+
+export const verifyPUBGNickname = async (
+  nickname: string,
+  platform: string,
+) => {
+  const response = await defaultAxios.get(
+    `/api/pubg/user/exist/${nickname}/${platform}`,
+  );
+
+  const exactNickname = response.data;
+
+  return exactNickname;
+};