Merge pull request #109 from ablej-ssafy/feature/106-authentication

[#106]feat: 인증 검사 로직 추가 및 렌더링 최적화

package.json

@@ -32,6 +32,7 @@
     "react-icons": "^5.3.0",
     "react-kakao-maps-sdk": "^1.1.27",
     "react-loading-skeleton": "^3.5.0",
+    "react-virtualized": "^9.22.5",
     "zod": "^3.23.8",
     "zustand": "^5.0.0"
   },
@@ -53,6 +54,7 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "@types/react-virtualized": "^9.21.30",
     "eslint": "^8",
     "eslint-config-next": "14.2.15",
     "eslint-config-prettier": "^9.1.0",

src/actions/redirectAction.ts

@@ -0,0 +1,24 @@
+'use server';
+
+import {cookies} from 'next/headers';
+import {redirect} from 'next/navigation';
+
+import {AUTH_REDIRECT_KEY} from '@/constants/cookie';
+
+export async function redirectCookie(formData: FormData) {
+  const redirectUrlRaw = formData.get('redirectUrl');
+
+  if (typeof redirectUrlRaw !== 'string') {
+    console.error('잘못된 요청입니다.');
+    return;
+  }
+
+  const redirectUrl = redirectUrlRaw;
+
+  cookies().set(AUTH_REDIRECT_KEY, redirectUrl, {
+    maxAge: 60 * 5,
+  });
+  redirect('/(.)signin');
+}
+
+export default redirectCookie;

src/actions/scrap/recruitmentScrapAction.ts

@@ -4,6 +4,7 @@ import {revalidatePath, revalidateTag} from 'next/cache';
 import {cookies} from 'next/headers';
 import {redirect} from 'next/navigation';
 
