-
-
알림 {notificationCount}개
-
-
-
-
-
- {SORTED_ALERTS.length === 0 ? (
-
- ) : (
-
- {SORTED_ALERTS.map(alert => (
-
- ))}
-
- )}
+
+
+
+
알림 {notificationCount}개
+
- )}
+ {SORTED_ALERTS.length === 0 ? (
+
+ ) : (
+
+ {SORTED_ALERTS.map(alert => (
+
+ ))}
+
+ )}
+
);
}
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({
{`${shopName} (${DATE_RANGE.date} ${DATE_RANGE.startTime} ~
${DATE_RANGE.endTime}) 공고 지원이 `}
{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 = {
+
+// 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 (
);
}
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..37d562a 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,15 +28,16 @@ export default function Table({
limit,
offset,
onPageChange,
+ onStatusUpdate,
+ shopId,
+ noticeId,
}: TableProps) {
return (
-
-
-
- {userRole === 'employer' ? '신청자 목록' : '신청 내역'}
-
-
-
+ <>
+
+ {userRole === 'employer' ? '신청자 목록' : '신청 내역'}
+
+
@@ -39,7 +46,7 @@ export default function Table({
| 0 && index < headers.length - 1 && 'w-[245px]',
@@ -53,16 +60,26 @@ export default function Table({
|
{tableData.map(row => (
-
+
))}
-
+ {offset >= 2 && (
+
+ )}
-
+
);
}
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
(rowData.status as StatusType);
- const handleStatusChange = (id: string, newStatus: StatusType) => {
- setStatus(newStatus);
+ const [modalOpen, setModalOpen] = useState(false);
+ const [modalAction, setModalAction] = useState(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 (
-
- | {rowData.name} |
-
- {userRole === 'employee' ? (
- <>
- {`${date} ${startTime} ~ ${date} ${endTime} (${duration})`} |
- {rowData.hourlyPay} |
-
- ) : (
- <>
- {rowData.bio} |
- {rowData.phone} |
-
- )}
-
-
- |
-
+ <>
+
+ | {rowData.name} |
+
+ {userRole === 'employee' ? (
+ <>
+ {`${date} ${startTime} ~ ${date} ${endTime} (${duration})`} |
+ {rowData.hourlyPay} |
+
+ ) : (
+ <>
+ {rowData.bio} |
+ {rowData.phone} |
+
+ )}
+
+
+ {status === 'pending' && userRole === 'employer' ? (
+
+
+
+
+ ) : (
+
+ )}
+ |
+
+
+ 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/authProvider.tsx b/src/context/authProvider.tsx
index 2c13bd7..7b7af45 100644
--- a/src/context/authProvider.tsx
+++ b/src/context/authProvider.tsx
@@ -34,7 +34,7 @@ export const AuthContext = createContext(null);
const TOKEN_KEY = 'thejulge_token';
const USER_ID_KEY = 'thejulge_user_id';
const EXPIRES_KEY = 'thejulge_expires_at';
-const EXPIRES_DURATION_MS = 10 * 60 * 1000; // 10분
+const EXPIRES_DURATION_MS = 1000 * 60 * 1000; // 10분
/** storage helpers */
const isBrowser = () => typeof window !== 'undefined';
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;
+ addAlert: (alert: Alert) => void;
+ markAsRead: (id: string) => void;
+}
+
+const NotificationContext = createContext(undefined);
+
+export const NotificationProvider = ({ children }: { children: ReactNode }) => {
+ const [alerts, setAlerts] = useState([]);
+
+ 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 (
+
+ {children}
+
+ );
+};
+
+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..a927a83 100644
--- a/src/context/userApplicationsProvider.tsx
+++ b/src/context/userApplicationsProvider.tsx
@@ -1,4 +1,4 @@
-// context/UserApplicationsProvider.tsx
+
import { getAllUserApplications, postApplication, putApplication } from '@/api/applications';
import useAuth from '@/hooks/useAuth';
import { ApiResponse } from '@/types/api';
@@ -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..8746d63 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 } 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(null);
- const [time, setTime] = useState(null);
+ const [time, setTime] = useState(null);
const [workhour, setWorkhour] = useState();
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,7 +98,7 @@ const EmployerNoticeEditPage = () => {
if (!user?.shop) return null;
return (
-
| 
| 
| 
|
+| :------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------: |
+| 위소현(팀장)