feat: 로그인 시도 시 틀릴 경우 경고 메세지 뜨도록 구현

codeit-bootcamp-frontend · May 19, 2024 · fa09219 · fa09219
1 parent 82ec8a0
commit fa09219
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 23 deletions.
diff --git a/apis/api.ts b/apis/api.ts
@@ -28,12 +28,12 @@ export async function postSignUp(id: string, pw: string) {
 }
 
 export async function postSignIn(id: string, pw: string) {
-  const response = await axios.post(`${BASIC_URL}/sign-up`, {
+  const response = await axios.post(`${BASIC_URL}/sign-in`, {
     email: id,
     password: pw,
   });
   if (response.status < 200 || response.status >= 300) {
-    throw new Error('회원가입에 실패했습니다.');
+    throw new Error('로그인에 실패했습니다.');
   }
   const result = response.data.data;
   return result;

diff --git a/contexts/UserContext.tsx b/contexts/UserContext.tsx
@@ -39,6 +39,7 @@ export function UserProvider({ children }: Props) {
   const handleLoadUser = async () => {
     const nextUser = await getUser();
     setUser(nextUser);
+    console.log(user);
   };
 
   useEffect(() => {

diff --git a/hooks/useAsync.ts b/hooks/useAsync.ts
@@ -0,0 +1,36 @@
+import { useCallback, useState } from 'react';
+
+type AsyncFunction<TArgs extends any[], TResult> = (
+  ...args: TArgs
+) => Promise<TResult>;
+
+interface UseAsyncResult<TResult> {
+  pending: boolean;
+  error: Error | null;
+  requestFunction: (...args: any[]) => Promise<TResult | undefined>;
+}
+
+export default function useAsync<TArgs extends any[], TResult>(
+  asyncFunction: AsyncFunction<TArgs, TResult>
+): UseAsyncResult<TResult> {
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+
+  const requestFunction = useCallback(
+    async (...args: TArgs): Promise<TResult | undefined> => {
+      try {
+        setError(null);
+        setPending(true);
+        return await asyncFunction(...args);
+      } catch (error) {
+        setError(error as Error);
+        return;
+      } finally {
+        setPending(false);
+      }
+    },
+    [asyncFunction]
+  );
+
+  return { pending, error, requestFunction };
+}
diff --git a/pages/shared/[folderId].tsx b/pages/shared/[folderId].tsx
@@ -1,38 +1,32 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useState } from 'react';
 import Search from '../../components/Search/Search';
 import { getFolders, getLinks, getUser } from '../../apis/api';
 import { Layout, SectionWrap, TopWrap } from '../../styles/CommonPage.styled';
 import * as S from '../../styles/SharedPage.styled';
 import Profile from '../../components/Profile/Profile';
 import CardList from '../../components/CardList/CardList';
 import { useRouter } from 'next/router';
+import { UserContext } from '@/contexts/UserContext';
 
 export default function SharedPage() {
+  const { user } = useContext(UserContext);
   const [links, setLinks] = useState([]);
   const [folderName, setFolderName] = useState();
-  const [user, setUser] = useState({
-    id: 0,
-    created_at: '',
-    name: '',
-    image_source: '',
-    email: '',
-    auth_id: '',
-  });
 
   interface ParamsType {
     folderId: number;
   }
 
+  console.log(user);
+
   const router = useRouter();
   const { folderId } = router.query as unknown as ParamsType;
 
   const handleLoad = useCallback(async () => {
     const nextLinks = await getLinks(folderId || 0);
     const { name: nextFolderName } = await getFolders(folderId);
-    const nextUser = await getUser();
     setLinks(nextLinks);
     setFolderName(nextFolderName);
-    setUser(nextUser);
   }, [folderId]);
 
   useEffect(() => {

diff --git a/pages/signin/index.tsx b/pages/signin/index.tsx
@@ -6,22 +6,27 @@ import GoggleIcon from '../../src/images/login_google.svg';
 import KakaotalkIcon from '../../src/images/login_kakaotalk.svg';
 import EyeOnIcon from '../../src/images/eye_on.svg';
 import EyeOffIcon from '../../src/images/eye_off.svg';
-import { ChangeEvent, FormEvent, useState } from 'react';
+import { ChangeEvent, FormEvent, useEffect, useState } from 'react';
 import { postSignIn } from '@/apis/api';
 import { useRouter } from 'next/router';
 import { validateEmail, validateSignInPassword } from '@/utils/validate';
+import useAsync from '@/hooks/useAsync';
 
 export default function SignInPage() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [showError, setShowError] = useState({
-    error: false,
     email: { error: false, message: '' },
     password: { error: false, message: '' },
     passwordConform: { error: false, message: '' },
   });
   const [isVisiblePassword, setIsVisiblePassword] = useState(false);
   const router = useRouter();
+  const {
+    pending: signInPending,
+    error: signInError,
+    requestFunction: signInRequest,
+  } = useAsync(postSignIn);
 
   const handleEmailChange = (e: ChangeEvent<HTMLInputElement>) => {
     setEmail(e.target.value);
@@ -35,10 +40,29 @@ export default function SignInPage() {
     e.preventDefault();
     validateEmail(email, setShowError);
     validateSignInPassword(password, setShowError);
-    if (!showError.error) {
+    if (
+      (showError.email.error &&
+        showError.email.message !== '이메일을 확인해 주세요.') ||
+      (showError.password.error &&
+        showError.password.message !== '비밀번호를 확인해 주세요.')
+    )
+      return;
+    const result = await signInRequest(email, password);
+    if (signInError) {
+      setShowError((prev) => ({
+        ...prev,
+        email: {
+          error: true,
+          message: '이메일을 확인해 주세요.',
+        },
+        password: {
+          error: true,
+          message: '비밀번호를 확인해 주세요.',
+        },
+      }));
       return;
     }
-    const result = await postSignIn(email, password);
+    if (!result) return;
     localStorage.setItem('accessToken', result?.accessToken);
     router.push('/folder');
   };

diff --git a/pages/signup/index.tsx b/pages/signup/index.tsx
@@ -20,7 +20,6 @@ export default function SignUpPage() {
   const [password, setPassword] = useState('');
   const [passwordConform, setPasswordConform] = useState('');
   const [showError, setShowError] = useState({
-    error: false,
     email: { error: false, message: '' },
     password: { error: false, message: '' },
     passwordConform: { error: false, message: '' },
@@ -47,7 +46,11 @@ export default function SignUpPage() {
     validateEmail(email, setShowError);
     validateSignUpPassword(password, setShowError);
     validatePasswordConform(passwordConform, password, setShowError);
-    if (showError.error) {
+    if (
+      showError.email.error ||
+      showError.password.error ||
+      showError.passwordConform.error
+    ) {
       return;
     }
     const result = await postSignUp(email, password);

diff --git a/utils/validate.ts b/utils/validate.ts
@@ -4,7 +4,6 @@ export function validateEmail(
   email: string,
   setter: Dispatch<
     SetStateAction<{
-      error: boolean;
       email: { error: boolean; message: string };
       password: { error: boolean; message: string };
       passwordConform: { error: boolean; message: string };
@@ -37,7 +36,6 @@ export function validateSignUpPassword(
   password: string,
   setter: Dispatch<
     SetStateAction<{
-      error: boolean;
       email: { error: boolean; message: string };
       password: { error: boolean; message: string };
       passwordConform: { error: boolean; message: string };
@@ -65,7 +63,6 @@ export function validateSignInPassword(
   password: string,
   setter: Dispatch<
     SetStateAction<{
-      error: boolean;
       email: { error: boolean; message: string };
       password: { error: boolean; message: string };
       passwordConform: { error: boolean; message: string };
@@ -90,7 +87,6 @@ export function validatePasswordConform(
   password: string,
   setter: Dispatch<
     SetStateAction<{
-      error: boolean;
       email: { error: boolean; message: string };
       password: { error: boolean; message: string };
       passwordConform: { error: boolean; message: string };