+import {AUTH_REDIRECT_KEY} from '@/constants/cookie';
 import ableJ from '@/services/ableJ';
 
 const recruitmentScrapAction = async (formData: FormData) => {
@@ -18,12 +19,16 @@ const recruitmentScrapAction = async (formData: FormData) => {
 
   const recruitmentId = Number(recruitmentIdRaw);
   const isScrap = isScrapRaw === 'true';
+  const cookieStore = cookies();
 
-  const accessToken = cookies().get('accessToken')?.value;
+  const accessToken = cookieStore.get('accessToken')?.value;
 
   if (!accessToken) {
     console.log('Access Token이 없습니다.');
-    redirect('/signin');
+    cookies().set(AUTH_REDIRECT_KEY, `/recruitments/${recruitmentId}`, {
+      maxAge: 60 * 5,
+    });
+    redirect('/(.)signin');
   }
 
   if (isScrap) {

src/app/(header)/portfolio/(view)/layout.tsx

@@ -19,8 +19,6 @@ const PortfolioLayout = ({children}: PropsWithChildren) => {
   const [isLoading, setIsLoading] = useState(false);
   const accessToken = getCookie('accessToken');
 
-  if (!accessToken) router.replace('/signin');
-
   const handleDragEnter = (e: DragEvent<HTMLDivElement>) => {
     e.preventDefault();
     setIsActive(true);

src/app/(header-with-footer)/(body-padding)/recommend/layout.module.scss

@@ -14,7 +14,7 @@
     font-size: 1.8rem;
   }
 
-  & > a {
+  & > button {
     display: block;
     height: 40px;
     padding: 0 20px;

src/app/(header-with-footer)/(body-padding)/recommend/layout.tsx

@@ -1,7 +1,7 @@
 import {cookies} from 'next/headers';
-import Link from 'next/link';
 import {ReactNode} from 'react';
 
+import redirectAction from '@/actions/redirectAction';
 import FilterSelect from '@/features/recommend/FilterSelect';
 import ableJ from '@/services/ableJ';
 
@@ -15,10 +15,11 @@ const RecommendLayout = async ({children}: {children: ReactNode}) => {
     return (
       <>
         <FilterSelect data={[]} />
-        <div className={styles.container}>
+        <form className={styles.container} action={redirectAction}>
           <div>로그인 후 이용 가능한 서비스 입니다.</div>
-          <Link href="/signin">로그인 하러 가기</Link>
-        </div>
+          <input type="hidden" name="redirectUrl" value="/recommend" />
+          <button type="submit">로그인 하러 가기</button>
+        </form>
       </>
     );
   }

src/app/@modal/(.)signin/page.tsx

@@ -1,8 +1,20 @@
 'use client';
 
+import {usePathname, useRouter} from 'next/navigation';
+import {useEffect} from 'react';
+
 import LoginStep from '@/features/auth/LoginStep';
 
 const SignInModal = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  useEffect(() => {
+    if (pathname === '/(.)signin') {
+      router.replace('/signin');
+    }
+  }, [pathname, router]);
+
   return <LoginStep isModal={true} />;
 };
 

src/app/callback/auth/page.tsx

@@ -1,8 +1,10 @@
 'use client';
 
+import {deleteCookie, getCookie} from 'cookies-next';
 import {useRouter, useSearchParams} from 'next/navigation';
 import {Suspense, useCallback, useEffect} from 'react';
 
+import {AUTH_REDIRECT_KEY} from '@/constants/cookie';
 import ableJ from '@/services/ableJ';
 
 const Auth = () => {
@@ -12,10 +14,12 @@ const Auth = () => {
   const initialize = useCallback(async () => {
     const accessToken = searchParams.get('accessToken');
     const refreshToken = searchParams.get('refreshToken');
+    const redirectURL = getCookie(AUTH_REDIRECT_KEY);
 
     if (accessToken && refreshToken) {
       await ableJ.setCredentials(accessToken, refreshToken);
-      router.replace('/');
+      deleteCookie(AUTH_REDIRECT_KEY);
+      router.replace(redirectURL || '/');
     }
   }, [router, searchParams]);
 

src/components/common/Loading/index.tsx

@@ -0,0 +1,16 @@
+import styles from './loading.module.scss';
+
+interface LoadingProps {
+  text: string;
+}
+
+const Loading = ({text}: LoadingProps) => {
+  return (
+    <div className={styles['load-container']}>
+      <div className={styles.loader}></div>
+      <p>{text}</p>
+    </div>
+  );
+};
+
+export default Loading;

src/components/common/Loading/loading.module.scss

@@ -0,0 +1,21 @@
+@use '@/styles/mixin' as mixin;
+@use '@/styles/animations/loader' as animations;
+
+.load-container {
+  flex-direction: column;
+  gap: 24px;
+  width: 100%;
+  height: calc(100vh - 280px);
+  font-size: 1.8rem;
+
+  @media (width >= 1500px) {
+    width: 1300px;
+    margin: 0 auto 30px;
+  }
+
+  @media (width < 600px) {
+    margin-top: 18px;
+  }
+
+  @include mixin.flex-default;
+}

src/components/common/ScrapButton/index.tsx

@@ -12,7 +12,7 @@ interface ScrapButtonProps {
 
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 
-const getScrapStatus = async (recruitmentId: number) => {
+const getScrapStatus = async (recruitmentId: number): Promise<boolean> => {
   const cookieStore = cookies();
   const accessToken = cookieStore.get('accessToken')?.value;
   const response = await fetch(
@@ -28,7 +28,6 @@ const getScrapStatus = async (recruitmentId: number) => {
   );
 
   const {data}: ScrapResponse = await response.json();
-
   return data;
 };
 

src/components/common/ScrapButton/scrapButton.module.scss

@@ -29,6 +29,7 @@
 .submit-button {
   width: 100%;
   height: 100%;
+  cursor: pointer;
 
   @include mixin.flex-default;
 }

src/constants/cookie.ts

@@ -0,0 +1 @@
+export const AUTH_REDIRECT_KEY = 'auth_redirect_url';