feat: 홈페이지 -> "로그인이 필요합니다" 모달

src/components/StrokeBanner.tsx

@@ -1,11 +1,20 @@
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import ActionConfirmModal from "@/components/modal/ActionConfirmModal";
+import useAuthStore from "@/store/useAuthStore";
 
 const StrokeBanner = () => {
+  const [needLoginModalIsOpen, setNeedLoginModalIsOpen] = useState(false);
+  const { isLoggedIn } = useAuthStore();
   const navigate = useNavigate();
 
   const handleNavigate = () => {
-    const mode = "virtualFriend";
-    navigate("/select-info", { state: { type: mode } });
+    if (isLoggedIn) {
+      const mode = "virtualFriend";
+      navigate("/select-info", { state: { type: mode } });
+    } else {
+      setNeedLoginModalIsOpen(true);
+    }
   };
 
   return (
@@ -27,6 +36,16 @@ const StrokeBanner = () => {
         <br />
         입력해서 빠르게 대화할 수 있어요
       </p>
+      {needLoginModalIsOpen && (
+        <ActionConfirmModal
+          title="로그인이 필요합니다."
+          message={[`로그인 페이지로\n이동할까요?`]}
+          cancelText="취소"
+          confirmText="확인"
+          onCancel={() => setNeedLoginModalIsOpen(false)}
+          onConfirm={() => navigate("/login")}
+        />
+      )}
     </div>
   );
 };

src/components/SubTitle.tsx

@@ -1,6 +1,11 @@
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import ActionConfirmModal from "@/components/modal/ActionConfirmModal";
+import useAuthStore from "@/store/useAuthStore";
 
 const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
+  const [needLoginModalIsOpen, setNeedLoginModalIsOpen] = useState(false);
+  const { isLoggedIn } = useAuthStore();
   const navigate = useNavigate();
 
   const titleList = {
@@ -15,8 +20,10 @@ const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
   };
 
   const handleNavigate = () => {
-    const type = mode === "빠른대화" ? "fastFriend" : "virtualFriend";
-    navigate("/select-info", { state: { type: type } });
+    if (isLoggedIn) {
+      const type = mode === "빠른대화" ? "fastFriend" : "virtualFriend";
+      navigate("/select-info", { state: { type: type } });
+    } else setNeedLoginModalIsOpen(true);
   };
 
   return (
@@ -37,6 +44,16 @@ const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
           />
         </button>
       )}
+      {needLoginModalIsOpen && (
+        <ActionConfirmModal
+          title="로그인이 필요합니다."
+          message={[`로그인 페이지로\n이동할까요?`]}
+          cancelText="취소"
+          confirmText="확인"
+          onCancel={() => setNeedLoginModalIsOpen(false)}
+          onConfirm={() => navigate("/login")}
+        />
+      )}
     </div>
   );
 };

src/components/modal/ActionConfirmModal.tsx

@@ -27,7 +27,7 @@ const ActionConfirmModal = ({
         onClick={(e) => e.stopPropagation()}
       >
         <h3 className="text-2xl font-bold">{title}</h3>
-        <p className="mt-[9px] text-center text-xl font-medium">
+        <p className="mt-[9px] text-center text-xl font-medium whitespace-pre-wrap">
           {message.map((line, index) => (
             <span key={index} className="block">
               {line}