Merge pull request #144 from epigram5-9/merge/FE-54

FE-54🔀브랜치 최신
epigram5-9 · Aug 1, 2024 · c1ab854 · c1ab854
2 parents c7c540b + 156686f
commit c1ab854
Show file tree

Hide file tree

Showing 16 changed files with 202 additions and 29 deletions.
diff --git a/src/apis/postGoogleOauth.ts b/src/apis/postGoogleOauth.ts
@@ -0,0 +1,11 @@
+import httpClient from '.';
+
+const postGoogleOauth = async (code: string) => {
+  const response = await httpClient.post('/auth/signIn/GOOGLE', {
+    redirectUri: process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI,
+    token: code,
+  });
+  return response.data;
+};
+
+export default postGoogleOauth;
diff --git a/src/apis/postNaverOauth.ts b/src/apis/postNaverOauth.ts
@@ -0,0 +1,12 @@
+import httpClient from '.';
+
+const postNaverOauth = async (code: string, state: string) => {
+  const response = await httpClient.post('/auth/signIn/NAVER', {
+    state,
+    redirectUri: process.env.NEXT_PUBLIC_NAVER_REDIRECT_URI,
+    token: code,
+  });
+  return response.data;
+};
+
+export default postNaverOauth;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -18,9 +18,10 @@ import SHARE_ICON from '../../../public/icon/share-icon.svg';
 // NOTE isButton 일 경우 textInButton의 값을 무조건 지정해줘야 합니다.
 // NOTE SHARE_ICON 추가 시 토스트 기능도 사용하려면 해당 컴포넌트 아래 <Toaster /> 를 추가해주세요.
 
