[25.02.16 / TASK-118] Feature: 채널톡 추가 및 헤더 로고 클릭 동작 추가 (#13)

* hotfix: 일부 오류 수정
username 관련 오류 및 SSR 렌더린 관련 오류로 추정되는 오류 수정

* feat: 채널톡 추가 및 헤더 로고 동작 추가

* refactor: console.log 제거

* refactor: 메세지 내용 변경

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

* refactor: username 관련 코드 수정

* refactor: ENV 오류 전용 공통 오류 객체 추가

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

package.json

@@ -13,6 +13,7 @@
     "test": "jest"
   },
   "dependencies": {
+    "@channel.io/channel-web-sdk-loader": "^2.0.0",
     "@sentry/nextjs": "^8.47.0",
     "@tanstack/react-query": "^5.61.3",
     "@tanstack/react-query-devtools": "^5.62.11",

pnpm-lock.yaml

@@ -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/dashboard.request.ts

@@ -1,17 +1,17 @@
 import returnFetch, { FetchArgs } from 'return-fetch';
 
 import { captureException, setContext } from '@sentry/nextjs';
-import { ServerNotRespondingError } from '@/errors';
+import { EnvNotFoundError, ServerNotRespondingError } from '@/errors';
 
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 const ABORT_MS = Number(process.env.NEXT_PUBLIC_ABORT_MS);
 
 if (Number.isNaN(ABORT_MS)) {
-  throw new Error('ABORT_MS가 ENV에서 설정되지 않았습니다');
+  throw new EnvNotFoundError('ABORT_MS');
 }
 
 if (!BASE_URL) {
-  throw new Error('BASE_URL이 ENV에서 설정되지 않았습니다.');
+  throw new EnvNotFoundError('BASE_URL');
 }
 
 type ErrorType = {
@@ -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/instance.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/apis/user.request.ts

@@ -1,9 +1,7 @@
 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 { getCookieForAuth } from '@/utils/cookieUtil';
 import { me } from '@/apis';
 import { getQueryClient } from '@/utils/queryUtil';
 
@@ -16,8 +14,7 @@ export default async function Layout({ children }: IProp) {
 
   await client.prefetchQuery({
     queryKey: [PATHS.ME],
-    queryFn: async () =>
-      await me(getCookieForAuth(cookies, ['access_token', 'refresh_token'])),
+    queryFn: me,
   });
 
   return (

src/app/(with-tracker)/(auth-required)/layout.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/Content.tsx

@@ -1,9 +1,7 @@
 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 { getCookieForAuth } from '@/utils/cookieUtil';
 import { getQueryClient } from '@/utils/queryUtil';
 import { Content } from './Content';
 
@@ -25,22 +23,16 @@ export default async function Page({ searchParams }: IProp) {
   await client.prefetchInfiniteQuery({
     queryKey: [PATHS.POSTS, [searchParams.asc, searchParams.sort]],
     queryFn: async () =>
-      await postList(
-        getCookieForAuth(cookies, ['access_token', 'refresh_token']),
-        {
-          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(
-        getCookieForAuth(cookies, ['access_token', 'refresh_token']),
-      ),
+    queryFn: postSummary,
   });
 
   return (

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

@@ -5,7 +5,7 @@ import * as sentry from '@sentry/nextjs';
 import type { Metadata } from 'next';
 import { ReactNode } from 'react';
 import './globals.css';
-import { QueryProvider } from '@/components';
+import { ChannelTalkProvider, QueryProvider } from '@/components';
 
 export const metadata: Metadata = {
   title: 'Velog Dashboard',
@@ -23,8 +23,10 @@ export default function RootLayout({
       <body className={`${NotoSansKr.className} w-full bg-BG-MAIN`}>
         <sentry.ErrorBoundary>
           <QueryProvider>
-            <ToastContainer autoClose={2000} />
-            {children}
+            <ChannelTalkProvider>
+              <ToastContainer autoClose={2000} />
+              {children}
+            </ChannelTalkProvider>
           </QueryProvider>
         </sentry.ErrorBoundary>
       </body>