비로그인 사용자 로그인 페이지로 리다이랙트

Author: LimSB-dev

src/components/main/card/NameCard/index.tsx

@@ -1,9 +1,11 @@
 import styles from "./styles.module.scss";
+import { useTranslation } from "@/hooks/useTranslation";
 
 export const NameCard = () => {
+  const { t } = useTranslation();
   return (
     <article className={`card-shadow ${styles.card}`}>
-      <h5>Seongbin Lim</h5>
+      <h5>{t("main.nameCard.name")}</h5>
     </article>
   );
 };

src/components/posts/[id]/Comments/CommentForm/index.tsx

@@ -2,6 +2,7 @@
 
 import { useState, useRef, useEffect } from "react";
 import Image from "next/image";
+import Link from "next/link";
 import { useAppSelector } from "@/hooks/reduxHook";
 import styles from "./styles.module.scss";
 import { useTranslation } from "@/hooks/useTranslation";
@@ -51,6 +52,9 @@ export const CommentForm = ({ onSubmit, isAuthenticated }: CommentFormProps) =>
     return (
       <div className={styles.login_prompt}>
         <p>{t("posts.commentLoginPrompt")}</p>
+        <Link href="/login" className={styles.login_prompt_link}>
+          {t("common.goToLogin")}
+        </Link>
       </div>
     );
   }

src/components/posts/[id]/Comments/CommentForm/styles.module.scss

@@ -149,4 +149,26 @@
   padding: 24px 0;
   text-align: center;
   color: var(--secondary-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+}
+
+.login_prompt_link {
+  display: inline-block;
+  padding: 8px 16px;
+  background: var(--card-background-color);
+  color: var(--primary-color);
+  border: 1px solid var(--primary-color);
+  border-radius: 6px;
+  font-size: var(--p);
+  font-weight: 500;
+  text-decoration: none;
+  transition: opacity 0.2s, transform 0.2s;
+
+  &:hover {
+    opacity: 0.9;
+    transform: translateY(1px);
+  }
 }

src/components/posts/[id]/PostLikeButton/index.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useTransition } from "react";
+import Link from "next/link";
 import { useAppSelector } from "@/hooks/reduxHook";
 import { togglePostLike } from "@/app/api/posts";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -43,8 +44,7 @@ export const PostLikeButton = ({ post, onLikeToggle }: PostLikeButtonProps) => {
 
   const handleLike = async () => {
     if (!user.id || !user.email) {
-      alert(t("common.loginRequired"));
-      return;
+      return; // 비로그인 시 아래 Link로 리다이렉트 유도
     }
 
     startTransition(() => {
@@ -68,7 +68,13 @@ export const PostLikeButton = ({ post, onLikeToggle }: PostLikeButtonProps) => {
   };
 
   if (!user.id || !user.email) {
-    return null; // 로그인하지 않은 사용자에게는 버튼을 표시하지 않음
+    return (
+      <Link href="/login" className={styles.login_to_like_link}>
+        <FontAwesomeIcon icon={regularHeart} className={styles.heart_icon} />
+        <span className={styles.like_count}>{likeCount}</span>
+        <span className={styles.login_to_like_text}>{t("posts.loginToLike")}</span>
+      </Link>
+    );
   }
 
   return (

src/components/posts/[id]/PostLikeButton/styles.module.scss

@@ -60,3 +60,28 @@
     transform: scale(1);
   }
 }
+
+/* 비로그인 시 로그인 유도 링크 */
+.login_to_like_link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  background: transparent;
+  border: 1px solid var(--secondary-color);
+  border-radius: 6px;
+  color: var(--secondary-color);
+  text-decoration: none;
+  font-size: var(--caption);
+  transition: color 0.2s, border-color 0.2s, opacity 0.2s;
+
+  &:hover {
+    color: var(--primary-color);
+    border-color: var(--primary-color);
+    opacity: 0.9;
+  }
+}
+
+.login_to_like_text {
+  margin-left: 2px;
+}

src/locales/en.json

@@ -18,6 +18,7 @@
     "leftArrow": "Previous",
     "rightArrow": "Next",
     "loginRequired": "Login required.",
+    "goToLogin": "Go to login",
     "logoAlt": "Logo"
   },
   "main": {
@@ -58,6 +59,9 @@
     },
     "profileCard": {
       "alt": "profile"
+    },
+    "nameCard": {
+      "name": "Seongbin Lim"
     }
   },
   "posts": {
@@ -100,6 +104,7 @@
     "noCommentsYet": "No comments yet. Be the first to comment!",
     "like": "Like",
     "unlike": "Unlike",
+    "loginToLike": "Log in to like",
     "errorLike": "An error occurred while processing like.",
     "errorFetchPosts": "Failed to load posts.",
     "loadingText": "Loading...",

src/locales/ko.json

@@ -18,6 +18,7 @@
     "leftArrow": "이전",
     "rightArrow": "다음",
     "loginRequired": "로그인이 필요합니다.",
+    "goToLogin": "로그인하기",
     "logoAlt": "로고"
   },
   "main": {
@@ -58,6 +59,9 @@
     },
     "profileCard": {
       "alt": "프로필"
+    },
+    "nameCard": {
+      "name": "임성빈"
     }
   },
   "posts": {
@@ -100,6 +104,7 @@
     "noCommentsYet": "아직 댓글이 없습니다. 첫 번째 댓글을 작성해보세요!",
     "like": "좋아요",
     "unlike": "좋아요 취소",
+    "loginToLike": "로그인하고 좋아요 누르기",
     "errorLike": "좋아요 처리 중 오류가 발생했습니다.",
     "errorFetchPosts": "게시글을 불러오지 못했습니다.",
     "loadingText": "로딩 중...",