Merge branch 'develop' of https://github.com/PERMIT-SEOUL/permit-fe

Author: pepperdad

apps/ticket/src/app/(pages)/staff/ticket-authorization/_clientBoundary/Header/index.module.scss

@@ -0,0 +1,80 @@
+@use "@permit/design-system/styles/variables" as theme;
+
+.header {
+  width: 100%;
+
+  background-color: theme.$black;
+}
+
+.content {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 40px 40px 20px;
+
+  // Mobile responsive
+  @media (max-width: 768px) {
+    height: 56px;
+    padding: 14px 16px;
+  }
+}
+
+.logo {
+  position: relative;
+  width: 115.43px;
+  height: 17px;
+
+  // Mobile responsive - 데스크톱과 동일한 크기 유지
+  @media (max-width: 768px) {
+    width: 115.43px;
+    height: 17px;
+  }
+}
+
+.logo_image {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.actions {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  align-items: center;
+
+  // Mobile responsive
+  @media (max-width: 768px) {
+    gap: 8px;
+  }
+}
+
+.nav_button {
+  height: 42px;
+  padding: 10px 36px;
+
+  font-weight: theme.$medium;
+  font-size: theme.$body-14;
+
+  background-color: theme.$gray-700;
+  border-color: theme.$gray-700;
+  border-radius: 34px;
+
+  transition: theme.$transition-fast;
+
+  &:hover {
+    background-color: theme.$gray-600;
+    border-color: theme.$gray-600;
+  }
+
+  // Mobile responsive
+  @media (max-width: 768px) {
+    height: 34px;
+    padding: 10px 24px;
+
+    border-radius: 34px;
+  }
+}

apps/ticket/src/app/(pages)/staff/ticket-authorization/_clientBoundary/Header/index.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname, useRouter } from "next/navigation";
+import classNames from "classnames/bind";
+import permitLogo from "public/assets/png/permit_logo.png";
+
+import { Button } from "@permit/design-system";
+import { useLogoutMutation } from "@/data/users/postUserLogout/mutation";
+import { safeLocalStorage } from "@/lib/storage";
+import { PATH } from "@/shared/constants/path";
+import { IS_LOGINED } from "@/shared/constants/storage";
+
+import styles from "./index.module.scss";
+
+const cx = classNames.bind(styles);
+
+export const Header = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+
+  const [isLogined, setIsLogined] = useState(false);
+
+  const { mutateAsync: mutateLogout } = useLogoutMutation();
+
+  useEffect(() => {
+    try {
+      const stored = safeLocalStorage.get(IS_LOGINED);
+
+      if (stored !== null) {
+        setIsLogined(JSON.parse(stored));
+      }
+    } catch {
+      // 파싱 실패 시 기본값(false) 유지
+    }
+  }, [pathname]);
+
+  const handleSignout = async () => {
+    try {
+      // TODO: 로그아웃 여부 물어봐야할까?
+      if (!confirm("로그아웃 하시겠습니까?")) {
+        return;
+      }
+
+      await mutateLogout();
+
+      safeLocalStorage.remove(IS_LOGINED);
+      window.location.href = `${PATH.LOGIN}?redirectUrl=${encodeURIComponent(pathname)}`;
+    } catch (error) {
+      // 로그아웃 에러는 처리하지 않고, 로그인 페이지로 이동
+      safeLocalStorage.remove(IS_LOGINED);
+      window.location.href = `${PATH.LOGIN}?redirectUrl=${encodeURIComponent(pathname)}`;
+    }
+  };
+
+  const onLoginClick = () => {
+    router.push(`${PATH.LOGIN}?redirectUrl=${encodeURIComponent(pathname)}`);
+  };
+
+  return (
+    <header className={cx("header")}>
+      <div className={cx("content")}>
+        <Link className={cx("logo")} href="/">
+          <Image src={permitLogo} alt="PERMIT" className={cx("logo_image")} />
+        </Link>
+
+        <div className={cx("actions")}>
+          <Button
+            variant="secondary"
+            size="sm"
+            className={cx("nav_button")}
+            onClick={isLogined ? handleSignout : onLoginClick}
+          >
+            {isLogined ? "Logout" : "Login"}
+          </Button>
+        </div>
+      </div>
+    </header>
+  );
+};

apps/ticket/src/app/(pages)/staff/ticket-authorization/_clientBoundary/TicketAuthorizationClient/index.module.scss

@@ -2,8 +2,7 @@
 
 .container {
   width: 100%;
-  min-height: 100vh;
-  margin-top: 120px;
+  margin: 40px 0;
   padding: 24px;
 
   background-color: theme.$black;

apps/ticket/src/app/(pages)/staff/ticket-authorization/page.tsx

@@ -1,7 +1,13 @@
+import { Header } from "./_clientBoundary/Header";
 import { TicketAuthorizationClient } from "./_clientBoundary/TicketAuthorizationClient";
 
 const TicketAuthorizationPage = () => {
-  return <TicketAuthorizationClient />;
+  return (
+    <>
+      <Header />
+      <TicketAuthorizationClient />
+    </>
+  );
 };
 
 export default TicketAuthorizationPage;

apps/ticket/src/shared/components/AuthErrorFallback/index.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { LoadingWithLayout } from "../LoadingWithLayout";
 
 export const AuthErrorFallback = () => {
-  const [isLoading, setIsLoaidng] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
 
   useEffect(() => {
     const tokenReissue = async () => {