Merge pull request #122 from rnjshippo/dev

로그인 loading 처리 / 실패시 안내 메시지 출력 + 스레드 edit/delete 버튼을 내가 쓴 댓글일때만 표시

Author: rnjshippo

client/src/components/LoginBox/LoginBox.tsx

@@ -1,18 +1,16 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 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 {
-  FormButton as LoginButton,
-  FormInput as Input,
-  FormLabel as Label,
-} from '@/styles/shared/form';
+import { FormButton, FormInput as Input, FormLabel as Label } from '@/styles/shared/form';
 import { WarningIcon } 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';
 
 const Container = styled.div`
   width: 100%;
@@ -32,7 +30,7 @@ const Form = styled.form`
   margin: 1.5rem auto;
 `;
 
-const SignupButton = styled(LoginButton)`
+const SignupButton = styled(FormButton)`
   border: 1px solid ${(props) => props.theme.color.main};
   color: ${(props) => props.theme.color.main};
   background-color: white;
@@ -49,20 +47,39 @@ const WarningBox = styled.div`
   ${flex('center', 'flex-start')};
 `;
 
+const LoadingIcon = styled.img`
+  width: 40px;
+  height: 40px;
+`;
+
+const LoginButton = styled(FormButton)`
+  ${flex()}
+`;
+
+const LoadingButton = styled(FormButton)`
+  height: 50px;
+  cursor: initial;
+  ${flex()}
+`;
+
 const LoginBox: React.FC = () => {
   const dispatch = useDispatch();
 
   const [email, setEmail] = useState('');
   const [pw, setPw] = useState('');
   const [valid, setValid] = useState(true);
+  const [loginFailed, setLoginFailed] = useState(false);
+  const { login: loginState } = useAuthState();
 
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
     setValid(true);
+    setLoginFailed(false);
   };
 
   const handlePwChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setPw(e.target.value);
+    setLoginFailed(false);
   };
 
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
@@ -74,6 +91,12 @@ const LoginBox: React.FC = () => {
     dispatch(loginRequest({ email, pw }));
   };
 
+  useEffect(() => {
+    if (loginState.err?.response?.status === 401) {
+      setLoginFailed(true);
+    }
+  }, [loginState.err]);
+
   return (
     <Container>
       <Form onSubmit={handleSubmit}>
@@ -105,11 +128,25 @@ const LoginBox: React.FC = () => {
             value={pw}
             required
           />
-          <LoginButton type="submit">로그인</LoginButton>
-          <Link to="/verify">
-            <SignupButton type="button">회원가입</SignupButton>
-          </Link>
         </Label>
+        {loginFailed && (
+          <WarningBox>
+            <IconBox>
+              <WarningIcon />
+            </IconBox>
+            <WarningText>이메일 또는 비밀번호가 일치하지 않습니다.</WarningText>
+          </WarningBox>
+        )}
+        {loginState.loading ? (
+          <LoadingButton type="submit">
+            <LoadingIcon src={LoadingSvg} />
+          </LoadingButton>
+        ) : (
+          <LoginButton type="submit">로그인</LoginButton>
+        )}
+        <Link to="/verify">
+          <SignupButton type="button">회원가입</SignupButton>
+        </Link>
       </Form>
     </Container>
   );

client/src/components/SignupBox/SignupBox.tsx

@@ -40,7 +40,7 @@ const WarningBox = styled.div`
   ${flex('center', 'flex-start')};
 `;
 
-const regex = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;
+const passwordRegex = /^.*(?=^.{8,15}$)(?=.*\d)(?=.*[a-zA-Z])(?=.*[!@#$%^&+=]).*$/;
 
 const SignupBox: React.FC = () => {
   const dispatch = useDispatch();
@@ -73,7 +73,7 @@ const SignupBox: React.FC = () => {
     setPw(value);
     checkPassword(value, confirmPw);
 
-    if (!regex.test(value)) {
+    if (!passwordRegex.test(value)) {
       setIsValidPw(false);
     } else {
       setIsValidPw(true);

client/src/components/common/ThreadItem/ThreadPopup/ThreadPopup.tsx

@@ -8,7 +8,7 @@ import { useDispatch } from 'react-redux';
 import theme from '@/styles/theme';
 import { sendMessageRequest } from '@/store/modules/socket.slice';
 import { SOCKET_MESSAGE_TYPE, THREAD_SUBTYPE } from '@/utils/constants';
-import { useChannelState } from '@/hooks';
+import { useChannelState, useUserState } from '@/hooks';
 
 const Container = styled.div`
   position: relative;
