feat : confirm observe

src/pages/board/component/comment/index.tsx

@@ -11,11 +11,11 @@ import classes from "./Comment.module.css";
 import useList from "../../hook/useList";
 
 interface CommentListProps {
-  refresh: () => void;
+  refresh: boolean;
 }
 
-export const CommentList = ({}: CommentListProps) => {
-  const { listIdx, setListIdx, comments } = useList();
+export const CommentList = ({ refresh }: CommentListProps) => {
+  const { listIdx, setListIdx, comments } = useList(refresh);
 
   return (
     <Container>

src/pages/board/component/input/index.tsx

@@ -17,7 +17,11 @@ import useInput from "../../hook/useInput";
 import { useDisclosure } from "@mantine/hooks";
 import useErrorStore from "../../../../store/useError";
 
-const CommentInput = () => {
+interface CommentInputProps {
+  onConfirm: () => void;
+}
+
+const CommentInput = ({ onConfirm }: CommentInputProps) => {
   const { setError } = useErrorStore();
   const { avartarList, combobox } = useAvartar();
   const [opened, { toggle, close }] = useDisclosure(false);
@@ -34,18 +38,26 @@ const CommentInput = () => {
     company,
     setAvartar,
     avartar,
+    observeComment,
+    confirmComment,
   } = useInput();
 
   useEffect(() => {
     setAvartar(avartarList[0]);
   }, [avartarList]);
 
   useEffect(() => {
-    if (addResponse) {
+    if (addResponse && email) {
       toggle();
+      observeComment(email);
     }
   }, [addResponse]);
 
+  useEffect(() => {
+    console.log(confirmComment);
+    if (confirmComment) onConfirm();
+  }, [confirmComment]);
+
   const options = avartarList.map((item) => (
     <Combobox.Option value={item} key={item} active={item === avartar}>
       <Group gap="xs">

src/pages/board/hook/rest/comment.ts

@@ -31,6 +31,7 @@ const useComment = () => {
     useState<Response<GetCommentsResponse> | null>(null);
   const [addResponse, setAddResponse] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
+  const [confirmComment, setConfirm] = useState<boolean>(false);
   const { setError } = useErrorStore();
 
   const fetchComments = async (query: GetCommentsRequest) => {
@@ -92,7 +93,38 @@ const useComment = () => {
     }
   };
 
-  return { fetchComments, comments, addComment, addResponse, loading };
+  const observeComment = async (email: string) => {
+    const eventSource = new EventSource(
+      `${import.meta.env.VITE_INTRO_API_URL}/comment/observe?email=${email}`
+    );
+
+    eventSource.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      setConfirm(data.confirm);
+      if (data.confirm) {
+        eventSource.close();
+      }
+    };
+
+    eventSource.onerror = (err) => {
+      setError("댓글 확인 실패.");
+      eventSource.close();
+    };
+
+    return () => {
+      eventSource.close();
+    };
+  };
+
+  return {
+    fetchComments,
+    comments,
+    addComment,
+    addResponse,
+    observeComment,
+    confirmComment,
+    loading,
+  };
 };
 
 export default useComment;

src/pages/board/hook/useInput.ts

@@ -9,7 +9,8 @@ const useInput = () => {
   const [avartar, setAvartar] = useState<string | null>();
   const [comment, setComment] = useState<string | null>();
 
-  const { addComment, addResponse } = useComment();
+  const { addComment, addResponse, observeComment, confirmComment } =
+    useComment();
 
   return {
     setName,
@@ -26,6 +27,8 @@ const useInput = () => {
     company,
     addComment,
     addResponse,
+    observeComment,
+    confirmComment,
   };
 };
 export default useInput;

src/pages/board/hook/useList.ts

@@ -1,22 +1,24 @@
 import { useEffect, useState } from "react";
 import useComment from "./rest/comment";
-const useList = () => {
+const useList = (refresh: boolean) => {
   const { comments, fetchComments } = useComment();
   const [listIdx, setListIdx] = useState(1);
 
   useEffect(() => {
     fetchComments({ limit: 5, skip: (listIdx - 1) * 5 });
   }, [listIdx]);
 
-  const refresh = () => {
-    setListIdx(1);
-  };
+  useEffect(() => {
+    if (refresh) {
+      if (listIdx == 1) fetchComments({ limit: 5, skip: 0 });
+      setListIdx(1);
+    }
+  }, [refresh]);
 
   return {
     comments: comments?.data,
     listIdx,
     setListIdx,
-    refresh,
   };
 };
 export default useList;

src/pages/board/index.tsx

@@ -1,16 +1,21 @@
 import { Container, Title } from "@mantine/core";
 import { CommentList } from "./component/comment";
 import CommentInput from "./component/input";
+import { useEffect, useState } from "react";
 
 function Board() {
+  const [trigger, setTrigger] = useState(false);
+  useEffect(() => {
+    console.log("trigger => ", trigger);
+  }, [trigger]);
   return (
     <Container id="board" h="100vh">
       <Title order={2} mb="lg">
         동료 메세지
       </Title>
 
-      <CommentList refresh={() => {}} />
-      <CommentInput />
+      <CommentList refresh={trigger} />
+      <CommentInput onConfirm={() => setTrigger(true)} />
     </Container>
   );
 }