Merge branch 'release/V1.0.1' into main

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pcot",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "homepage": ".",
   "dependencies": {

src/components/Alarm/AlarmModal/index.tsx

@@ -0,0 +1,69 @@
+import { PopupModal } from "@components/Modal";
+import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { useAlarm } from "@hooks/useAlarm";
+
+import * as S from "./style";
+import { useNavigate } from "react-router-dom";
+
+const AlarmModal = ({
+  active,
+  setActive,
+}: {
+  active: boolean;
+  setActive?: Dispatch<SetStateAction<boolean>>;
+}) => {
+  const { onGetAlarm, onPatchAlarm } = useAlarm();
+  const navigate = useNavigate();
+  const [alarmList, setAlarmList] = useState<Array<any>>([]);
+
+  useEffect(() => {
+    onGetAlarm(1)
+      .then((res: any) => {
+        const alarmList = res.map((list: any) => (
+          <div key={list.idx} style={{ textDecoration: "none" }}>
+            {list.view === "Y" ? (
+              <S.grayFilter>{box(list)}</S.grayFilter>
+            ) : (
+              <S.box>{box(list)}</S.box>
+            )}
+          </div>
+        ));
+        setAlarmList(alarmList);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
+
+  const onClickBox = (list: any) => {
+    onPatchAlarm(list.idx).then((res: any) => {
+      console.log(res);
+    });
+    navigate(`${list.path}`);
+  };
+
+  const box = (list: any) => (
+    <S.content onClick={() => onClickBox(list)}>
+      <S.title>{list.text}</S.title>
+      <S.path>{list.path}</S.path>
+      <S.time>{list.registerTime}</S.time>
+    </S.content>
+  );
+
+  const renderAlarmList = () => {
+    return <div>{alarmList}</div>;
+  };
+
+  return (
+    <div>
+      <PopupModal active={active} setActive={setActive}>
+        <div>
+          <S.modalType>Notification</S.modalType>
+          <div>{renderAlarmList() ? renderAlarmList() : <div>알람을 찾을 수 없습니다!</div>}</div>
+        </div>
+      </PopupModal>
+    </div>
+  );
+};
+
+export default AlarmModal;

src/components/Alarm/AlarmModal/style.ts

@@ -0,0 +1,69 @@
+import styled from "styled-components";
+
+export const modalType = styled.h2`
+  font-size: 30px;
+  width: 100%;
+  height: 10%;
+
+  color: black;
+  text-align: center;
+`;
+
+export const box = styled.div`
+  margin: auto;
+  margin-top: 10px;
+  width: 95%;
+  height: 10%;
+  border-radius: 10px;
+
+  overflow-y: scroll;
+  text-align: left;
+
+  border: 1px solid blue;
+  cursor: pointer;
+`;
+
+export const grayFilter = styled.div`
+  margin: auto;
+  margin-top: 10px;
+  width: 95%;
+  height: 10%;
+  border-radius: 10px;
+
+  overflow-y: scroll;
+  text-align: left;
+
+  border: 1px solid blue;
+  cursor: pointer;
+
+  background-color: rgb(230, 230, 230);
+`;
+
+export const content = styled.div`
+  width: 97%;
+  height: 10%;
+  margin-top: 1.5%;
+  margin-bottom: 1.5%;
+  margin-left: 1.5%;
+  margin-right: 1.5%;
+`;
+
+export const title = styled.h1`
+  margin: auto;
+  font-size: 25px;
+  color: black;
+`;
+
+export const path = styled.h3`
+  font-size: small;
+  width: 50%;
+  color: gray;
+`;
+
+export const time = styled.h3`
+  font-size: small;
+  /* float: right; */
+  margin-right: 5px;
+  text-align: right;
+  color: gray;
+`;

src/components/Alarm/index.tsx

@@ -1,72 +1,17 @@
-import React, { useEffect, useState } from "react";
-import axios from "axios";
+import React, { useState } from "react";
 export const API_URL = process.env.REACT_APP_API;
 import * as S from "./style";
-import { useNavigate } from "react-router-dom";
-
-interface OrgData {
-  text: string;
-  path: string;
-  registerTime: string;
-}
+import Bell from "@assets/Bell.png";
+import AlarmModal from "./AlarmModal";
 
 const Alarm = () => {
-  const [data, setData] = useState<OrgData[]>([]);
-
-  const [isVisible, setIsVisible] = useState(false);
-
-  const handleMouseClick = () => {
-    setIsVisible(!isVisible);
-  };
-
-  function Testit({ title, path, time }: { title: string; path: string; time: string }) {
-    const navigate = useNavigate();
-    console.log(path);
-    console.log(time);
-    console.log(title);
-    return (
-      <>
-        <S.content onClick={() => navigate(path)}>
-          <S.title>{title}</S.title>
-          <S.path>{path}</S.path>
-          <S.time>{time}</S.time>
-        </S.content>
-      </>
-    );
-  }
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        const response = await axios.get(`${API_URL}/v2/search/alarm/get?page=1`, {
-          withCredentials: true,
-        });
-        const jsonData = response.data;
-        setData(jsonData.data as OrgData[]);
-      } catch (error) {
-        console.error("데이터를 가져오는 중에 오류 발생:", error);
-      }
-    };
-
-    fetchData();
-  }, []);
+  const [modalIsOpen, setModalIsOpen] = useState(false);
 
   return (
-    <>
-      <S.AlarmBtn onClick={handleMouseClick} />
-      {isVisible && (
-        <S.box>
-          {data.map((orgData, index) => (
-            <Testit
-              title={orgData.text}
-              path={orgData.path}
-              time={orgData.registerTime}
-              key={index}
-            />
-          ))}
-        </S.box>
-      )}
-    </>
+    <div>
+      <S.AlarmBtn src={Bell} onClick={() => setModalIsOpen(true)} />
+      {modalIsOpen && <AlarmModal active={modalIsOpen} setActive={setModalIsOpen} />}
+    </div>
   );
 };
 

src/components/Alarm/style.ts

@@ -1,41 +1,9 @@
 import styled from "styled-components";
 
-export const box = styled.div`
-  width: 100%;
-  height: 100%;
-
-  overflow-y: scroll;
-  text-align: left;
-`;
-
-export const content = styled.div`
-  width: 100%;
-  height: 20%;
-  margin-bottom: 10%;
-`;
-
-export const title = styled.h1`
-  font-size: small;
-  color: black;
-`;
-
-export const path = styled.h3`
-  font-size: small;
-  width: 90%;
-  color: gray;
-`;
-
-export const time = styled.h3`
-  font-size: small;
-  /* float: right; */
-  text-align: right;
-  color: gray;
-`;
-
-export const AlarmBtn = styled.div`
+export const AlarmBtn = styled.img`
   border-radius: 50%;
-  width: 5%;
-  height: 10%;
-
-  background-color: black;
+  margin-top: 3px;
+  width: 27px;
+  height: 30px;
+  right: 45px;
 `;