From 807a844ec69bf8e97b88fb14b2a9c141f92b99ab Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Thu, 18 Nov 2021 16:37:18 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Fix:=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=EC=95=84=EC=9B=83=20=EC=9A=94=EC=B2=AD=EC=9D=84=20?= =?UTF-8?q?=EB=B3=B4=EB=82=B4=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 로그아웃 버튼을 클릭하면 로그아웃 요청 - 로그아웃이 성공하면 cookie가 삭제되고 isOk=true 반환 - isOk=true를 받으면 사용자 ui 변경 --- client/src/components/main/SideBar.tsx | 10 +++++---- client/src/utils/apiUtils.ts | 29 +++++++++++++++++--------- client/src/utils/apis.ts | 5 +++++ 3 files changed, 30 insertions(+), 14 deletions(-) diff --git a/client/src/components/main/SideBar.tsx b/client/src/components/main/SideBar.tsx index 83012761..4931694d 100644 --- a/client/src/components/main/SideBar.tsx +++ b/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/utils/apis'; const SIDEBAR_MIN_WIDTH = '29rem'; @@ -117,9 +117,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 ( diff --git a/client/src/utils/apiUtils.ts b/client/src/utils/apiUtils.ts index 95a473a9..189fef1d 100644 --- a/client/src/utils/apiUtils.ts +++ b/client/src/utils/apiUtils.ts @@ -35,15 +35,23 @@ function getOptions(): RequestInit { } 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), + } + : { + method: 'POST', + headers: { + Accept: 'application/json', + }, + credentials: 'include', + }; } function deleteOptions(): RequestInit { @@ -89,9 +97,10 @@ export async function fetchGet(url: string, query?: string): Promise(url: string, body: BodyType): Promise> { +export async function fetchPost(url: string, body: BodyType = {}): Promise> { const requestUrl = getUrl(url); const response = await fetcher(requestUrl, postOptions(body)); + console.log(postOptions(body)); return response; } diff --git a/client/src/utils/apis.ts b/client/src/utils/apis.ts index fd257c70..08571963 100644 --- a/client/src/utils/apis.ts +++ b/client/src/utils/apis.ts @@ -12,6 +12,11 @@ export const postLogin = async (body: PostLogin): Promise> => { + const response = await fetchPost('/api/auth/logout'); + return response; +}; + interface PostJoin extends PostLogin { nickname: string; } From a1e1acca435a5fd41bdf597d56bc6a12fd01e1e2 Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Thu, 18 Nov 2021 16:42:53 +0900 Subject: [PATCH 2/4] =?UTF-8?q?Refactor:=20apis.ts=EB=A5=BC=20src=EB=A1=9C?= =?UTF-8?q?=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/App.tsx | 2 +- client/src/{utils => }/apis.ts | 2 +- client/src/components/JoinForm.tsx | 2 +- client/src/components/LoginForm.tsx | 2 +- client/src/components/main/CreateForm.tsx | 2 +- client/src/components/main/RoomList.tsx | 3 +-- client/src/components/main/SideBar.tsx | 2 +- client/src/components/room/tadaktadak/VideoController.tsx | 4 ++-- 8 files changed, 9 insertions(+), 10 deletions(-) rename client/src/{utils => }/apis.ts (98%) diff --git a/client/src/App.tsx b/client/src/App.tsx index 65734725..f294f40d 100644 --- a/client/src/App.tsx +++ b/client/src/App.tsx @@ -4,7 +4,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 => { diff --git a/client/src/utils/apis.ts b/client/src/apis.ts similarity index 98% rename from client/src/utils/apis.ts rename to client/src/apis.ts index 08571963..1afcfa17 100644 --- a/client/src/utils/apis.ts +++ b/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; diff --git a/client/src/components/JoinForm.tsx b/client/src/components/JoinForm.tsx index 4b6cd1e7..83f17b65 100644 --- a/client/src/components/JoinForm.tsx +++ b/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'; diff --git a/client/src/components/LoginForm.tsx b/client/src/components/LoginForm.tsx index d690f2fc..07978aad 100644 --- a/client/src/components/LoginForm.tsx +++ b/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'; diff --git a/client/src/components/main/CreateForm.tsx b/client/src/components/main/CreateForm.tsx index 767ae9a0..f74b28ae 100644 --- a/client/src/components/main/CreateForm.tsx +++ b/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'; diff --git a/client/src/components/main/RoomList.tsx b/client/src/components/main/RoomList.tsx index 6ecbb929..b7909894 100644 --- a/client/src/components/main/RoomList.tsx +++ b/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; diff --git a/client/src/components/main/SideBar.tsx b/client/src/components/main/SideBar.tsx index 4931694d..8860dcdd 100644 --- a/client/src/components/main/SideBar.tsx +++ b/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 { postLogout } from '@src/utils/apis'; +import { postLogout } from '@src/apis'; const SIDEBAR_MIN_WIDTH = '29rem'; diff --git a/client/src/components/room/tadaktadak/VideoController.tsx b/client/src/components/room/tadaktadak/VideoController.tsx index 17043b8f..041b7657 100644 --- a/client/src/components/room/tadaktadak/VideoController.tsx +++ b/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` From 692de8c6edfa60228fa9118c2cdc0adf160e12af Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Thu, 18 Nov 2021 16:48:46 +0900 Subject: [PATCH 3/4] =?UTF-8?q?Refactor:=20simpleOptions=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=EB=A5=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - simpleOptions 함수로 method 만 다르고 나머지는 동일한 요청에 대해 통합 --- client/src/utils/apiUtils.ts | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/client/src/utils/apiUtils.ts b/client/src/utils/apiUtils.ts index 189fef1d..f864aed3 100644 --- a/client/src/utils/apiUtils.ts +++ b/client/src/utils/apiUtils.ts @@ -25,8 +25,9 @@ export function queryObjToString(queryObj: T): string { .join('&'); } -function getOptions(): RequestInit { +function simpleOptions(method: string): RequestInit { return { + method, headers: { Accept: 'application/json', }, @@ -34,6 +35,10 @@ function getOptions(): RequestInit { }; } +function getOptions(): RequestInit { + return simpleOptions('GET'); +} + function postOptions(body: BodyType): RequestInit { return Object.keys(body).length ? { @@ -45,23 +50,11 @@ function postOptions(body: BodyType): RequestInit { credentials: 'include', body: JSON.stringify(body), } - : { - method: 'POST', - headers: { - Accept: 'application/json', - }, - credentials: 'include', - }; + : simpleOptions('POST'); } function deleteOptions(): RequestInit { - return { - method: 'DELETE', - headers: { - Accept: 'application/json', - }, - credentials: 'include', - }; + return simpleOptions('DELETE'); } export async function fetcher(url: string, options: RequestInit): Promise> { From b40a975a6ce9e81cfdae779050cd6a897cc91df4 Mon Sep 17 00:00:00 2001 From: jiho-bae Date: Thu, 18 Nov 2021 16:59:40 +0900 Subject: [PATCH 4/4] =?UTF-8?q?Design:=20=EC=82=AC=EC=9D=B4=EB=93=9C?= =?UTF-8?q?=EB=B0=94=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=EC=95=84=EB=B0=94?= =?UTF-8?q?=ED=83=80=20=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/main/SideBar.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/client/src/components/main/SideBar.tsx b/client/src/components/main/SideBar.tsx index 8860dcdd..737fdc92 100644 --- a/client/src/components/main/SideBar.tsx +++ b/client/src/components/main/SideBar.tsx @@ -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); @@ -131,7 +133,7 @@ const SideBar = (): JSX.Element => { <> - {user.nickname} + {user.nickname} 로그아웃