feat: 미로그인 시 리뷰 블러

src/components/features/club/review/ClubReview.tsx

@@ -3,22 +3,32 @@ import { Card } from '@/components/ui/card';
 import ReviewStatics from './ReviewStatics';
 import Divider from '@/components/ui/divider';
 import ReviewList from './ReviewList';
-
+import { Button } from '@/components/ui/button';
+import { useRouter } from 'next/navigation';
+import { useLoginStore } from '@/stores/login/useLoginStore';
+import Image from 'next/image';
 export default function ClubReview({ clubId }: { clubId: number }) {
+  const router = useRouter();
+  const isLoggedIn = useLoginStore((state) => state.isLoggedIn);
   return (
     <Card className="mx-4 md:mx-10">
-      <div className="mx-4 sm:mx-24">
-        {/* <Image
-          src={'/images/review-pc.png'}
-          alt="review"
-          width={700}
-          height={700}
-          className="size-150 object-cover relative "
-        /> */}
+      {isLoggedIn ? (<div className="mx-4 sm:mx-24">
         <ReviewStatics clubId={clubId} />
         <Divider className="mt-12" />
         <ReviewList clubId={clubId} />
-      </div>
+      </div>):(
+          <div className="flex items-center justify-center flex-col gap-4 my-12">
+            <p className="text-sm font-medium text-gray-600 text-center">🔐 로그인 후 동아리 리뷰를 확인해보세요!<br/>이 동아리에 작성된 모든 리뷰는 로그인 시 열람 가능합니다.</p>
+            <Button
+          onClick={() => router.push('/login')}
+          className="rounded-[5px] w-[288px] xs:w-72 h-11 flex justify-center items-center bg-[#FEE500] hover:bg-[#E6D100] font-medium leading-[150%] transition-colors duration-200"
+        >
+          <Image src={'/images/login/kakao.png'} alt="login" width={20} height={20} />
+          <span className="text-gray-900 text-center ml-3">카카오 로그인/회원가입</span>
+        </Button>
+        </div>
+
+      )}
     </Card>
   );
 }

src/components/features/login/api/kakaoLogin.ts

@@ -48,6 +48,7 @@ export const removeTokens = (): void => {
     localStorage.removeItem('accessToken');
     localStorage.removeItem('refreshToken');
     localStorage.removeItem('isAdmin');
+    localStorage.removeItem('login-storage');
     console.log('토큰 제거 완료');
   } catch (error) {
     console.error('토큰 제거 실패:', error);

src/components/layouts/Header.tsx

@@ -16,6 +16,7 @@ import { getIsAdmin } from '@/auth/AuthService';
 import { getUserInfo } from '../features/login/api/kakaoLogin';
 import { User } from '@/types/login/kakaoLoginData';
 import { kakaoLogout, removeTokens } from '../features/login/api/kakaoLogin';
+import { useLoginStore } from '@/stores/login/useLoginStore';
 // import { adminsLogout } from '../features/login/api/login';
 
 interface AdminMeProps {
@@ -69,6 +70,7 @@ export default function Header() {
   const [isOpenToggle, setIsOpenToggle] = useState(false);
   const [isOpenModal, setIsOpenModal] = useState(false);
   const [modalMessage, setModalMessage] = useState('');
+  const logoutStore = useLoginStore((state) => state.logout);
 
   useEffect(() => {
     const token = getAccessToken();
@@ -105,6 +107,7 @@ export default function Header() {
     setAccessToken(null);
     setAdminMe(undefined);
     removeTokens();
+    logoutStore();
     setModalMessage('로그아웃 되었습니다.');
 
     window.dispatchEvent(new Event('storage'));
@@ -117,6 +120,7 @@ export default function Header() {
       setAccessToken(null);
       setUser(undefined);
       removeTokens();
+      logoutStore();
 
       setModalMessage('로그아웃 되었습니다.');
       setIsOpenModal(true);
@@ -127,6 +131,7 @@ export default function Header() {
       setAccessToken(null);
       setUser(undefined);
       removeTokens();
+      logoutStore();
       setModalMessage('로그아웃 중 오류가 발생했습니다. 다시 시도해주세요.');
       setIsOpenModal(true);
     }