diff --git a/client/package-lock.json b/client/package-lock.json
index e0b340e8..1290273b 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -1564,8 +1564,7 @@
     "@types/prop-types": {
       "version": "15.7.3",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
-      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
-      "dev": true
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw=="
     },
     "@types/qs": {
       "version": "6.9.5",
@@ -1577,7 +1576,6 @@
       "version": "16.9.56",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.56.tgz",
       "integrity": "sha512-gIkl4J44G/qxbuC6r2Xh+D3CGZpJ+NdWTItAPmZbR5mUS+JQ8Zvzpl0ea5qT/ZT3ZNTUcDKUVqV3xBE8wv/DyQ==",
-      "dev": true,
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -3613,8 +3611,7 @@
     "csstype": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.5.tgz",
-      "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==",
-      "dev": true
+      "integrity": "sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ=="
     },
     "cyclist": {
       "version": "1.0.1",
@@ -7763,6 +7760,15 @@
         "scheduler": "^0.20.1"
       }
     },
+    "react-google-login": {
+      "version": "5.1.25",
+      "resolved": "https://registry.npmjs.org/react-google-login/-/react-google-login-5.1.25.tgz",
+      "integrity": "sha512-N7SZkjTEX9NsC3hywXs68SPJWAHo6M19Bs1OIFPirG0yomGF7KnbKjSqoiIfxz1V7fKAt8bkfBAzogwnGWYTeQ==",
+      "requires": {
+        "@types/react": "*",
+        "prop-types": "^15.6.0"
+      }
+    },
     "react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/client/package.json b/client/package.json
index fe342dda..0b4c617d 100644
--- a/client/package.json
+++ b/client/package.json
@@ -17,6 +17,7 @@
     "react": "^17.0.1",
     "react-custom-scroll": "^4.2.1",
     "react-dom": "^17.0.1",
