-
- {attendanceTranslator[currentValue]}
+
+
+ {round} {attendanceTranslator[currentValue]}
+
- {generation === ACTIVITY_GENRATION && }
- {showOptions && generation === ACTIVITY_GENRATION && (
+ {showOptions && generation === ACTIVITY_GENERATION && (
{options.map((option) => (
onClickOption(option.value)}>
diff --git a/src/components/session/Select/style.ts b/src/components/session/Select/style.ts
index e6e3740f..a75e9d1f 100644
--- a/src/components/session/Select/style.ts
+++ b/src/components/session/Select/style.ts
@@ -1,4 +1,6 @@
import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fonts } from '@sopt-makers/fonts';
import zIndex from '@/utils/zIndex';
@@ -7,31 +9,50 @@ export const StSelectWrap = styled.div`
justify-content: center;
align-items: center;
`;
-export const StSelect = styled.button`
- background: none;
- font-size: 1.4rem;
- font-weight: 500;
- line-height: 2rem;
- color: ${({ theme }) => theme.color.grayscale.black40};
+export const StSelect = styled.button<{
+ value: ATTEND_STATUS | ATTEND_STATUS_KR;
+}>`
+ ${fonts.BODY_14_M}
display: flex;
align-items: center;
- gap: 1.2rem;
- transform: translateX(0.6rem);
+ padding: 3.5px 8px 3.5px 12px;
+ gap: 12px;
+ border-radius: 8px;
+ background-color: ${({ value }) => getAttendanceColor(value).background};
+ margin-right: 20px;
+
+ p {
+ color: ${({ value }) => getAttendanceColor(value).font};
+ }
+ svg {
+ margin-left: 12px;
+ }
+ path {
+ fill: ${({ value }) => getAttendanceColor(value).font};
+ }
`;
export const StOptions = styled.ul`
+ ${fonts.BODY_14_M}
+
z-index: ${zIndex.select};
position: absolute;
- transform: translateY(6.5rem);
- background-color: ${({ theme }) => theme.color.grayscale.realwhite};
- border-radius: 1rem;
- padding: 0.7rem;
- box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.1);
+ transform: translate(-1rem, 6.2rem);
+
+ background-color: ${colors.gray600};
+ box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
+ border-radius: 13px;
+ padding: 8px 6px;
animation: appear 0.6s;
+
li {
+ padding: 5px 21px 5px 9px;
+ border: none;
border-radius: 0.6rem;
- padding: 0.9rem 1.7rem;
+ color: ${colors.gray10};
+ background-color: ${colors.gray600};
+
&:hover {
- background-color: ${({ theme }) => theme.color.grayscale.gray20};
+ background-color: ${colors.gray500};
cursor: pointer;
}
}
@@ -39,11 +60,27 @@ export const StOptions = styled.ul`
@keyframes appear {
from {
opacity: 0;
- transform: translateY(5.5rem);
+ transform: translate(-1rem, 5.2rem);
}
to {
opacity: 1;
- transform: translateY(6.5rem);
+ transform: translate(-1rem, 6.2rem);
}
}
`;
+
+const getAttendanceColor = (value: ATTEND_STATUS | ATTEND_STATUS_KR) => {
+ switch (value) {
+ case 'ABSENT':
+ case '결석':
+ return { font: colors.red300, background: colors.red800 };
+ case 'TARDY':
+ case '지각':
+ return { font: colors.attention, background: colors.yellow900 };
+ case 'ATTENDANCE':
+ case '출석':
+ return { font: colors.information, background: colors.green900 };
+ default:
+ return { font: colors.gray10, background: colors.gray600 };
+ }
+};
diff --git a/src/data/sessionData.ts b/src/data/sessionData.ts
index 9fb30ce9..b223e694 100644
--- a/src/data/sessionData.ts
+++ b/src/data/sessionData.ts
@@ -18,10 +18,19 @@ export const subLectureInit: SubLecture = {
code: null,
};
-export const attendanceOptions: Array<{
- label: string;
- value: ATTEND_STATUS;
-}> = [
- { label: '출석', value: 'ATTENDANCE' },
- { label: '결석', value: 'ABSENT' },
-];
+export const attendanceOptions: Record<
+ string,
+ Array<{
+ label: string;
+ value: ATTEND_STATUS;
+ }>
+> = {
+ first: [
+ { label: '1차 출석', value: 'ATTENDANCE' },
+ { label: '1차 결석', value: 'ABSENT' },
+ ],
+ second: [
+ { label: '2차 출석', value: 'ATTENDANCE' },
+ { label: '2차 결석', value: 'ABSENT' },
+ ],
+};
diff --git a/src/hooks/useRecoilGenerationSSR.ts b/src/hooks/useRecoilGenerationSSR.ts
index 279f9b7e..695b4e2c 100644
--- a/src/hooks/useRecoilGenerationSSR.ts
+++ b/src/hooks/useRecoilGenerationSSR.ts
@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
import { useRecoilState } from 'recoil';
import { currentGenerationState } from '@/recoil/atom';
-import { ACTIVITY_GENRATION } from '@/utils/generation';
+import { ACTIVITY_GENERATION } from '@/utils/generation';
export const useRecoilGenerationSSR = () => {
const [isInitial, setIsInitial] = useState(true);
@@ -12,5 +12,5 @@ export const useRecoilGenerationSSR = () => {
setIsInitial(false);
}, []);
- return [isInitial ? ACTIVITY_GENRATION : value, setValue] as const;
+ return [isInitial ? ACTIVITY_GENERATION : value, setValue] as const;
};
diff --git a/src/hooks/useUnauthorizedStatus.ts b/src/hooks/useUnauthorizedStatus.ts
new file mode 100644
index 00000000..30b63c53
--- /dev/null
+++ b/src/hooks/useUnauthorizedStatus.ts
@@ -0,0 +1,16 @@
+import { useRouter } from 'next/router';
+import { useEffect } from 'react';
+
+export const useUnauthorizedStatus = (status: ADMIN_STATUS) => {
+ const router = useRouter();
+
+ useEffect(() => {
+ if (
+ typeof window !== 'undefined' &&
+ sessionStorage.getItem('adminStatus') === status
+ ) {
+ alert('접근 권한이 없는 계정입니다.');
+ router.back();
+ }
+ }, [router, status]);
+};
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 35d14e68..e765af8a 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,6 @@
import { Global, ThemeProvider } from '@emotion/react';
import type { AppProps } from 'next/app';
+import Head from 'next/head';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import { Hydrate, QueryClient, QueryClientProvider } from 'react-query';
@@ -7,6 +8,7 @@ import { ReactQueryDevtools } from 'react-query/devtools';
import { RecoilRoot } from 'recoil';
import Layout from '@/components/common/Layout';
+import { AdminStatusProvider } from '@/components/devTools/AdminContextProvider';
import global from '@/styles/global';
import theme from '@/styles/theme';
import { getToken } from '@/utils/auth';
@@ -29,18 +31,25 @@ export default function App({ Component, pageProps }: AppProps) {
}, []);
return (
-
-
-
-
-
-
-
-
-
-
-
-
-
+ <>
+
+ SOPT Admin
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
}
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index af2f1aba..a53754b4 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -3,7 +3,11 @@ import { Head, Html, Main, NextScript } from 'next/document';
export default function Document() {
return (
-
+
+
+
+
+
diff --git a/src/pages/alarmAdmin/index.tsx b/src/pages/alarmAdmin/index.tsx
new file mode 100644
index 00000000..dfe9ddf8
--- /dev/null
+++ b/src/pages/alarmAdmin/index.tsx
@@ -0,0 +1,47 @@
+import { useState } from 'react';
+import { useRecoilValue } from 'recoil';
+
+import AlarmList from '@/components/alarmAdmin/AlarmList';
+import CreateAlarmModal from '@/components/alarmAdmin/CreateAlarmModal';
+import FloatingButton from '@/components/common/FloatingButton';
+import Loading from '@/components/common/Loading';
+import Modal from '@/components/common/modal';
+import { currentGenerationState } from '@/recoil/atom';
+import { useGetAlarmList } from '@/services/api/alarm/query';
+
+function AlarmAdminPage() {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const currentGeneration = useRecoilValue(currentGenerationState);
+
+ const { data, isLoading, refetch } = useGetAlarmList(
+ parseInt(currentGeneration),
+ );
+
+ const handleModalClose = async () => {
+ setIsModalOpen(!isModalOpen);
+ refetch();
+ };
+
+ const refetchAlarmList = () => {
+ refetch();
+ };
+
+ if (isLoading || !data) return ;
+ return (
+ <>
+
+ 알림 생성하기}
+ onClick={() => setIsModalOpen(!isModalOpen)}
+ />
+ {isModalOpen && (
+
+
+
+ )}
+
+ );
+}
+
+export default AlarmAdminPage;
diff --git a/src/pages/attendanceAdmin/session/[id].tsx b/src/pages/attendanceAdmin/session/[id].tsx
index 91bf48b7..698b56d5 100644
--- a/src/pages/attendanceAdmin/session/[id].tsx
+++ b/src/pages/attendanceAdmin/session/[id].tsx
@@ -1,11 +1,13 @@
import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
+import { fonts } from '@sopt-makers/fonts';
import dayjs from 'dayjs';
import { useRouter } from 'next/router';
-import { RefObject, useRef, useState } from 'react';
+import { ReactNode, RefObject, useRef, useState } from 'react';
import AttendanceModal from '@/components/attendanceAdmin/session/AttendanceModal';
-import Button from '@/components/common/Button';
-import Footer from '@/components/common/Footer';
+import Chip from '@/components/common/Chip';
+import FloatingButton from '@/components/common/FloatingButton';
import HelperText from '@/components/common/HelperText';
import ListActionButton from '@/components/common/ListActionButton';
import ListWrapper from '@/components/common/ListWrapper';
@@ -16,6 +18,7 @@ import Select from '@/components/session/Select';
import { PAGE_SIZE } from '@/data/queryData';
import { attendanceInit, attendanceOptions } from '@/data/sessionData';
import useObserver from '@/hooks/useObserver';
+import { useUnauthorizedStatus } from '@/hooks/useUnauthorizedStatus';
import {
updateMemberAttendStatus,
updateMemberScore,
@@ -26,20 +29,15 @@ import {
useGetSessionDetail,
} from '@/services/api/lecture/query';
import { addPlus, precision } from '@/utils';
-import { ACTIVITY_GENRATION } from '@/utils/generation';
-
-const HEADER_LABELS = [
- '순번',
- '회원명',
- '학교명',
- '1차 출석 상태',
- '1차 출석 일시',
- '2차 출석 상태',
- '2차 출석 일시',
- '변동점수',
- 'ㅤ',
-];
-const TABLE_WIDTH = ['9%', '9%', '12%', '10%', '16%', '10%', '16%', '9%', '9%'];
+import { ACTIVITY_GENERATION } from '@/utils/generation';
+import { allPartTranslator, attributeTranslator } from '@/utils/translator';
+
+interface ChangedUpdatedStatus {
+ memberId: number;
+ firstRoundStatus: ATTEND_STATUS;
+ secondRoundStatus: ATTEND_STATUS;
+ updatedScore: number;
+}
function SessionDetailPage() {
const router = useRouter();
@@ -48,9 +46,14 @@ function SessionDetailPage() {
const [selectedPart, setSelectedPart] = useState('ALL');
const [changedMembers, setChangedMembers] = useState([]);
+ const [changedUpdatedStatusList, setChangedUpdatedStatusList] = useState<
+ ChangedUpdatedStatus[]
+ >([]);
const [modal, setModal] = useState(null);
const bottomRef: RefObject = useRef(null);
+ useUnauthorizedStatus('MAKERS');
+
const {
data: session,
isLoading: isLoadingSession,
@@ -75,38 +78,115 @@ function SessionDetailPage() {
setSelectedPart(part);
};
+ const calcUpdatedScore = (
+ memberId: number,
+ attendances: Attendance[],
+ round: number,
+ status: ATTEND_STATUS,
+ ) => {
+ const attribute = session?.attribute;
+
+ const prevStatus = changedUpdatedStatusList.find(
+ (item) => item.memberId === memberId,
+ );
+ const anotherRound = round === 1 ? 2 : 1;
+ const anotherRoundStatus = prevStatus
+ ? round === 1
+ ? prevStatus.secondRoundStatus
+ : prevStatus.firstRoundStatus
+ : (attendances.find((attendance) => attendance.round === anotherRound)
+ ?.status as ATTEND_STATUS);
+
+ const firstRoundStatus = round === 1 ? status : anotherRoundStatus;
+ const secondRoundStatus = round === 2 ? status : anotherRoundStatus;
+ let updatedScore = 0;
+
+ switch (attribute) {
+ case 'SEMINAR':
+ if (
+ firstRoundStatus === 'ATTENDANCE' &&
+ secondRoundStatus === 'ATTENDANCE'
+ ) {
+ updatedScore = 0;
+ } else if (
+ firstRoundStatus === 'ABSENT' &&
+ secondRoundStatus === 'ATTENDANCE'
+ ) {
+ updatedScore = -0.5;
+ } else {
+ updatedScore = -1;
+ }
+ break;
+ case 'EVENT':
+ if (
+ (firstRoundStatus === 'ATTENDANCE' ||
+ firstRoundStatus === 'ABSENT') &&
+ secondRoundStatus === 'ATTENDANCE'
+ ) {
+ updatedScore = 0.5;
+ } else {
+ updatedScore = 0;
+ }
+ break;
+ case 'ETC':
+ updatedScore = 0;
+ break;
+ }
+
+ const newList = changedUpdatedStatusList.filter(
+ (item) => item.memberId !== memberId,
+ );
+ setChangedUpdatedStatusList([
+ ...newList,
+ { memberId, firstRoundStatus, secondRoundStatus, updatedScore },
+ ]);
+ };
+
const onChangeStatus = async (
status: ATTEND_STATUS,
member: SessionMember,
- subAttendanceId: number,
+ round: number,
+ ) => {
+ setChangedMembers([...changedMembers, member]);
+ calcUpdatedScore(member.member.memberId, member.attendances, round, status);
+ };
+
+ const onUpdateScore = async (
+ memberId: number,
+ firstSubAttendanceId: number,
+ secondSubAttendanceId: number,
) => {
if (session) {
- const result = await updateMemberAttendStatus(
- subAttendanceId,
- status,
+ const { firstRoundStatus, secondRoundStatus, updatedScore } =
+ changedUpdatedStatusList.find(
+ (item) => item.memberId === memberId,
+ ) as ChangedUpdatedStatus;
+
+ const firstRoundError = await updateMemberAttendStatus(
+ firstSubAttendanceId,
+ firstRoundStatus,
session.attribute,
);
- if (result) {
- alert(result.error);
+ const secondRoundError = await updateMemberAttendStatus(
+ secondSubAttendanceId,
+ secondRoundStatus,
+ session.attribute,
+ );
+ const updateScoreError = await updateMemberScore(memberId);
+
+ if (firstRoundError || secondRoundError || updateScoreError) {
+ alert('출석 점수를 갱신하는데 실패했어요');
} else {
- setChangedMembers([...changedMembers, member]);
- // refetchMembers();
+ setChangedMembers(
+ changedMembers.filter(
+ (member) => member.member.memberId !== memberId,
+ ),
+ );
+ refetchSession();
}
}
};
- const onUpdateScore = async (memberId: number) => {
- const result = await updateMemberScore(memberId);
- if (result) {
- alert(result.error);
- } else {
- setChangedMembers(
- changedMembers.filter((member) => member.member.memberId !== memberId),
- );
- refetchSession();
- }
- };
-
const isChangedMember = (member: SessionMember) => {
return changedMembers.find(
(item) => item.member.memberId === member.member.memberId,
@@ -140,111 +220,151 @@ function SessionDetailPage() {
}
};
+ const getMemberCount = (attendances: Record) => {
+ let sum = 0;
+ Object.keys(attendances).map((key) => (sum += attendances[key]));
+ return sum;
+ };
+
+ const getButtonContent = (status: SESSION_STATUS): ReactNode => {
+ switch (status) {
+ case 'BEFORE':
+ return <>1차 출석 시작하기;
+ case 'FIRST':
+ return <>2차 출석 시작하기;
+ case 'SECOND':
+ return <>출석 완료하기;
+ default:
+ return <>;
+ }
+ };
+
+ const getButtonClickHandler = (status: SESSION_STATUS) => {
+ switch (status) {
+ case 'BEFORE':
+ return () => startAttendance(1);
+ case 'FIRST':
+ return () => startAttendance(2);
+ case 'SECOND':
+ return () => closeAttendance();
+ default:
+ // eslint-disable-next-line prettier/prettier
+ return () => {};
+ }
+ };
+
return (
{session && (
-
-
- {session.name} 출석 관리
-
-
+
+
{session.name} 출석 관리
+
+
+
+ {session.part === 'ALL' && (
+
+ )}
+
+
총 {getMemberCount(session.attendances)}명
+
출석 {session.attendances.attendance}
지각 {session.attendances.tardy}
결석 {session.attendances.absent}
미정 {session.attendances.unknown}
- {session.part === 'ALL' && (
-
- )}
)}
{session && members ? (
-
-
-
- {HEADER_LABELS.map((label) => (
- | {label} |
- ))}
-
-
-
- {members?.pages.map(
- (pageMembers, pageIndex) =>
- pageMembers &&
- pageMembers.map((member, index) => {
- const firstRound =
- member.attendances.find((item) => item.round === 1) ??
- attendanceInit;
- const secondRound =
- member.attendances.find((item) => item.round === 2) ??
- attendanceInit;
- const firstRoundTime = dayjs(firstRound.updateAt).format(
- 'YYYY/MM/DD HH:mm',
- );
- const secondRoundTime = dayjs(secondRound.updateAt).format(
- 'YYYY/MM/DD HH:mm',
- );
- return (
-
- | {precision(pageIndex * PAGE_SIZE + index + 1, 2)} |
- {member.member.name} |
-
+
+ {members?.pages.map(
+ (pageMembers, pageIndex) =>
+ pageMembers &&
+ pageMembers.map((member, index) => {
+ const firstRound =
+ member.attendances.find((item) => item.round === 1) ??
+ attendanceInit;
+ const secondRound =
+ member.attendances.find((item) => item.round === 2) ??
+ attendanceInit;
+ const firstRoundTime = dayjs(firstRound.updateAt).format(
+ 'YYYY/MM/DD HH:mm',
+ );
+ const secondRoundTime = dayjs(secondRound.updateAt).format(
+ 'YYYY/MM/DD HH:mm',
+ );
+ const updatedScore =
+ changedUpdatedStatusList.find(
+ (item) => item.memberId === member.member.memberId,
+ )?.updatedScore ?? member.updatedScore;
+
+ return (
+
+
+ {precision(pageIndex * PAGE_SIZE + index + 1, 2)}
+
+
+
+ {member.member.name}
+
+
+
{member.member.university}
- |
-
- |
- {firstRoundTime} |
-
- |
- {secondRoundTime} |
- {addPlus(member.updatedScore)}점 |
-
- onUpdateScore(member.member.memberId)}
- text="갱신"
- disabled={
- !(
- session.status === 'END' &&
- isChangedMember(member) &&
- String(session.generation) === ACTIVITY_GENRATION
- )
- }
- />
- |
-
- );
- }),
- )}
-
+
+
+