Fix: 비로그인 유저 좋아요 제한 (#156)

* style: 토스트 쪼그라드는 이슈 해결

* feat: 비로그인 유저 좋아요 시 redirect 되도록 수정

* feat: login 페이지에 로고 누르면 home으로 이동하도록 추가

* feat: 로그인 완료 후 원래 있던 페이지로 이동

* refactor: 로그인페이지에 suspense 추가

* refactor: 코드리뷰 반영

* refactor: isMine 제거

Author: seueooo

app/(auth)/_api/auth.api.ts

@@ -10,14 +10,17 @@ const AUTH_ENDPOINTS = {
 const AUTH_REDIRECT_URL = (provider: "naver" | "google") =>
   `${process.env.NEXT_PUBLIC_REDIRECT_URL}/${provider}`;
 
-export const getOAuthUrl = async (provider: "naver" | "google") => {
+export const getOAuthUrl = async (
+  provider: "naver" | "google",
+  next?: string,
+) => {
+  const redirectUrl = new URL(AUTH_REDIRECT_URL(provider));
+  if (next) {
+    redirectUrl.searchParams.set("next", next);
+  }
   const response = await apiClient.get<OAuthRes>(
     AUTH_ENDPOINTS.OAUTH_URL(provider),
-    {
-      searchParams: {
-        redirectUrl: AUTH_REDIRECT_URL(provider),
-      },
-    },
+    { searchParams: { redirectUrl: redirectUrl.toString() } },
   );
   return response.result.url;
 };

app/(auth)/login/callback/[provider]/page.tsx

@@ -8,25 +8,28 @@ export default function CallbackPage() {
   const searchParams = useSearchParams();
   const params = useParams();
   const code = searchParams.get("code");
+  const nextUrl = searchParams.get("next");
   const provider = params.provider as "naver" | "google";
   const router = useRouter();
   const { mutate, isPending, isError } = useSocialLogin();
 
   useEffect(() => {
-    if (!code || !provider) return;
+    if (!(code && provider)) return;
 
     mutate(
       { provider: provider, code: code },
       {
         onSuccess: () => {
-          router.replace("/");
-        },
-        onError: () => {
-          console.log("로그인 실패");
+          const redirectUrl =
+            nextUrl?.startsWith("/") && !nextUrl.startsWith("//")
+              ? nextUrl
+              : "/";
+          router.replace(redirectUrl);
         },
+        onError: () => {},
       },
     );
-  }, [code, provider]);
+  }, [code, provider, nextUrl]);
 
   if (isPending) return <LoadingSpinner loading={isPending} />;
 

app/(auth)/login/page.tsx

@@ -1,27 +1,37 @@
 "use client";
-
 import LettieImage from "@/shared/assets/character/lettie_animate.png";
 import GoogleIcon from "@/shared/assets/icon/google.svg";
 import NaverIcon from "@/shared/assets/icon/naver.svg";
 import LogoImage from "@/shared/assets/logo/logo_symbol_wordmark.svg";
+import { PATH } from "@/shared/constants/path";
 import { maxWidth } from "@/shared/styles/base/global.css";
-import { getOAuthUrl } from "../_api/auth.api";
-
+import LoadingSpinner from "@/shared/ui/loading-spinner";
 import Image from "next/image";
-
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { Suspense } from "react";
+import { getOAuthUrl } from "../_api/auth.api";
 import * as styles from "./page.css";
-
 const LoginPage = () => {
+  const searchParams = useSearchParams();
+  const nextUrl = searchParams.get("next");
+
   const handleGoToOAuth = (provider: "naver" | "google") => {
-    getOAuthUrl(provider).then((url) => {
+    const safeNext =
+      nextUrl?.startsWith("/") && !nextUrl.startsWith("//")
+        ? nextUrl
+        : undefined;
+    getOAuthUrl(provider, safeNext).then((url) => {
       window.location.href = url;
     });
   };
 
   return (
     <div className={maxWidth}>
       <header className={styles.header}>
-        <LogoImage />
+        <Link href={PATH.HOME}>
+          <LogoImage />
+        </Link>
       </header>
       <div className={styles.contentsContainer}>
         <h1 className={styles.title}>
@@ -55,4 +65,10 @@ const LoginPage = () => {
   );
 };
 
-export default LoginPage;
+export default function Page() {
+  return (
+    <Suspense fallback={<LoadingSpinner loading={true} />}>
+      <LoginPage />
+    </Suspense>
+  );
+}

app/(main)/my-capsule/_components/select-tab-section/select-tab-section.css.ts

@@ -20,11 +20,12 @@ export const chipWrapper = style({
 
 export const dropdown = style({
   position: "absolute",
-  right: 0,
-  top: 0,
+  right: "0",
+  top: "100%",
+  transform: "translateY(-180%)",
   marginRight: "1rem",
   ...screen.md({
-    top: 0,
-    right: 0,
+    top: "100%",
+    transform: "translateY(-90%)",
   }),
 });

app/(sub)/capsule-detail/[invite-code]/[id]/letters/_components/grid-layout/index.tsx

@@ -12,8 +12,16 @@ const GridLayout = ({ letters, imageUrls }: GridLayoutProps) => {
     <div className={styles.container}>
       <div className={styles.grid}>
         {letters.map((letter) => {
-          const imageUrl = imageUrls.find((img) => img.letterId === letter.letterId)?.url;
-          return <GridLetterCard key={letter.letterId} letter={letter} imageUrl={imageUrl} />;
+          const imageUrl = imageUrls.find(
+            (img) => img.letterId === letter.letterId,
+          )?.url;
+          return (
+            <GridLetterCard
+              key={letter.letterId}
+              letter={letter}
+              imageUrl={imageUrl}
+            />
+          );
         })}
       </div>
     </div>

app/(sub)/capsule-detail/[invite-code]/[id]/letters/_components/grid-letter-card/index.tsx

@@ -13,8 +13,18 @@ const GridLetterCard = ({ letter, imageUrl, onClick }: LetterCardProps) => {
   return (
     <HoverMotion>
       <section className={styles.card} onClick={onClick}>
-        {imageUrl && <Image width={200} height={200} className={styles.image} src={imageUrl} alt="편지 이미지" />}
-        <div className={styles.content}>{!imageUrl && <p>{letter.content}</p>}</div>
+        {imageUrl && (
+          <Image
+            width={200}
+            height={200}
+            className={styles.image}
+            src={imageUrl}
+            alt="편지 이미지"
+          />
+        )}
+        <div className={styles.content}>
+          {!imageUrl && <p>{letter.content}</p>}
+        </div>
 
         {letter.from && (
           <p>

app/(sub)/capsule-detail/[invite-code]/[id]/letters/_components/open-capsule-loading/index.tsx

@@ -12,7 +12,11 @@ interface OpenCapsuleLoadingProps {
 
 const AUTO_CLOSE_DELAY = 3000;
 
-const OpenCapsuleLoading = ({ participantCount, letterCount, onComplete }: OpenCapsuleLoadingProps) => {
+const OpenCapsuleLoading = ({
+  participantCount,
+  letterCount,
+  onComplete,
+}: OpenCapsuleLoadingProps) => {
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
   const isCompletedRef = useRef(false);
 

app/(sub)/capsule-detail/[invite-code]/[id]/letters/_components/stack-layout/animations.ts

@@ -4,7 +4,10 @@ const getRotateAngle = (stackIndex: number) => {
   return stackIndex * -5;
 };
 
-export const createStackAnimations = (direction: number, visibleLetters: VisibleLetter[]) => {
+export const createStackAnimations = (
+  direction: number,
+  visibleLetters: VisibleLetter[],
+) => {
   return visibleLetters.map(({ stackIndex }) => ({
     initial:
       direction === -1 && stackIndex === 0

app/(sub)/capsule-detail/[invite-code]/[id]/letters/_components/stack-layout/index.tsx

@@ -104,8 +104,13 @@ const StackLayout = ({ letters, imageUrls }: StackLayoutProps) => {
       <div className={styles.stackContainer}>
         <AnimatePresence mode="popLayout">
           {visibleLetters.map(({ letter, key }, index) => {
-            const animationProps = createStackAnimations(direction, visibleLetters)[index];
-            const imageUrl = imageUrls.find((img) => img.letterId === letter.letterId)?.url;
+            const animationProps = createStackAnimations(
+              direction,
+              visibleLetters,
+            )[index];
+            const imageUrl = imageUrls.find(
+              (img) => img.letterId === letter.letterId,
+            )?.url;
 
             return (
               <motion.div
@@ -129,7 +134,9 @@ const StackLayout = ({ letters, imageUrls }: StackLayoutProps) => {
         className={styles.navButton}
         onClick={nextLetter}
         disabled={isAnimating}
-        style={{ visibility: currentIndex < letters.length - 1 ? "visible" : "hidden" }}
+        style={{
+          visibility: currentIndex < letters.length - 1 ? "visible" : "hidden",
+        }}
         type="button"
       >
         <Right width={24} height={24} />

app/(sub)/capsule-detail/[invite-code]/[id]/letters/_components/stack-letter-card/index.tsx

@@ -12,8 +12,22 @@ const StackLetterCard = ({ letter, imageUrl, onClick }: LetterCardProps) => {
   return (
     <section className={styles.card} onClick={onClick}>
       <div className={styles.contentWrapper}>
-        {imageUrl && <Image width={240} height={240} className={styles.image} src={imageUrl} alt="편지 이미지" />}
-        <p className={imageUrl ? styles.contentWithImage : styles.contentWithoutImage}>{letter.content}</p>
+        {imageUrl && (
+          <Image
+            width={240}
+            height={240}
+            className={styles.image}
+            src={imageUrl}
+            alt="편지 이미지"
+          />
+        )}
+        <p
+          className={
+            imageUrl ? styles.contentWithImage : styles.contentWithoutImage
+          }
+        >
+          {letter.content}
+        </p>
       </div>
 
       {letter.from && (