Merge pull request #108 from Team-Senifit/release-1.0.1

QA 수정 후 배포 진행

Author: tmin002

src/apis/errors.ts

@@ -4,4 +4,5 @@ export class AuthError extends Error {
   }
 }
 export const isAuthError = (e: unknown): e is AuthError =>
-  e instanceof AuthError;
+  e instanceof AuthError ||
+  (e instanceof Error && e.message === "AUTH_REQUIRED");

src/app/(plain)/exercise/class/[id]/page.tsx

@@ -5,16 +5,16 @@ import useProgramStore from "@/states/useProgramStore";
 import WorkoutVideoPlaylist from "./panel/WorkoutVideoPlayer";
 import { useRouter } from "next/navigation";
 import { useClientReady } from "@/hooks/useClientReady";
-import { useDeadlineTrigger } from "@/hooks/useDeadlineTrigger";
-import dayjs from "dayjs";
-import { useToastStore } from "@/states/useToastStore";
+// import { useDeadlineTrigger } from "@/hooks/useDeadlineTrigger";
+// import dayjs from "dayjs";
+// import { useToastStore } from "@/states/useToastStore";
 
 const Page = () => {
   const isClientReady = useClientReady();
   const router = useRouter();
   const { selectedProgram } = useProgramStore();
 
-  const { setToastOpen } = useToastStore();
+  // const { setToastOpen } = useToastStore();
 
   useEffect(() => {
     if (!isClientReady) return;
@@ -24,16 +24,17 @@ const Page = () => {
     return () => {};
   }, [selectedProgram, router, isClientReady]);
 
-  useDeadlineTrigger({
-    at: dayjs().add(selectedProgram?.duration || 0, "minute"),
-    onFire: () =>
-      setToastOpen({
-        message: `목표수업시간 ${selectedProgram?.duration ? Math.floor(selectedProgram?.duration) : 0}분이 되었어요!`,
-      }),
-    enabled: !!selectedProgram,
-  });
   if (!selectedProgram) return null;
 
+  // useDeadlineTrigger({
+  //   at: dayjs().add(selectedProgram?.duration || 0, "minute"),
+  //   onFire: () =>
+  //     setToastOpen({
+  //       message: `목표수업시간 ${selectedProgram?.duration ? Math.floor(selectedProgram?.duration) : 0}분이 되었어요!`,
+  //     }),
+  //   enabled: !!selectedProgram,
+  // });
+
   return (
     <WorkoutVideoPlaylist
       duration={selectedProgram?.duration}

src/app/(plain)/exercise/class/[id]/panel/WorkoutVideoPlayer.tsx

@@ -5,10 +5,12 @@ import { Box, Button, Stack, Typography } from "@mui/material";
 import VideoPlayer, { IVideoHandle } from "@/components/VideoPlayer";
 import useMedia from "@/hooks/useMedia";
 import Header from "./Header";
-import { useParams } from "next/navigation";
+import { useParams, useRouter } from "next/navigation";
 import { useTimer } from "@/hooks/useTimer";
-import { notifyClassDone } from "@/utils/broadcast";
-import { useToastStore } from "@/states/useToastStore";
+import { axiosClient } from "@/apis/axiosClient";
+import { isAuthError } from "@/apis/errors";
+// import { useToastStore } from "@/states/useToastStore";
+import SenifitDialog from "@/components/SenifitDialog";
 
 export interface IWorkoutVideo {
   id: number;
@@ -68,19 +70,126 @@ export default function WorkoutVideoPlaylist({
   duration,
 }: IWorkoutVideoPlaylistProps) {
   const { isPhone } = useMedia();
+  const router = useRouter();
 
   const { seconds } = useTimer();
 
-  const { id: programId } = useParams();
+  const { id } = useParams();
+  const recordId = useMemo(() => (Array.isArray(id) ? id[0] : id), [id]);
 
   const notifyDone = useCallback((): void => {
-    const pid = Array.isArray(programId) ? programId[0] : programId;
-    notifyClassDone({ programId: pid, seconds });
-    // 브로드캐스트가 부모 탭에 전달될 시간 확보
-    window.setTimeout(() => {
-      window.close();
-    }, 50);
-  }, [programId, seconds]);
+    if (!recordId) return;
+    shouldBypassUnload.current = true;
+    // 단일 탭 흐름: 종료 시 완료 화면으로 이동
+    router.replace(`/exercise/done/${recordId}?seconds=${seconds}`);
+  }, [recordId, router, seconds]);
+
+  useEffect(() => {
+    if (!recordId) return;
+
+    let cancelled = false;
+    let timeoutId: number | null = null;
+    let inFlight = false;
+    let redirected = false;
+
+    const pulse = async () => {
+      if (cancelled || inFlight) return;
+      inFlight = true;
+      try {
+        await axiosClient.put(`/records/${recordId}`);
+      } catch (err) {
+        // axios interceptor에서 401/403 -> AuthError로 throw 되지만
+        // 여기서 catch로 삼키면 전역 error boundary 리디렉션이 동작하지 않음.
+        // heartbeat에서는 즉시 로그인으로 전환한다.
+        if (!redirected && isAuthError(err)) {
+          redirected = true;
+          cancelled = true;
+          if (timeoutId != null) window.clearTimeout(timeoutId);
+          const currentPath = window.location.pathname + window.location.search;
+          const loginUrl = `/login?next=${encodeURIComponent(currentPath)}`;
+          window.location.href = loginUrl;
+          return;
+        }
+        console.error("Heartbeat failed:", err);
+      } finally {
+        inFlight = false;
+      }
+    };
+
+    const scheduleNext = (delayMs: number) => {
+      if (cancelled) return;
+      timeoutId = window.setTimeout(async () => {
+        await pulse();
+        scheduleNext(30000);
+      }, delayMs);
+    };
+
+    // 운동 시작 시 즉시 첫 하트비트 전송 + 이후 30초 루프
+    void pulse();
+    scheduleNext(30000);
+
+    // 백그라운드 타이머 throttling 대비: 다시 포커스/표시되면 즉시 1회 전송
+    const onVisible = () => {
+      if (document.visibilityState === "visible") void pulse();
+    };
+    window.addEventListener("focus", onVisible);
+    window.addEventListener("visibilitychange", onVisible);
+    window.addEventListener("pageshow", onVisible);
+
+    // 페이지가 닫히거나 전환될 때 마지막 1회 시도(keepalive)
+    const onPageHide = () => {
+      try {
+        void fetch(`/api/records/${recordId}`, {
+          method: "PUT",
+          credentials: "include",
+          keepalive: true,
+        });
+      } catch {
+        // ignore
+      }
+    };
+    window.addEventListener("pagehide", onPageHide);
+
+    return () => {
+      cancelled = true;
+      if (timeoutId != null) window.clearTimeout(timeoutId);
+      window.removeEventListener("focus", onVisible);
+      window.removeEventListener("visibilitychange", onVisible);
+      window.removeEventListener("pageshow", onVisible);
+      window.removeEventListener("pagehide", onPageHide);
+    };
+  }, [recordId]);
+
+  // 이탈 방지 bypass 플래그 (앱 내부 이동 시 사용)
+  const shouldBypassUnload = useRef(false);
+
+  // 이탈 방지 로직 (브라우저 종료/새로고침)
+  useEffect(() => {
+    const handleBeforeUnload = (e: BeforeUnloadEvent) => {
+      if (shouldBypassUnload.current) return;
+      e.preventDefault();
+      e.returnValue = "";
+    };
+
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
+  }, []);
+
+  // 이탈 방지 로직 (뒤로 가기)
+  useEffect(() => {
+    // 현재 상태를 push하여 뒤로 가기 시 popstate가 트리거되게 함
+    window.history.pushState(null, "", window.location.href);
+
+    const handlePopState = () => {
+      // 뒤로 가기 버튼을 눌렀을 때 다이얼로그를 띄움
+      setOpenExitDialog(true);
+      // 다시 pushState를 해서 현재 페이지를 유지 (사용자가 '나가기'를 누를 때까지)
+      window.history.pushState(null, "", window.location.href);
+    };
+
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
+  }, []);
 
   const initialIndex = useMemo(() => {
     if (initialId == null) return 0;
@@ -89,6 +198,7 @@ export default function WorkoutVideoPlaylist({
   }, [videos, initialId]);
 
   const [index, setIndex] = useState<number>(initialIndex);
+  const [openExitDialog, setOpenExitDialog] = useState(false);
   const handleRef = useRef<IVideoHandle>(null);
 
   const current = videos[index];
@@ -108,7 +218,11 @@ export default function WorkoutVideoPlaylist({
       let target = next;
 
       if (next >= len) {
-        if (!loop) return notifyDone();
+        if (!loop) {
+          // 마지막 영상까지 끝나면 자동으로 완료 처리
+          notifyDone();
+          return;
+        }
         target = 0;
       } else if (next < 0) {
         target = 0;
@@ -117,24 +231,24 @@ export default function WorkoutVideoPlaylist({
       setIndex(target);
       onIndexChange?.(target, videos[target]);
     },
-    [videos, loop, notifyDone, onIndexChange],
+    [videos, loop, onIndexChange, notifyDone],
   );
-  const { setToastOpen } = useToastStore();
+  // const { setToastOpen } = useToastStore();
 
   const prev = useCallback(() => {
-    setToastOpen({ message: "이전 영상을 재생합니다.", autoHide: "short" });
+    // setToastOpen({ message: "이전 영상을 재생합니다.", autoHide: "short" });
     go(index - 1);
-  }, [go, index, setToastOpen]);
+  }, [go, index]);
 
   const next = useCallback(() => {
     const isLast = index === videos.length - 1;
     if (isLast && !loop) {
       notifyDone();
       return;
     }
-    setToastOpen({ message: "다음 영상을 재생합니다.", autoHide: "short" });
+    // setToastOpen({ message: "다음 영상을 재생합니다.", autoHide: "short" });
     go(index + 1);
-  }, [go, index, loop, notifyDone, setToastOpen, videos.length]);
+  }, [go, index, loop, notifyDone, videos.length]);
 
   // src 바뀌면 자동 재생 시도(사용자 제스처 이후 연속 재생 안정화)
   useEffect(() => {
@@ -261,6 +375,22 @@ export default function WorkoutVideoPlaylist({
           </Button>
         </Stack>
       </Stack>
+
+      {/* 이탈 확인 다이얼로그 */}
+      <SenifitDialog
+        isOpen={openExitDialog}
+        onClose={() => setOpenExitDialog(false)}
+        dialogType={"error"}
+        title={"사이트에서 나가시겠습니까?"}
+        body={"변경사항이 저장되지 않을 수 있습니다"}
+        primaryText={"나가기"}
+        onPrimaryClick={() => {
+          shouldBypassUnload.current = true;
+          notifyDone();
+        }}
+        secondaryText={"취소"}
+        onSecondaryClick={() => setOpenExitDialog(false)}
+      />
     </Box>
   );
 }

src/app/(plain)/exercise/start/page.tsx

@@ -34,13 +34,9 @@ const Page = () => {
       router.push(`/exercise/class/${data.data.id}`);
     },
     onError: () => {
-      // LOGIN_NEEDED broadcast하기
+      // 단일 탭 흐름: 로그인 페이지로 이동
       notifyLogout();
-      setTimeout(() => {
-        try {
-          window.close();
-        } catch {}
-      }, 150);
+      router.replace("/login?next=" + encodeURIComponent("/exercise/start"));
     },
   });
 

src/app/(plain)/login/panel/LoginForm.tsx

@@ -15,7 +15,7 @@ import SenifitTextField from "../../../../components/SenifitTextField";
 import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import useMedia from "@/hooks/useMedia";
-import Logo from "@/assets/logo/senifit-logo.svg";
+import Logo from "@/assets/logo/Logo.svg";
 import SenifitDialog from "@/components/SenifitDialog";
 import Link from "next/link";
 import { kakaoChannelLink } from "@/constants/kakaoCh";
@@ -24,12 +24,11 @@ import EyeIcon from "@/components/icons/EyeIcon";
 import EyeOffIcon from "@/components/icons/EyeOffIcon";
 import InquiryButton from "@/components/InquiryButton";
 import BackgroundImage from "@/assets/images/login-background.png";
+import { signupGoogleForm } from "@/constants/signupGF";
 
 type LoginFormValues = { id: string; password: string };
 
 export default function LoginForm() {
-  const signUpLink = "https://forms.gle/7zWgYjysswZ8ZjwE8";
-
   const { isPhone } = useMedia();
 
   const searchParams = useSearchParams();
@@ -195,7 +194,7 @@ export default function LoginForm() {
       />
 
       <InquiryButton
-        onClick={() => window.open(signUpLink, "_blank")}
+        onClick={() => window.open(signupGoogleForm, "_blank")}
         mt={1.5}
         width={200}
         height={32}

src/app/(with-container)/(exercise)/exercise/check-selected/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { ButtonProps, Stack } from "@mui/material";
+// import { ButtonProps } from "@mui/material";
+import { Stack } from "@mui/material";
 import React, { useEffect, useRef, useState } from "react";
 import GradationPageInfoCard from "../../../../../components/GradationPageInfoCard";
 import useProgramStore from "@/states/useProgramStore";
@@ -12,7 +13,7 @@ import { createBroadcastListener } from "@/utils/broadcast";
 import Members from "./panel/Members";
 import Routine from "./panel/Routine";
 import SenifitDialog from "@/components/SenifitDialog";
-import Link from "next/link";
+// import Link from "next/link";
 
 // broadcast handled via utils/broadcast
 
@@ -117,21 +118,12 @@ const Page = () => {
         dialogType={"success"}
         title={"이제 수업을 시작할까요?"}
         primaryText={"네, 시작할게요"}
-        primaryButtonProps={
-          {
-            component: Link,
-            href: "/exercise/start",
-            target: "_blank",
-            rel: "noopener noreferrer",
-          } as ButtonProps
-        }
+        onPrimaryClick={() => {
+          setOpenModal(false);
+          router.push("/exercise/start");
+        }}
         secondaryText={type === "customized" ? "수정하기" : "돌아가기"}
-        secondaryButtonProps={
-          {
-            component: Link,
-            href: routineUrl,
-          } as ButtonProps
-        }
+        onSecondaryClick={() => setOpenModal(false)}
       />
     </>
   );

src/app/(with-container)/(exercise)/exercise/done/[id]/page.tsx

@@ -107,7 +107,7 @@ const Page = () => {
             }}
           >
             <Box component={"span"}>{`${formatTime(seconds ?? 0)}`}</Box>
-            {` / ${formatTime(selectedProgram?.duration ?? 0)}`}
+            {` / ${formatTime((selectedProgram?.duration ?? 0) * 60)}`}
           </Typography>
         </Stack>
       </Stack>