Merge branch 'dev' into feature/Ga4-trackedpage-추가-및-click-이벤트-할당-정준영

Author: junjeeong

.github/workflows/cicd.yml

@@ -27,7 +27,11 @@ jobs:
 
       - name: Create .env file # env 파일 생성 단계 추가
         run: |
-          echo "VITE_GA_MEASUREMENT_ID=${{ secrets.VITE_GA_MEASUREMENT_ID }}" > .env
+          echo "VITE_KAKAO_REST_API_KEY=${{ secrets.VITE_KAKAO_REST_API_KEY }}" >> .env
+          echo "VITE_KAKAO_JAVASCRIPT_KEY=${{ secrets.VITE_KAKAO_JAVASCRIPT_KEY }}" >> .env
+          echo "VITE_KAKAO_PRODUCTION_REDIRECT_URI=${{ secrets.VITE_KAKAO_PRODUCTION_REDIRECT_URI }}" >> .env
+          echo "VITE_KAKAO_DEVELOPE_REDIRECT_URI=${{ secrets.VITE_KAKAO_DEVELOPE_REDIRECT_URI }}" >> .env
+          echo "VITE_GA_MEASUREMENT_ID=${{ secrets.VITE_GA_MEASUREMENT_ID }}" >> .env
 
       - name: Run build
         run: npm run build # 프로젝트에 맞는 빌드 명령어

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,7 +1,12 @@
+import { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import trackClickEvent from "@/utils/trackClickEvent";
+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 = {
@@ -16,9 +21,11 @@ const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
   };
 
   const handleNavigate = () => {
-    const type = mode === "빠른대화" ? "fastFriend" : "virtualFriend";
     trackClickEvent("홈", "친구 - 추가");
-    navigate("/select-info", { state: { type: type } });
+    if (isLoggedIn) {
+      const type = mode === "빠른대화" ? "fastFriend" : "virtualFriend";
+      navigate("/select-info", { state: { type: type } });
+    } else setNeedLoginModalIsOpen(true);
   };
 
   return (
@@ -39,6 +46,16 @@ const SubTitle = ({ mode }: { mode: "빠른대화" | "친구목록" }) => {
           />
         </button>
       )}
+      {needLoginModalIsOpen && (
+        <ActionConfirmModal
+          title="로그인이 필요합니다."
+          message={[`로그인 페이지로\n이동할까요?`]}
+          cancelText="취소"
+          confirmText="확인"
+          onCancel={() => setNeedLoginModalIsOpen(false)}
+          onConfirm={() => navigate("/login")}
+        />
+      )}
     </div>
   );
 };

src/components/button/KakaoLoginButton.tsx

@@ -5,7 +5,7 @@ const KakaoLoginButton = () => {
   const kakaoRedirectUrl =
     import.meta.env.MODE === "production"
       ? import.meta.env.VITE_KAKAO_PRODUCTION_REDIRECT_URI
-      : import.meta.env.VITE_KAKAO_DEVELOP_REDIRECT_URI;
+      : import.meta.env.VITE_KAKAO_DEVELOPE_REDIRECT_URI;
 
   const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${kakaoRestApiKey}&redirect_uri=${kakaoRedirectUrl}&response_type=code`;
 

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}