Merge pull request #99 from sopt-makers/dev

[ver.2.0.0] SOPT WEB Admin dev -> main 배포

package.json

@@ -18,7 +18,8 @@
   "dependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@sopt-makers/colors": "^2.2.0",
+    "@sopt-makers/colors": "^3.0.0",
+    "@sopt-makers/fonts": "^1.0.0",
     "@types/axios": "^0.14.0",
     "@types/node": "18.15.3",
     "@types/react": "18.0.28",

src/assets/icons/SoptLogos/index.ts

@@ -0,0 +1,3 @@
+export { default as DoSoptLogo } from './DoSoptLogo.svg';
+export { default as GoSoptLogo } from './GoSoptLogo.svg';
+export { default as SoptMainLogo } from './SoptMainLogo.svg';

src/assets/icons/index.ts

@@ -1,4 +1,9 @@
+export { default as IcAlarmMenu } from './IcAlarmMenu.svg';
+export { default as IcAttendanceMenu } from './IcAttendanceMenu.svg';
 export { default as IcCheckBox } from './IcCheckBox';
+export { default as IcDeleteFile } from './IcDeleteFile.svg';
 export { default as IcGoPrev } from './IcGoPrev.svg';
 export { default as IcModalClose } from './IcModalClose.svg';
-export { default as IcNavMenu } from './IcNavMenu.svg';
+export { default as IcNewDropdown } from './IcNewDropdown.svg';
+export { default as IcOrgMenu } from './IcOrgMenu.svg';
+export { default as IcUpload } from './IcUpload.svg';

src/components/alarmAdmin/AlarmList/index.tsx

@@ -0,0 +1,160 @@
+import dayjs from 'dayjs';
+import { useState } from 'react';
+import { UseQueryResult } from 'react-query';
+
+import IcMore from '@/assets/icons/IcMore.svg';
+import { StActionButton } from '@/components/attendanceAdmin/session/SessionList/style';
+import Chip from '@/components/common/Chip';
+import FilterButton from '@/components/common/FilterButton';
+import ListActionButton from '@/components/common/ListActionButton';
+import ListWrapper from '@/components/common/ListWrapper';
+import Loading from '@/components/common/Loading';
+import Modal from '@/components/common/modal';
+import { deleteAlarm, sendAlarm } from '@/services/api/alarm';
+
+import ShowAlarmModal from '../ShowAlarmModal';
+import { StListItem, StPageHeader } from './style';
+
+const sendStatusList: ALARM_STATUS[] = ['전체', '발송 전', '발송 후'];
+
+interface Props {
+  data: Alarm[];
+  refetch: () => void;
+}
+
+function AlarmList(props: Props) {
+  const { data, refetch } = props;
+
+  const [tab, setTab] = useState<ALARM_STATUS>('전체');
+  const [activeDropdownId, setActiveDropdownId] = useState<number | null>(null);
+  const [showAlarmDetail, setShowAlarmDetail] = useState<number | null>(null);
+  const [isSending, setIsSending] = useState(false);
+
+  const onChangeTab = (value: ALARM_STATUS) => {
+    setTab(value);
+  };
+
+  const toggleDropdown = (e: React.MouseEvent, alarmId: number): void => {
+    e.stopPropagation();
+    if (activeDropdownId === alarmId) {
+      setActiveDropdownId(null);
+    } else {
+      setActiveDropdownId(alarmId);
+    }
+  };
+
+  const onSendAlarm = async (alarmId: number, title: string) => {
+    const response = window.confirm(`${title} 알림을 전송하시겠습니까?`);
+    if (response) {
+      setIsSending(true);
+      const result = await sendAlarm(alarmId);
+      setIsSending(false);
+      window.alert(result ? '전송에 성공했습니다' : '전송에 실패했습니다');
+      refetch();
+    }
+  };
+
+  const onShowAlarmDetail = (alarmId: number) => {
+    setShowAlarmDetail(alarmId);
+  };
+
+  const onCloseAlarmDetail = () => {
+    setShowAlarmDetail(null);
+  };
+
+  const handleDeleteAlarm = async (
+    e: React.MouseEvent<HTMLDivElement>,
+    alarmId: number,
+  ) => {
+    e.stopPropagation();
+    const response = window.confirm('알림을 삭제하시겠습니까?');
+    if (response) {
+      const result = await deleteAlarm(alarmId);
+      result && refetch();
+    }
+  };
+
+  const alarmList = data
+    ? data.filter((item) => (tab === '전체' ? true : item.status === tab))
+    : [];
+
+  return (
+    <>
+      <StPageHeader>
+        <h1>알림 관리</h1>
+        <FilterButton<ALARM_STATUS>
+          list={sendStatusList}
+          selected={tab}
+          onChange={onChangeTab}
+        />
+        <p>총 {alarmList.length}개</p>
+      </StPageHeader>
+
+      <ListWrapper>
+        {alarmList.map((alarm) => (
+          <StListItem
+            key={alarm.alarmId}
+            onClick={() => onShowAlarmDetail(alarm.alarmId)}>
+            <p
+              className={
+                alarm.status === '발송 전'
+                  ? 'alarm-status before'
+                  : 'alarm-status after'
+              }>
+              {alarm.status}
+            </p>
+            <div className="alarm-info-wrap">
+              <div>
+                <p className="alarm-title">{alarm.title}</p>
+                <Chip text={alarm.part ?? '전체'} />
+                <Chip text={alarm.attribute} />
+              </div>
+              <p className="alarm-sent-at">
+                발송 일자:{' '}
+                {alarm.sendAt
+                  ? dayjs(alarm.sendAt).format('YYYY/MM/DD HH:mm')
+                  : ''}
+              </p>
+            </div>
+            <p className="alarm-content">{alarm.content}</p>
+            <div className="alarm-send">
+              <ListActionButton
+                text="전송"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onSendAlarm(alarm.alarmId, alarm.title);
+                }}
+                disabled={alarm.status === '발송 후'}
+              />
+            </div>
+            <div>
+              <StActionButton onClick={(e) => toggleDropdown(e, alarm.alarmId)}>
+                <IcMore />
+              </StActionButton>
+              {activeDropdownId === alarm.alarmId && (
+                <div
+                  className="delete_dropdown"
+                  onClick={(e) => handleDeleteAlarm(e, alarm.alarmId)}>
+                  <p>삭제하기</p>
+                </div>
+              )}
+            </div>
+          </StListItem>
+        ))}
+      </ListWrapper>
+
+      {showAlarmDetail && (
+        <Modal>
+          <ShowAlarmModal
+            onClose={onCloseAlarmDetail}
+            alarmId={showAlarmDetail}
+          />
+        </Modal>
+      )}
+
+      {isSending && <Loading />}
+    </>
+  );
+}
+
+export default AlarmList;