🚀 chore: 3차 배포 develop → main #93

src/components/features/noticeList/noticeListSection.tsx

@@ -28,8 +28,8 @@ const NoticeListSection = ({ q, initialFilters }: NoticeListSectionProps) => {
         <NoticeListHeader q={q} />
         <NoticeListFilter
           filters={filters}
-          onSortChange={sort => fetchNotices({ sort })}
-          onFilterSubmit={filter => fetchNotices(filter)}
+          onSortChange={sort => fetchNotices({ sort, offset: 0 })}
+          onFilterSubmit={filter => fetchNotices({ ...filter, offset: 0 })}
         />
       </div>
       <NoticeList
@@ -40,15 +40,16 @@ const NoticeListSection = ({ q, initialFilters }: NoticeListSectionProps) => {
         isInitialized={isInitialized}
         reset={reset}
       />
-      {!isLoading && (
-        <Pagination
-          total={pagination.count}
-          limit={pagination.limit}
-          offset={pagination.offset}
-          onPageChange={next => fetchNotices({ offset: next })}
-          className='mt-8 tablet:mt-10'
-        />
-      )}
+      <div className='mt-8 tablet:mt-10 min-h-[40px]'>
+        {!isLoading && (
+          <Pagination
+            total={pagination.count}
+            limit={pagination.limit}
+            offset={pagination.offset}
+            onPageChange={next => fetchNotices({ offset: next })}
+          />
+        )}
+      </div>
     </Container>
   );
 };

src/components/layout/header/nav.tsx

