Check-Data-Out · six-standard · Mar 8, 2025 · Feb 28, 2025 · Mar 6, 2025 · Mar 6, 2025
diff --git a/500.html b/500.html
@@ -0,0 +1,180 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Velog Dashboard - 500</title>
+    <style>
+      @media (min-width: 1200px) {
+        div.layout {
+          background: #1e1e1e;
+          width: 500px;
+          height: 300px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          gap: 20px;
+        }
+        div.titleLayout {
+          display: flex;
+          align-items: center;
+          gap: 20px;
+        }
+        div.iconLayout {
+          width: 100px;
+          height: 100px;
+          background: #1ec996;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+        }
+        span.iconText {
+          font-style: italic;
+          font-size: 50px;
+          font-weight: bold;
+          color: white;
+          margin-top: 10px;
+          margin-left: -10px;
+        }
+        span.text {
+          color: white;
+          font-size: 24px;
+          font-weight: 500;
+        }
+        h2.titleText {
+          color: white;
+          font-size: 28px;
+          font-weight: bold;
+        }
+      }
+      @media (min-width: 992px) and (max-width: 1199px) {
+        div.layout {
+          background: #1e1e1e;
+          width: 450px;
+          height: 250px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          gap: 20px;
+        }
+        div.titleLayout {
+          display: flex;
+          align-items: center;
+          gap: 20px;
+        }
+        div.iconLayout {
+          width: 80px;
+          height: 80px;
+          background: #1ec996;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+        }
+        span.iconText {
+          font-style: italic;
+          font-size: 40px;
+          font-weight: bold;
+          color: white;
+          margin-top: 10px;
+          margin-left: -10px;
+        }
+        span.text {
+          color: white;
+          font-size: 20px;
+          font-weight: 500;
+        }
+        h2.titleText {
+          color: white;
+          font-size: 24px;
+          font-weight: bold;
+        }
+      }
+
+      @media (max-width: 991px) {
+        div.layout {
+          background: #1e1e1e;
+          width: 350px;
+          height: 250px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          gap: 20px;
+        }
+        div.titleLayout {
+          display: flex;
+          align-items: center;
+          gap: 20px;
+        }
+        div.iconLayout {
+          width: 80px;
+          height: 80px;
+          background: #1ec996;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 4px;
+        }
+        span.iconText {
+          font-style: italic;
+          font-size: 40px;
+          font-weight: normal;
+          color: white;
+          margin-top: 10px;
+          margin-left: -10px;
+        }
+        span.text {
+          color: white;
+          font-size: 18px;
+          font-weight: 500;
+        }
+        h2.titleText {
+          color: white;
+          font-size: 22px;
+          font-weight: bold;
+        }
+      }
+      * {
+        transition: all;
+        transition-duration: 300ms;
+      }
+      body {
+        width: 100%;
+        height: 100vh;
+        overflow: hidden;
+        background: #121212;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="layout">
+      <div class="titleLayout">
+        <div class="iconLayout">
+          <span class="iconText"><span style="font-weight: 400">V</span>D</span>
+        </div>
+        <h2 class="titleText">Velog Dashboard</h2>
+      </div>
+      <span class="text">알 수 없는 오류가 발생했습니다.</span>
+    </div>
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-8G3N74JV82"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+
+      gtag('config', 'G-8G3N74JV82');
+    </script>
+  </body>
+</html>
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@channel.io/channel-web-sdk-loader": "^2.0.0",
     "@next/third-parties": "^15.1.7",
+    "@sentry/core": "^9.4.0",
     "@sentry/nextjs": "^8.47.0",
     "@tanstack/react-query": "^5.61.3",
     "@tanstack/react-query-devtools": "^5.62.11",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/apis/instance.request.ts b/src/apis/instance.request.ts
@@ -75,10 +75,9 @@ export const instance = async <I, R>(
     return (data.body as unknown as SuccessType<R>).data;
   } catch (err: unknown) {
     const context = err as Response;
-    if (location && !context.ok && context.status === 403) {
+    if (location && !context.ok && context.status === 401) {
       window.location.replace('/');
     }
-    //context.status === 401 ||
     setContext('Request', {
       path: context.url,
       status: context.status,

diff --git a/src/app/(with-tracker)/(login)/Content.tsx b/src/app/(with-tracker)/(login)/Content.tsx
@@ -3,7 +3,7 @@
 import { useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import Image from 'next/image';
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import { Input, Button } from '@/components';
 import { LoginVo } from '@/types';
 import { login, sampleLogin } from '@/apis';
@@ -14,7 +14,6 @@ const responsiveStyle =
 
 export const Content = () => {
   const { replace } = useRouter();
-  const client = useQueryClient();
 
   const {
     register,
@@ -23,7 +22,6 @@ export const Content = () => {
   } = useForm<LoginVo>({ mode: 'all' });
 
   const onSuccess = () => {
-    client.clear();
     trackUserEvent(MessageEnum.LOGIN);
     replace('/main?asc=false&sort=');
   };

diff --git a/src/components/auth-required/header/index.tsx b/src/components/auth-required/header/index.tsx
@@ -9,6 +9,8 @@ import { NameType } from '@/components';
 import { useResponsive } from '@/hooks';
 import { logout, me } from '@/apis';
 import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
+import { revalidate } from '@/utils/revalidateUtil';
+
 import { defaultStyle, Section, textStyle } from './Section';
 
 const PARAMS = {
@@ -37,13 +39,19 @@ export const Header = () => {
 
   const { mutate: out } = useMutation({
     mutationFn: logout,
-    onMutate: () => router.replace('/'),
-    onSuccess: () => client.removeQueries(),
+    onSuccess: async () => {
+      await revalidate();
+      client.clear();
+      router.replace('/');
+    },
   });
 
   const { data: profiles } = useQuery({
     queryKey: [PATHS.ME],
     queryFn: me,
+    enabled: !!client.getQueryData([PATHS.ME]),
+    // 로그아웃 후 리렌더링되어 다시 fetch되는 경우 해결
+    // 어차피 prefetch를 통해 데이터를 불러온 상태에서 렌더하기 때문에, 캐시 여부만 판단하면 됨
   });
 
   useEffect(() => {

diff --git a/src/components/auth-required/main/Section/index.tsx b/src/components/auth-required/main/Section/index.tsx
@@ -1,27 +1,22 @@
 'use client';
 
-import { useQueryClient } from '@tanstack/react-query';
 import { useState } from 'react';
-import { UserNameNotFoundError } from '@/errors';
 import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 import { parseNumber } from '@/utils/numberUtil';
 import { COLORS, env, PATHS } from '@/constants';
 import { PostType, UserDto } from '@/types';
 import { Icon } from '@/components';
+import { getQueryClient } from '@/utils/queryUtil';
 import { Graph } from './Graph';
 
 export const Section = (p: PostType) => {
   const [open, setOpen] = useState(false);
-  const client = useQueryClient();
 
-  const { username } = client.getQueryData([PATHS.ME]) as UserDto;
-  const URL = env.VELOG_URL;
+  const username = (
+    getQueryClient().getQueryData([PATHS.ME]) as Partial<UserDto>
+  )?.username;
 
-  if (!username) {
-    throw new UserNameNotFoundError();
-  }
-
-  const url = `${URL}/@${username}/${p.slug}`;
+  const url = `${env.VELOG_URL}/@${username}/${p.slug}`;
 
   return (
     <section className="flex flex-col w-full h-fit relative">

diff --git a/src/utils/queryUtil.ts b/src/utils/queryUtil.ts
@@ -3,7 +3,7 @@ import { toast } from 'react-toastify';
 
 let localQueryClient: QueryClient | undefined;
 const STALE_TIME = 1000 * 60 * 3;
-const GC_TIME = 1000;
+const GC_TIME = 1000 * 60 * 20;
 
 const createQueryClient = () =>
   new QueryClient({

diff --git a/src/utils/revalidateUtil.ts b/src/utils/revalidateUtil.ts
@@ -0,0 +1,9 @@
+'use server';
+
+import { revalidatePath } from 'next/cache';
+import { redirect } from 'next/navigation';
+
+export async function revalidate() {
+  revalidatePath('/', 'layout');
+  redirect('/');
+}