feat: 알림센터 알림 유무 확인 기능 구현

src/api/notifications/getNotificationExist.ts

@@ -0,0 +1,18 @@
+import { apiClient } from '../index';
+
+export interface GetNotificationExistResponse {
+  isSuccess: boolean;
+  code: number;
+  message: string;
+  requestId: string;
+  data: {
+    exists: boolean;
+  };
+}
+
+export const getNotificationExist = async (): Promise<GetNotificationExistResponse> => {
+  const response = await apiClient.get<GetNotificationExistResponse>(
+    '/notifications/exists-unchecked',
+  );
+  return response.data;
+};

src/api/users/getFollowerList.ts

@@ -9,6 +9,7 @@ export interface FollowerListResponse {
     followers: FollowData[];
     nextCursor: string;
     isLast: boolean;
+    totalFollowerCount?: number;
   };
 }
 

src/api/users/getFollowingList.ts

@@ -9,6 +9,7 @@ export interface FollowingListResponse {
     followings: FollowData[];
     nextCursor: string;
     isLast: boolean;
+    totalFollowingCount?: number;
   };
 }
 

src/components/common/MainHeader.tsx

@@ -1,9 +1,13 @@
+import { useEffect, useState } from 'react';
 import headerLogo from '../../assets/header/header-logo.svg';
 import groupDoneLogo from '../../assets/header/group-done.svg';
 import findUserLogo from '../../assets/header/findUser.svg';
 import bellLogo from '../../assets/header/bell.svg';
+import bellExistLogo from '../../assets/header/exist-bell.svg';
 import styled from '@emotion/styled';
 import { IconButton } from './IconButton';
