[24.12.31/ TASK-65] 그래프 페이지 완성

.eslintrc.json

@@ -0,0 +1,6 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "next/typescript"
+  ]
+}

eslint.config.mjs

@@ -12,7 +12,16 @@ import pluginImport from 'eslint-plugin-import';
 /** @type {import('eslint').Linter.Config[]} */
 export default [
   { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
-  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        React: true,
+        NodeJS: true,
+      },
+    },
+  },
   ...tseslint.strict,
   ...tseslint.recommended,
   pluginJs.configs.recommended,

next.config.mjs

@@ -14,6 +14,13 @@ const nextConfig = {
     });
     return config;
   },
+
+  images: {
+    remotePatterns: [
+      { protocol: 'https', hostname: 'velog.velcdn.com', pathname: '**' },
+      { protocol: 'https', hostname: 'images.velog.io', pathname: '**' },
+    ],
+  },
 };
 export default withSentryConfig(nextConfig, {
   // For all available options, see:

package.json

@@ -12,22 +12,27 @@
     "test": "jest"
   },
   "dependencies": {
-    "@sentry/nextjs": "^8",
     "@tanstack/react-query": "^5.61.3",
+    "@tanstack/react-query-devtools": "^5.62.11",
+    "chart.js": "^4.4.7",
     "js-cookie": "^3.0.5",
     "next": "14.2.18",
     "react": "^18",
+    "react-chartjs-2": "^5.2.0",
     "react-dom": "^18",
     "react-hook-form": "^7.53.2",
+    "react-intersection-observer": "^9.14.0",
     "react-toastify": "^10.0.6",
     "return-fetch": "^0.4.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
+    "@sentry/nextjs": "^8.47.0",
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
+    "@types/eslint-config-prettier": "^6.11.3",
     "@types/jest": "^29.5.14",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",

readme.md

@@ -7,6 +7,7 @@
 - `git clone https://github.com/Check-Data-Out/velog-dashboard-v2-fe.git`
 - `cd velog-dashboard-v2-fe`
 - `pnpm install`
+- `NODE_ENV=development pnpm install`
 - `pnpm dev`
 
 ## 린팅

src/__test__/login.test.tsx

@@ -3,9 +3,9 @@ import { act, screen } from '@testing-library/react';
 import { ToastContainer } from 'react-toastify';
 import { useRouter } from 'next/navigation';
 import fetchMock from 'jest-fetch-mock';
-import { renderWithQueryClient } from '@/utils';
+import { renderWithQueryClient } from '@/utils/componentUtil';
 import { TimeoutError } from '@/errors';
-import { Login } from '@/app';
+import { default as Login } from '@/app/(with-tracker)/(login)/page';
 
 jest.mock('next/navigation', () => ({
   useRouter: jest.fn(),

src/apis/dashboard.request.ts

@@ -0,0 +1,28 @@
+import { PostDetailDto, PostListDto, PostSummaryDto } from '@/types';
+import { PATHS } from '@/constants';
+import { InitType, instance } from './instance.request';
+
+type SortType = {
+  asc: boolean;
+  sort: string;
+};
+
+export const postList = async (
+  props: InitType<PostListDto>,
+  sort: SortType,
+  cursor?: number | 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 postDetail = async (path: string, start: string, end: string) =>
+  await instance<null, PostDetailDto>(
+    `${PATHS.DETAIL}/${path}?start=${start}&end=${end}`,
+  );

src/apis/index.ts

@@ -0,0 +1,3 @@
+export * from './dashboard.request';
+export * from './instance.request';
+export * from './user.request';

src/api/index.ts → src/apis/instance.request.ts

@@ -1,6 +1,5 @@
 import returnFetch, { FetchArgs } from 'return-fetch';
 import * as sentry from '@sentry/nextjs';
-
 import { ServerNotRespondingError } from '@/errors';
 
 const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
@@ -16,15 +15,29 @@ if (!BASE_URL) {
 
 type ErrorObject = Record<string, Error>;
 
+type SuccessType<T> = {
+  success: true;
+  message: string;
+  data: T;
+  error: null;
+};
+
+export type InitType<I> = Omit<NonNullable<FetchArgs[1]>, 'body'> & {
+  body?: I | object;
+};
+
 const abortPolyfill = (ms: number) => {
   const controller = new AbortController();
   setTimeout(() => controller.abort(), ms);
   return controller.signal;
 };
 
 const fetch = returnFetch({
-  baseUrl: BASE_URL + '/api',
-  headers: { Accept: 'application/json', 'Content-Type': 'application/json' },
+  baseUrl: BASE_URL,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
   interceptors: {
     response: async (response) => {
       if (!response.ok) {
@@ -38,23 +51,32 @@ const fetch = returnFetch({
   },
 });
 
-export const instance = async (
+export const instance = async <I, R>(
   input: URL | RequestInfo,
-  init?: Omit<NonNullable<FetchArgs[1]>, 'body'> & { body: object },
+  init?: InitType<I>,
   error?: ErrorObject,
-) => {
+): Promise<R> => {
   try {
-    const data = await fetch(input, {
+    const data = await fetch('/api' + input, {
       ...init,
       body: init?.body ? JSON.stringify(init.body) : undefined,
       signal: AbortSignal.timeout
         ? AbortSignal.timeout(ABORT_MS)
         : abortPolyfill(ABORT_MS),
+      credentials: 'include',
     });
 
-    return data as Awaited<ReturnType<typeof fetch>>;
+    return (data.body as unknown as SuccessType<R>).data;
   } catch (err: any) {
     const context = err as Response;
+    if (
+      location &&
+      !context.ok &&
+      (context.status === 401 || context.status === 403)
+    ) {
+      location.replace('/');
+    }
+
     sentry.setContext('Request', {
       path: context.url,
       status: context.status,

src/apis/user.request.ts

@@ -0,0 +1,22 @@
+import { NotFoundError } from '@/errors';
+import { PATHS } from '@/constants';
+import { LoginVo, UserDto } from '@/types';
+import { InitType, instance } from './instance.request';
+
+export const login = async (body: LoginVo) =>
+  await instance(
+    PATHS.LOGIN,
+    { method: 'POST', body },
+    {
+      '404': new NotFoundError(
+        '일치하는 계정을 찾을 수 없습니다',
+        'CannotFindAccount',
+      ),
+    },
+  );
+
+export const me = async (props: InitType<UserDto>) =>
+  await instance<null, UserDto>(PATHS.ME, props);
+
+export const logout = async () =>
+  await instance(PATHS.LOGOUT, { method: 'POST', body: undefined });