Fix: 401 전역 처리에서 user 쿼리 제외 (#187)

* fix: 사용자와 상호작용할 때만 쿼리 실행하도록 수정

* refactor: 401 전역처리에서 user 쿼리 제외

* feat: 캡슐 상세 헤더에 홈버튼 추가

* refactor: 코드리뷰 반영

Author: seueooo

app/(main)/setting/page.tsx

@@ -1,4 +1,6 @@
 "use client";
+import { HTTPError } from "ky";
+import { HTTP_STATUS_CODE } from "@/shared/constants/api";
 import { useLogout } from "@/app/(auth)/_api/auth.queries";
 import { userQueryOptions } from "@/shared/api/queries/user";
 import PopupReport from "@/shared/ui/popup/popup-report";
@@ -10,13 +12,20 @@ import SettingItem from "./_components/setting-item";
 import SettingSection from "./_components/setting-section";
 import UserGreetingSection from "./_components/user-greeting-section";
 import { useOverlay } from "@/shared/hooks/use-overlay";
+import { PATH } from "@/shared/constants/path";
 import * as styles from "./page.css";
 
 const Setting = () => {
   const { mutate: logout } = useLogout();
   const router = useRouter();
   const queryClient = useQueryClient();
-  const { data: userInfo } = useQuery(userQueryOptions.userInfo({}));
+  const { data: userInfo } = useQuery(userQueryOptions.userInfo({
+    onError: (error) => {
+      if (error instanceof HTTPError && error.response.status === HTTP_STATUS_CODE.UNAUTHORIZED) {
+         router.replace(PATH.LOGIN);
+}
+    },
+  }));
   const { open } = useOverlay();
 
   const handleLogout = () => {

app/(sub)/capsule-detail/[invite-code]/[id]/page.tsx

@@ -37,7 +37,9 @@ const CapsuleDetailPage = () => {
   const { data, isLoading, isError } = useQuery(
     capsuleQueryOptions.capsuleDetail(id),
   );
-  const { data: user } = useQuery(userQueryOptions.userInfo());
+  const { data: user } = useQuery(
+    userQueryOptions.userInfo()
+  );
   const { mutate: leaveCapsule } = useLeaveCapsule();
   const router = useRouter();
   const pathname = usePathname();

shared/api/api-client.ts

@@ -2,6 +2,7 @@ import ky, { type Options as KyOptions, type ResponsePromise } from "ky";
 import { HTTP_STATUS_CODE } from "@/shared/constants/api";
 import { HTTPError } from "ky";
 import { PATH } from "@/shared/constants/path";
+import { ENDPOINTS } from "@/shared/constants/endpoints";
 
 const API_BASE_URL =
   process.env.NODE_ENV === "development"
@@ -21,6 +22,10 @@ const http = ky.create({
       async (error) => {
         if (error instanceof HTTPError) {
           const { response } = error;
+          const pathname = new URL(error.request.url).pathname;
+          if (pathname.endsWith(ENDPOINTS.USER_INFO)) {
+            return error;
+          }
           switch (response.status) {
             case HTTP_STATUS_CODE.UNAUTHORIZED: {
               window.location.replace(PATH.LOGIN);

shared/api/queries/user.ts

@@ -9,7 +9,10 @@ const userQueryKeys = {
 } as const;
 
 export const userQueryOptions = {
-  userInfo: (options?: { enabled?: boolean }) =>
+  userInfo: (options?: {
+    enabled?: boolean;
+    onError?: (error: Error) => void;
+  }) =>
     queryOptions({
       queryKey: userQueryKeys.userInfo(),
       queryFn: () => {

shared/assets/icon/home.svg

@@ -1,6 +1,7 @@
 "use client";
 
 import BackIcon from "@/shared/assets/icon/left.svg";
+import HomeIcon from "@/shared/assets/icon/home.svg";
 import { cn } from "@/shared/utils/cn";
 import { useRouter } from "next/navigation";
 import type { ReactElement } from "react";
@@ -24,15 +25,24 @@ const NavbarDetail = ({ renderRight, className }: NavbarDetailProps) => {
     }
   };
 
+  const handleHome = () => {
+    router.push(PATH.HOME);
+  };
+
   return (
     <div className={styles.container}>
+      <div>
       <button
         type="button"
         onClick={handleBack}
-        className={styles.backButton}
+        className={styles.iconButton}
       >
         <BackIcon />
       </button>
+      <button type="button" onClick={handleHome} className={styles.iconButton}>
+        <HomeIcon />
+      </button>
+      </div>
       <div className={cn(styles.rightElement, className)}>
         {renderRightElement}
       </div>

shared/ui/navbar/navbar-detail/index.tsx

@@ -15,9 +15,10 @@ export const container = style({
   maxWidth: "80rem",
 });
 
-export const backButton = style({
+export const iconButton = style({
   width: "4.4rem",
   height: "4.4rem",
+  marginRight: "1rem",
   color: themeVars.color.white[40],
 });