diff --git a/src/api/applications.ts b/src/api/applications.ts
index aaf4d33..7ba0bf8 100644
--- a/src/api/applications.ts
+++ b/src/api/applications.ts
@@ -31,7 +31,8 @@ export async function getAllUserApplications({
 
 // 가게의 특정 공고 지원 등록
 export const postApplication = async (shopId: string, noticeId: string) => {
-  await axiosInstance.post(`/shops/${shopId}/notices/${noticeId}/applications`);
+  const res = await axiosInstance.post(`/shops/${shopId}/notices/${noticeId}/applications`);
+  return res.data;
 };
 
 // 가게의 특정 공고 지원 취소
diff --git a/src/components/ui/badge/StatusBadge.tsx b/src/components/ui/badge/StatusBadge.tsx
index 53bb9fd..4015d21 100644
--- a/src/components/ui/badge/StatusBadge.tsx
+++ b/src/components/ui/badge/StatusBadge.tsx
@@ -1,37 +1,12 @@
-import { Button } from '@/components/ui/button';
-import { UserRole } from '@/types/user';
 import Badge from './Badge';
 
 export type StatusType = 'pending' | 'accepted' | 'rejected';
 
 interface StatusBadgeProps {
   status: StatusType;
-  userRole: UserRole;
-  onApprove: () => void;
-  onReject: () => void;
-  applicationId: string;
-  onStatusChange: (id: string, status: StatusType) => void;
 }
 
-export default function StatusBadge({
-  status,
-  userRole: variant,
-  onApprove,
-  onReject,
-}: StatusBadgeProps) {
-  if (status === 'pending' && variant === 'employer') {
-    return (
-      <div className='flex w-1/2 flex-col gap-2 md:flex-row'>
-        <Button variant='reject' size='md' className='whitespace-nowrap' onClick={onReject}>
-          거절하기
-        </Button>
-        <Button variant='approve' size='md' className='whitespace-nowrap' onClick={onApprove}>
-          승인하기
-        </Button>
-      </div>
-    );
-  }
-
+export default function StatusBadge({ status }: StatusBadgeProps) {
   const BADGE_CLASS =
     status === 'pending'
       ? 'bg-green-100 text-green-200'
diff --git a/src/components/ui/badge/statusbadge.stories.tsx b/src/components/ui/badge/statusbadge.stories.tsx
index 1e90ac0..f78403e 100644
--- a/src/components/ui/badge/statusbadge.stories.tsx
+++ b/src/components/ui/badge/statusbadge.stories.tsx
@@ -15,7 +15,6 @@ type Story = StoryObj<typeof StatusBadge>;
 export const Accept: Story = {
   args: {
     status: 'accepted',
-    userRole: 'employer',
   },
 };
 
@@ -23,7 +22,6 @@ export const Accept: Story = {
 export const Reject: Story = {
   args: {
     status: 'rejected',
-    userRole: 'employer',
   },
 };
 
@@ -31,7 +29,6 @@ export const Reject: Story = {
 export const PendingEmployee: Story = {
   args: {
     status: 'pending',
-    userRole: 'employee',
   },
 };
 
@@ -39,8 +36,5 @@ export const PendingEmployee: Story = {
 export const PendingEmployer: Story = {
   args: {
     status: 'pending',
-    userRole: 'employer',
-    onApprove: () => alert('승인!'),
-    onReject: () => alert('거절!'),
   },
 };
diff --git a/src/components/ui/input/TimeInput.tsx b/src/components/ui/input/TimeInput.tsx
index 3e35439..d0689d1 100644
--- a/src/components/ui/input/TimeInput.tsx
+++ b/src/components/ui/input/TimeInput.tsx
@@ -2,15 +2,15 @@ import TimeSelector from '@/components/ui/calendar/TimeSelector';
 import useClickOutside from '@/hooks/useClickOutside';
 import useToggle from '@/hooks/useToggle';
 import { formatTime } from '@/lib/utils/dateFormatter';
-import { Period } from '@/types/calendar';
+import { Period, TimeValue } from '@/types/calendar';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import Input from './input';
 
 interface TimeInputProps {
   label?: string;
   requiredMark?: boolean;
-  value?: Date | null;
-  onChange?: (value: Date | null) => void;
+  value?: TimeValue | null;
+  onChange?: (value: TimeValue | null) => void;
 }
 
 export default function TimeInput({
@@ -20,23 +20,20 @@ export default function TimeInput({
   onChange,
 }: TimeInputProps) {
   const { isOpen, toggle, setClose } = useToggle(false);
-  const [period, setPeriod] = useState<Period>('오전');
-  const [selectedTime, setSelectedTime] = useState<Date | null>(null);
-  const [inputValue, setInputValue] = useState(''); // typing 사용
-
+  const [selectedTime, setSelectedTime] = useState<TimeValue | null>(null);
+  const [inputValue, setInputValue] = useState('');
   const wrapperRef = useRef<HTMLDivElement>(null);
 
   useClickOutside(wrapperRef, () => {
     if (isOpen) setClose();
   });
 
-  // 시간 업데이트 중앙 관리
   const updateTime = useCallback(
-    (date: Date, selectedPeriod: Period) => {
-      setPeriod(selectedPeriod);
-      setSelectedTime(date);
+    (date: Date, period: Period) => {
+      const newTime: TimeValue = { date, period };
+      setSelectedTime(newTime);
       setInputValue(formatTime(date));
-      onChange?.(date);
+      onChange?.(newTime);
     },
     [onChange]
   );
@@ -44,76 +41,80 @@ export default function TimeInput({
   useEffect(() => {
     if (value) {
       setSelectedTime(value);
-      setInputValue(formatTime(value));
+      setInputValue(formatTime(value.date));
     } else {
       setSelectedTime(null);
       setInputValue('');
     }
   }, [value]);
 
-  // 시간 선택
   const handleTimeSelect = useCallback(
-    (value: string) => {
-      const parts = value.split(' ');
-      const periodValue = parts.length === 2 ? (parts[0] as Period) : period;
-      const timePart = parts.length === 2 ? parts[1] : parts[0];
-
-      const [hours, minutes] = timePart.split(':').map(Number);
+    (timeString: string) => {
+      const parts: string[] = timeString.split(' ');
+      const period: Period = parts.length === 2 ? (parts[0] as Period) : '오전';
+      const [hoursStr, minutesStr] = parts[1].split(':');
+      const hours = Number(hoursStr);
+      const minutes = Number(minutesStr);
       if (isNaN(hours) || isNaN(minutes)) return;
 
-      const baseDate = selectedTime ?? new Date();
-      const newDate = new Date(baseDate);
-      newDate.setHours(hours, minutes);
-
-      updateTime(newDate, periodValue);
+      const baseDate: Date = selectedTime?.date ?? new Date();
+      const date = new Date(baseDate);
+      const hours24 =
+        period === '오후' && hours !== 12
+          ? hours + 12
+          : period === '오전' && hours === 12
+            ? 0
+            : hours;
+      date.setHours(hours24, minutes);
+
+      updateTime(date, period);
     },
-    [selectedTime, updateTime, period]
+    [selectedTime, updateTime]
   );
 
-  // typing
   const handleTimeInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const newTypedNumbers = e.target.value.replace(/[^0-9]/g, '');
-    const typedLength = newTypedNumbers.length;
+    const digitsOnly: string = e.target.value.replace(/[^0-9]/g, '');
+    setInputValue(digitsOnly);
 
-    setInputValue(newTypedNumbers);
+    if (digitsOnly.length < 3) return;
 
-    if (typedLength > 4) {
-      const hours = parseInt(newTypedNumbers.slice(0, typedLength - 2));
-
-      if (isNaN(hours) || hours < 1 || hours > 12) {
-        setInputValue(newTypedNumbers.slice(-1));
-        return;
-      }
-    }
+    const hoursNum: number = parseInt(digitsOnly.slice(0, digitsOnly.length - 2), 10);
+    const minutesNum: number = parseInt(digitsOnly.slice(-2), 10);
 
-    if (typedLength < 3) return;
+    if (isNaN(hoursNum) || isNaN(minutesNum)) return;
+    if (!(hoursNum >= 1 && hoursNum <= 12 && minutesNum >= 0 && minutesNum < 60)) return;
 
-    const hoursTyped = newTypedNumbers.slice(0, typedLength - 2);
-    const minutesTyped = newTypedNumbers.slice(-2);
+    const period: Period = selectedTime?.period ?? (hoursNum >= 12 ? '오후' : '오전');
 
-    const h = parseInt(hoursTyped);
-    const m = parseInt(minutesTyped);
+    const baseDate: Date = selectedTime?.date ?? new Date();
+    const date = new Date(baseDate);
+    const hours24 =
+      period === '오후' && hoursNum !== 12
+        ? hoursNum + 12
+        : period === '오전' && hoursNum === 12
+          ? 0
+          : hoursNum;
+    date.setHours(hours24, minutesNum);
 
-    if (!isNaN(h) && !isNaN(m)) {
-      if (!(h >= 1 && h <= 12 && m >= 0 && m < 60)) return;
-
-      const periodValue: Period = h > 12 ? '오후' : '오전';
-
-      const baseDate = selectedTime ?? new Date();
-      const newDate = new Date(baseDate);
-      newDate.setHours(h, m);
-
-      updateTime(newDate, periodValue);
-    }
+    updateTime(date, period);
   };
 
-  const hours = selectedTime ? String(selectedTime.getHours() % 12 || 12).padStart(2, '0') : '12';
-  const minutes = selectedTime ? String(selectedTime.getMinutes()).padStart(2, '0') : '00';
+  const hoursDisplay: string = selectedTime
+    ? String(selectedTime.date.getHours() % 12 || 12).padStart(2, '0')
+    : '12';
+  const minutesDisplay: string = selectedTime
+    ? String(selectedTime.date.getMinutes()).padStart(2, '0')
+    : '00';
+  const periodDisplay: Period = selectedTime
+    ? selectedTime.date.getHours() >= 12
+      ? '오후'
+      : '오전'
+    : '오전';
 
   return (
     <div ref={wrapperRef} className='relative'>
       <Input
-        value={inputValue ? `${period} ${inputValue}` : ''}
+        value={inputValue ? `${periodDisplay} ${hoursDisplay}:${minutesDisplay}` : ''}
         label={label}
         requiredMark={requiredMark}
         placeholder='오전 12:30'
@@ -122,14 +123,16 @@ export default function TimeInput({
       />
 
       <div
-        className={`overflow-hidden transition-all duration-300 ${isOpen ? 'mt-2 max-h-[300px] opacity-100' : 'max-h-0 opacity-0'} `}
+        className={`overflow-hidden transition-all duration-300 ${
+          isOpen ? 'mt-2 max-h-[300px] opacity-100' : 'max-h-0 opacity-0'
+        }`}
       >
         <TimeSelector
           onSelect={handleTimeSelect}
-          period={period}
-          hours={hours}
-          minutes={minutes}
-          value={selectedTime ? formatTime(selectedTime) : ''}
+          period={periodDisplay}
+          hours={hoursDisplay}
+          minutes={minutesDisplay}
+          value={selectedTime ? formatTime(selectedTime.date) : ''}
         />
       </div>
     </div>
diff --git a/src/components/ui/modal/notification/Notification.tsx b/src/components/ui/modal/notification/Notification.tsx
index 42bded5..0930dfa 100644
--- a/src/components/ui/modal/notification/Notification.tsx
+++ b/src/components/ui/modal/notification/Notification.tsx
@@ -1,4 +1,5 @@
 import Icon from '@/components/ui/icon/icon';
+import { cn } from '@/lib/utils/cn';
 import { Notice } from '@/types/notice';
 import { Shop } from '@/types/shop';
 import { useState } from 'react';
@@ -21,7 +22,6 @@ interface NotificationProps {
 }
 
 export default function Notification({ alerts, onRead, isOpen, onClose }: NotificationProps) {
-  // 제어 모드인지 판별
   const controlled = typeof isOpen === 'boolean';
   const [internalOpen, setInternalOpen] = useState(false);
   const open = controlled ? (isOpen as boolean) : internalOpen;
@@ -32,41 +32,51 @@ export default function Notification({ alerts, onRead, isOpen, onClose }: Notifi
 
   return (
     <>
-     {/* 제어 모드가 아니면 내부 트리거 버튼을 노출 */}
       {!controlled && (
         <div className='relative flex justify-end'>
           <button
             onClick={() => setInternalOpen(v => !v)}
             className={`${open ? 'hidden' : 'block'} relative md:block`}
           >
-            <Icon iconName='notificationOn' iconSize='sm' ariaLabel='알림' />
+            <Icon
+              iconName='notificationOn'
+              iconSize='sm'
+              ariaLabel='알림'
+              className={notificationCount > 0 ? 'bg-red-400' : 'bg-gray-400'}
+            />
           </button>
         </div>
       )}
-      {open && (
-        <div className='flex min-h-screen flex-col gap-4 bg-red-100 px-5 py-10'>
-          <div className='flex justify-between'>
-            <div className='text-[20px] font-bold'>알림 {notificationCount}개</div>
-            <div>
-              <button onClick={() => (controlled ? onClose?.() : setInternalOpen(false))}>
-                <Icon iconName='close' iconSize='lg' ariaLabel='닫기' />
-              </button>
-            </div>
+
+      <div
+        className={cn(
+          'scroll-bar mt-2 w-full overflow-hidden bg-red-100 transition-all duration-300',
+          open ? 'max-h-[700px] px-5 py-6 opacity-100' : 'max-h-0 opacity-0',
+          'md:absolute md:right-0 md:top-1 md:max-h-[400px] md:rounded-xl md:border md:border-gray-300 md:py-6',
+          'fixed left-0 top-0 z-50 h-screen'
+        )}
+      >
+        <div className='flex justify-between'>
+          <div className='text-[20px] font-bold'>알림 {notificationCount}개</div>
+          <div>
+            <button onClick={() => (controlled ? onClose?.() : setInternalOpen(false))}>
+              <Icon iconName='close' iconSize='lg' ariaLabel='닫기' />
+            </button>
           </div>
-          <div></div>
-          {SORTED_ALERTS.length === 0 ? (
-            <div className='flex flex-1 items-center justify-center'>
-              <p>알림이 없습니다.</p>
-            </div>
-          ) : (
-            <div className='flex flex-col items-center gap-4'>
-              {SORTED_ALERTS.map(alert => (
-                <NotificationMessage key={alert.id} alert={alert} onRead={onRead} />
-              ))}
-            </div>
-          )}
         </div>
-      )}
+        <div></div>
+        {SORTED_ALERTS.length === 0 ? (
+          <div className='flex flex-1 items-center justify-center'>
+            <p className='font-medium'>알림이 없습니다.</p>
+          </div>
+        ) : (
+          <div className='flex w-full flex-col items-center gap-4 overflow-y-auto md:max-h-[368px] md:flex-1'>
+            {SORTED_ALERTS.map(alert => (
+              <NotificationMessage key={alert.id} alert={alert} onRead={onRead} />
+            ))}
+          </div>
+        )}
+      </div>
     </>
   );
 }
diff --git a/src/components/ui/modal/notification/NotificationMessage.tsx b/src/components/ui/modal/notification/NotificationMessage.tsx
index d0e97a9..c36e517 100644
--- a/src/components/ui/modal/notification/NotificationMessage.tsx
+++ b/src/components/ui/modal/notification/NotificationMessage.tsx
@@ -37,16 +37,16 @@ export default function NotificationMessage({
           <ResultBadge result={result} />
           <p
             className={clsx('text-sm', {
-              'text-[var(--gray-400)]': read,
+              'text-gray-400': read,
             })}
           >
             {`${shopName} (${DATE_RANGE.date} ${DATE_RANGE.startTime} ~ 
             ${DATE_RANGE.endTime}) 공고 지원이 `}
             <span
               className={clsx({
-                'text-[var(--gray-500)]': read,
-                'text-[var(--blue-200)]': !read && result === 'accepted',
-                'text-[var(--red-500)]': !read && result === 'rejected',
+                'text-gray-400': read,
+                'text-blue-200': !read && result === 'accepted',
+                'text-red-400': !read && result === 'rejected',
               })}
             >
               {RESULT_TEXT}
diff --git a/src/components/ui/modal/notification/ResultBadge.tsx b/src/components/ui/modal/notification/ResultBadge.tsx
index 9ba4d06..df64c37 100644
--- a/src/components/ui/modal/notification/ResultBadge.tsx
+++ b/src/components/ui/modal/notification/ResultBadge.tsx
@@ -1,19 +1,26 @@
 import Icon from '@/components/ui/icon/icon';
 
 export interface ResultBadgeProps {
-  result: 'accepted' | 'rejected';
+  result: 'accepted' | 'rejected' | null;
 }
-const ICON_COLORS: Record<ResultBadgeProps['result'], string> = {
+
+// null은 객체에서 빼고, default 색상을 따로 둔다
+const ICON_COLORS: Record<'accepted' | 'rejected', string> = {
   accepted: 'bg-blue-200',
   rejected: 'bg-red-400',
 };
+const DEFAULT_COLOR = 'bg-gray-300';
 
 export default function ResultBadge({ result }: ResultBadgeProps) {
+  const color = result ? ICON_COLORS[result] : DEFAULT_COLOR;
+
   return (
     <Icon
       iconName='resultBadge'
-      className={`${ICON_COLORS[result]} h-[5px] w-[5px]`}
-      ariaLabel={result === 'accepted' ? '승인 상태' : '거절 상태'}
+      className={`${color} h-[5px] w-[5px]`}
+      ariaLabel={
+        result === 'accepted' ? '승인 상태' : result === 'rejected' ? '거절 상태' : '대기 상태'
+      }
     />
   );
 }
diff --git a/src/components/ui/table/Table.stories.tsx b/src/components/ui/table/Table.stories.tsx
index 04c4e95..f9f139b 100644
--- a/src/components/ui/table/Table.stories.tsx
+++ b/src/components/ui/table/Table.stories.tsx
@@ -176,6 +176,9 @@ function TableWithTestApi({ userRole }: { userRole: UserRole }) {
       limit={limit}
       offset={offset}
       onPageChange={setOffset}
+      onStatusUpdate={() => {}}
+      shopId=''
+      noticeId=''
     />
   );
 }
diff --git a/src/components/ui/table/Table.tsx b/src/components/ui/table/Table.tsx
index ad1016d..c0a3a61 100644
--- a/src/components/ui/table/Table.tsx
+++ b/src/components/ui/table/Table.tsx
@@ -1,4 +1,5 @@
 import { Pagination } from '@/components/ui';
+import { StatusType } from '@/components/ui/badge/StatusBadge';
 import { TableRowProps } from '@/components/ui/table/TableRowProps';
 import { cn } from '@/lib/utils/cn';
 import { UserRole } from '@/types/user';
@@ -12,6 +13,11 @@ interface TableProps {
   limit: number;
   offset: number;
   onPageChange: (newOffset: number) => void;
+  onStatusUpdate: (id: string, newStatus: StatusType, shopId?: string, noticeId?: string) => void;
+  shopId?: string;
+  noticeId?: string;
+  applyNotice?: (shopId: string, noticeId: string) => void;
+  cancelNotice?: (shopId: string, noticeId: string) => void;
 }
 
 export default function Table({
@@ -22,6 +28,9 @@ export default function Table({
   limit,
   offset,
   onPageChange,
+  onStatusUpdate,
+  shopId,
+  noticeId,
 }: TableProps) {
   return (
     <div className='py-[60px]'>
@@ -53,7 +62,15 @@ export default function Table({
             </thead>
             <tbody>
               {tableData.map(row => (
-                <TableRow key={row.id} {...row} rowData={row} userRole={userRole} />
+                <TableRow
+                  key={row.id}
+                  {...row}
+                  rowData={row}
+                  userRole={userRole}
+                  shopId={shopId}
+                  noticeId={noticeId}
+                  onStatusUpdate={onStatusUpdate}
+                />
               ))}
             </tbody>
           </table>
diff --git a/src/components/ui/table/TableRow.tsx b/src/components/ui/table/TableRow.tsx
index af17530..7e80861 100644
--- a/src/components/ui/table/TableRow.tsx
+++ b/src/components/ui/table/TableRow.tsx
@@ -1,6 +1,9 @@
 import { StatusBadge } from '@/components/ui/badge';
 import { StatusType } from '@/components/ui/badge/StatusBadge';
+import { Button } from '@/components/ui/button';
+import { Modal } from '@/components/ui/modal';
 import { TableRowProps } from '@/components/ui/table/TableRowProps';
+import axiosInstance from '@/lib/axios';
 import { cn } from '@/lib/utils/cn';
 import { getTime } from '@/lib/utils/dateFormatter';
 import { UserRole } from '@/types/user';
@@ -9,47 +12,104 @@ import { useState } from 'react';
 interface TableTypeVariant {
   rowData: TableRowProps;
   userRole: UserRole;
+  onStatusUpdate: (id: string, newStatus: StatusType) => void;
+  shopId?: string;
+  noticeId?: string;
 }
 
 const TD_BASE = 'border-b border-r px-3 py-5 text-base gap-3 md:border-r-0';
 const TD_STATUS = 'border-b px-2 py-[9px]';
 
-export default function TableRow({ rowData, userRole: userRole }: TableTypeVariant) {
+export default function TableRow({ rowData, userRole, onStatusUpdate }: TableTypeVariant) {
   const { date, startTime, endTime, duration } = getTime(rowData.startsAt, rowData.workhour);
   const [status, setStatus] = useState<StatusType>(rowData.status as StatusType);
 
-  const handleStatusChange = (id: string, newStatus: StatusType) => {
-    setStatus(newStatus);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [modalAction, setModalAction] = useState<StatusType | null>(null);
+
+  const handleClick = (action: StatusType) => {
+    setModalAction(action);
+    setModalOpen(true);
   };
 
-  const handleApprove = () => setStatus('accepted');
-  const handleReject = () => setStatus('rejected');
+  if (!rowData.shopId || !rowData.noticeId) {
+    alert('잘못된 신청 정보입니다.');
+    return;
+  }
+
+  const handleStatusChange = async () => {
+    if (!modalAction) return;
+
+    try {
+      await axiosInstance.put(
+        `/shops/${rowData.shopId}/notices/${rowData.noticeId}/applications/${rowData.id}`,
+        { status: modalAction }
+      );
+
+      setStatus(modalAction);
+
+      onStatusUpdate(rowData.id, modalAction);
+    } catch (error) {
+      alert(error instanceof Error ? error.message : '상태 변경 실패');
+    } finally {
+      setModalOpen(false);
+      setModalAction(null);
+    }
+  };
 
   return (
-    <tr className='text-left'>
-      <td className={cn(TD_BASE, 'sticky left-0 z-10 bg-white')}>{rowData.name}</td>
-
-      {userRole === 'employee' ? (
-        <>
-          <td className={TD_BASE}>{`${date} ${startTime} ~ ${date} ${endTime} (${duration})`}</td>
-          <td className={TD_BASE}>{rowData.hourlyPay}</td>
-        </>
-      ) : (
-        <>
-          <td className={TD_BASE}>{rowData.bio}</td>
-          <td className={TD_BASE}>{rowData.phone}</td>
-        </>
-      )}
-      <td className={TD_STATUS}>
-        <StatusBadge
-          applicationId={rowData.id}
-          status={status}
-          userRole={userRole}
-          onStatusChange={handleStatusChange}
-          onApprove={handleApprove}
-          onReject={handleReject}
-        />
-      </td>
-    </tr>
+    <>
+      <tr className='text-left'>
+        <td className={cn(TD_BASE, 'sticky left-0 z-10 bg-white')}>{rowData.name}</td>
+
+        {userRole === 'employee' ? (
+          <>
+            <td className={TD_BASE}>{`${date} ${startTime} ~ ${date} ${endTime} (${duration})`}</td>
+            <td className={TD_BASE}>{rowData.hourlyPay}</td>
+          </>
+        ) : (
+          <>
+            <td className={TD_BASE}>{rowData.bio}</td>
+            <td className={TD_BASE}>{rowData.phone}</td>
+          </>
+        )}
+
+        <td className={TD_STATUS}>
+          {status === 'pending' && userRole === 'employer' ? (
+            <div className='flex gap-2'>
+              <Button
+                variant='reject'
+                size='md'
+                className='whitespace-nowrap'
+                onClick={() => handleClick('rejected')}
+              >
+                거절하기
+              </Button>
+              <Button
+                variant='approve'
+                size='md'
+                className='whitespace-nowrap'
+                onClick={() => handleClick('accepted')}
+              >
+                승인하기
+              </Button>
+            </div>
+          ) : (
+            <StatusBadge status={status} />
+          )}
+        </td>
+      </tr>
+
+      <Modal
+        open={modalOpen}
+        onClose={() => setModalOpen(false)}
+        variant='warning'
+        title={`신청을 ${modalAction === 'accepted' ? '승인' : '거절'}하시겠어요?`}
+        primaryText='확인'
+        secondaryText='취소'
+        onPrimary={handleStatusChange}
+        onSecondary={() => setModalOpen(false)}
+      />
+    </>
   );
 }
diff --git a/src/components/ui/table/TableRowProps.tsx b/src/components/ui/table/TableRowProps.tsx
index 5375c61..6205358 100644
--- a/src/components/ui/table/TableRowProps.tsx
+++ b/src/components/ui/table/TableRowProps.tsx
@@ -7,4 +7,7 @@ export type TableRowProps = {
   status: string | JSX.Element;
   bio: string;
   phone: string;
+  userId?: string;
+  shopId: string;
+  noticeId: string;
 };
diff --git a/src/context/notificationContext/index.tsx b/src/context/notificationContext/index.tsx
new file mode 100644
index 0000000..dc30b3c
--- /dev/null
+++ b/src/context/notificationContext/index.tsx
@@ -0,0 +1,42 @@
+import { Alert } from '@/components/ui/modal/notification/Notification';
+import axiosInstance from '@/lib/axios';
+import { createContext, ReactNode, useContext, useState } from 'react';
+
+interface NotificationContextType {
+  alerts: Alert[];
+  fetchAlerts: () => Promise<void>;
+  addAlert: (alert: Alert) => void;
+  markAsRead: (id: string) => void;
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
+
+export const NotificationProvider = ({ children }: { children: ReactNode }) => {
+  const [alerts, setAlerts] = useState<Alert[]>([]);
+
+  const fetchAlerts = async () => {
+    const res = await axiosInstance.get('/users/me/alerts');
+    setAlerts(res.data);
+  };
+
+  const addAlert = (alert: Alert) => {
+    setAlerts(prev => [alert, ...prev]);
+  };
+
+  const markAsRead = (id: string) => {
+    setAlerts(prev => prev.map(a => (a.id === id ? { ...a, read: true } : a)));
+    axiosInstance.put(`/users/me/alerts/${id}`); // 서버에도 반영
+  };
+
+  return (
+    <NotificationContext.Provider value={{ alerts, fetchAlerts, addAlert, markAsRead }}>
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+export const useNotification = () => {
+  const context = useContext(NotificationContext);
+  if (!context) throw new Error('useNotification must be used within NotificationProvider');
+  return context;
+};
diff --git a/src/context/userApplicationsProvider.tsx b/src/context/userApplicationsProvider.tsx
index 157f930..2d0dad1 100644
--- a/src/context/userApplicationsProvider.tsx
+++ b/src/context/userApplicationsProvider.tsx
@@ -81,8 +81,13 @@ export const UserApplicationsProvider = ({ children }: { children: ReactNode })
         setError('로그인이 필요합니다.');
         return;
       }
-      await postApplication(shopId, noticeId);
-      await fetchAllApplications(); // 최신화 반영
+
+      try {
+        await postApplication(shopId, noticeId);
+        await fetchAllApplications(); // 최신화
+      } catch {
+        setError('신청 중 오류가 발생했습니다.');
+      }
     },
     [user, fetchAllApplications]
   );
diff --git a/src/pages/employer/shops/[shopId]/notices/[noticeId]/edit.tsx b/src/pages/employer/shops/[shopId]/notices/[noticeId]/edit.tsx
index 9917ef7..2d0c694 100644
--- a/src/pages/employer/shops/[shopId]/notices/[noticeId]/edit.tsx
+++ b/src/pages/employer/shops/[shopId]/notices/[noticeId]/edit.tsx
@@ -1,6 +1,8 @@
+import { Container, Wrapper } from '@/components/layout';
 import { Button, DateInput, Input, Modal, TimeInput } from '@/components/ui';
 import useAuth from '@/hooks/useAuth';
 import axiosInstance from '@/lib/axios';
+import { TimeValue } from '@/types/calendar';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
 
@@ -18,7 +20,7 @@ const EmployerNoticeEditPage = () => {
 
   const [wage, setWage] = useState('');
   const [date, setDate] = useState<Date | null>(null);
-  const [time, setTime] = useState<Date | null>(null);
+  const [time, setTime] = useState<TimeValue | null>(null);
   const [workhour, setWorkhour] = useState<number>();
   const [description, setDescription] = useState('');
 
@@ -45,8 +47,11 @@ const EmployerNoticeEditPage = () => {
         setDescription(notice.description);
 
         const startDate = new Date(notice.startsAt);
+        setTime({
+          date: startDate,
+          period: startDate.getHours() >= 12 ? '오후' : '오전',
+        });
         setDate(startDate);
-        setTime(startDate);
       } catch {
         alert('공고 정보를 불러오는 중 오류가 발생했습니다.');
         router.back();
@@ -65,7 +70,7 @@ const EmployerNoticeEditPage = () => {
     if (!user?.shop || !noticeId) return;
 
     const combinedDateTime = new Date(date);
-    combinedDateTime.setHours(time.getHours(), time.getMinutes(), 0, 0);
+    combinedDateTime.setHours(time.date.getHours(), time.date.getMinutes(), 0, 0);
 
     const payload: NoticePayload = {
       hourlyPay: Number(wage),
@@ -93,85 +98,82 @@ const EmployerNoticeEditPage = () => {
   if (!user?.shop) return null;
 
   return (
-    <div className='p-4'>
-      <p className='mb-4 text-3xl font-bold'>공고 편집</p>
-
-      <form onSubmit={handleSubmit} className='flex w-full flex-col gap-4'>
-        <div className='grid grid-cols-1 gap-4 tablet:grid-cols-2 tablet:gap-6'>
-          <Input
-            id='wage'
-            label='시급'
-            requiredMark
-            placeholder='12,500'
-            inputMode='numeric'
-            suffix='원'
-            value={wage}
-            onChange={e => setWage(e.currentTarget.value.replace(/\D+/g, ''))}
-          />
-
-          <Input
-            id='workhour'
-            label='업무 시간'
-            requiredMark
-            placeholder='4'
-            inputMode='numeric'
-            suffix='시간'
-            value={workhour?.toString() ?? ''}
-            onChange={e => setWorkhour(Number(e.currentTarget.value))}
-          />
-
-          <DateInput
-            label='시작 날짜'
-            requiredMark
-            value={date ?? undefined}
-            onChange={selectedDate =>
-              setDate(selectedDate instanceof Date ? selectedDate : new Date(selectedDate))
-            }
-          />
-
-          <TimeInput
-            label='시작 시간'
-            requiredMark
-            value={time ?? undefined}
-            onChange={(selectedTime: Date | null) => setTime(selectedTime)}
-          />
-        </div>
-
-        <div className='flex flex-col gap-2'>
-          <label htmlFor='description' className='text-sm font-medium'>
-            공고 설명
-          </label>
-          <textarea
-            id='description'
-            name='description'
-            className='rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400'
-            rows={4}
-            placeholder='공고에 대한 설명을 입력하세요.'
-            value={description}
-            onChange={e => setDescription(e.target.value)}
-          />
-        </div>
-
-        <Button
-          type='submit'
-          variant='primary'
-          size='lg'
-          className='mt-5 w-full'
-          disabled={!wage || !date || !time || !workhour || !description}
-        >
-          등록하기
-        </Button>
-      </form>
-
-      <Modal
-        open={modalOpen}
-        onClose={handleModalClose}
-        title='편집 완료'
-        variant='success'
-        primaryText='확인'
-        onPrimary={handleModalClose}
-      />
-    </div>
+    <Wrapper>
+      <Container isPage>
+        <p className='mb-4 text-3xl font-bold'>공고 편집</p>
+
+        <form onSubmit={handleSubmit} className='flex w-full flex-col gap-4'>
+          <div className='grid grid-cols-1 gap-4 tablet:grid-cols-2 tablet:gap-6'>
+            <Input
+              id='wage'
+              label='시급'
+              requiredMark
+              placeholder='12,500'
+              inputMode='numeric'
+              suffix='원'
+              value={wage}
+              onChange={e => setWage(e.currentTarget.value.replace(/\D+/g, ''))}
+            />
+
+            <Input
+              id='workhour'
+              label='업무 시간'
+              requiredMark
+              placeholder='4'
+              inputMode='numeric'
+              suffix='시간'
+              value={workhour?.toString() ?? ''}
+              onChange={e => setWorkhour(Number(e.currentTarget.value))}
+            />
+
+            <DateInput
+              label='시작 날짜'
+              requiredMark
+              value={date ?? undefined}
+              onChange={selectedDate =>
+                setDate(selectedDate instanceof Date ? selectedDate : new Date(selectedDate))
+              }
+            />
+
+            <TimeInput label='시작 시간' requiredMark value={time} onChange={setTime} />
+          </div>
+
+          <div className='flex flex-col gap-2'>
+            <label htmlFor='description' className='text-sm font-medium'>
+              공고 설명 <span className='text-red-500'>*</span>
+            </label>
+            <textarea
+              id='description'
+              name='description'
+              className='rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400'
+              rows={4}
+              placeholder='공고에 대한 설명을 입력하세요.'
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+            />
+          </div>
+
+          <Button
+            type='submit'
+            variant='primary'
+            size='lg'
+            className='mt-5 w-full'
+            disabled={!wage || !date || !time || !workhour || !description}
+          >
+            등록하기
+          </Button>
+        </form>
+
+        <Modal
+          open={modalOpen}
+          onClose={handleModalClose}
+          title='편집 완료'
+          variant='success'
+          primaryText='확인'
+          onPrimary={handleModalClose}
+        />
+      </Container>
+    </Wrapper>
   );
 };
 
diff --git a/src/pages/employer/shops/[shopId]/notices/[noticeId]/index.tsx b/src/pages/employer/shops/[shopId]/notices/[noticeId]/index.tsx
index 7e384db..38bae19 100644
--- a/src/pages/employer/shops/[shopId]/notices/[noticeId]/index.tsx
+++ b/src/pages/employer/shops/[shopId]/notices/[noticeId]/index.tsx
@@ -1,3 +1,4 @@
+import { Container, Wrapper } from '@/components/layout';
 import { Button, Modal, Notice, Table } from '@/components/ui';
 import { TableRowProps } from '@/components/ui/table/TableRowProps';
 import useAuth from '@/hooks/useAuth';
@@ -96,7 +97,6 @@ export const getServerSideProps: GetServerSideProps<{ notice: NoticeCard }> = as
 const EmployerNoticeDetailPage = ({ notice }: { notice: NoticeCard }) => {
   const headers = ['신청자', '소개', '전화번호', '상태'];
   const [data, setData] = useState<TableRowProps[]>([]);
-
   const [offset, setOffset] = useState(0);
   const limit = 5;
 
@@ -173,6 +173,9 @@ const EmployerNoticeDetailPage = ({ notice }: { notice: NoticeCard }) => {
             ? `${noticeItem.hourlyPay.toLocaleString()}원`
             : '정보 없음',
           status: app.item.status,
+          userId: userItem?.id,
+          shopId: notice.shopId,
+          noticeId: notice.id,
         };
       });
 
@@ -183,39 +186,50 @@ const EmployerNoticeDetailPage = ({ notice }: { notice: NoticeCard }) => {
   }, [notice.shopId, notice.id, offset, limit]);
 
   return (
-    <div>
-      <Notice notice={notice} className='py-10 tablet:py-16'>
-        <Button
-          size='xs38'
-          full
-          className='font-bold'
-          variant={'secondary'}
-          onClick={handleEditClick}
-          disabled={!canEdit}
-        >
-          공고 편집하기
-        </Button>
-        <Modal
-          open={modalOpen}
-          onClose={() => setModalOpen(false)}
-          variant='warning'
-          title={modal?.title ?? '유저 정보를 확인해주세요'}
-          primaryText={modal?.primaryText ?? '확인'}
-          onPrimary={modal?.onPrimary ?? (() => setModalOpen(false))}
-          secondaryText={modal?.secondaryText}
-          onSecondary={modal?.onSecondary}
-        />
-      </Notice>
-      <Table
-        headers={headers}
-        tableData={data}
-        userRole='employer'
-        total={data.length}
-        limit={limit}
-        offset={offset}
-        onPageChange={setOffset}
-      />
-    </div>
+    <Wrapper>
+      <Container isPage>
+        <div>
+          <Notice notice={notice} className='py-10 tablet:py-16'>
+            <Button
+              size='xs38'
+              full
+              className='font-bold'
+              variant={'secondary'}
+              onClick={handleEditClick}
+              disabled={!canEdit}
+            >
+              공고 편집하기
+            </Button>
+            <Modal
+              open={modalOpen}
+              onClose={() => setModalOpen(false)}
+              variant='warning'
+              title={modal?.title ?? '유저 정보를 확인해주세요'}
+              primaryText={modal?.primaryText ?? '확인'}
+              onPrimary={modal?.onPrimary ?? (() => setModalOpen(false))}
+              secondaryText={modal?.secondaryText}
+              onSecondary={modal?.onSecondary}
+            />
+          </Notice>
+          <Table
+            headers={headers}
+            tableData={data}
+            userRole='employer'
+            total={data.length}
+            limit={limit}
+            offset={offset}
+            onPageChange={setOffset}
+            onStatusUpdate={(id, newStatus) =>
+              setData(prev =>
+                prev.map(row => (row.id === id ? { ...row, status: newStatus } : row))
+              )
+            }
+            shopId={notice.shopId}
+            noticeId={notice.id}
+          />
+        </div>
+      </Container>
+    </Wrapper>
   );
 };
 
diff --git a/src/pages/employer/shops/[shopId]/notices/register/index.tsx b/src/pages/employer/shops/[shopId]/notices/register/index.tsx
index 3ec25b4..d4d98eb 100644
--- a/src/pages/employer/shops/[shopId]/notices/register/index.tsx
+++ b/src/pages/employer/shops/[shopId]/notices/register/index.tsx
@@ -1,14 +1,19 @@
+import { Container, Wrapper } from '@/components/layout';
 import { Button, DateInput, Input, Modal, TimeInput } from '@/components/ui';
 import useAuth from '@/hooks/useAuth';
 import axiosInstance from '@/lib/axios';
+import { cn } from '@/lib/utils/cn';
+import { TimeValue } from '@/types/calendar';
 import { useRouter } from 'next/router';
 import { useEffect, useState } from 'react';
+
 interface NoticeLoad {
   hourlyPay: number;
   startsAt: string;
   workhour: number;
   description: string;
 }
+
 const EmployerNoticeRegisterPage = () => {
   const router = useRouter();
   const { user } = useAuth();
@@ -19,6 +24,7 @@ const EmployerNoticeRegisterPage = () => {
   const [workhour, setWorkhour] = useState<number>();
   const [description, setDescription] = useState('');
 
+  const [pastTimeModal, setPastTimeModal] = useState(false);
   const [accessModal, setAccessModal] = useState(false);
   const [successModal, setSuccessModal] = useState(false);
   const [modalHandler, setModalHandler] = useState<() => void>(() => () => {});
@@ -33,9 +39,31 @@ const EmployerNoticeRegisterPage = () => {
     e.preventDefault();
     if (!date || !time || !wage || !workhour || !description) return;
     if (!user?.shop) return;
-    const combinedDateTime = new Date(date);
-    combinedDateTime.setHours(time.getHours(), time.getMinutes(), 0, 0);
-    const payload: NoticeLoad = {
+
+    const now = new Date();
+    const period = time.getHours() >= 12 ? '오후' : '오전';
+    const hours24 =
+      period === '오후' && time!.getHours() !== 12
+        ? time!.getHours() + 12
+        : period === '오전' && time!.getHours() === 12
+          ? 0
+          : time!.getHours();
+
+    const combinedDateTime = new Date(
+      date.getFullYear(),
+      date.getMonth(),
+      date.getDate(),
+      hours24,
+      time.getMinutes(),
+      0
+    );
+
+    if (combinedDateTime < now) {
+      setPastTimeModal(true);
+      return;
+    }
+
+    const noticeLoad: NoticeLoad = {
       hourlyPay: Number(wage),
       startsAt: combinedDateTime.toISOString(),
       workhour,
@@ -43,7 +71,7 @@ const EmployerNoticeRegisterPage = () => {
     };
 
     try {
-      const response = await axiosInstance.post(`/shops/${user.shop.item.id}/notices`, payload);
+      const response = await axiosInstance.post(`/shops/${user.shop.item.id}/notices`, noticeLoad);
       const noticeId = response.data.item.id;
 
       if (!noticeId) {
@@ -64,98 +92,118 @@ const EmployerNoticeRegisterPage = () => {
   };
 
   return (
-    <div className='p-4'>
-      <p className='font-weight-700 mb-4 text-3xl font-bold'>공고 등록</p>
-      <form onSubmit={handleSubmit} className='flex w-full flex-col gap-4'>
-        <div className='grid grid-cols-2 gap-6'>
-          <Input
-            id='wage'
-            label='시급'
-            requiredMark
-            placeholder='12,500'
-            inputMode='numeric'
-            suffix='원'
-            value={wage}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setWage(e.currentTarget.value.replace(/\D+/g, ''))
-            }
-          />
-          <Input
-            id='workhour'
-            label='업무 시간'
-            requiredMark
-            placeholder='4'
-            inputMode='numeric'
-            suffix='시간'
-            value={workhour?.toString() ?? ''}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-              setWorkhour(Number(e.currentTarget.value))
-            }
-          />
-          <DateInput
-            label='시작 날짜'
-            requiredMark
-            value={date ?? undefined}
-            onChange={selectedDate => {
-              if (selectedDate instanceof Date) {
-                setDate(selectedDate);
-              } else {
-                setDate(new Date(selectedDate));
+    <Wrapper>
+      <Container isPage>
+        <p className='mb-4 text-heading-l font-bold'>공고 등록</p>
+        <form onSubmit={handleSubmit} className='flex w-full flex-col gap-4'>
+          <div className='grid grid-cols-2 gap-6'>
+            <Input
+              id='wage'
+              label='시급'
+              requiredMark
+              placeholder='12,500'
+              inputMode='numeric'
+              suffix='원'
+              value={wage}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setWage(e.currentTarget.value.replace(/\D+/g, ''))
               }
-            }}
-          />
-          <TimeInput
-            label='시작 시간'
-            requiredMark
-            value={time ?? undefined}
-            onChange={(selectedTime: Date | null) => setTime(selectedTime)}
+            />
+            <Input
+              id='workhour'
+              label='업무 시간'
+              requiredMark
+              placeholder='4'
+              inputMode='numeric'
+              suffix='시간'
+              value={workhour?.toString() ?? ''}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setWorkhour(Number(e.currentTarget.value))
+              }
+            />
+            <DateInput
+              label='시작 날짜'
+              requiredMark
+              value={date ?? undefined}
+              onChange={selectedDate => {
+                setDate(selectedDate instanceof Date ? selectedDate : new Date(selectedDate));
+              }}
+            />
+            <TimeInput
+              label='시작 시간'
+              requiredMark
+              value={time ? { date: time, period: time.getHours() >= 12 ? '오후' : '오전' } : null}
+              onChange={(value: TimeValue | null) => {
+                if (value && value.date < new Date()) {
+                  setPastTimeModal(true);
+                  setTime(null);
+                  return;
+                }
+                setTime(value?.date ?? null);
+              }}
+            />
+          </div>
+          <div className='flex flex-col gap-2'>
+            <label
+              htmlFor='description'
+              className={cn('text-base text-black', 'leading-[var(--lh-body-l)]')}
+            >
+              공고 설명 <span className='text-red-500'>*</span>
+            </label>
+            <textarea
+              id='description'
+              name='description'
+              className='rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400'
+              rows={4}
+              placeholder='공고에 대한 설명을 입력하세요.'
+              value={description}
+              onChange={e => setDescription(e.target.value)}
+            />
+          </div>
+          <Button
+            type='submit'
+            variant='primary'
+            size='lg'
+            className='mt-5 w-full'
+            disabled={!wage || !date || !time || !workhour || !description || pastTimeModal}
+          >
+            등록하기
+          </Button>
+        </form>
+
+        {pastTimeModal && (
+          <Modal
+            open={pastTimeModal}
+            title='과거 시간은 선택할 수 없습니다'
+            variant='warning'
+            primaryText='확인'
+            onPrimary={() => setPastTimeModal(false)}
+            onClose={() => setPastTimeModal(false)}
           />
-        </div>
-        <div className='flex flex-col gap-2'>
-          <label htmlFor='description' className='text-sm font-medium'>
-            공고 설명
-          </label>
-          <textarea
-            id='description'
-            name='description'
-            className='rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400'
-            rows={4}
-            placeholder='공고에 대한 설명을 입력하세요.'
-            value={description}
-            onChange={e => setDescription(e.target.value)}
+        )}
+
+        {accessModal && (
+          <Modal
+            open={accessModal}
+            title='접근 권한이 없습니다'
+            variant='warning'
+            primaryText='확인'
+            onPrimary={() => router.replace('/')}
+            onClose={() => setAccessModal(false)}
           />
-        </div>
-        <Button
-          type='submit'
-          variant='primary'
-          size='lg'
-          className='mt-5 w-full'
-          disabled={!wage || !date || !time || !workhour || !description}
-        >
-          등록하기
-        </Button>
-      </form>
-
-      {accessModal && (
+        )}
+
         <Modal
-          open={accessModal}
-          title='접근 권한이 없습니다'
-          variant='warning'
+          open={successModal}
+          onClose={() => setSuccessModal(false)}
+          title='등록 완료'
+          variant='success'
           primaryText='확인'
-          onPrimary={() => router.replace('/')} // 확인 누르면 메인으로
-          onClose={() => setAccessModal(false)}
+          onPrimary={modalHandler}
         />
-      )}
-
-      <Modal
-        open={successModal}
-        onClose={() => setSuccessModal(false)}
-        title='등록 완료'
-        variant='success'
-        primaryText='확인'
-        onPrimary={modalHandler}
-      />
-    </div>
+      </Container>
+    </Wrapper>
   );
 };
+
 export default EmployerNoticeRegisterPage;
diff --git a/src/pages/my-profile/index.tsx b/src/pages/my-profile/index.tsx
index b28a440..afe28f2 100644
--- a/src/pages/my-profile/index.tsx
+++ b/src/pages/my-profile/index.tsx
@@ -2,6 +2,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 import { useEffect, useMemo, useState } from 'react';
+
 import Frame from '@/components/layout/frame/frame';
 import Button from '@/components/ui/button/button';
 import Table from '@/components/ui/table/Table';
@@ -21,6 +22,8 @@ export default function MyProfileDetailPage() {
   const [offset, setOffset] = useState(0);
   const limit = 5;
 
+  const [tableRows, setTableRows] = useState<TableRowProps[]>([]);
+
   // 프로필 비었는지 판단 (User | null 안전)
   function isProfileEmpty(u: User | null): boolean {
     const name = u?.name?.trim() ?? '';
@@ -49,6 +52,8 @@ export default function MyProfileDetailPage() {
         status,
         bio: '',
         phone: '',
+        shopId: a.shop.item.id,
+        noticeId: a.notice.item.id,
       };
     });
   }, [applications]);
@@ -73,6 +78,28 @@ export default function MyProfileDetailPage() {
 
   const pagedRows = useMemo(() => currentRows.slice(offset, offset + limit), [currentRows, offset]);
 
+  useEffect(() => {
+    const mappedRows: TableRowProps[] = applications.map(app => {
+      const a = app.item;
+      const status =
+        a.status === 'accepted' ? 'approved' : a.status === 'rejected' ? 'rejected' : 'pending';
+      return {
+        id: a.id,
+        name: a.shop.item.name,
+        hourlyPay: `${a.notice.item.hourlyPay.toLocaleString()}원`,
+        startsAt: a.notice.item.startsAt,
+        workhour: a.notice.item.workhour,
+        status,
+        bio: '',
+        phone: '',
+        shopId: a.shop.item.id,
+        noticeId: a.notice.item.id,
+      };
+    });
+
+    setTableRows(mappedRows);
+  }, [applications]);
+
   return (
     <main className='mx-auto w-full max-w-[1440px] py-6 tablet:py-8'>
       {/* 공통 컨테이너: Table과 좌측선/폭 동일 */}
@@ -186,15 +213,20 @@ export default function MyProfileDetailPage() {
                 href='/notices'
               />
             ) : (
-              <div className='mx-auto w-full lg:mx-auto lg:max-w-[1000px]'>
+              <div className='mx-auto w-full desktop:max-w-[964px]'>
                 <Table
                   headers={headers}
                   tableData={pagedRows}
                   userRole={userType}
-                  total={currentTotal}
+                  total={applications.length}
                   limit={limit}
                   offset={offset}
                   onPageChange={setOffset}
+                  onStatusUpdate={(id, newStatus) =>
+                    setTableRows(prev =>
+                      prev.map(row => (row.id === id ? { ...row, status: newStatus } : row))
+                    )
+                  }
                 />
               </div>
             )}
diff --git a/src/pages/notices/[shopId]/[noticeId]/index.tsx b/src/pages/notices/[shopId]/[noticeId]/index.tsx
index 9adae13..3b5582f 100644
--- a/src/pages/notices/[shopId]/[noticeId]/index.tsx
+++ b/src/pages/notices/[shopId]/[noticeId]/index.tsx
@@ -85,7 +85,7 @@ export const getServerSideProps: GetServerSideProps<{ notice: NoticeCard }> = as
 
 const NoticeDetail = ({ notice }: { notice: NoticeCard }) => {
   const { role, isLogin, user } = useAuth();
-  const { isApplied, applyNotice, cancelNotice, error } = useUserApplications();
+  const { isApplied, applyNotice, cancelNotice, error, refresh } = useUserApplications();
   const { showToast } = useToast();
   const { handleRecentNotice } = useRecentNotice(notice);
   const router = useRouter();
@@ -95,6 +95,8 @@ const NoticeDetail = ({ notice }: { notice: NoticeCard }) => {
   const status = getNoticeStatus(notice.closed, notice.startsAt);
   const canApply = useMemo(() => status === 'open', [status]);
 
+  const applied = isApplied(notice.id);
+
   // 공고 지원하기
   const handleApplyClick = useCallback(async () => {
     if (!canApply) return; // 지난공고 , 공고마감 무시
@@ -137,7 +139,7 @@ const NoticeDetail = ({ notice }: { notice: NoticeCard }) => {
 
     // 기존 신청 여부 확인
     // 이미 신청된 상태 -> 취소 여부 모달
-    if (isApplied(notice.id)) {
+    if (applied) {
       const items = APPLY_ITEMS.employee.cancel;
       setModal({
         ...items,
@@ -146,6 +148,7 @@ const NoticeDetail = ({ notice }: { notice: NoticeCard }) => {
           try {
             await cancelNotice(notice.id);
             showToast('신청이 취소되었습니다.');
+            await refresh();
           } catch {
             showToast(error ?? '신청 취소 중 오류가 발생했습니다.');
           } finally {
@@ -178,13 +181,26 @@ const NoticeDetail = ({ notice }: { notice: NoticeCard }) => {
 
     // isApplied는 내부에서 applications에만 의존하므로 배열에 제외
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [canApply, isLogin, role, user, notice, router, applyNotice, cancelNotice, showToast, error]);
+  }, [
+    canApply,
+    isLogin,
+    role,
+    user,
+    notice,
+    router,
+    applyNotice,
+    cancelNotice,
+    showToast,
+    error,
+    refresh,
+  ]);
 
   // 최근 본 공고
   useEffect(() => {
     handleRecentNotice();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+
   return (
     <div>
       <Notice notice={notice} className='py-10 tablet:py-16'>
diff --git a/src/types/calendar.ts b/src/types/calendar.ts
index e009fc0..9bff3f4 100644
--- a/src/types/calendar.ts
+++ b/src/types/calendar.ts
@@ -42,6 +42,11 @@ export type CalendarDay = {
 // Time Selector 관련
 export type Period = '오전' | '오후';
 
+export interface TimeValue {
+  date: Date;
+  period: Period;
+}
+
 export interface TimeSelectorProps {
   value?: string;
   period: Period;