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

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

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

* refactor: console.log 제거

* refactor: 메세지 내용 변경

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

* refactor: username 관련 코드 수정

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

.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",

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

@@ -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/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,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)/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,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/layout.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>

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

@@ -24,13 +24,13 @@ type PropType<T extends clickType> = T extends 'link'
     ? Partial<BaseType> & {
         clickType: 'function';
         action: () => void;
-        children: React.ReactNode | React.ReactNode[];
+        children: React.ReactNode;
       }
     : T extends 'none'
       ? Partial<BaseType> & {
           clickType: 'none';
           action?: undefined;
-          children: React.ReactNode | React.ReactNode[];
+          children: React.ReactNode;
         }
       : never;
 

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(() => {
@@ -62,7 +60,10 @@ export const Header = () => {
   return (
     <nav className="w-full max-MBI:flex max-MBI:justify-center">
       <div className="flex w-fit">
-        <Section clickType="none">
+        <Section
+          clickType="function"
+          action={() => router.replace(`/main${PARAMS.MAIN}`)}
+        >
           <Image
             width={35}
             height={35}

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

@@ -12,13 +12,13 @@ import {
   Tooltip,
   Legend,
 } from 'chart.js';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import { useMemo, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
 import { COLORS, PATHS, SCREENS } from '@/constants';
 import { Dropdown, Input } from '@/components';
 import { useResponsive } from '@/hooks';
 import { postDetail } from '@/apis';
-import { PostDetailValue, PostSummaryDto } from '@/types';
+import { PostDetailValue } from '@/types';
 
 ChartJS.register(
   CategoryScale,
@@ -47,14 +47,6 @@ interface IProp {
 
 export const Graph = ({ id, releasedAt }: IProp) => {
   const width = useResponsive();
-  const client = useQueryClient();
-  const maxDate = useMemo(
-    () =>
-      (
-        client.getQueryData([PATHS.SUMMARY]) as PostSummaryDto
-      )?.stats.lastUpdatedDate.split('T')[0],
-    [],
-  );
 
   const isMBI = width < SCREENS.MBI;
 
@@ -90,7 +82,6 @@ export const Graph = ({ id, releasedAt }: IProp) => {
           form="SMALL"
           value={type.start}
           min={releasedAt.split('T')[0]}
-          max={maxDate}
           onChange={(e) => setType({ ...type, start: e.target.value })}
           placeholder="시작 날짜"
           type="date"
@@ -101,7 +92,6 @@ export const Graph = ({ id, releasedAt }: IProp) => {
           form="SMALL"
           value={type.end}
           min={type.start ? type.start : releasedAt.split('T')[0]}
-          max={maxDate}
           onChange={(e) => setType({ ...type, end: e.target.value })}
           placeholder="종료 날짜"
           type="date"

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

@@ -1,20 +1,30 @@
 'use client';
 
-import { useState } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { EnvNotFoundError, UserNameNotFoundError } from '@/errors';
+import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 import { parseNumber } from '@/utils/numberUtil';
 import { COLORS, PATHS } from '@/constants';
-import { Icon } from '@/components';
 import { PostType, UserDto } from '@/types';
-import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
+import { Icon } from '@/components';
 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 { NEXT_PUBLIC_VELOG_URL } = process.env;
+
+  if (!username) {
+    throw new UserNameNotFoundError();
+  }
+  if (NEXT_PUBLIC_VELOG_URL) {
+    throw new EnvNotFoundError('NEXT_PUBLIC_VELOG_URL');
+  }
+
+  const url = `${process.env.NEXT_PUBLIC_VELOG_URL}/@${username}/${p.slug}`;
 
   return (
     <section className="flex flex-col w-full h-fit relative">
@@ -31,9 +41,7 @@ export const Section = (p: PostType) => {
             title="해당 글로 바로가기"
             onClick={(e) => {
               e.stopPropagation();
-              window.open(
-                `${process.env.NEXT_PUBLIC_VELOG_URL}/@${username}/${p.slug}`,
-              );
+              window.open(url);
             }}
           >
             <Icon name="Shortcut" color="#ECECEC" size={20} />

src/components/common/ChannelTalkProvider.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import * as ChannelService from '@channel.io/channel-web-sdk-loader';
+import { useEffect } from 'react';
+
+const ChannelTalkServiceLoader = () => {
+  const CHANNELTALK_PLUGIN_KEY = process.env.NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY;
+  if (!CHANNELTALK_PLUGIN_KEY) {
+    throw new Error('CHANNELTALK_PLUGIN_KEY가 ENV에서 설정되지 않았습니다');
+  }
+
+  ChannelService.loadScript();
+  ChannelService.boot({ pluginKey: CHANNELTALK_PLUGIN_KEY });
+};
+
+export const ChannelTalkProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  useEffect(() => ChannelTalkServiceLoader(), []);
+  return <>{children}</>;
+};