Merge pull request #200 from jiho-bae/feat/main

로그아웃 요청 로직 추가, 스타일 수정

client/src/App.tsx

@@ -5,7 +5,7 @@ import GlobalStyles from './styles/GlobalStyles';
 import Introduction from '@pages/Introduction';
 import Main from '@pages/Main';
 import { useUser, useUserFns } from '@contexts/userContext';
-import { getUserByToken } from '@utils/apis';
+import { getUserByToken } from '@src/apis';
 import Room from '@pages/Room';
 
 const App = (): JSX.Element => {

client/src/utils/apis.ts → client/src/apis.ts

@@ -1,6 +1,6 @@
 import { UserProps } from '@contexts/userContext';
 import { RoomInfo } from '@components/main/RoomList';
-import { HTTPResponse, queryObjToString, fetchGet, fetchPost, fetchDelete } from './apiUtils';
+import { HTTPResponse, queryObjToString, fetchGet, fetchPost, fetchDelete } from './utils/apiUtils';
 
 interface PostLogin {
   email: string;
@@ -12,6 +12,11 @@ export const postLogin = async (body: PostLogin): Promise<HTTPResponse<UserProps
   return response;
 };
 
+export const postLogout = async (): Promise<HTTPResponse<boolean>> => {
+  const response = await fetchPost<boolean>('/api/auth/logout');
+  return response;
+};
+
 interface PostJoin extends PostLogin {
   nickname: string;
 }

client/src/components/JoinForm.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import useInput from '@hooks/useInput';
-import { postJoin } from '@utils/apis';
+import { postJoin } from '@src/apis';
 import { FaGithub } from 'react-icons/fa';
 import InfoMessage from './InfoMessage';
 import Select from './common/Select';

client/src/components/LoginForm.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import styled, { css } from 'styled-components';
 import useInput from '@hooks/useInput';
-import { postLogin } from '@utils/apis';
+import { postLogin } from '@src/apis';
 import { useUserFns } from '@contexts/userContext';
 import { FaGithub } from 'react-icons/fa';
 import InfoMessage from './InfoMessage';

client/src/components/main/CreateForm.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import styled, { css } from 'styled-components';
 import useInput from '@hooks/useInput';
-import { postRoom } from '@utils/apis';
+import { postRoom } from '@src/apis';
 import { useUser } from '@contexts/userContext';
 import Select from '@components/common/Select';
 import { adminOptions } from '@utils/utils';

client/src/components/main/RoomList.tsx

@@ -6,8 +6,7 @@ import RoomBox from '@components/RoomBox';
 import Tab from '@components/common/Tab';
 
 import { UserProps } from '@src/contexts/userContext';
-
-import { getRoom } from '@utils/apis';
+import { getRoom } from '@src/apis';
 
 const RoomListGrid = styled.div`
   padding: ${({ theme }) => theme.paddings.lg} 0;

client/src/components/main/SideBar.tsx

@@ -5,7 +5,7 @@ import { useUser, useUserFns } from '@contexts/userContext';
 import { IoLogOutOutline } from 'react-icons/io5';
 import Modal from '@components/common/Modal';
 import CreateForm from './CreateForm';
-import { setCookie } from '@utils/cookie';
+import { postLogout } from '@src/apis';
 
 const SIDEBAR_MIN_WIDTH = '29rem';
 
@@ -102,12 +102,14 @@ const LogoutBtn = styled.button`
 
 const UserAvatar = styled.img`
   margin-right: ${({ theme }) => theme.margins.base};
-  width: 5rem;
-  height: 5rem;
+  width: 3rem;
+  height: 3rem;
   border-radius: 50%;
   overflow: hidden;
 `;
 
+const UserNickname = styled.span``;
+
 const SideBar = (): JSX.Element => {
   const [loginModal, setLoginModal] = useState(false);
   const [createModal, setCreateModal] = useState(false);
@@ -117,9 +119,11 @@ const SideBar = (): JSX.Element => {
   const onClickLoginBtn = () => setLoginModal(!loginModal);
   const onClickCreateBtn = () => setCreateModal(true);
   const onClickUserInfoBtn = () => {};
-  const onClickLogoutBtn = () => {
-    setCookie('access-token', '');
-    logUserOut();
+  const onClickLogoutBtn = async () => {
+    const { isOk } = await postLogout();
+    if (isOk) {
+      logUserOut();
+    }
   };
 
   return (
@@ -129,7 +133,7 @@ const SideBar = (): JSX.Element => {
           <>
             <UserInfoDiv onClick={onClickUserInfoBtn}>
               <UserAvatar src={user.imageUrl}></UserAvatar>
-              {user.nickname}
+              <UserNickname>{user.nickname}</UserNickname>
             </UserInfoDiv>
             <LogoutBtn onClick={onClickLogoutBtn}>
               <span>로그아웃</span>

client/src/components/room/tadaktadak/VideoController.tsx

@@ -1,13 +1,13 @@
 import React, { useState, useCallback, useEffect, useContext } from 'react';
 import { useHistory } from 'react-router';
 import { ICameraVideoTrack, IMicrophoneAudioTrack } from 'agora-rtc-react';
+import styled, { css, ThemeContext } from 'styled-components';
 import { FaMicrophone, FaMicrophoneSlash, FaVideo, FaVideoSlash } from 'react-icons/fa';
 import { MdOutlineExitToApp, MdScreenShare, MdStopScreenShare } from 'react-icons/md';
-import styled, { css, ThemeContext } from 'styled-components';
 import { useClient } from './videoConfig';
 import Button from '@components/common/Button';
 import ScreenShareDiv from './ScreenShareDiv';
-import { deleteRoom } from '@utils/apis';
+import { deleteRoom } from '@src/apis';
 import { useUser } from '@contexts/userContext';
 
 const ButtonContainer = styled.div`

client/src/utils/apiUtils.ts

@@ -25,35 +25,36 @@ export function queryObjToString<T>(queryObj: T): string {
     .join('&');
 }
 
-function getOptions(): RequestInit {
+function simpleOptions(method: string): RequestInit {
   return {
+    method,
     headers: {
       Accept: 'application/json',
     },
     credentials: 'include',
   };
 }
 
+function getOptions(): RequestInit {
+  return simpleOptions('GET');
+}
+
 function postOptions(body: BodyType): RequestInit {
-  return {
-    method: 'POST',
-    headers: {
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
-    },
-    credentials: 'include',
-    body: JSON.stringify(body),
-  };
+  return Object.keys(body).length
+    ? {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify(body),
+      }
+    : simpleOptions('POST');
 }
 
 function deleteOptions(): RequestInit {
-  return {
-    method: 'DELETE',
-    headers: {
-      Accept: 'application/json',
-    },
-    credentials: 'include',
-  };
+  return simpleOptions('DELETE');
 }
 
 export async function fetcher<T>(url: string, options: RequestInit): Promise<HTTPResponse<T>> {
@@ -89,9 +90,10 @@ export async function fetchGet<T>(url: string, query?: string): Promise<HTTPResp
   return response;
 }
 
-export async function fetchPost<T>(url: string, body: BodyType): Promise<HTTPResponse<T>> {
+export async function fetchPost<T>(url: string, body: BodyType = {}): Promise<HTTPResponse<T>> {
   const requestUrl = getUrl(url);
   const response = await fetcher<T>(requestUrl, postOptions(body));
+  console.log(postOptions(body));
   return response;
 }