✨[Feat] 모임 찾기 페이지 비로그인 찜 클릭 시 로그인 안내창 추가 #336

src/features/bookclub/components/ClubListSection.tsx

@@ -3,25 +3,51 @@
 import Card from '@/components/card/Card';
 import { formatDateForUI, isPastDate } from '@/lib/utils/formatDateForUI';
 import { useRouter } from 'next/navigation';
-import { useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import EmptyState from '@/components/common-layout/EmptyState';
 import { clubStatus } from '@/lib/utils/clubUtils';
 import { BookClub } from '@/types/bookclubs';
-import { useLikeClub, useUnLikeClub } from '@/lib/hooks';
+import { useLikeClub, useLikeWithAuthCheck, useUnLikeClub } from '@/lib/hooks';
+import { useAuthStore } from '@/store/authStore';
+import PopUp from '@/components/pop-up/PopUp';
 
 interface ClubListSectionProps {
   bookClubs: BookClub[];
 }
 
 function ClubListSection({ bookClubs = [] }: ClubListSectionProps) {
   const router = useRouter();
+  const {
+    isLikePopUpOpen,
+    likePopUpLabel,
+    onShowAuthPopUp,
+    onCloseCheckAuthPopup,
+  } = useLikeWithAuthCheck();
   const { onConfirmUnLike } = useUnLikeClub();
   const { onConfirmLike } = useLikeClub();
+  const { isLoggedIn, checkLoginStatus, user } = useAuthStore();
+
+  useEffect(() => {
+    checkLoginStatus();
+  }, [checkLoginStatus]);
 
   const today = useMemo(() => new Date(), []);
 
   const handleLikeClub = (isLiked: boolean, id: number) => {
-    isLiked ? onConfirmUnLike(id) : onConfirmLike(id);
+    if (!isLoggedIn) {
+      onShowAuthPopUp();
+      return;
+    }
+
+    if (isLiked) {
+      onConfirmUnLike(id);
+    } else {
+      onConfirmLike(id);
+    }
+  };
+
+  const handleLikePopUpConfirm = () => {
+    router.push('/login');
   };
 
   return (
@@ -49,6 +75,7 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) {
               club.endDate,
               today,
             )}
+            isHost={club.hostId === user?.id}
             onLikeClick={() => handleLikeClub(club.isLiked, club.id)}
             onClick={() => router.push(`/bookclub/${club.id}`)}
           />
@@ -59,6 +86,14 @@ function ClubListSection({ bookClubs = [] }: ClubListSectionProps) {
           subtitle="지금 바로 책 모임을 만들어보세요."
         />
       )}
+      <PopUp
+        isOpen={isLikePopUpOpen}
+        isLarge={true}
+        isTwoButton={true}
+        label={likePopUpLabel}
+        handlePopUpClose={onCloseCheckAuthPopup}
+        handlePopUpConfirm={handleLikePopUpConfirm}
+      />
     </main>
   );
 }

src/features/club-details/components/HeaderSection.tsx

@@ -13,6 +13,7 @@ import { useJoinClub } from '../hooks';
 import {
   useCancelClub,
   useLeaveClub,
+  useLikeClub,
   useLikeWithAuthCheck,
   useUnLikeClub,
 } from '@/lib/hooks/index';
@@ -42,9 +43,10 @@ function HeaderSection({ clubInfo, idAsNumber }: HeaderSectionProps) {
   const {
     isLikePopUpOpen,
     likePopUpLabel,
-    onCheckAuthPopUp,
+    onShowAuthPopUp,
     onCloseCheckAuthPopup,
   } = useLikeWithAuthCheck();
+  const { onConfirmLike } = useLikeClub();
   const { onConfirmUnLike } = useUnLikeClub();
 
   const { isLoggedIn, checkLoginStatus, user } = useAuthStore();
@@ -76,10 +78,16 @@ function HeaderSection({ clubInfo, idAsNumber }: HeaderSectionProps) {
     handleJoin(clubInfo.id);
   };
 
-  const handleLikeClub = () => {
-    clubInfo.isLiked
-      ? onConfirmUnLike(clubInfo.id)
-      : onCheckAuthPopUp(clubInfo.id);
+  const handleLikeClub = (isLiked: boolean) => {
+    if (!isLoggedIn) {
+      onShowAuthPopUp();
+      return;
+    }
+    if (isLiked) {
+      onConfirmUnLike(clubInfo.id);
+    } else {
+      onConfirmLike(clubInfo.id);
+    }
   };
 
   const handleLikePopUpConfirm = () => {
@@ -106,7 +114,7 @@ function HeaderSection({ clubInfo, idAsNumber }: HeaderSectionProps) {
       clubInfo.endDate,
       new Date(), // TODO: new Date() 최적화 후 수정
     ),
-    onLikeClick: handleLikeClub,
+    onLikeClick: () => handleLikeClub(clubInfo.isLiked),
     host: {
       id: clubInfo.hostId,
       name: clubInfo.hostNickname,

src/lib/hooks/useLikeWithAuthCheck.ts

@@ -1,27 +1,14 @@
-import { useEffect, useState } from 'react';
-import { useLikeClub } from './useLikeClub';
-import { useAuthStore } from '@/store/authStore';
+import { useState } from 'react';
 
 export const useLikeWithAuthCheck = () => {
-  const { onConfirmLike } = useLikeClub();
   const [isPopUpOpen, setIsPopUpOpen] = useState(false);
   const [popUpLabel, setPopUpLabel] = useState('');
 
-  const { isLoggedIn, checkLoginStatus } = useAuthStore();
-
-  useEffect(() => {
-    checkLoginStatus();
-  }, [checkLoginStatus]);
-
-  const onCheckAuthPopUp = (clubId: number) => {
-    if (isLoggedIn) {
-      onConfirmLike(clubId);
-    } else {
-      setPopUpLabel(
-        `로그인 후 이용할 수 있어요.\n로그인 페이지로 이동하시겠어요?`,
-      );
-      setIsPopUpOpen(true);
-    }
+  const onShowAuthPopUp = () => {
+    setPopUpLabel(
+      `로그인 후 이용할 수 있어요.\n로그인 페이지로 이동하시겠어요?`,
+    );
+    setIsPopUpOpen(true);
   };
 
   const onCloseCheckAuthPopup = () => {
@@ -32,7 +19,7 @@ export const useLikeWithAuthCheck = () => {
   return {
     isLikePopUpOpen: isPopUpOpen,
     likePopUpLabel: popUpLabel,
-    onCheckAuthPopUp,
+    onShowAuthPopUp,
     onCloseCheckAuthPopup,
   };
 };