[#659] 로그인 완료 후 이전 페이지로 돌아올 수 있는 기능 구현 (#661)

* feat: 로그인 Link 컴포넌트 추가

* fix: kakao login base url 상수파일에서 import하도록 수정

Author: gxxrxn

src/app/bookshelf/[bookshelfId]/page.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import { useEffect } from 'react';
-import Link from 'next/link';
 import { useInView } from 'react-intersection-observer';
 
 import type { APIBookshelf } from '@/types/bookshelf';
@@ -12,7 +11,6 @@ import useMutateBookshelfLikeQuery from '@/queries/bookshelf/useMutateBookshelfL
 import { useMyProfileId } from '@/queries/user/useMyProfileQuery';
 import { checkAuthentication } from '@/utils/helpers';
 import { IconKakao } from '@public/icons';
-import { KAKAO_LOGIN_URL } from '@/constants';
 
 import useToast from '@/components/common/Toast/useToast';
 import TopNavigation from '@/components/common/TopNavigation';
@@ -21,6 +19,7 @@ import Button from '@/components/common/Button';
 import LikeButton from '@/components/common/LikeButton';
 import BackButton from '@/components/common/BackButton';
 import ShareButton from '@/components/common/ShareButton';
+import LoginLink from '@/components/common/LoginLink';
 
 export default function UserBookShelfPage({
   params: { bookshelfId },
@@ -163,14 +162,14 @@ const BookShelfLoginBox = ({
         <br />
         인사이트를 얻을 수 있어요.
       </p>
-      <Link href={KAKAO_LOGIN_URL}>
+      <LoginLink>
         <Button colorScheme="kakao" size="full">
           <div className="flex items-center justify-center gap-[1rem]">
             <IconKakao width={16} height={'auto'} />
             <span className="font-body1-regular">카카오 로그인</span>
           </div>
         </Button>
-      </Link>
+      </LoginLink>
     </div>
   );
 };

src/app/login/page.tsx

@@ -1,12 +1,10 @@
-'use client';
-
 import Link from 'next/link';
 import Image from 'next/image';
 
 import { IconKakao } from '@public/icons';
-import { KAKAO_LOGIN_URL } from '@/constants';
 
 import Button from '@/components/common/Button';
+import LoginLink from '@/components/common/LoginLink';
 
 const LoginPage = () => {
   return (
@@ -30,14 +28,14 @@ const LoginPage = () => {
       </article>
 
       <section className="absolute inset-x-[2rem] bottom-[calc(env(safe-area-inset-bottom)+2rem)] mx-auto flex max-w-[41rem] flex-col justify-center gap-[1rem]">
-        <Link href={KAKAO_LOGIN_URL}>
+        <LoginLink>
           <Button size="full" colorScheme="kakao">
             <div className="flex w-full items-center justify-center">
               <IconKakao className="absolute left-[2rem] w-[2.1rem]" />
               <p>카카오 로그인</p>
             </div>
           </Button>
-        </Link>
+        </LoginLink>
         <Link href="/bookarchive" className="flex justify-center">
           <Button
             size="small"

src/app/profile/me/page.tsx

@@ -10,7 +10,7 @@ import userKeys from '@/queries/user/key';
 import { deleteAuthSession } from '@/server/session';
 import { deleteCookie } from '@/utils/cookie';
 import { checkAuthentication } from '@/utils/helpers';
-import { KAKAO_LOGIN_URL, SESSION_COOKIES_KEYS } from '@/constants';
+import { SESSION_COOKIES_KEYS } from '@/constants';
 import { IconArrowRight } from '@public/icons';
 
 import SSRSafeSuspense from '@/components/common/SSRSafeSuspense';
@@ -20,6 +20,7 @@ import Button from '@/components/common/Button';
 import Loading from '@/components/common/Loading';
 import Menu from '@/components/common/Menu';
 import TopHeader from '@/components/common/TopHeader';
+import LoginLink from '@/components/common/LoginLink';
 import BookShelf from '@/components/bookShelf/BookShelf';
 import ProfileBookShelf from '@/components/profile/bookShelf/ProfileBookShelf';
 import ProfileGroup from '@/components/profile/group/ProfileGroup';
@@ -51,9 +52,9 @@ const MyProfileForUnAuth = () => {
               카카오로 3초만에 가입할 수 있어요.
             </p>
           </div>
-          <Link href={KAKAO_LOGIN_URL}>
+          <LoginLink>
             <IconArrowRight width="20px" />
-          </Link>
+          </LoginLink>
         </div>
         <div className="flex flex-col gap-[0.6rem]">
           <div className="flex items-center justify-between">

src/components/common/LoginBottomActionButton.tsx

@@ -1,13 +1,10 @@
-import Link from 'next/link';
-
-import { KAKAO_LOGIN_URL } from '@/constants';
-
 import BottomActionButton from '@/components/common/BottomActionButton';
+import LoginLink from '@/components/common/LoginLink';
 
 const LoginBottomActionButton = () => (
-  <Link href={KAKAO_LOGIN_URL}>
+  <LoginLink>
     <BottomActionButton>로그인 및 회원가입</BottomActionButton>
-  </Link>
+  </LoginLink>
 );
 
 export default LoginBottomActionButton;

src/components/common/LoginLink.tsx

@@ -0,0 +1,34 @@
+'use client';
+
+import type { ComponentPropsWithRef, PropsWithChildren } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+import { SEARCH_PARAMS_KEYS } from '@/constants/key';
+import { KAKAO_LOGIN_BASE_URL } from '@/constants/url';
+import { createQueryString } from '@/utils/url';
+
+type LoginLinkProps = Omit<ComponentPropsWithRef<typeof Link>, 'href'>;
+
+const LoginLink = ({
+  children,
+  replace = true,
+  ...props
+}: PropsWithChildren<LoginLinkProps>) => {
+  const pathname = usePathname();
+  const search = createQueryString({
+    ...(pathname && { [SEARCH_PARAMS_KEYS.REDIRECT_PATHNAME]: pathname }),
+  });
+
+  return (
+    <Link
+      href={`${KAKAO_LOGIN_BASE_URL}${search}`}
+      replace={replace}
+      {...props}
+    >
+      {children}
+    </Link>
+  );
+};
+
+export default LoginLink;

src/constants/url.ts

@@ -3,4 +3,4 @@ export const DATA_URL = {
     'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdjWL9+/X8ABysDDapsaG4AAAAASUVORK5CYII=', // data url for placeholder color (#AFAFAF)
 };
 
-export const KAKAO_LOGIN_URL = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/kakao?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_REDIRECT_URI}`;
+export const KAKAO_LOGIN_BASE_URL = `${process.env.NEXT_PUBLIC_API_URL}/oauth2/authorize/kakao?redirect_uri=${process.env.NEXT_PUBLIC_CLIENT_REDIRECT_URI}`;