Refactor: 로그인 로직에 리팩토링, 수정

src/components/account/socialLoginButton/GoogleButton.tsx

@@ -1,14 +1,22 @@
 import { css } from '@emotion/react';
 import Image from 'next/image';
 import color from '@/styles/color';
-import { signIn } from 'next-auth/react';
+// import { signIn } from 'next-auth/react';
+import { useState } from 'react';
+import Toast from '@/components/common/toast/Toast';
 
 const GoogleButton = () => {
+  // TODO: 구글로그인 절차가 성공하면 꼭 돌아올게...
+  const [toastMessage, setToastMessage] = useState('');
+  const handleToastClose = () => {
+    setToastMessage('');
+  };
   const googleLoginHandler = () => {
-    signIn('google', {
-      callbackUrl: '/friends',
-      redirect: false,
-    });
+    setToastMessage('소셜로그인은 추후에 제공될 예정입니다. :)');
+    // signIn('google', {
+    //   callbackUrl: '/friends',
+    //   redirect: false,
+    // });
   };
 
   return (
@@ -20,6 +28,11 @@ const GoogleButton = () => {
         height={26}
         css={imageCSS}
       />
+      {
+        toastMessage
+          ? <Toast message={toastMessage} handleClose={handleToastClose} />
+          : null
+      }
     </button>
   );
 };

src/components/account/socialLoginButton/KakaoButton.tsx

@@ -1,14 +1,22 @@
 import { css } from '@emotion/react';
 import Image from 'next/image';
 import color from '@/styles/color';
-import { signIn } from 'next-auth/react';
+// import { signIn } from 'next-auth/react';
+import { useState } from 'react';
+import Toast from '@/components/common/toast/Toast';
 
 const KakaoButton = () => {
+  // TODO: 카카오 로그인 절차가 성공하면 꼭 돌아올게...
+  const [toastMessage, setToastMessage] = useState('');
+  const handleToastClose = () => {
+    setToastMessage('');
+  };
   const kakaoLoginHandler = () => {
-    signIn('kakao', {
-      callbackUrl: '/friends',
-      redirect: false,
-    });
+    setToastMessage('소셜로그인은 추후에 제공될 예정입니다. :)');
+    // signIn('kakao', {
+    //   callbackUrl: '/friends',
+    //   redirect: false,
+    // });
   };
 
   return (
@@ -20,6 +28,11 @@ const KakaoButton = () => {
         height={26}
         css={imageCSS}
       />
+      {
+        toastMessage
+          ? <Toast message={toastMessage} handleClose={handleToastClose} />
+          : null
+      }
     </button>
   );
 };

src/components/account/socialLoginButton/NaverButton.tsx

@@ -1,14 +1,22 @@
 import { css } from '@emotion/react';
 import Image from 'next/image';
 import color from '@/styles/color';
-import { signIn } from 'next-auth/react';
+// import { signIn } from 'next-auth/react';
+import Toast from '@/components/common/toast/Toast';
+import { useState } from 'react';
 
 const NaverButton = () => {
+  // TODO: 네이버 로그인 절차가 성공하면 꼭 돌아올게...
+  const [toastMessage, setToastMessage] = useState('');
+  const handleToastClose = () => {
+    setToastMessage('');
+  };
   const naverLoginHandler = () => {
-    signIn('naver', {
-      callbackUrl: '/friends',
-      redirect: false,
-    });
+    setToastMessage('소셜로그인은 추후에 제공될 예정입니다. :)');
+    // signIn('naver', {
+    //   callbackUrl: '/friends',
+    //   redirect: false,
+    // });
   };
 
   return (
@@ -20,6 +28,11 @@ const NaverButton = () => {
         height={26}
         css={imageCSS}
       />
+      {
+        toastMessage
+          ? <Toast message={toastMessage} handleClose={handleToastClose} />
+          : null
+      }
     </button>
   );
 };

src/components/common/toast/Toast.tsx

@@ -15,6 +15,7 @@ const Toast: FC<ToastProps> = ({ message, handleClose }) => {
   useEffect(() => {
     const timer = setTimeout(() => {
       setStartAnimation(true);
+      handleClose();
     }, 3000);
     return () => clearTimeout(timer);
   }, []);

src/pages/_app.tsx

@@ -22,11 +22,11 @@ datadogRum.init({
 
 datadogRum.startSessionReplayRecording();
 
-const App = ({ Component, pageProps }: AppProps) => (
+const App = ({ Component, pageProps: { session, ...pageProps } }: AppProps) => (
   <>
     <GlobalStyles />
     <GA />
-    <SessionProvider>
+    <SessionProvider session={session}>
       <Component {...pageProps} />
     </SessionProvider>
   </>

src/pages/api/auth/[...nextauth].ts

@@ -20,18 +20,18 @@ interface SessionCallback {
 export const authOptions: NextAuthOptions = {
   providers: [
     GoogleProvider({
-      clientId: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID as string,
-      clientSecret: process.env.NEXT_PUBLIC_GOOGLE_CLIENT_SECRET as string,
+      clientId: process.env.GOOGLE_CLIENT_ID as string,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
     }),
 
     NaverProvider({
-      clientId: process.env.NEXT_PUBLIC_NAVER_CLIENT_ID as string,
-      clientSecret: process.env.NEXT_PUBLIC_NAVER_CLIENT_SECRET as string,
+      clientId: process.env.NAVER_CLIENT_ID as string,
+      clientSecret: process.env.NAVER_CLIENT_SECRET as string,
     }),
 
     KakaoProvider({
-      clientId: process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID as string,
-      clientSecret: process.env.NEXT_PUBLIC_KAKAO_CLIENT_SECRET as string,
+      clientId: process.env.KAKAO_CLIENT_ID as string,
+      clientSecret: process.env.KAKAO_CLIENT_SECRET as string,
     }),
 
     CredentialsProvider({
@@ -109,7 +109,7 @@ export const authOptions: NextAuthOptions = {
       // accessToken 만료를 검사합니다.
       if (token.accessToken && isTokenExpired(token.accessToken as string)) {
         // 만료된 경우 refreshToken으로 새 accessToken을 발급
-        const newToken = await refreshAccessToken(token.accessToken as string);
+        const newToken = await refreshAccessToken(token.refreshToken as string);
 
         console.log('newAccessToken -- jwt', newToken);
 
@@ -129,20 +129,6 @@ export const authOptions: NextAuthOptions = {
     async session({ session, token }: SessionCallback) {
       (session as CustomSession).accessToken = token.accessToken as string | null;
       (session as CustomSession).refreshToken = token.refreshToken as string | null;
-
-      if (session.accessToken && isTokenExpired(session.accessToken)) {
-        // 만료된 경우 refreshToken으로 새 accessToken을 발급받습니다.
-        const newToken = await refreshAccessToken(token.accessToken as string);
-        console.log('newAccessToken -- Session', newToken);
-
-        if (newToken) {
-          token.accessToken = newToken.accessToken; // 새로운 accessToken으로 업데이트
-          token.refreshToken = newToken.refreshToken; // 새로운 refreshToken 업데이트
-        }
-        // TODO: refresh token 만료시 추가 처리
-        // refreshToken도 만료되었거나 문제가 있을 경우
-        // 필요한 추가 처리 (로그아웃)를 여기에다가 작성
-      }
       return session;
     },
 

src/pages/login/index.tsx

@@ -10,7 +10,7 @@ import PageDescribe from '@/components/common/pageText/PageDescribe';
 import PageTitle from '@/components/common/pageText/PageTitle';
 import PasswordInput from '@/components/common/input/PasswordInput';
 import SocialLoginButtons from '@/components/account/SocialLoginButtons';
-import ToForgetPassword from '@/components/account/ToForgetPassword';
+// import ToForgetPassword from '@/components/account/ToForgetPassword';
 import UnderLineText from '@/components/common/textUnderLineDeco/UnderLineText';
 import { signIn } from 'next-auth/react';
 
@@ -51,7 +51,7 @@ const Login = () => {
           <Button theme="green">
             Log in
           </Button>
-          <ToForgetPassword />
+          {/* <ToForgetPassword /> */}
         </form>
       </main>
       {/* footer : 회원가입 작업 */}

src/pages/profile/index.tsx

@@ -6,6 +6,8 @@ import { useSession } from 'next-auth/react';
 const Profile = () => {
   const { data: session }: any = useSession();
   console.log(session);
+  console.log(session?.accessToken);
+  console.log(session?.refreshToken);
 
   return (
     <>

src/utils/api/accounts.ts

@@ -63,7 +63,6 @@ export const credentialsSignupAPI = async ({
 
 export const refreshAccessToken = async (refreshToken: string) => {
   const result = await defaultInstance.post('members/refreshToken', { refreshToken });
-  console.log('refresh', result.data);
 
   return result.data;
 };