@@ -68,6 +68,7 @@ const ThreadPopup: React.FC<ThreadPopupProps> = ({
 
   const { current } = useChannelState();
   const dispatch = useDispatch();
+  const { userInfo } = useUserState();
 
   const openMenuModal = () => setMenuModalVisible(true);
   const openReactionModal = () => setReactionModalVisible(true);
@@ -98,9 +99,11 @@ const ThreadPopup: React.FC<ThreadPopupProps> = ({
           </CommentBox>
         </Link>
       )}
-      <MoreActionBox onClick={openMenuModal} ref={popoverRef}>
-        <DotIcon color={theme.color.black5} />
-      </MoreActionBox>
+      {userInfo?.id === thread.userId && (
+        <MoreActionBox onClick={openMenuModal} ref={popoverRef}>
+          <DotIcon color={theme.color.black5} />
+        </MoreActionBox>
+      )}
       {menuModalVisible && popoverRef.current && (
         <Popover
           anchorEl={popoverRef.current}

client/src/store/modules/auth.slice.ts

@@ -2,16 +2,23 @@
 /* eslint-disable no-param-reassign */
 import { createSelector, createSlice, PayloadAction } from '@reduxjs/toolkit';
 import { RootState } from '@/store/modules';
+import { AxiosError } from 'axios';
 
 interface AuthState {
-  loading: boolean;
+  login: {
+    loading: boolean;
+    err: AxiosError | null;
+  };
   accessToken: string | null;
   refreshToken: string | null;
   userId: number | null;
 }
 
 const authState: AuthState = {
-  loading: false,
+  login: {
+    loading: false,
+    err: null,
+  },
   accessToken: localStorage.getItem('accessToken'),
   refreshToken: localStorage.getItem('refreshToken'),
   userId: localStorage.getItem('userId') ? Number(localStorage.getItem('userId')) : null,
@@ -32,24 +39,29 @@ const authSlice = createSlice({
   initialState: authState,
   reducers: {
     loginRequest(state, action: PayloadAction<LoginRequestPayload>) {
-      state.loading = true;
+      state.login.loading = true;
     },
     loginSuccess(state, { payload }: PayloadAction<LoginSuccessPayload>) {
       const { accessToken, refreshToken, userId } = payload;
       state.accessToken = accessToken;
       state.refreshToken = refreshToken;
       state.userId = userId;
 
-      state.loading = false;
+      state.login.loading = false;
+      state.login.err = null;
     },
-    loginFailure(state) {
-      state.loading = false;
+    loginFailure(state, { payload }: PayloadAction<{ err: AxiosError }>) {
+      state.login.loading = false;
+      state.login.err = payload.err;
     },
     logoutRequest() {},
     logoutSuccess(state) {
       state.accessToken = null;
       state.refreshToken = null;
       state.userId = null;
+
+      state.login.loading = false;
+      state.login.err = null;
     },
     logoutFailure() {},
   },

client/src/store/sagas/authSaga.ts

@@ -27,7 +27,7 @@ function* login({ email, pw }: LoginRequestPayload) {
       );
     }
   } catch (err) {
-    yield put(loginFailure());
+    yield put(loginFailure({ err }));
   }
 }