refactor: 코멘트 반영 겸 자잘한 오류 해결

Author: six-standard

.env.sample

@@ -4,5 +4,6 @@ NEXT_PUBLIC_BASE_URL=<'server url here'>
 NEXT_PUBLIC_VELOG_URL=https://velog.io
 NEXT_PUBLIC_ABORT_MS=<'abort time(ms) for fetch here'>
 SENTRY_AUTH_TOKEN=<'sentry auth token here'>
+NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY=<'channelTalk plugin key here'>
 NEXT_PUBLIC_EVENT_LOG=<'Whether to send an event log here (true | false)'>
 SENTRY_DSN=<'sentry dsn here'>

src/apis/dashboard.request.ts

@@ -1,26 +1,21 @@
 import { PostDetailDto, PostListDto, PostSummaryDto } from '@/types';
 import { PATHS } from '@/constants';
-import { InitType, instance } from './instance.request';
+import { instance } from './instance.request';
 
 type SortType = {
   asc: boolean;
   sort: string;
 };
 
-export const postList = async (
-  props: InitType<PostListDto>,
-  sort: SortType,
-  cursor?: string,
-) =>
+export const postList = async (sort: SortType, cursor?: string) =>
   await instance<null, PostListDto>(
     cursor
       ? `${PATHS.POSTS}?cursor=${cursor}&asc=${sort.asc}&sort=${sort.sort}`
       : `${PATHS.POSTS}?asc=${sort.asc}&sort=${sort.sort}`,
-    props,
   );
 
-export const postSummary = async (props: InitType<PostSummaryDto>) =>
-  await instance<null, PostSummaryDto>(PATHS.SUMMARY, props);
+export const postSummary = async () =>
+  await instance<null, PostSummaryDto>(PATHS.SUMMARY);
 
 export const postDetail = async (path: string, start: string, end: string) =>
   await instance<null, PostDetailDto>(

src/apis/instance.request.ts

@@ -60,9 +60,20 @@ export const instance = async <I, R>(
   init?: InitType<I>,
   error?: Record<string, Error>,
 ): Promise<R> => {
+  let cookieHeader = '';
+  if (typeof window === 'undefined') {
+    cookieHeader = (await import('next/headers')).cookies().toString();
+  }
+
   try {
     const data = await fetch('/api' + input, {
       ...init,
+      headers: cookieHeader
+        ? {
+            ...init?.headers,
+            Cookie: cookieHeader,
+          }
+        : init?.headers,
       body: init?.body ? JSON.stringify(init.body) : undefined,
       signal: AbortSignal.timeout
         ? AbortSignal.timeout(ABORT_MS)

src/apis/user.request.ts

@@ -1,7 +1,7 @@
 import { NotFoundError } from '@/errors';
 import { PATHS } from '@/constants';
 import { LoginVo, UserDto } from '@/types';
-import { InitType, instance } from './instance.request';
+import { instance } from './instance.request';
 
 export const login = async (body: LoginVo) =>
   await instance(
@@ -15,8 +15,7 @@ export const login = async (body: LoginVo) =>
     },
   );
 
-export const me = async (props: InitType<UserDto>) =>
-  await instance<null, UserDto>(PATHS.ME, props);
+export const me = async () => await instance<null, UserDto>(PATHS.ME);
 
 export const logout = async () =>
   await instance(PATHS.LOGOUT, { method: 'POST', body: undefined });

src/app/(with-tracker)/(auth-required)/layout.tsx

@@ -1,6 +1,5 @@
 import { ReactElement } from 'react';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import { cookies } from 'next/headers';
 import { Header } from '@/components';
 import { PATHS } from '@/constants';
 import { me } from '@/apis';
@@ -15,8 +14,7 @@ export default async function Layout({ children }: IProp) {
 
   await client.prefetchQuery({
     queryKey: [PATHS.ME],
-    queryFn: async () =>
-      await me({ headers: { Cookie: cookies().toString() } }),
+    queryFn: me,
   });
 
   return (

src/app/(with-tracker)/(auth-required)/main/Content.tsx

@@ -30,7 +30,6 @@ export const Content = () => {
     queryKey: [PATHS.POSTS, [searchParams.asc, searchParams.sort]], // Query Key
     queryFn: async ({ pageParam = '' }) =>
       await postList(
-        {},
         { asc: searchParams.asc === 'true', sort: searchParams.sort || '' },
         pageParam,
       ),
@@ -41,7 +40,7 @@ export const Content = () => {
 
   const { data: summaries } = useQuery({
     queryKey: [PATHS.SUMMARY],
-    queryFn: async () => await postSummary({}),
+    queryFn: postSummary,
   });
 
   useEffect(() => {

src/app/(with-tracker)/(auth-required)/main/page.tsx

@@ -1,6 +1,5 @@
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 import { Metadata } from 'next';
-import { cookies } from 'next/headers';
 import { PATHS } from '@/constants';
 import { postList, postSummary } from '@/apis';
 import { getQueryClient } from '@/utils/queryUtil';
@@ -24,20 +23,16 @@ export default async function Page({ searchParams }: IProp) {
   await client.prefetchInfiniteQuery({
     queryKey: [PATHS.POSTS, [searchParams.asc, searchParams.sort]],
     queryFn: async () =>
-      await postList(
-        { headers: { Cookie: cookies().toString() } },
-        {
-          asc: searchParams.asc === 'true',
-          sort: searchParams.sort || '',
-        },
-      ),
+      await postList({
+        asc: searchParams.asc === 'true',
+        sort: searchParams.sort || '',
+      }),
     initialPageParam: undefined,
   });
 
   await client.prefetchQuery({
     queryKey: [PATHS.SUMMARY],
-    queryFn: async () =>
-      await postSummary({ headers: { Cookie: cookies().toString() } }),
+    queryFn: postSummary,
   });
 
   return (

src/components/auth-required/header/index.tsx

@@ -37,15 +37,13 @@ export const Header = () => {
 
   const { mutate: out } = useMutation({
     mutationFn: logout,
-    onSuccess: () => {
-      client.removeQueries();
-      router.replace('/');
-    },
+    onMutate: () => router.replace('/'),
+    onSuccess: () => client.removeQueries(),
   });
 
   const { data: profiles } = useQuery({
     queryKey: [PATHS.ME],
-    queryFn: async () => me({}),
+    queryFn: me,
   });
 
   useEffect(() => {

src/components/auth-required/main/Section/index.tsx

@@ -7,13 +7,17 @@ import { COLORS, PATHS } from '@/constants';
 import { Icon } from '@/components';
 import { PostType, UserDto } from '@/types';
 import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
+import { UserNameNotFound } from '@/errors';
 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)?.username;
+  const { username } = client.getQueryData([PATHS.ME]) as UserDto;
+  if (!username) {
+    throw new UserNameNotFound();
+  }
   const url = `${process.env.NEXT_PUBLIC_VELOG_URL}/@${username || ''}/${p.slug}`;
 
   return (

src/errors/index.ts

@@ -1 +1,2 @@
 export * from './fetch.error';
+export * from './main.error';