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';