@@ -1,11 +1,13 @@
+// src/components/layout/header/nav.tsx (예시 경로)
+import { getUserAlerts, markAlertRead } from '@/api/alerts';
 import { Icon } from '@/components/ui';
 import Notification, { type Alert } from '@/components/ui/modal/notification/Notification';
 import { useUserApplications } from '@/context/userApplicationsProvider';
 import useAuth from '@/hooks/useAuth';
 import { cn } from '@/lib/utils/cn';
 import { UserRole } from '@/types/user';
 import Link from 'next/link';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 interface NavItems {
   href: string;
@@ -22,44 +24,79 @@ const NAV_ITEMS: Record<UserRole, NavItems[]> = {
 };
 
 const Nav = () => {
-  const { role, isLogin, logout } = useAuth();
+  const { role, isLogin, logout, user } = useAuth();
   const { applications } = useUserApplications();
 
   const [open, setOpen] = useState(false);
-  // 읽음 처리한 알림 ID들 (간단 로컬 상태)
   const [readIds, setReadIds] = useState<Set<string>>(new Set());
+  const [apiAlerts, setApiAlerts] = useState<Alert[]>([]);
 
-  // 알바님 알림: 승인/거절만 표시
-  const alerts: Alert[] = useMemo(() => {
+  // 1) 서버 알림 불러오기 (사장님/알바 공통)
+  useEffect(() => {
+    if (!isLogin || !user?.id) {
+      setApiAlerts([]);
+      return;
+    }
+    (async () => {
+      try {
+        const res = await getUserAlerts(user.id, { offset: 0, limit: 50 });
+        const mapped: Alert[] = (res.items ?? []).map(({ item }) => ({
+          id: item.id,
+          createdAt: item.createdAt,
+          result: item.result,
+          read: item.read,
+          shop: { item: item.shop.item },
+          notice: { item: item.notice.item },
+        }));
+        setApiAlerts(mapped);
+      } catch {
+        setApiAlerts([]); // 실패해도 UI는 동작(직원 fallback)
+      }
+    })();
+  }, [isLogin, user?.id]);
+
+  // 2) (직원 전용) 지원내역 기반 fallback 알림
+  const fallbackAlertsForEmployee: Alert[] = useMemo(() => {
+    if (role !== 'employee') return [];
     return applications
       .filter(a => a.item.status !== 'pending')
       .map(a => ({
         id: a.item.id,
         createdAt: a.item.createdAt ?? new Date().toISOString(),
         result: a.item.status === 'accepted' ? 'accepted' : 'rejected',
-        // ▶ 읽음: 사용자가 메시지를 클릭했을 때만 true
         read: readIds.has(a.item.id),
         shop: { item: a.item.shop.item, href: `/shops/${a.item.shop.item.id}` },
         notice: { item: a.item.notice.item, href: `/notices/${a.item.notice.item.id}` },
       }));
-  }, [applications, readIds]);
+  }, [applications, role, readIds]);
+
+  // 3) 실제 표시할 알림: 서버 결과가 있으면 우선, 없으면(특히 직원) fallback
+  const alerts: Alert[] = useMemo(() => {
+    const base = apiAlerts.length > 0 ? apiAlerts : fallbackAlertsForEmployee;
+    return base.map(a => (readIds.has(a.id) ? { ...a, read: true } : a));
+  }, [apiAlerts, fallbackAlertsForEmployee, readIds]);
 
-  const handleRead = (id: string) => {
-    setReadIds(prev => {
-      const next = new Set(prev);
-      next.add(id);
-      return next;
-    });
+  const unreadCount = alerts.filter(a => !a.read).length;
+  const bellIcon: 'notificationOn' | 'notificationOff' =
+    open || unreadCount > 0 ? 'notificationOn' : 'notificationOff';
+  const bellColor = open || unreadCount > 0 ? 'bg-red-400' : 'bg-black';
+
+  // 알림 읽음 처리(서버 + 로컬 동기화)
+  const handleRead = async (id: string) => {
+    try {
+      if (user?.id) await markAlertRead(user.id, id);
+    } finally {
+      setReadIds(prev => {
+        const next = new Set(prev);
+        next.add(id);
+        return next;
+      });
+      setApiAlerts(prev => prev.map(a => (a.id === id ? { ...a, read: true } : a)));
+    }
   };
 
-  // role이 초기 undefined일 수 있어 방어
   const currentRole: UserRole = (role ?? 'guest') as UserRole;
 
-  // 아이콘은 "패널 열림 상태"로만 토글
-  const bellIcon: 'notificationOn' | 'notificationOff' = open
-    ? 'notificationOn'
-    : 'notificationOff';
-
   return (
     <nav className={cn('flex shrink-0 items-center gap-4 text-body-m font-bold', 'desktop:gap-10')}>
       {(NAV_ITEMS[currentRole] ?? []).map(({ href, label }) => (
@@ -68,6 +105,7 @@ const Nav = () => {
         </Link>
       ))}
 
+      {/* 로그인한 누구나 로그아웃 노출 */}
       {isLogin && (
         <button
           type='button'
@@ -79,34 +117,34 @@ const Nav = () => {
           로그아웃
         </button>
       )}
-      {role === 'employee' && (
+
+      {/* ✅ 사장님(employer)에게만 알림 버튼 숨김 */}
+      {isLogin && role !== 'employer' && (
         <div className='relative'>
-          {/* 알림 버튼: 토글 */}
           <button
             type='button'
             aria-label='알림 확인하기'
             aria-expanded={open}
             aria-controls='notification-panel'
-            onClick={() => setOpen(prev => !prev)}
+            onClick={() => setOpen(v => !v)}
             className='relative'
           >
-            {/* 일부 메모이제이션 대비 강제 리렌더 */}
             <Icon
               key={open ? 'bell-on' : 'bell-off'}
               iconName={bellIcon}
               iconSize='rg'
               bigScreenSize='md'
               ariaLabel='알림'
+              className={bellColor}
             />
           </button>
 
-          {/* 패널: 열릴 때만 렌더 + 사이즈 고정(피그마) */}
           {open && (
             <Notification
               alerts={alerts}
               onRead={handleRead}
               isOpen={open}
-              onClose={() => setOpen(false)} // 내부 닫기와 연동
+              onClose={() => setOpen(false)}
             />
           )}
         </div>

src/context/toastContext.tsx

@@ -1,3 +1,4 @@
+import { useRouter } from 'next/router';
 import { createContext, ReactNode, useContext, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
@@ -15,6 +16,7 @@ export const useToast = () => {
 
 const ToastProvider = ({ children }: { children: ReactNode }) => {
   const [message, setMessage] = useState<string | null>(null);
+  const router = useRouter();
 
   const showToast = (msg: string) => {
     setMessage(msg);
@@ -30,7 +32,18 @@ const ToastProvider = ({ children }: { children: ReactNode }) => {
     return () => {
       clearTimeout(timer);
     };
-  });
+  }, [message]);
+
+  useEffect(() => {
+    const handleRouteChange = () => {
+      setMessage(null);
+    };
+
+    router.events.on('routeChangeStart', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange);
+    };
+  }, [router]);
 
   const toastRoot = typeof window !== 'undefined' ? document.getElementById('toast-root') : null;
 
@@ -43,7 +56,7 @@ const ToastProvider = ({ children }: { children: ReactNode }) => {
             message ? (
               <div
                 role='alert'
-                className='fixed top-[30%] left-1/2 z-[1] -translate-x-1/2 rounded-[5px] bg-red-300 px-4 py-[10px] text-white'
+                className='fixed left-1/2 top-[30%] z-[1] -translate-x-1/2 rounded-[5px] bg-red-300 px-4 py-[10px] text-white'
               >
                 {message}
               </div>

src/pages/employer/shops/[shopId]/notices/register/index.tsx

@@ -133,12 +133,23 @@ const EmployerNoticeRegisterPage = () => {
             requiredMark
             value={time ? { date: time, period: time.getHours() >= 12 ? '오후' : '오전' } : null}
             onChange={(value: TimeValue | null) => {
-              if (value && value.date < new Date()) {
+              if (!value) return;
+
+              const selectedDate = date ?? new Date();
+
+              const hours = value.date.getHours();
+              const minutes = value.date.getMinutes();
+
+              const combinedDateTime = new Date(selectedDate);
+              combinedDateTime.setHours(hours, minutes, 0, 0);
+
+              if (combinedDateTime < new Date()) {
                 setPastTimeModal(true);
                 setTime(null);
                 return;
               }
-              setTime(value?.date ?? null);
+
+              setTime(combinedDateTime);
             }}
           />
         </div>

src/pages/my-profile/index.tsx

@@ -43,7 +43,7 @@ export default function MyProfileDetailPage() {
     return applications.map((app: ApiResponse<ApplicationItem>) => {
       const a = app.item;
       const status =
-        a.status === 'accepted' ? 'approved' : a.status === 'rejected' ? 'rejected' : 'pending';
+        a.status === 'accepted' ? 'accepted' : a.status === 'rejected' ? 'rejected' : 'pending';
 
       return {
         id: a.id,
@@ -187,7 +187,7 @@ export default function MyProfileDetailPage() {
               title='신청 내역'
               content='마음에 드는 공고를 찾아 지원해 보세요.'
               buttonText='공고 보러가기'
-              href='/notices'
+              href='/'
             />
           ) : (
             <Container as='section' isPage className='pt-0'>