imp: show toast for user who enter events page

Author: hoon2hooni

components/events/TimetableTemplate.tsx

@@ -3,6 +3,7 @@ import { Days, Pagination, Timetable } from "@components/events";
 import { Eraser } from "@components/icons";
 import styled from "@emotion/styled";
 import type { Attendees } from "@eventsTypes";
+import useToast from "@lib/hooks/useToast";
 import type { FC } from "react";
 import { useState } from "react";
 
@@ -26,7 +27,7 @@ const TimetableTemplate: FC<Props> = ({
 }) => {
   const [pageIndex, setPageIndex] = useState(0);
   const [isEraseMode, setIsEraseMode] = useState(false);
-  const [showToast, setShowToast] = useState(0);
+  const { isToastOpen, toastKeyVal, toggleToast } = useToast();
   // const toastId = useRef<Id>("");
   const handleClickPageUp = () => {
     setPageIndex((index) => index + 1);
@@ -53,13 +54,13 @@ const TimetableTemplate: FC<Props> = ({
           <EraserIconWrapper
             onClick={() => {
               setIsEraseMode((prev) => !prev);
-              setShowToast((prev) => prev + 1);
+              toggleToast();
             }}
           >
             <Eraser isEraseMode={isEraseMode} />
           </EraserIconWrapper>
         </EraserWrapper>
-        {showToast > 0 && <Toast message={toastMessage} key={showToast} />}
+        {isToastOpen && <Toast message={toastMessage} key={toastKeyVal} />}
         <Days startDate={startDate} pageIndex={pageIndex} />
         <Timetable
           pageIndex={pageIndex}

lib/hooks/useToast.ts

@@ -0,0 +1,11 @@
+import { useCallback, useState } from "react";
+const useToast = () => {
+  const [toastKeyVal, setToastKeyVal] = useState(0);
+  const toggleToast = useCallback(() => {
+    setToastKeyVal((prev) => prev + 1);
+  }, []);
+  const isToastOpen = toastKeyVal > 0;
+  return { isToastOpen, toastKeyVal, toggleToast } as const;
+};
+
+export default useToast;

pages/events/[id].tsx

@@ -1,4 +1,4 @@
-import { Button, ErrorBox, Modal } from "@components/common";
+import { Button, ErrorBox, Modal, Toast } from "@components/common";
 import {
   EntranceInput,
   TimetableInfo,
@@ -9,6 +9,7 @@ import styled from "@emotion/styled";
 import useEventsStore from "@hooks/useEventsStore";
 import useUrlEventId from "@hooks/useUrlEventId";
 import { closePage } from "@lib/handleCrossPlatform";
+import useToast from "@lib/hooks/useToast";
 import type { NextPageWithLayout } from "@pages/_app";
 import Link from "next/link";
 import { useEffect, useState } from "react";
@@ -18,6 +19,7 @@ const getLocalStorageKey = (id: string) => {
 
 const Events: NextPageWithLayout = () => {
   const [windowHeight, setWindowHeight] = useState<number>(0);
+  const { isToastOpen, toggleToast } = useToast();
   useEffect(() => {
     const resizeHandlerForFixedHeight = () => {
       if (window !== undefined) {
@@ -60,20 +62,19 @@ const Events: NextPageWithLayout = () => {
     if (window !== undefined) {
       window.localStorage.setItem(getLocalStorageKey(id), name);
     }
-    //TODO 모달 활용해서 알림해주기
+    toggleToast();
     return "";
   };
 
   useEffect(() => {
     if (window === undefined || !id) return;
-    const userName = window.localStorage.getItem(getLocalStorageKey(id));
-    setCurrentAttendee(
-      window.localStorage.getItem(getLocalStorageKey(id)) || ""
-    );
-    if (userName) {
-      //TODO 모달 활용해서 알림해주기
+    const previousAttendee =
+      window.localStorage.getItem(getLocalStorageKey(id)) || "";
+    if (previousAttendee) {
+      setCurrentAttendee(previousAttendee);
+      toggleToast();
     }
-  }, [id]);
+  }, [id, toggleToast]);
 
   if (status === "idle" || status === "loading") {
     return (
@@ -107,6 +108,9 @@ const Events: NextPageWithLayout = () => {
           <EntranceInput onClickEntrance={handleClickEntrance} />
         </Modal>
       )}
+      {isToastOpen && (
+        <Toast message={`${currentAttendee}님이 입장하셨습니다.`} />
+      )}
       <Container>
         <Header>
           <Text>가능한 시간을 입력하세요!</Text>