[25.06.19 / TASK-207] Refactor - 프로젝트 전반 리팩토링

.env.sample

@@ -1,11 +1,7 @@
 '.env.development (개발 환경), .env.production (배포 환경)'
 
 NEXT_PUBLIC_BASE_URL=<'server url here'>
-NEXT_PUBLIC_VELOG_URL=https://velog.io
-NEXT_PUBLIC_ABORT_MS=<'abort time(ms) for fetch here'>
-NEXT_PUBLIC_SENTRY_AUTH_TOKEN=<'sentry auth token here'>
 NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY=<'channelTalk plugin key here'>
 NEXT_PUBLIC_GA_ID=<'Google Analytics ID here'>
-NEXT_PUBLIC_EVENT_LOG=<'Whether to send an event log here (true | false)'>
-NEXT_PUBLIC_SENTRY_DSN=<'sentry dsn here'>
-NEXT_PUBLIC_ARCADE_URL=<'how-to-use url here'>
+NEXT_PUBLIC_SENTRY_AUTH_TOKEN=<'sentry auth token here'>
+NEXT_PUBLIC_SENTRY_DSN=<'sentry dsn here'>

.eslintrc.js

@@ -28,7 +28,10 @@ module.exports = {
   ],
   rules: {
     'prettier/prettier': ['error', { printWidth: 100 }],
-    'import/order': ['error', { groups: ['builtin', 'external', 'internal'] }],
+    'import/order': [
+      'error',
+      { groups: ['builtin', 'external', 'internal'], alphabetize: { order: 'asc' } },
+    ],
     'no-restricted-imports': ['warn', { patterns: ['../../*'] }],
     'react/react-in-jsx-scope': 'off',
     'testing-library/no-container': 'warn',

sentry.client.config.ts

@@ -3,10 +3,11 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from '@sentry/nextjs';
-import { env } from '@/constants';
+
+import { ENVS } from '@/constants';
 
 Sentry.init({
-  dsn: env.SENTRY_DSN,
+  dsn: ENVS.SENTRY_DSN,
   release: 'production',
 
   // Add optional integrations for additional features
@@ -25,5 +26,5 @@ Sentry.init({
 
   // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
-  enabled: process.env.NODE_ENV === 'production',
+  enabled: ENVS.NODE_ENV === 'production',
 });

sentry.edge.config.ts

@@ -4,16 +4,16 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from '@sentry/nextjs';
-import { env } from '@/constants';
+import { ENVS } from '@/constants';
 
 Sentry.init({
-  dsn: env.SENTRY_DSN,
+  dsn: ENVS.SENTRY_DSN,
   release: 'production',
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 0.05,
 
   // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
-  enabled: process.env.NODE_ENV === 'production',
+  enabled: ENVS.NODE_ENV === 'production',
 });

sentry.server.config.ts

@@ -3,16 +3,16 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from '@sentry/nextjs';
-import { env } from '@/constants';
+import { ENVS } from '@/constants';
 
 Sentry.init({
-  dsn: env.SENTRY_DSN,
+  dsn: ENVS.SENTRY_DSN,
   release: 'production',
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 0.1,
 
   // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
-  enabled: process.env.NODE_ENV === 'production',
+  enabled: ENVS.NODE_ENV === 'production',
 });

src/utils/componentUtil.tsx → src/__test__/instance.test.tsx

@@ -1,6 +1,6 @@
 import { render, RenderResult } from '@testing-library/react';
 import { ReactElement } from 'react';
-import { QueryProvider } from '@/components';
+import { QueryProvider } from '@/app/components/Provider/QueryProvider';
 
 export const renderWithQueryClient = (element: ReactElement): RenderResult =>
   render(<QueryProvider>{element}</QueryProvider>);

src/__test__/login.test.tsx

@@ -1,9 +1,9 @@
-import { userEvent } from '@testing-library/user-event';
 import { act, screen } from '@testing-library/react';
-import { ToastContainer } from 'react-toastify';
+import { userEvent } from '@testing-library/user-event';
 import { useRouter } from 'next/navigation';
-import { renderWithQueryClient } from '@/utils/componentUtil';
+import { ToastContainer } from 'react-toastify';
 import { default as Login } from '@/app/(login)/page';
+import { renderWithQueryClient } from './instance.test';
 
 jest.mock('next/navigation', () => ({
   useRouter: jest.fn(),

src/__test__/main.test.tsx

@@ -1,7 +1,7 @@
 import { screen, waitFor } from '@testing-library/react';
-import { renderWithQueryClient } from '@/utils/componentUtil';
 import { Content } from '@/app/(auth-required)/main/Content';
-import { Header } from '@/app/(auth-required)/components/header';
+import { Header } from '@/app/components/Header';
+import { renderWithQueryClient } from './instance.test';
 
 jest.mock('next/navigation', () => ({
   useSearchParams: () => ({

src/apis/dashboard.request.ts

@@ -1,5 +1,5 @@
-import { PostDetailDto, PostListDto, PostSummaryDto, TotalStatsDto } from '@/types';
 import { PATHS, SidebarIdType } from '@/constants';
+import { PostDetailDto, PostListDto, PostSummaryDto, TotalStatsDto } from '@/types';
 
 import { instance } from './instance.request';
 

src/apis/instance.request.ts

@@ -1,8 +1,9 @@
-import returnFetch, { FetchArgs } from 'return-fetch';
-
 import { captureException, setContext } from '@sentry/nextjs';
+import returnFetch, { FetchArgs } from 'return-fetch';
+import { ENVS } from '@/constants';
 import { ServerNotRespondingError } from '@/errors';
-import { env } from '@/constants';
+
+const ABORT_MS = 10000;
 
 type ErrorType = {
   code: string;
@@ -27,7 +28,7 @@ const abortPolyfill = (ms: number) => {
 };
 
 const fetch = returnFetch({
-  baseUrl: env.BASE_URL,
+  baseUrl: ENVS.BASE_URL,
   headers: {
     Accept: 'application/json',
     'Content-Type': 'application/json',
@@ -66,8 +67,8 @@ export const instance = async <I, R>(
         : init?.headers,
       body: init?.body ? JSON.stringify(init.body) : undefined,
       signal: AbortSignal.timeout
-        ? AbortSignal.timeout(Number(env.ABORT_MS))
-        : abortPolyfill(Number(env.ABORT_MS)),
+        ? AbortSignal.timeout(Number(ABORT_MS))
+        : abortPolyfill(Number(ABORT_MS)),
       credentials: 'include',
       cache: 'no-store',
     });

src/apis/leaderboard.request.ts

@@ -1,5 +1,5 @@
-import { LeaderboardListDto } from '@/types/leaderboard.type';
 import { PATHS } from '@/constants';
+import { LeaderboardListDto } from '@/types/leaderboard.type';
 import { instance } from './instance.request';
 
 export const leaderboardList = async ({

src/apis/user.request.ts

@@ -1,5 +1,5 @@
-import { NotFoundError } from '@/errors';
 import { PATHS } from '@/constants';
+import { NotFoundError } from '@/errors';
 import { LoginVo, UserDto } from '@/types';
 import { instance } from './instance.request';
 

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

@@ -1,23 +1,14 @@
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import { ReactElement } from 'react';
-import { getQueryClient } from '@/utils/queryUtil';
-import { PATHS } from '@/constants';
 import { me, notiList } from '@/apis';
-import { Notice, Header } from './components';
-
-interface IProp {
-  children: ReactElement;
-}
+import { Notice, Header } from '@/app/components';
+import { PATHS } from '@/constants';
+import { getQueryClient } from '@/utils';
 
-export default async function Layout({ children }: IProp) {
+export default async function Layout({ children }: { children: React.ReactNode }) {
   const client = getQueryClient();
 
   await client.prefetchQuery({ queryKey: [PATHS.ME], queryFn: me });
-
-  await client.prefetchQuery({
-    queryKey: [PATHS.NOTIS],
-    queryFn: notiList,
-  });
+  await client.prefetchQuery({ queryKey: [PATHS.NOTIS], queryFn: notiList });
 
   return (
     <HydrationBoundary state={dehydrate(client)}>

src/app/(auth-required)/leaderboards/Content.tsx

@@ -1,14 +1,14 @@
 'use client';
 
 import { useQuery } from '@tanstack/react-query';
-import { useMemo } from 'react';
 import { startHolyLoader } from 'holy-loader';
-import { Dropdown } from '@/components';
+import { useMemo } from 'react';
+import { leaderboardList } from '@/apis';
+import { Rank } from '@/app/components';
 import { PATHS } from '@/constants';
 import { useSearchParam } from '@/hooks';
-import { leaderboardList } from '@/apis';
+import { Dropdown } from '@/shared';
 import { LeaderboardItemType } from '@/types';
-import { Rank } from './Rank';
 
 export type searchParamsType = {
   based: 'user' | 'post';

src/app/(auth-required)/leaderboards/page.tsx

@@ -1,8 +1,8 @@
-import { Metadata } from 'next';
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
-import { getQueryClient } from '@/utils/queryUtil';
-import { PATHS } from '@/constants';
+import { Metadata } from 'next';
 import { leaderboardList } from '@/apis';
+import { PATHS } from '@/constants';
+import { getQueryClient } from '@/utils';
 import { Content, searchParamsType } from './Content';
 
 export const metadata: Metadata = {

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

@@ -3,13 +3,13 @@
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 import { useEffect, useMemo } from 'react';
 import { useInView } from 'react-intersection-observer';
-import { useSearchParam } from '@/hooks';
-import { Button, Dropdown, Check } from '@/components';
 import { postList, postSummary } from '@/apis';
+import { Section, Summary } from '@/app/components';
 import { PATHS, SORT_TYPE } from '@/constants';
+import { useSearchParam } from '@/hooks';
+import { Button, Dropdown, Check } from '@/shared';
 import { SortKey, SortValue } from '@/types';
-import { convertDateToKST } from '@/utils/dateUtil';
-import { Section, Summary } from './components';
+import { convertDateToKST } from '@/utils';
 
 const sorts: Array<[SortKey, SortValue]> = Object.entries(SORT_TYPE) as Array<[SortKey, SortValue]>;
 
@@ -28,7 +28,7 @@ export const Content = () => {
         { asc: searchParams.asc === 'true', sort: searchParams.sort || '' },
         pageParam,
       ),
-    getNextPageParam: (lastPage) => lastPage.nextCursor,
+    getNextPageParam: (lastPage) => lastPage?.nextCursor,
     getPreviousPageParam: () => '',
     initialPageParam: '',
   });
@@ -56,7 +56,7 @@ export const Content = () => {
 
       <div className="w-full flex flex-col gap-[30px] overflow-auto max-TBL:gap-[20px]">
         <div className="flex h-fit flex-col items-center p-[20px] bg-BG-SUB gap-5 rounded-[4px]">
-          <span className="text-TEXT-ALT text-ST5 MBI:hidden">
+          <span className="text-TEXT-ALT text-SUBTITLE-5 MBI:hidden">
             마지막 업데이트 :{' '}
             {convertDateToKST(summaries?.stats?.lastUpdatedDate)?.iso || '업데이트 중..'}
           </span>
@@ -65,7 +65,7 @@ export const Content = () => {
               <Button size="SMALL" disabled>
                 새로고침
               </Button>
-              <span className="text-TEXT-ALT text-ST4 max-TBL:text-ST5 max-MBI:hidden">
+              <span className="text-TEXT-ALT text-SUBTITLE-4 max-TBL:text-SUBTITLE-5 max-MBI:hidden">
                 마지막 업데이트 :{' '}
                 {convertDateToKST(summaries?.stats?.lastUpdatedDate)?.iso || '업데이트 중..'}
               </span>

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

@@ -1,8 +1,8 @@
 import { dehydrate, HydrationBoundary } from '@tanstack/react-query';
 import { Metadata } from 'next';
-import { PATHS } from '@/constants';
 import { postList, postSummary } from '@/apis';
-import { getQueryClient } from '@/utils/queryUtil';
+import { PATHS } from '@/constants';
+import { getQueryClient } from '@/utils';
 import { Content } from './Content';
 
 export const metadata: Metadata = {
@@ -22,17 +22,11 @@ export default async function Page({ searchParams }: IProp) {
   await client.prefetchInfiniteQuery({
     queryKey: [PATHS.POSTS, [searchParams.asc, searchParams.sort]],
     queryFn: async () =>
-      await postList({
-        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: postSummary,
-  });
+  await client.prefetchQuery({ queryKey: [PATHS.SUMMARY], queryFn: postSummary });
 
   return (
     <HydrationBoundary state={dehydrate(client)}>