+import { getNotificationExist } from '@/api/notifications/getNotificationExist';
+import { useAuthReadyStore } from '@/stores/useAuthReadyStore';
 
 interface MainHeaderProps {
   type: 'home' | 'group';
@@ -12,6 +16,26 @@ interface MainHeaderProps {
 }
 
 const MainHeader = ({ type, leftButtonClick, rightButtonClick }: MainHeaderProps) => {
+  const [hasUnchecked, setHasUnchecked] = useState(false);
+  const isAuthReady = useAuthReadyStore(s => s.isReady);
+
+  useEffect(() => {
+    let mounted = true;
+    const fetchData = async () => {
+      if (!localStorage.getItem('authToken')) return;
+      try {
+        const res = await getNotificationExist();
+        if (mounted && res.isSuccess) setHasUnchecked(res.data.exists);
+      } catch {
+        // ignore
+      }
+    };
+    if (isAuthReady) void fetchData();
+    return () => {
+      mounted = false;
+    };
+  }, [isAuthReady]);
+
   return (
     <HeaderWrapper>
       <LogoImg src={headerLogo} alt="headerLogo" />
@@ -21,7 +45,11 @@ const MainHeader = ({ type, leftButtonClick, rightButtonClick }: MainHeaderProps
           src={type === 'group' ? groupDoneLogo : findUserLogo}
           alt={type === 'group' ? '모임 완료 아이콘' : '사용자 찾기 아이콘'}
         />
-        <IconButton onClick={rightButtonClick} src={bellLogo} alt="알림 아이콘" />
+        <IconButton
+          onClick={rightButtonClick}
+          src={hasUnchecked ? bellExistLogo : bellLogo}
+          alt="알림 아이콘"
+        />
       </Actions>
     </HeaderWrapper>
   );

src/hooks/useSocialLoginToken.ts

@@ -1,12 +1,14 @@
 import { useEffect, useRef, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';
 import { getToken } from '@/api/auth';
+import { useAuthReadyStore } from '@/stores/useAuthReadyStore';
 
 export const useSocialLoginToken = () => {
   const location = useLocation();
 
   // 토큰 발급 완료를 기다리는 Promise
   const tokenPromise = useRef<Promise<void> | null>(null);
+  const setReady = useAuthReadyStore(s => s.setReady);
 
   useEffect(() => {
     const handleSocialLoginToken = async (): Promise<void> => {
@@ -50,17 +52,21 @@ export const useSocialLoginToken = () => {
       } catch (error) {
         console.error('💥 토큰 발급 중 오류 발생:', error);
       }
+      // 토큰 발급 시도 완료 시점에 ready true
+      setReady(true);
     };
 
     // 소셜 로그인 후 리다이렉트된 경우에만 실행
     const urlParams = new URLSearchParams(location.search);
     const isSocialLoginComplete = urlParams.get('loginTokenKey');
 
     if (isSocialLoginComplete) {
-      // 토큰 발급 Promise를 저장
       tokenPromise.current = handleSocialLoginToken();
+    } else {
+      // 로그인 리다이렉트 경로가 아니어도 이미 토큰이 있을 수 있음 → 바로 ready
+      setReady(true);
     }
-  }, [location.pathname, location.search]);
+  }, [location.pathname, location.search, setReady]);
 
   // 토큰 발급 완료를 기다리는 함수 반환
   const waitForToken = useCallback(async (): Promise<void> => {

src/pages/feed/FollowerListPage.tsx

@@ -8,6 +8,7 @@ import type { UserProfileType } from '@/types/user';
 import { getFollowerList } from '@/api/users/getFollowerList';
 import { getFollowingList } from '@/api/users/getFollowingList';
 import type { FollowData } from '@/types/follow';
+import LoadingSpinner from '@/components/common/LoadingSpinner';
 
 const FollowerListPage = () => {
   const navigate = useNavigate();
@@ -16,6 +17,7 @@ const FollowerListPage = () => {
 
   // 상태 관리
   const [userList, setUserList] = useState<FollowData[]>([]);
+  const [totalCount, setTotalCount] = useState(0);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [retryCount, setRetryCount] = useState(0);
@@ -77,6 +79,14 @@ const FollowerListPage = () => {
 
         setNextCursor(response.data.nextCursor);
         setIsLast(response.data.isLast);
+        // 총합 카운트 설정 (API별 키 분기)
+        if (type === 'followerlist') {
+          const total = (response.data as { totalFollowerCount?: number }).totalFollowerCount;
+          if (typeof total === 'number') setTotalCount(total);
+        } else {
+          const total = (response.data as { totalFollowingCount?: number }).totalFollowingCount;
+          if (typeof total === 'number') setTotalCount(total);
+        }
         // setTotalCount(prev => prev + userData.length);
         setRetryCount(0);
       } catch (error) {
@@ -104,7 +114,7 @@ const FollowerListPage = () => {
       const windowHeight = window.innerHeight;
       const documentHeight = document.documentElement.scrollHeight;
 
-      if (scrollTop + windowHeight >= documentHeight - 200) {
+      if (scrollTop + windowHeight >= documentHeight - 100) {
         loadUserList(nextCursor);
       }
     };
@@ -118,27 +128,45 @@ const FollowerListPage = () => {
     loadUserList();
   }, [loadUserList]);
 
+  // 첫 페이지 높이가 뷰포트보다 작아 스크롤 이벤트가 발생하지 않는 경우 자동으로 다음 페이지를 프리페치
+  useEffect(() => {
+    const doc = document.documentElement;
+    const needsMore = doc.scrollHeight <= window.innerHeight + 100;
+    if (!loading && !isLast && !!nextCursor && needsMore) {
+      loadUserList(nextCursor);
+    }
+  }, [userList, loading, isLast, nextCursor, loadUserList]);
+
   return (
     <Wrapper>
       <TitleHeader leftIcon={<img src={leftArrow} />} onLeftClick={handleBackClick} title={title} />
-      <TotalBar>전체 {userList.length}</TotalBar>
-      <UserProfileList>
-        {userList.map((user, index) => (
-          <UserProfileItem
-            key={user.userId}
-            profileImageUrl={user.profileImageUrl}
-            nickname={user.nickname}
-            aliasName={user.aliasName}
-            aliasColor={user.aliasColor}
-            followerCount={user.followerCount}
-            userId={user.userId}
-            type={type as UserProfileType}
-            isFollowing={user.isFollowing}
-            isLast={index === userList.length - 1}
-            isMyself={user.isMyself}
-          />
-        ))}
-      </UserProfileList>
+      <TotalBar>전체 {totalCount}</TotalBar>
+      {loading && userList.length === 0 ? (
+        <LoadingSpinner size="medium" fullHeight={true} />
+      ) : (
+        <UserProfileList>
+          {userList.map((user, index) => (
+            <UserProfileItem
+              key={user.userId}
+              profileImageUrl={user.profileImageUrl}
+              nickname={user.nickname}
+              aliasName={user.aliasName}
+              aliasColor={user.aliasColor}
+              followerCount={user.followerCount}
+              userId={user.userId}
+              type={type as UserProfileType}
+              isFollowing={user.isFollowing}
+              isLast={index === userList.length - 1}
+              isMyself={user.isMyself}
+            />
+          ))}
+          {loading && userList.length > 0 && (
+            <div style={{ display: 'flex', justifyContent: 'center', padding: '16px 0' }}>
+              <LoadingSpinner size="small" />
+            </div>
+          )}
+        </UserProfileList>
+      )}
     </Wrapper>
   );
 };
@@ -149,6 +177,7 @@ const Wrapper = styled.div`
   align-items: center;
   min-width: 320px;
   max-width: 767px;
+  min-height: 100vh;
   padding: 0 20px;
   margin: 0 auto;
   background-color: var(--color-black-main);
@@ -172,9 +201,9 @@ const TotalBar = styled.div`
 
 const UserProfileList = styled.div`
   width: 100%;
-  height: 100vh;
-  /* min-width: 320px;
-  max-width: 540px; */
+  /* 고정 헤더(TopBar) 영역을 제외한 최소 높이를 보장하여 하단 여백에도 배경이 비지 않도록 함 */
+  min-height: 100vh;
+  background-color: var(--color-black-main);
   padding-top: 105px;
   padding-bottom: 20px;
 `;

src/stores/useAuthReadyStore.ts

@@ -0,0 +1,11 @@
+import { create } from 'zustand';
+
+interface AuthReadyState {
+  isReady: boolean;
+  setReady: (ready: boolean) => void;
+}
+
+export const useAuthReadyStore = create<AuthReadyState>(set => ({
+  isReady: false,
+  setReady: (ready: boolean) => set({ isReady: ready }),
+}));