+// TODO 새로 바뀐 피그마 시안으로 바꿀지 추후 결정
+
 export interface HeaderProps {
   icon: 'back' | 'search' | '';
-  routerPage: string;
   isLogo: boolean;
   insteadOfLogo: string;
   isProfileIcon: boolean;
@@ -31,10 +32,15 @@ export interface HeaderProps {
   onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
-function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, routerPage, disabled, onClick }: HeaderProps) {
+function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, disabled, onClick }: HeaderProps) {
   const router = useRouter();
   const { toast } = useToast();
 
+  // 뒤로가기
+  const handleBack = () => {
+    router.back();
+  };
+
   // 페이지 이동 함수
   const handleNavigateTo = (path: string) => {
     router.push(path);
@@ -65,7 +71,7 @@ function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareI
       <div className='container flex justify-between items-center'>
         <div className='flex items-center space-x-4'>
           {icon === 'back' && (
-            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={() => handleNavigateTo(routerPage)} aria-label='뒤로가기 버튼'>
+            <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={handleBack} aria-label='뒤로가기 버튼'>
               <Image src={ARROW_LEFT_ICON} alt='뒤로가기 버튼 이미지' />
             </button>
           )}

diff --git a/src/components/epigram/EditEpigram.tsx b/src/components/epigram/EditEpigram.tsx
@@ -121,18 +121,7 @@ function EditEpigram({ epigram }: EditEpigramProps) {
 
   return (
     <>
-      <Header
-        icon='back'
-        routerPage={`/epigrams/${epigram.id}`}
-        isLogo
-        insteadOfLogo='에피그램 수정'
-        isProfileIcon
-        isShareIcon={false}
-        isButton={false}
-        textInButton=''
-        disabled={false}
-        onClick={() => {}}
-      />
+      <Header icon='back' isLogo insteadOfLogo='에피그램 수정' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <div className='border-t-2 w-full flex flex-col justify-center items-center'>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(handleSubmit)} className='flex flex-col justify-center item-center gap-6 lg:gap-8 w-[312px] md:w-[384px] lg:w-[640px] py-6'>

diff --git a/src/hooks/useGoogleLogin.ts b/src/hooks/useGoogleLogin.ts
@@ -0,0 +1,41 @@
+import postGoogleOauth from '@/apis/postGoogleOauth';
+import { toast } from '@/components/ui/use-toast';
+import { useMutation } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+import { useRouter } from 'next/router';
+
+const useGoogleLogin = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: async (code: string) => {
+      const result = await postGoogleOauth(code);
+      localStorage.setItem('accessToken', result.accessToken);
+      localStorage.setItem('refreshToken', result.refreshToken);
+      return result;
+    },
+    onSuccess: () => {
+      router.push('/epigrams');
+    },
+    onError: (error) => {
+      if (isAxiosError(error)) {
+        const status = error.response?.status;
+
+        if (!status) return;
+
+        if (status === 400) {
+          toast({ description: '잘못된 요청입니다. 요청을 확인해 주세요.', className: 'bg-state-error text-white font-semibold' });
+          router.push('/auth/SignIn');
+          return;
+        }
+
+        if (status >= 500) {
+          toast({ description: '서버에 문제가 발생했습니다. 잠시 후 다시 시도해 주세요.', className: 'bg-state-error text-white font-semibold' });
+        }
+      }
+      toast({ description: '알 수 없는 에러가 발생했습니다.', className: 'bg-state-error text-white font-semibold' });
+    },
+  });
+};
+
+export default useGoogleLogin;
diff --git a/src/hooks/useKakaoLogin.ts b/src/hooks/useKakaoLogin.ts
@@ -15,7 +15,7 @@ const useKakaoLogin = () => {
       return result;
     },
     onSuccess: () => {
-      router.push('/');
+      router.push('/epigrams');
     },
     onError: (error) => {
       if (isAxiosError(error)) {

diff --git a/src/hooks/useNaverLogin.ts b/src/hooks/useNaverLogin.ts
@@ -0,0 +1,42 @@
+import postNaverOauth from '@/apis/postNaverOauth';
+import { toast } from '@/components/ui/use-toast';
+import { useMutation } from '@tanstack/react-query';
+import { isAxiosError } from 'axios';
+import { useRouter } from 'next/router';
+
+const useNaverLogin = () => {
+  const router = useRouter();
+
+  return useMutation({
+    mutationFn: async ({ code, state }: { code: string; state: string }) => {
+      const result = await postNaverOauth(code, state);
+      localStorage.setItem('accessToken', result.accessToken);
+      localStorage.setItem('refreshToken', result.refreshToken);
+      return result;
+    },
+    onSuccess: () => {
+      router.push('/epigrams');
+    },
+    onError: (error) => {
+      if (isAxiosError(error)) {
+        const status = error.response?.status;
+
+        if (!status) return;
+
+        if (status === 400) {
+          toast({ description: '잘못된 요청입니다. 요청을 확인해 주세요.', className: 'bg-state-error text-white font-semibold' });
+          router.push('/auth/SignIn');
+          return;
+        }
+
+        if (status >= 500) {
+          toast({ description: '서버에 문제가 발생했습니다. 잠시 후 다시 시도해 주세요.', className: 'bg-state-error text-white font-semibold' });
+        }
+      }
+
+      toast({ description: '알 수 없는 에러가 발생했습니다.', className: 'bg-state-error text-white font-semibold' });
+    },
+  });
+};
+
+export default useNaverLogin;
diff --git a/src/hooks/useSignInMutation.ts b/src/hooks/useSignInMutation.ts
@@ -2,6 +2,7 @@ import { postSignin } from '@/apis/auth';
 import { toast } from '@/components/ui/use-toast';
 import { useMutation } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
+import { isAxiosError } from 'axios';
 
 const useSigninMutation = () => {
   const router = useRouter();
@@ -11,10 +12,36 @@ const useSigninMutation = () => {
     onSuccess: (data) => {
       localStorage.setItem('accessToken', data.accessToken);
       localStorage.setItem('refreshToken', data.refreshToken);
-      router.push('/');
+      router.push('/epigrams');
     },
-    onError: () => {
-      toast({ description: '이메일 혹은 비밀번호를 확인해주세요.', className: 'border-state-error text-state-error font-semibold' });
+    onError: (error) => {
+      if (!isAxiosError(error)) {
+        return;
+      }
+
+      const { status } = error.response || {};
+
+      if (status === 500) {
+        toast({
+          description: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+          className: 'border-state-error text-state-error font-semibold',
+        });
+        return;
+      }
+
+      // NOTE: status값은 항상 있으며 undefined와 숫자를 비교연산 할 수 없어 Number로 설정
+      if (Number(status) >= 500) {
+        toast({
+          description: '서버에서 예상치 못한 문제가 발생했습니다. 잠시 후 다시 시도해주세요.',
+          className: 'border-state-error text-state-error font-semibold',
+        });
+        return;
+      }
+
+      toast({
+        description: '이메일 혹은 비밀번호를 확인해주세요.',
+        className: 'border-state-error text-state-error font-semibold',
+      });
     },
   });
 };

diff --git a/src/pageLayout/Epigram/AddEpigram.tsx b/src/pageLayout/Epigram/AddEpigram.tsx
@@ -106,7 +106,7 @@ function AddEpigram() {
 
   return (
     <>
-      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <div className='border-t-2 w-full flex flex-col justify-center items-center'>
         <Form {...form}>
           <form onSubmit={form.handleSubmit(handleSubmit)} className='flex flex-col justify-center item-center gap-6 lg:gap-8 w-[312px] md:w-[384px] lg:w-[640px] py-6'>

diff --git a/src/pageLayout/Epigrams/MainLayout.tsx b/src/pageLayout/Epigrams/MainLayout.tsx
@@ -9,7 +9,7 @@ import FAB from '@/components/main/FAB';
 function MainLayout() {
   return (
     <>
-      <Header icon='search' routerPage='/.' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <main className='w-full min-h-screen bg-background-100 flex flex-col items-center'>
         <div className='w-[360px] flex flex-col items-center gap-6 mt-10 mb-40'>
           <section className='mt-10'>

diff --git a/src/pageLayout/MypageLayout/MyPageLayout.tsx b/src/pageLayout/MypageLayout/MyPageLayout.tsx
@@ -27,7 +27,7 @@ export default function MyPageLayout() {
 
   return (
     <div className='bg-background-100 w-full relative h-dvh'>
-      <Header icon='back' routerPage='/mypage' isLogo={false} insteadOfLogo='' isProfileIcon={false} isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='back' isLogo={false} insteadOfLogo='' isProfileIcon={false} isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <div className='bg-background-100 w-full h-[200px]'></div>
       <div className='w-full flex flex-col items-center bg-blue-100 rounded-3xl relative shadow-3xl'>
         <Profile image={data.image} nickname={data.nickname} />

diff --git a/src/pageLayout/SearchLayout/SearchLayout.tsx b/src/pageLayout/SearchLayout/SearchLayout.tsx
@@ -100,7 +100,7 @@ function SearchLayout() {
 
   return (
     <>
-      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
       <div className='container mx-auto max-w-screen-sm bg-blue-100'>
         <SearchBar onSearch={handleSearch} currentSearch={currentSearch} />
         <RecentSearches searches={searches} onSearch={handleSearch} onClear={handleClearAll} />

diff --git a/src/pages/auth/SignIn.tsx b/src/pages/auth/SignIn.tsx
@@ -77,19 +77,24 @@ export default function SignIn() {
       </Form>
       <div className=' flex justify-end items-center gap-2 w-full lg:max-w-[640px] md:max-w-[384px] md:px-0 px-6 md:mb-[60px] mb-[50px]'>
         <h2 className=' text-blue-400 lg:text-xl md:text-base sm:text-sm'>회원이 아니신가요?</h2>
-        <Link href='/'>
+        <Link href='/auth/SignUp'>
           <Button type='button' variant='link' className='lg:text-xl md:text-base sm:text-sm p-0 underline'>
             가입하기
           </Button>
         </Link>
       </div>
       <div className='flex gap-4'>
-        <Link href={`https://nid.naver.com/oauth2.0/authorize?client_id=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}&redirect_uri=http://localhost:3000&response_type=code`}>
+        <Link
+          href={`https://nid.naver.com/oauth2.0/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_NAVER_CLIENT_ID}&state=${'test'}&redirect_uri=${process.env.NEXT_PUBLIC_NAVER_REDIRECT_URI}`}
+        >
           <Image src='/logo-naver.svg' alt='logo-naver' width={60} height={60} className='md:size-[60px] size-10' />
         </Link>
-        <Link href={`https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&redirect_uri=http://localhost:3000&response_type=code&scope=email%20profile`}>
-          <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
-        </Link>
+        {/* // FIXME: 구글 간편 로그인 리다이렉트시 500에러가 발생하는 부분으로 주석 처리하였음  */}
+        {/* <Link
+          href={`https://accounts.google.com/o/oauth2/v2/auth?client_id=${process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_GOOGLE_REDIRECT_URI}&response_type=code&scope=email%20profile`}
+        > */}
+        <Image src='/logo-google.svg' alt='logo-google' width={60} height={60} className='md:size-[60px] size-10' />
+        {/* </Link> */}
         <Link href={`https://kauth.kakao.com/oauth/authorize?client_id=${process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID}&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URI}&response_type=code`}>
           <Image src='/logo-kakao.svg' alt='logo-kakao' width={60} height={60} className='md:size-[60px] size-10' />
         </Link>

diff --git a/src/pages/auth/redirect/google-callback/index.ts b/src/pages/auth/redirect/google-callback/index.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { useSearchParams } from 'next/navigation';
+import useGoogleLogin from '@/hooks/useGoogleLogin';
+
+export default function Google() {
+  const searchParams = useSearchParams();
+  const code = searchParams.get('code');
+  const { mutate: login } = useGoogleLogin();
+
+  useEffect(() => {
+    if (code) {
+      login(code);
+    } else {
+      /* eslint-disable no-console */
+      console.log(code); // code가 없을 때 콘솔에 출력
+    }
+  }, [code, login]);
+}
+
+// code가 없는 경우의 예시 http://localhost:3000/auth/redirect/kakao
+// 토스트로 에러 메시지 띄우고, 로그인 페이지로 리다이렉트
diff --git a/src/pages/auth/redirect/naver/index.ts b/src/pages/auth/redirect/naver/index.ts
@@ -0,0 +1,19 @@
+import useNaverLogin from '@/hooks/useNaverLogin';
+import { useSearchParams } from 'next/navigation';
+import { useEffect } from 'react';
+
+export default function Naver() {
+  const searchParams = useSearchParams();
+  const code = searchParams.get('code');
+  const state = searchParams.get('state');
+  const { mutate: login } = useNaverLogin();
+
+  useEffect(() => {
+    if (code && state) {
+      login({ code, state });
+    } else {
+      /* eslint-disable no-console */
+      console.log(code, state); // code가 없을 때 콘솔에 출력
+    }
+  }, [code, state, login]);
+}
diff --git a/src/pages/epigrams/[id]/index.tsx b/src/pages/epigrams/[id]/index.tsx
@@ -22,7 +22,7 @@ function DetailPage() {
 
   return (
     <div className='flex flex-col '>
-      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
+      <Header icon='search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <EpigramFigure epigram={epigram} currentUserId={userData?.id} />
       <EpigramComment epigramId={epigram.id} currentUserId={userData?.id} userImage={userData?.image} />
     </div>