Merge pull request #122 from softeerbootcamp4th/fix/CLAP-176

fix(CLAP-176): 로그인 만료 시 타이머 음수 되는 이슈 해결,  로그인 연장 클릭 시 확인 모달 띄우기

packages/service/src/common/components/GlobalNavigationBar/GlobalNavs/ExpirationTimer/ExpirationTimer.tsx

@@ -1,8 +1,9 @@
 import { useState, useEffect } from "react";
 import * as style from "./ExpirationTimer.css";
 import { PiTimerBold } from "react-icons/pi";
-import { useAuth } from "@watermelon-clap/core/src/hooks";
+import { useAuth, useModal } from "@watermelon-clap/core/src/hooks";
 import { css } from "@emotion/react";
+import { theme } from "@watermelon-clap/core/src/theme";
 
 interface IExpirationTimerProps {
   diffMs: number;
@@ -14,9 +15,20 @@ export const ExpirationTimer = ({ diffMs }: IExpirationTimerProps) => {
   const { refresh, getExpirationTime } = useAuth();
 
   const handleRefreshToken = () => {
-    refresh()?.then(() => setRemainingTime(getExpirationTime() as number));
+    openModal({
+      type: "confirm",
+      props: {
+        title: "로그인",
+        content: "로그인을 연장하시겠습니까?",
+        confirmEvent: () => {
+          refresh()?.then(() =>
+            setRemainingTime(getExpirationTime() as number),
+          );
+        },
+      },
+    });
   };
-
+  const { openModal } = useModal();
   useEffect(() => {
     if (remainingTime <= 0) return;
 
@@ -45,17 +57,25 @@ export const ExpirationTimer = ({ diffMs }: IExpirationTimerProps) => {
   return (
     <span css={style.timer}>
       <PiTimerBold />
-      <div>
-        {diffMins} : {diffSecs}
-      </div>
+      {remainingTime <= 0 ? (
+        <div>로그인 만료</div>
+      ) : (
+        <div>
+          {diffMins} : {diffSecs}
+        </div>
+      )}
       |
       <span
         onClick={handleRefreshToken}
         css={css`
           cursor: pointer;
+          transition: all 0.2s;
+          :hover {
+            color: ${theme.color.gray200};
+          }
         `}
       >
-        갱신
+        연장
       </span>
     </span>
   );