+    "react-google-login": "^5.1.25",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
index 05da6718..1febeb50 100644
--- a/client/src/api/index.ts
+++ b/client/src/api/index.ts
@@ -58,7 +58,8 @@ instance.interceptors.response.use(
       console.log('요청 취소', err);
     } else {
       if (err.response.status === 401) {
-        if (err.response.config.url !== '/api/auth/login') {
+        const { url } = err.response.config;
+        if (url !== '/api/auth/login' || url !== '/api/oauth/google/signup') {
           window.location.href = '/login';
         }
       }
diff --git a/client/src/components/LoginBox/LoginBox.tsx b/client/src/components/LoginBox/LoginBox.tsx
index 6f867d74..f61db0ff 100644
--- a/client/src/components/LoginBox/LoginBox.tsx
+++ b/client/src/components/LoginBox/LoginBox.tsx
@@ -4,17 +4,21 @@ import { useDispatch } from 'react-redux';
 import { darken } from 'polished';
 import { Link } from 'react-router-dom';
 import isEmail from 'validator/es/lib/isEmail';
-import { loginRequest } from '@/store/modules/auth.slice';
+import { loginRequest, loginSuccess } from '@/store/modules/auth.slice';
 import { FormButton, FormInput as Input, FormLabel as Label } from '@/styles/shared/form';
-import { WarningIcon } from '@/components';
+import { WarningIcon, GoogleLogoIcon } from '@/components';
 import { IconBox, WarningText } from '@/components/EmailBox/EmailBox';
 import { flex } from '@/styles/mixin';
 import { useAuthState } from '@/hooks';
 import LoadingSvg from '@/public/icon/loading.svg';
+import { GoogleLogin } from 'react-google-login';
+import config from '@/config';
+import { authService } from '@/services';
 
 const Container = styled.div`
   width: 100%;
   height: 100%;
+  ${flex('center', 'flex-start', 'column')};
 `;
 
 const Title = styled.div`
@@ -25,9 +29,15 @@ const Title = styled.div`
   color: #453841;
 `;
 
+const DescText = styled.div`
+  color: ${(props) => props.theme.color.black4};
+  font-size: 1rem;
+  margin-bottom: 2rem;
+`;
+
 const Form = styled.form`
   width: 25rem;
-  margin: 1.5rem auto;
+  margin: 0 auto 1.5rem auto;
 `;
 
 const SignupButton = styled(FormButton)`
@@ -62,6 +72,46 @@ const LoadingButton = styled(FormButton)`
   ${flex()}
 `;
 
+const LineWithText = styled.div`
+  width: 25rem;
+  ${flex()};
+  position: relative;
+  margin: 1rem 0;
+`;
+
+const LineText = styled.div`
+  padding: 0 20px;
+  padding-bottom: 3px;
+  margin-top: 0.5rem;
+  flex-shrink: 0;
+  font-weight: bold;
+  font-size: 0.9rem;
+  color: ${(props) => props.theme.color.black8};
+`;
+
+const Line = styled.hr`
+  border: none;
+  border-top: 1px solid ${(props) => props.theme.color.lightGray1};
+  flex: 1;
+`;
+
+const GoogleLoginBox = styled.div`
+  ${flex()};
+  flex-shrink: 0;
+  border: 2px solid ${(props) => props.theme.color.googleColor};
+  border-radius: 5px;
+  width: 25rem;
+  height: 50px;
+  cursor: pointer;
+`;
+
+const GoogleText = styled.span`
+  color: ${(props) => props.theme.color.googleColor};
+  font-weight: 800;
+  font-size: 1.2rem;
+  margin-left: 0.8rem;
+`;
+
 const LoginBox: React.FC = () => {
   const dispatch = useDispatch();
 
@@ -91,6 +141,21 @@ const LoginBox: React.FC = () => {
     dispatch(loginRequest({ email, pw }));
   };
 
+  const handleGoogleOAuthSuccess = async (res: any) => {
+    const { data, status } = await authService.signupWithGoogleOAuth({
+      accessToken: res.accessToken,
+    });
+    const { accessToken, refreshToken, user } = data;
+    if (status === 200) {
+      localStorage.setItem('accessToken', accessToken);
+      localStorage.setItem('refreshToken', refreshToken);
+      localStorage.setItem('userId', user.id);
+      dispatch(
+        loginSuccess({ accessToken, refreshToken, userId: user.id ? Number(user.id) : null }),
+      );
+    }
+  };
+
   useEffect(() => {
     if (loginState.err?.response?.status === 401) {
       setLoginFailed(true);
@@ -99,8 +164,28 @@ const LoginBox: React.FC = () => {
 
   return (
     <Container>
+      <Title>로그인</Title>
+      <DescText>로그인하려면 사용하는 Google 계정이나 이메일 주소로 계속해 주세요.</DescText>
+      <GoogleLogin
+        clientId={config.GOOGLE_CLIENT_ID}
+        buttonText="Google로 계속"
+        render={(renderProps) => (
+          <GoogleLoginBox onClick={renderProps.onClick}>
+            <GoogleLogoIcon size="18px" />
+            <GoogleText>Google로 계속</GoogleText>
+          </GoogleLoginBox>
+        )}
+        onSuccess={handleGoogleOAuthSuccess}
+        onFailure={(res: any) => {
+          alert('로그인 실패');
+        }}
+      />
+      <LineWithText>
+        <Line />
+        <LineText>또는</LineText>
+        <Line />
+      </LineWithText>
       <Form onSubmit={handleSubmit}>
-        <Title>로그인</Title>
         <Label>
           이메일 주소
           <Input
diff --git a/client/src/components/common/Header/Header.tsx b/client/src/components/common/Header/Header.tsx
index dcbaa9a2..e82cfcd9 100644
--- a/client/src/components/common/Header/Header.tsx
+++ b/client/src/components/common/Header/Header.tsx
@@ -7,6 +7,7 @@ import { useAuthState, useUserState } from '@/hooks';
 import { logoutRequest } from '@/store/modules/auth.slice';
 import { DimModal, UserStateIcon, ClockIcon, Popover } from '@/components';
 import theme from '@/styles/theme';
+import { useHistory } from 'react-router-dom';
 import { UserProfileModalHeader, UserProfileModalBody } from './UserProfileBox';
 
 const Container = styled.div`
@@ -126,6 +127,7 @@ const TitleClockIcon = styled.div`
 const Header: React.FC = () => {
   const dispatch = useDispatch();
 
+  const history = useHistory();
   const { userId } = useAuthState();
   const { userInfo } = useUserState();
 
@@ -144,7 +146,11 @@ const Header: React.FC = () => {
   useEffect(() => {
     if (userId) {
       dispatch(getUserRequest({ userId: Number(userId) }));
+      return;
     }
+    localStorage.removeItem('accessToken');
+    localStorage.removeItem('refreshToken');
+    history.push('/login');
   }, [dispatch, userId]);
 
   const workspaceName = '부스트캠프 2020 멤버십';
diff --git a/client/src/components/common/Icon/GoogleLogoIcon/GoogleLogoIcon.tsx b/client/src/components/common/Icon/GoogleLogoIcon/GoogleLogoIcon.tsx
new file mode 100644
index 00000000..18223265
--- /dev/null
+++ b/client/src/components/common/Icon/GoogleLogoIcon/GoogleLogoIcon.tsx
@@ -0,0 +1,29 @@
+import React, { PropsWithChildren } from 'react';
+
+const GoogleLogoIcon = ({ size }: PropsWithChildren<{ size?: string }>) => {
+  return (
+    <svg width={size ?? '16px'} height={size ?? '16px'} viewBox="0 0 48 48">
+      <g>
+        <path
+          fill="#EA4335"
+          d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"
+        />
+        <path
+          fill="#4285F4"
+          d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"
+        />
+        <path
+          fill="#FBBC05"
+          d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"
+        />
+        <path
+          fill="#34A853"
+          d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"
+        />
+        <path fill="none" d="M0 0h48v48H0z" />
+      </g>
+    </svg>
+  );
+};
+
+export default GoogleLogoIcon;
diff --git a/client/src/components/common/Icon/index.ts b/client/src/components/common/Icon/index.ts
index f1c9f7e7..9715a161 100644
--- a/client/src/components/common/Icon/index.ts
+++ b/client/src/components/common/Icon/index.ts
@@ -14,3 +14,4 @@ export { default as CommentIcon } from './CommentIcon/CommentIcon';
 export { default as PaperPlaneIcon } from './PaperPlaneIcon/PaperPlaneIcon';
 export { default as RightIcon } from './RightIcon/RightIcon';
 export { default as RightArrowLineIcon } from './RightArrowLineIcon/RightArrowLineIcon';
+export { default as GoogleLogoIcon } from './GoogleLogoIcon/GoogleLogoIcon';
diff --git a/client/src/components/common/LogoBox/LogoBox.tsx b/client/src/components/common/LogoBox/LogoBox.tsx
index 0b2be927..79bc09e2 100644
--- a/client/src/components/common/LogoBox/LogoBox.tsx
+++ b/client/src/components/common/LogoBox/LogoBox.tsx
@@ -8,7 +8,7 @@ const Container = styled.div`
   width: 100%;
   height: 5rem;
   ${flex()};
-  margin-top: 3rem;
+  margin-top: 2rem;
   user-select: none;
 `;
 
@@ -20,7 +20,7 @@ const SlackLogo = styled.img`
 const LogoBox: React.FC = () => {
   return (
     <Container>
-      <Link to="/">
+      <Link to="/login">
         <SlackLogo src={slackLogo} />
       </Link>
     </Container>
diff --git a/client/src/components/common/ThreadItem/ThreadPopup/ThreadPopup.tsx b/client/src/components/common/ThreadItem/ThreadPopup/ThreadPopup.tsx
index 9fe486d9..8de6e598 100644
--- a/client/src/components/common/ThreadItem/ThreadPopup/ThreadPopup.tsx
+++ b/client/src/components/common/ThreadItem/ThreadPopup/ThreadPopup.tsx
@@ -77,14 +77,16 @@ const ThreadPopup: React.FC<ThreadPopupProps> = ({
   const reactionBoxRef = useRef<HTMLDivElement>(null);
 
   const clickDeleteMessage = () => {
-    dispatch(
-      sendMessageRequest({
-        type: SOCKET_MESSAGE_TYPE.THREAD,
-        room: current?.name as string,
-        subType: THREAD_SUBTYPE.DELETE_THREAD,
-        thread,
-      }),
-    );
+    if (confirm('해당 스레드를 삭제 하시겠습니까?')) {
+      dispatch(
+        sendMessageRequest({
+          type: SOCKET_MESSAGE_TYPE.THREAD,
+          room: current?.name as string,
+          subType: THREAD_SUBTYPE.DELETE_THREAD,
+          thread,
+        }),
+      );
+    }
   };
 
   return (
diff --git a/client/src/config/index.ts b/client/src/config/index.ts
index 7458f800..ef427566 100644
--- a/client/src/config/index.ts
+++ b/client/src/config/index.ts
@@ -1,6 +1,7 @@
 const config = {
   jwtSecret: process.env.JWT_SECRET as string,
   jwtRefreshSecret: process.env.JWT_REFRESH_SECRET as string,
+  GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID as string,
 };
 
 export default config;
diff --git a/client/src/hooks/useChannelState.ts b/client/src/hooks/useChannelState.ts
index 844a8961..443516e1 100644
--- a/client/src/hooks/useChannelState.ts
+++ b/client/src/hooks/useChannelState.ts
@@ -5,10 +5,6 @@ import { RootState } from '@/store/modules';
 const selectChannelState = (state: RootState) => state.channel;
 const selectChannel = createSelector(selectChannelState, (channels) => channels);
 
-const selectChannelListState = (state: RootState) => state.channel.channelList;
-const selectChannelList = (idx: number) =>
-  createSelector(selectChannelListState, (channelList) => channelList[idx]);
-
 const selectJoinChannelListState = (state: RootState) => state.channel.myChannelList;
 const selectJoinChannelList = (idx: number) =>
   createSelector(selectJoinChannelListState, (joinChannelList) => joinChannelList[idx]);
@@ -17,10 +13,6 @@ export const useChannelState = () => {
   return useSelector(selectChannel);
 };
 
-export const useChannelList = (idx: number) => {
-  return useSelector(selectChannelList(idx));
-};
-
 export const useJoinChannelListState = (idx: number) => {
   return useSelector(selectJoinChannelList(idx));
 };
diff --git a/client/src/pages/LoginPage.tsx b/client/src/pages/LoginPage.tsx
index b428a196..244acef9 100644
--- a/client/src/pages/LoginPage.tsx
+++ b/client/src/pages/LoginPage.tsx
@@ -5,16 +5,15 @@ import { useAuthState } from '@/hooks';
 
 const LoginPage: React.FC = () => {
   const { accessToken } = useAuthState();
+
+  if (accessToken) {
+    return <Redirect to="/" />;
+  }
+
   return (
     <>
-      {accessToken ? (
-        <Redirect to="/" />
-      ) : (
-        <>
-          <LogoBox />
-          <LoginBox />
-        </>
-      )}
+      <LogoBox />
+      <LoginBox />
     </>
   );
 };
diff --git a/client/src/services/auth.service.ts b/client/src/services/auth.service.ts
index 0264a1af..d609f6c8 100644
--- a/client/src/services/auth.service.ts
+++ b/client/src/services/auth.service.ts
@@ -1,5 +1,6 @@
 import API from '@/api';
 import { Service } from '@/types';
+import axios from 'axios';
 
 interface LoginParam {
   email: string;
@@ -29,4 +30,7 @@ export const authService: Service = {
   checkExistEmail({ email }: { email: string }) {
     return API.post('/api/auth/email/check', { email });
   },
+  signupWithGoogleOAuth({ accessToken }: { accessToken: string }) {
+    return axios.post('/api/oauth/google/signup', { accessToken });
+  },
 };
diff --git a/client/src/store/modules/channel.slice.ts b/client/src/store/modules/channel.slice.ts
index 8b3fb8b1..e45e7f90 100644
--- a/client/src/store/modules/channel.slice.ts
+++ b/client/src/store/modules/channel.slice.ts
@@ -4,7 +4,6 @@ import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { JoinedUser, Channel, User, ChannelInfo } from '@/types';
 
 interface ChannelState {
-  channelList: Channel[];
   myChannelList: Channel[];
   current: Channel | null;
   users: JoinedUser[];
@@ -12,7 +11,6 @@ interface ChannelState {
 }
 
 const initialState: ChannelState = {
-  channelList: [],
   myChannelList: [],
   current: null,
   users: [],
@@ -41,13 +39,6 @@ const channelSlice = createSlice({
     resetChannelState() {
       return initialState;
     },
-    loadChannelsRequest() {},
-    loadChannelsSuccess(state, action) {
-      state.channelList = action.payload.channelList;
-    },
-    loadChannelsFailure(state, action) {
-      // todo 에러처리
-    },
     loadMyChannelsRequest(state, action: PayloadAction<{ userId: number }>) {},
     loadMyChannelsSuccess(state, action: PayloadAction<{ myChannelList: Channel[] }>) {
       state.myChannelList = action.payload.myChannelList;
@@ -66,7 +57,6 @@ const channelSlice = createSlice({
     createChannelRequest(state, action: PayloadAction<{ channelInfo: ChannelInfo; user: User }>) {},
     createChannelSuccess(state, action: PayloadAction<{ channel: Channel }>) {
       const { channel } = action.payload;
-      state.channelList.push(channel);
       state.myChannelList.push(channel);
     },
     createChannelFailure(state, action: PayloadAction<{ err: Error }>) {
@@ -150,9 +140,6 @@ const channelSlice = createSlice({
 export const CHANNEL = channelSlice.name;
 export const {
   resetChannelState,
-  loadChannelsRequest,
-  loadChannelsSuccess,
-  loadChannelsFailure,
   loadMyChannelsRequest,
   loadMyChannelsSuccess,
   loadMyChannelsFailure,
diff --git a/client/src/store/sagas/channelSaga.ts b/client/src/store/sagas/channelSaga.ts
index f8ce1a16..4f4cad26 100644
--- a/client/src/store/sagas/channelSaga.ts
+++ b/client/src/store/sagas/channelSaga.ts
@@ -3,9 +3,6 @@ import { channelService } from '@/services';
 import { Channel, ChannelInfo, JoinedUser, User } from '@/types';
 import { PayloadAction } from '@reduxjs/toolkit';
 import {
-  loadChannelsRequest,
-  loadChannelsSuccess,
-  loadChannelsFailure,
   loadMyChannelsRequest,
   loadMyChannelsSuccess,
   loadMyChannelsFailure,
@@ -23,17 +20,6 @@ import {
 import { setRedirect } from '@/store/modules/redirect.slice';
 import { setLastChannel } from '@/store/modules/user.slice';
 
-function* loadChannels() {
-  try {
-    const { data, status } = yield call(channelService.getChannels);
-    if (status === 200) {
-      yield put(loadChannelsSuccess({ channelList: data.channelList }));
-    }
-  } catch (err) {
-    yield put(loadChannelsFailure(err));
-  }
-}
-
 function* loadMyChannels(action: PayloadAction<{ userId: number }>) {
   const { userId } = action.payload;
   try {
@@ -129,10 +115,6 @@ function* joinChannel({ payload: { users, channelId } }: PayloadAction<joinChann
   }
 }
 
-function* watchLoadChannels() {
-  yield takeEvery(loadChannelsRequest, loadChannels);
-}
-
 function* watchLoadMyChannels() {
   yield takeEvery(loadMyChannelsRequest, loadMyChannels);
 }
@@ -151,7 +133,6 @@ function* watchJoinChannel() {
 
 export default function* channelSaga() {
   yield all([
-    fork(watchLoadChannels),
     fork(watchLoadMyChannels),
     fork(watchCreateChannel),
     fork(watchLoadChannel),
diff --git a/client/src/styles/styled.d.ts b/client/src/styles/styled.d.ts
index 626b02dc..c0da2f45 100644
--- a/client/src/styles/styled.d.ts
+++ b/client/src/styles/styled.d.ts
@@ -53,6 +53,7 @@ declare module 'styled-components' {
       channelItemColor: string;
       channelBorder: string;
       threadHover: string;
+      googleColor: string;
     };
 
     size: {
diff --git a/client/src/styles/theme.ts b/client/src/styles/theme.ts
index 7480c9bb..11ff9a63 100644
--- a/client/src/styles/theme.ts
+++ b/client/src/styles/theme.ts
@@ -52,6 +52,7 @@ const theme: DefaultTheme = {
     channelItemColor: '#bcabbc',
     channelBorder: 'rgb(82,38,83)',
     threadHover: '#faf9f9',
+    googleColor: '#4285f4',
   },
   size: {
     xxxs: calcRem(8),
diff --git a/client/src/utils/utils.ts b/client/src/utils/utils.ts
index 0f266ce9..5bfa301f 100644
--- a/client/src/utils/utils.ts
+++ b/client/src/utils/utils.ts
@@ -9,7 +9,7 @@ const CIPHER_ALGORITHM = process.env.CIPHER_ALGORITHM as string;
 const CIPHER_KEY = process.env.CIPHER_KEY as string;
 const IV = process.env.IV as string;
 
-export const verifyJWT = (token: string, type: AuthToken) => {
+export const verifyJWT = (token: string, type: AuthToken): Promise<any> => {
   return new Promise((resolve, reject) => {
     jwt.verify(
       token,
diff --git a/server/package-lock.json b/server/package-lock.json
index 699d3478..ab4ed4d1 100644
--- a/server/package-lock.json
+++ b/server/package-lock.json
@@ -475,6 +475,46 @@
         }
       }
     },
+    "@types/oauth": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/@types/oauth/-/oauth-0.9.1.tgz",
+      "integrity": "sha512-a1iY62/a3yhZ7qH7cNUsxoI3U/0Fe9+RnuFrpTKr+0WVOzbKlSLojShCKe20aOD1Sppv+i8Zlq0pLDuTJnwS4A==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/passport": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/@types/passport/-/passport-1.0.4.tgz",
+      "integrity": "sha512-h5OfAbfBBYSzjeU0GTuuqYEk9McTgWeGQql9g3gUw2/NNCfD7VgExVRYJVVeU13Twn202Mvk9BT0bUrl30sEgA==",
+      "dev": true,
+      "requires": {
+        "@types/express": "*"
+      }
+    },
+    "@types/passport-google-oauth20": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/passport-google-oauth20/-/passport-google-oauth20-2.0.4.tgz",
+      "integrity": "sha512-lYLsLzbYKlCopSO1b/FdxsBOgpIIZfvhVdVj5Wgx97udiPDGqv3g8Sq5OsWk20idtPL606SnfPRFgWfx698Nkw==",
+      "dev": true,
+      "requires": {
+        "@types/express": "*",
+        "@types/passport": "*",
+        "@types/passport-oauth2": "*"
+      }
+    },
+    "@types/passport-oauth2": {
+      "version": "1.4.9",
+      "resolved": "https://registry.npmjs.org/@types/passport-oauth2/-/passport-oauth2-1.4.9.tgz",
+      "integrity": "sha512-QP0q+NVQOaIu2r0e10QWkiUA0Ya5mOBHRJN0UrI+LolMLOP1/VN4EVIpJ3xVwFo+xqNFRoFvFwJhBvKnk7kpUA==",
+      "dev": true,
+      "requires": {
+        "@types/express": "*",
+        "@types/oauth": "*",
+        "@types/passport": "*"
+      }
+    },
     "@types/qs": {
       "version": "6.9.5",
       "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.5.tgz",
@@ -946,6 +986,14 @@
         }
       }
     },
+    "axios": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.21.0.tgz",
+      "integrity": "sha512-fmkJBknJKoZwem3/IKSSLpkdNXZeBu5Q7GA/aRsr2btgrptmSCxi2oFjZHqGdK9DoTil9PIHlPIZw2EcRJXRvw==",
+      "requires": {
+        "follow-redirects": "^1.10.0"
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -1017,6 +1065,11 @@
       "resolved": "https://registry.npmjs.org/base64id/-/base64id-2.0.0.tgz",
       "integrity": "sha512-lGe34o6EHj9y3Kts9R4ZYs/Gr+6N7MCaMlIFA3F1R2O5/m7K06AxfSeO5530PEERE6/WyEg3lsuyw4GHlPZHog=="
     },
+    "base64url": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/base64url/-/base64url-3.0.1.tgz",
+      "integrity": "sha512-ir1UPr3dkwexU7FdV8qBBbNDRUhMmIekYMFZfi+C/sLNnRESKPl23nB9b2pltqfOQNnGzsDdId90AEtG5tCx4A=="
+    },
     "basic-auth": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-2.0.1.tgz",
@@ -2551,6 +2604,11 @@
       "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==",
       "dev": true
     },
+    "follow-redirects": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.1.tgz",
+      "integrity": "sha512-SSG5xmZh1mkPGyKzjZP8zLjltIfpW32Y5QpdNJyjcfGxK3qo3NDDkZOZSFiGn1A6SclQxY9GzEwAHQ3dmYRWpg=="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@@ -3969,6 +4027,11 @@
       "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
       "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
     },
+    "oauth": {
+      "version": "0.9.15",
+      "resolved": "https://registry.npmjs.org/oauth/-/oauth-0.9.15.tgz",
+      "integrity": "sha1-vR/vr2hslrdUda7VGWQS/2DPucE="
+    },
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4203,6 +4266,40 @@
       "integrity": "sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=",
       "dev": true
     },
+    "passport": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/passport/-/passport-0.4.1.tgz",
+      "integrity": "sha512-IxXgZZs8d7uFSt3eqNjM9NQ3g3uQCW5avD8mRNoXV99Yig50vjuaez6dQK2qC0kVWPRTujxY0dWgGfT09adjYg==",
+      "requires": {
+        "passport-strategy": "1.x.x",
+        "pause": "0.0.1"
+      }
+    },
+    "passport-google-oauth20": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/passport-google-oauth20/-/passport-google-oauth20-2.0.0.tgz",
+      "integrity": "sha512-KSk6IJ15RoxuGq7D1UKK/8qKhNfzbLeLrG3gkLZ7p4A6DBCcv7xpyQwuXtWdpyR0+E0mwkpjY1VfPOhxQrKzdQ==",
+      "requires": {
+        "passport-oauth2": "1.x.x"
+      }
+    },
+    "passport-oauth2": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/passport-oauth2/-/passport-oauth2-1.5.0.tgz",
+      "integrity": "sha512-kqBt6vR/5VlCK8iCx1/KpY42kQ+NEHZwsSyt4Y6STiNjU+wWICG1i8ucc1FapXDGO15C5O5VZz7+7vRzrDPXXQ==",
+      "requires": {
+        "base64url": "3.x.x",
+        "oauth": "0.9.x",
+        "passport-strategy": "1.x.x",
+        "uid2": "0.0.x",
+        "utils-merge": "1.x.x"
+      }
+    },
+    "passport-strategy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/passport-strategy/-/passport-strategy-1.0.0.tgz",
+      "integrity": "sha1-tVOaqPwiWj0a0XlHbd8ja0QPUuQ="
+    },
     "path-dirname": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
@@ -4243,6 +4340,11 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "pause": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/pause/-/pause-0.0.1.tgz",
+      "integrity": "sha1-HUCLP9t2kjuVQ9lvtMnf1TXZy10="
+    },
     "pause-stream": {
       "version": "0.0.11",
       "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
@@ -5986,6 +6088,11 @@
         "random-bytes": "~1.0.0"
       }
     },
+    "uid2": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/uid2/-/uid2-0.0.3.tgz",
+      "integrity": "sha1-SDEm4Rd03y9xuLY53NeZw3YWK4I="
+    },
     "undefsafe": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-2.0.3.tgz",
diff --git a/server/package.json b/server/package.json
index 225c5cd2..c8388765 100644
--- a/server/package.json
+++ b/server/package.json
@@ -12,6 +12,7 @@
     "@": "./src"
   },
   "dependencies": {
+    "axios": "^0.21.0",
     "bcrypt": "^5.0.0",
     "cookie-parser": "^1.4.5",
     "cors": "^2.8.5",
@@ -28,6 +29,8 @@
     "mysql2": "^2.2.5",
     "nodemailer": "^6.4.16",
     "nodemailer-smtp-transport": "^2.7.4",
+    "passport": "^0.4.1",
+    "passport-google-oauth20": "^2.0.0",
     "socket.io": "^3.0.2",
     "swagger-jsdoc": "^5.0.1",
     "swagger-ui-express": "^4.1.5",
@@ -49,6 +52,7 @@
     "@types/node": "^14.14.9",
     "@types/nodemailer": "^6.4.0",
     "@types/nodemailer-smtp-transport": "^2.7.4",
+    "@types/passport-google-oauth20": "^2.0.4",
     "@types/socket.io": "^2.1.11",
     "@types/swagger-jsdoc": "^3.0.2",
     "@types/swagger-ui-express": "^4.1.2",
diff --git a/server/src/app.ts b/server/src/app.ts
index 142d2de0..1eaa19b9 100644
--- a/server/src/app.ts
+++ b/server/src/app.ts
@@ -13,6 +13,8 @@ import { Error } from '@/types';
 import config from '@/config';
 import apiRouter from '@/routes/api';
 import { bindSocketServer } from '@/lib/socket';
+import passport from 'passport';
+import passportConfig from '@/lib/passport';
 
 const port = process.env.PORT || 3000;
 const app = express();
@@ -36,6 +38,8 @@ app.use(express.urlencoded({ extended: false }));
 app.use(cookieParser());
 app.use(express.static(path.join(__dirname, 'public')));
 app.use(express.static(path.join(__dirname, '../../client/dist')));
+app.use(passport.initialize());
+passportConfig();
 
 app.use('/docs', swaggerUi.serve, swaggerUi.setup(swaggerSpec));
 app.use('/api', apiRouter);
diff --git a/server/src/config/index.ts b/server/src/config/index.ts
index 46060aeb..7621e4b1 100644
--- a/server/src/config/index.ts
+++ b/server/src/config/index.ts
@@ -1,6 +1,14 @@
 import { PoolOptions } from 'mysql2/promise';
 
 interface Config {
+  host: string;
+  oauth: {
+    google: {
+      clientID: string;
+      clientSecret: string;
+      callbackURL: string;
+    };
+  };
   jwtSecret: string;
   jwtRefreshSecret: string;
   devDB: PoolOptions;
@@ -13,6 +21,15 @@ interface Config {
 }
 
 const config: Config = {
+  host:
+    process.env.MODE === 'dev' ? (process.env.DEV_HOST as string) : (process.env.HOST as string),
+  oauth: {
+    google: {
+      clientID: process.env.GOOGLE_CLIENT_ID as string,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
+      callbackURL: 'http://localhost:3000/api/oauth/google/callback',
+    },
+  },
   jwtSecret: process.env.JWT_SECRET as string,
   jwtRefreshSecret: process.env.JWT_REFRESH_SECRET as string,
   NODE_MAILER: {
diff --git a/server/src/lib/passport.ts b/server/src/lib/passport.ts
new file mode 100644
index 00000000..5b7487f2
--- /dev/null
+++ b/server/src/lib/passport.ts
@@ -0,0 +1,43 @@
+import config from '@/config';
+import { Strategy as GoogleStrategy } from 'passport-google-oauth20';
+import passport from 'passport';
+import { userModel } from '@/models';
+import { User } from '@/types';
+
+export default () => {
+  passport.use(
+    new GoogleStrategy(
+      {
+        clientID: config.oauth.google.clientID,
+        clientSecret: config.oauth.google.clientSecret,
+        callbackURL: config.oauth.google.callbackURL,
+      },
+      async (accessToken, refreshToken, profile, done) => {
+        const { id, emails, displayName } = profile;
+        if (!emails) {
+          done(new Error('no email error'), null);
+          return;
+        }
+        const email = emails[0].value;
+        try {
+          const [[user]]: [[User]] = await userModel.getUserByEmail({ email });
+
+          if (user) {
+            done(undefined, {
+              id: user.id,
+              displayName: user.displayName,
+              email: user.email,
+            });
+            return;
+          }
+
+          const [{ insertId }] = await userModel.addOAuthUser({ email, displayName });
+          done(undefined, { id: insertId, displayName, email });
+          return;
+        } catch (err) {
+          done(err, null);
+        }
+      },
+    ),
+  );
+};
diff --git a/server/src/models/user.model.ts b/server/src/models/user.model.ts
index 7ddef09a..1be56ed7 100644
--- a/server/src/models/user.model.ts
+++ b/server/src/models/user.model.ts
@@ -15,29 +15,29 @@ interface SearchUserParams {
   isDM: boolean;
 }
 
-export const userModel: Model = {
-  getUsers() {
+export const userModel = {
+  getUsers(): any {
     const sql = `SELECT id, email, display_name as displayName, image
     FROM user`;
     return pool.query(sql);
   },
-  getUserByEmail({ email }: { email: string }) {
+  getUserByEmail({ email }: { email: string }): any {
     const sql = `SELECT id, pw, email, display_name as displayName, phone_number as phoneNumber, 
     image, last_channel_id as lastChannelId 
     FROM user WHERE email=?;`;
     return pool.execute(sql, [email]);
   },
-  getUserById({ id }: { id: number }) {
+  getUserById({ id }: { id: number }): any {
     const sql = `SELECT id, email, display_name as displayName, phone_number as phoneNumber, 
     image, last_channel_id as lastChannelId 
     FROM user WHERE id=?;`;
     return pool.execute(sql, [id]);
   },
-  modifyLastChannel({ lastChannelId, userId }: { lastChannelId: number; userId: number }) {
+  modifyLastChannel({ lastChannelId, userId }: { lastChannelId: number; userId: number }): any {
     const sql = `UPDATE user SET last_channel_id = ? WHERE id = ?`;
     return pool.execute(sql, [lastChannelId, userId]);
   },
-  editUserById({ id, displayName, phoneNumber, image, setDefault }: EditUserParams) {
+  editUserById({ id, displayName, phoneNumber, image, setDefault }: EditUserParams): any {
     if (setDefault) {
       const sql = `UPDATE user SET display_name=?, phone_number=?, image=DEFAULT WHERE id=?;`;
       return pool.execute(sql, [displayName, phoneNumber, id]);
@@ -49,7 +49,7 @@ export const userModel: Model = {
     const sql = `UPDATE user SET display_name=?, phone_number=? WHERE id=?;`;
     return pool.execute(sql, [displayName, phoneNumber, id]);
   },
-  searchUsers({ displayName, channelId, isDM }: SearchUserParams) {
+  searchUsers({ displayName, channelId, isDM }: SearchUserParams): any {
     if (!isDM) {
       const sql = `SELECT id, email, display_name as displayName, phone_number as phoneNumber, image
       FROM user
@@ -64,8 +64,12 @@ export const userModel: Model = {
     WHERE display_name LIKE ?`;
     return pool.execute(sql, [`%${displayName}%`]);
   },
-  addUser({ email, pw, displayName }: { email: string; pw: string; displayName: string }) {
+  addUser({ email, pw, displayName }: { email: string; pw: string; displayName: string }): any {
     const sql = `INSERT INTO user (email, pw, display_name) VALUES (?, ?, ?);`;
     return pool.execute(sql, [email, pw, displayName]);
   },
+  addOAuthUser({ email, displayName }: { email: string; displayName: string }): any {
+    const sql = `INSERT INTO user (email, display_name) VALUES (?, ?);`;
+    return pool.execute(sql, [email, displayName]);
+  },
 };
diff --git a/server/src/routes/api/index.ts b/server/src/routes/api/index.ts
index 09f3d780..1cf284dc 100644
--- a/server/src/routes/api/index.ts
+++ b/server/src/routes/api/index.ts
@@ -5,6 +5,7 @@ import channelRouter from './channels';
 import authRouter from './auth';
 import threadRouter from './threads';
 import emojiRouter from './emojis';
+import oauthRouter from './oauth';
 
 const router = express.Router();
 
@@ -13,5 +14,6 @@ router.use('/channels', authenticated, channelRouter);
 router.use('/auth', authRouter);
 router.use('/threads', authenticated, threadRouter);
 router.use('/emojis', authenticated, emojiRouter);
+router.use('/oauth', oauthRouter);
 
 export default router;
diff --git a/server/src/routes/api/oauth/index.ts b/server/src/routes/api/oauth/index.ts
new file mode 100644
index 00000000..7e30bddf
--- /dev/null
+++ b/server/src/routes/api/oauth/index.ts
@@ -0,0 +1,11 @@
+import express from 'express';
+import * as oauthController from './oauth.controller';
+
+const router = express.Router();
+
+router.get('/google', oauthController.oauthLogin);
+router.get('/google/callback', oauthController.handleAuth, oauthController.handleSuccess);
+router.get('/google/failure', oauthController.failure);
+router.post('/google/signup', oauthController.googleSignup);
+
+export default router;
diff --git a/server/src/routes/api/oauth/oauth.controller.ts b/server/src/routes/api/oauth/oauth.controller.ts
new file mode 100644
index 00000000..70c3ccab
--- /dev/null
+++ b/server/src/routes/api/oauth/oauth.controller.ts
@@ -0,0 +1,86 @@
+import passport from 'passport';
+import { NextFunction, Request, Response } from 'express';
+import jwt from 'jsonwebtoken';
+import config from '@/config';
+import { ERROR_MESSAGE, TIME } from '@/utils/constants';
+import { User } from '@/types';
+import axios from 'axios';
+import { verifyRequestData } from '@/utils/utils';
+import { userModel } from '@/models';
+
+/**
+ * GET /api/oauth/google
+ */
+export const oauthLogin = passport.authenticate('google', { scope: ['profile', 'email'] });
+
+/**
+ * GET /api/oauth/google/callback
+ */
+export const handleAuth = passport.authenticate('google', {
+  session: false,
+  failureRedirect: '/api/oauth/google/failure',
+});
+
+export const handleSuccess = async (req: Request, res: Response): Promise<void> => {
+  const { user }: any = req;
+  // 비번 일치 할 때
+  if (user) {
+    const accessToken = jwt.sign(user, config.jwtSecret, { expiresIn: TIME.FIVE_MINUTE });
+    const refreshToken = jwt.sign(user, config.jwtRefreshSecret, {
+      expiresIn: TIME.TWO_MONTH,
+    });
+    res.redirect(
+      `${config.host}?accessToken=${accessToken}&refreshToken=${refreshToken}&userId=${user.id}`,
+    );
+    return;
+  }
+  res.status(401).json({ message: ERROR_MESSAGE.GOOGLE_OAUTH_FAILED });
+};
+
+/**
+ * GET /api/oauth/google/failure
+ */
+export const failure = (req: Request, res: Response): void => {
+  res.status(401).json({ message: ERROR_MESSAGE.GOOGLE_OAUTH_FAILED });
+};
+
+/**
+ * POST /api/oauth/google/signup
+ */
+export const googleSignup = async (
+  req: Request,
+  res: Response,
+  next: NextFunction,
+): Promise<void> => {
+  const { accessToken: googleAccessToken } = req.body;
+  try {
+    const { data, status } = await axios.get('https://www.googleapis.com/oauth2/v3/userinfo', {
+      headers: { Authorization: `Bearer ${googleAccessToken}` },
+    });
+    if (status === 200) {
+      const { email, name, picture } = data;
+      if (verifyRequestData([email, name, picture])) {
+        const [[user]]: [[User]] = await userModel.getUserByEmail({ email });
+
+        let userInfo;
+        if (user) {
+          userInfo = { email: user.email, displayName: user.displayName, id: user.id };
+        } else {
+          const [{ insertId }] = await userModel.addOAuthUser({ email, displayName: name });
+          userInfo = { email, displayName: name, id: insertId };
+        }
+
+        const accessToken = jwt.sign(userInfo, config.jwtSecret, { expiresIn: TIME.FIVE_MINUTE });
+        const refreshToken = jwt.sign(userInfo, config.jwtRefreshSecret, {
+          expiresIn: TIME.TWO_MONTH,
+        });
+
+        res.json({ accessToken, refreshToken, user: userInfo });
+        return;
+      }
+    }
+    res.status(401).json({ message: ERROR_MESSAGE.GOOGLE_OAUTH_SIGNUP_FAILED });
+  } catch (err) {
+    next(err);
+  }
+};
diff --git a/server/src/utils/constants.ts b/server/src/utils/constants.ts
index 8fc5dac3..ee53c78e 100644
--- a/server/src/utils/constants.ts
+++ b/server/src/utils/constants.ts
@@ -22,6 +22,8 @@ export const ERROR_MESSAGE = {
   ENCRYPT_DECRYPT_FAILED: '암호화/복호화 실패',
   EXIST_EMAIL: '존재하는 이메일',
   NOT_ALLOWED_FILE_TYPE: '허용되지 않은 파일타입',
+  GOOGLE_OAUTH_FAILED: '구글 OAuth 인증 실패',
+  GOOGLE_OAUTH_SIGNUP_FAILED: '구글 OAuth로 회원가입 실패',
 };
 
 export const USER_DEFAULT_PROFILE_URL =