[ Feature/dev 112] 문제풀기 Floating Button 구현

src/api/fewFetch.ts

@@ -78,12 +78,12 @@ const refreshAccessToken = async (): Promise<string> => {
   const data = await response.json();
 
   setCookie(COOKIES.ACCESS_TOKEN, data.accessToken, {
-    maxAge: 24 * 60 * 60, // 30 days
+    maxAge: 60 * 24 * 60 * 60, 
     path: "/",
   });
 
   setCookie(COOKIES.REFRESH_TOKEN, data.refreshToken, {
-    maxAge: 30 * 24 * 60 * 60, // 30 days
+    maxAge: 60 * 24 * 60 * 60, 
     path: "/",
   });
 

src/app/article/[articleId]/page.tsx

@@ -1,3 +1,4 @@
+import ArticleFloatingButton from "@article/components/ArticleFloatingButton";
 import ArticleTitle from "@article/components/ArticleTitle";
 import EmailContentTemplate from "@article/components/EmailContentTemplate";
 import { prefetchArticleQuery } from "@article/remotes/prefetchArticleQuery";
@@ -33,6 +34,7 @@ export default async function ArticlePage({
         <ArticleTitle />
         <EmailContentTemplate />
       </div>
+      <ArticleFloatingButton />
     </HydrationBoundary>
   );
 }

src/article/components/ArticleFloatingButton/ArticleFloatingButton.test.tsx

@@ -0,0 +1,65 @@
+import { beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+
+import ArticleFloatingButton from ".";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+const push = vi.fn();
+const setProblemIds = vi.fn();
+
+describe("ArticleFloatingButton", () => {
+  beforeAll(() => {
+    vi.mock("next/navigation", async () => {
+      const actual =
+        await vi.importActual<typeof import("next/navigation")>(
+          "next/navigation",
+        );
+      return {
+        ...actual,
+        useParams: vi.fn(() => ({
+          get: vi.fn().mockReturnValueOnce(() => "1"),
+        })),
+        useRouter: vi.fn(() => ({
+          push,
+        })),
+      };
+    });
+
+    vi.mock("@shared/models/useProblemIdsViewModel", async () => {
+      const actual = await vi.importActual<
+        typeof import("@shared/models/useProblemIdsViewModel")
+      >("@shared/models/useProblemIdsViewModel");
+      return {
+        ...actual,
+        useProblemIdsViewModel: vi.fn(() => ({
+          isExistNextProblem: vi.fn(),
+          nextSetProblemId: vi.fn(),
+          clearProblem: vi.fn(),
+          setProblemIds,
+          getCurrentProblemId: vi.fn().mockReturnValueOnce("1"),
+          getTagCurrentProblemText: vi.fn(),
+          currentIdx: 0,
+          prevSetProblemId: vi.fn(),
+          getArticlePathText: vi.fn(),
+          getDayText: vi.fn(),
+        })),
+      };
+    });
+  });
+  beforeEach(() => {
+    render(<ArticleFloatingButton />);
+  });
+
+  it("버튼이 잘 렌더링 되는지 테스트 한다.", () => {
+    const button = screen.getByText("퀴즈 풀기");
+    expect(button).toBeInTheDocument();
+  });
+
+  it("플로팅 버튼 클릭 시 문제 풀기로 넘어간다.", async () => {
+    const button = screen.getByText("퀴즈 풀기");
+    await userEvent.click(button);
+
+    // Ensure that the router's push method was called with the correct path
+    expect(push).toHaveBeenCalledWith("/problem/1");
+  });
+});

src/article/components/ArticleFloatingButton/index.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { useParams, useRouter } from "next/navigation";
+
+import { useEffect, useState } from "react";
+
+import { Button } from "@shared/components/ui/button";
+import { useProblemIdsViewModel } from "@shared/models/useProblemIdsViewModel";
+import { cn } from "@shared/utils/cn";
+
+import ProblemIcon from "public/assets/icon/problemIcon.svg";
+
+export default function ArticleFloatingButton() {
+  const { articleId } = useParams<{ articleId: string }>();
+  const { push } = useRouter();
+  const { getCurrentProblemId } = useProblemIdsViewModel();
+
+  const [showButton, setShowButton] = useState(true);
+
+  const onClickGoProblem = () => {
+    push(`/problem/${getCurrentProblemId()}`);
+    // Mixpanel.track({
+    //   name: EVENT_NAME.ARTICLE_PROBLEMBUTTON_TAPPED,
+    //   property: { id: articleId },
+    // });
+  };
+
+  useEffect(function handleButton () {
+    const handleShowButton = () => {
+      const scrollY = window.scrollY;
+      const viewportHeight = window.innerHeight;
+      const documentHeight = document.documentElement.scrollHeight;
+
+      if (scrollY + viewportHeight >= documentHeight - 1) {
+        setShowButton(false);
+      } else {
+        setShowButton(true);
+      }
+    };
+
+    window.addEventListener("scroll", handleShowButton);
+    return () => {
+      window.removeEventListener("scroll", handleShowButton);
+    };
+  }, []);
+
+  return (
+    <>
+      {showButton && (
+        <div className="fixed bottom-[48px] left-[60%] z-10 w-fit">
+          <Button
+            className={cn(
+              "h-[55px] px-5 py-3.5 bg-main rounded-[99px] shadow flex justify-center items-center gap-2"
+            )}
+            onClick={onClickGoProblem}
+            type="button"
+          >
+            <ProblemIcon />
+            <span className="text-base font-bold text-white">퀴즈 풀기</span>
+          </Button>
+        </div>
+      )}
+    </>
+  );
+}

src/shared/components/TopBar/index.tsx

@@ -22,10 +22,9 @@ export default function TopBar({ onClick, className }: TopBarProps) {
         "relative sticky top-0 flex h-[66px] items-center bg-white",
         className,
       )}
-      onClick={onClickBackIcon}
       data-testid="back-icon"
     >
-      <IcBack />
+      <IcBack onClick={onClickBackIcon} />
     </div>
   );
 }