Merge pull request #19 from Check-Data-Out/dev

[25.02.28] 릴리즈 - Dev

Author: Nuung

.env.sample

@@ -3,7 +3,8 @@
 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_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)'>
-SENTRY_DSN=<'sentry dsn here'>
+NEXT_PUBLIC_SENTRY_DSN=<'sentry dsn here'>

.github/workflows/docker-publish.yaml

@@ -30,9 +30,10 @@ jobs:
           echo "NEXT_PUBLIC_VELOG_URL=${{ secrets.NEXT_PUBLIC_VELOG_URL }}" >> .env
           echo "NEXT_PUBLIC_ABORT_MS=${{ secrets.NEXT_PUBLIC_ABORT_MS }}" >> .env
           echo "NEXT_PUBLIC_EVENT_LOG=${{ secrets.NEXT_PUBLIC_EVENT_LOG }}" >> .env
-          echo "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}" >> .env
+          echo "NEXT_PUBLIC_SENTRY_AUTH_TOKEN=${{ secrets.NEXT_PUBLIC_SENTRY_AUTH_TOKEN }}" >> .env
           echo "NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY=${{ secrets.NEXT_PUBLIC_CHANNELTALK_PLUGIN_KEY }}" >> .env
-          echo "SENTRY_DSN=${{ secrets.SENTRY_DSN }}" >> .env
+          echo "NEXT_PUBLIC_GA_ID=${{ secrets.NEXT_PUBLIC_GA_ID }}" >> .env
+          echo "NEXT_PUBLIC_SENTRY_DSN=${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}" >> .env
           cp .env .env.production
 
       - name: Build Next.js application

eslint.config.mjs

@@ -44,7 +44,7 @@ export default [
       '@typescript-eslint/promise-function-async': 'error',
       '@typescript-eslint/consistent-type-assertions': 'error',
       '@typescript-eslint/naming-convention': 'off',
-      'no-restricted-imports': ['error', { patterns: ['..*'] }],
+      'no-restricted-imports': ['warn', { patterns: ['..*'] }],
     },
     languageOptions: {
       parserOptions: { project: true, tsconfigRootDir: import.meta.dirname },

package.json

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@channel.io/channel-web-sdk-loader": "^2.0.0",
+    "@next/third-parties": "^15.1.7",
     "@sentry/nextjs": "^8.47.0",
     "@tanstack/react-query": "^5.61.3",
     "@tanstack/react-query-devtools": "^5.62.11",

pnpm-lock.yaml

@@ -3,17 +3,18 @@
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
 import * as Sentry from '@sentry/nextjs';
+import { env } from '@/constants';
 
 Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  dsn: env.SENTRY_DSN,
 
   // Add optional integrations for additional features
   integrations: [
     Sentry.replayIntegration({ maskAllText: false, blockAllMedia: false }),
   ],
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1,
+  tracesSampleRate: env.NODE_ENV === 'production' ? 0.1 : 1,
 
   // Define how likely Replay events are sampled.
   // This sets the sample rate to be 10%. You may want this to be 100% while

public/opengraph-image.png

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

sentry.client.config.ts

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

sentry.edge.config.ts

@@ -1,9 +1,9 @@
 import { http } from 'msw';
-import { PATHS } from '@/constants';
+import { env, PATHS } from '@/constants';
 import { LoginVo } from '@/types';
 import { BaseError, BaseSuccess } from './responses';
 
-const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL + '/api';
+const BASE_URL = env.BASE_URL + '/api';
 
 const login = http.post(`${BASE_URL}${PATHS.LOGIN}`, async ({ request }) => {
   const { accessToken, refreshToken } = (await request.json()) as LoginVo;

sentry.server.config.ts

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

src/__mock__/handlers.ts

@@ -1,5 +1,10 @@
+import { Metadata } from 'next';
 import { ArriveSoon } from '@/components';
 
+export const metadata: Metadata = {
+  title: '통계 비교',
+};
+
 export default function Page() {
   return <ArriveSoon />;
 }

src/apis/instance.request.ts

@@ -4,7 +4,6 @@ import { Header } from '@/components';
 import { PATHS } from '@/constants';
 import { me } from '@/apis';
 import { getQueryClient } from '@/utils/queryUtil';
-import { Header } from '@/components';
 
 interface IProp {
   children: ReactElement;

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

@@ -1,6 +1,11 @@
+import { Metadata } from 'next';
 import { ArriveSoon } from '@/components';
 // import { Content } from './Content';
 
+export const metadata: Metadata = {
+  title: '리더보드',
+};
+
 export default function Page() {
   return <ArriveSoon />;
 }

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

@@ -7,7 +7,6 @@ import { Content } from './Content';
 
 export const metadata: Metadata = {
   title: '대시보드',
-  description: '각종 Velog 통계를 볼 수 있는 대시보드',
 };
 
 interface IProp {

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

@@ -4,7 +4,6 @@ import { Content } from './Content';
 
 export const metadata: Metadata = {
   title: '로그인',
-  description: '대시보드 페이지에 진입하기 전 표시되는 로그인 페이지',
 };
 
 export default function Page() {

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

@@ -4,13 +4,29 @@ import 'react-toastify/dist/ReactToastify.css';
 import * as sentry from '@sentry/nextjs';
 import type { Metadata } from 'next';
 import { ReactNode } from 'react';
+import { GoogleAnalytics } from '@next/third-parties/google';
 import './globals.css';
 import { ChannelTalkProvider, QueryProvider } from '@/components';
+import { env } from '@/constants';
+
+export const BASE = 'https://velog-dashboard.kro.kr/';
 
 export const metadata: Metadata = {
   title: 'Velog Dashboard',
-  description: 'Velog 통계를 확인할 수 있는 Velog Dashboard',
+  metadataBase: new URL(BASE),
+  description: '어디서든 편리하게 확인하는 Velog 통계 서비스, Velog Dashboard',
   icons: { icon: '/favicon.png' },
+  alternates: {
+    canonical: BASE,
+  },
+  openGraph: {
+    siteName: 'Velog Dashboard',
+    description:
+      '어디서든 편리하게 확인하는 Velog 통계 서비스, Velog Dashboard',
+    url: BASE,
+    images: [{ url: '/opengraph-image.png', alt: 'Velog Dashboard' }],
+    type: 'website',
+  },
 };
 
 const NotoSansKr = Noto_Sans_KR({ subsets: ['latin'] });
@@ -30,6 +46,7 @@ export default function RootLayout({
           </QueryProvider>
         </sentry.ErrorBoundary>
       </body>
+      <GoogleAnalytics gaId={env.GA_ID} />
     </html>
   );
 }

src/app/(with-tracker)/(login)/page.tsx

@@ -0,0 +1,12 @@
+import { MetadataRoute } from 'next';
+import { BASE } from './layout';
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+    },
+    sitemap: BASE + '/sitemap.xml',
+  };
+}

src/app/layout.tsx

@@ -0,0 +1,23 @@
+import { MetadataRoute } from 'next';
+import { BASE } from './layout';
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    { url: BASE, lastModified: new Date(), changeFrequency: 'monthly' },
+    {
+      url: BASE + '/main',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+    },
+    {
+      url: BASE + '/leaderboards',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+    },
+    {
+      url: BASE + '/compare',
+      lastModified: new Date(),
+      changeFrequency: 'monthly',
+    },
+  ];
+}

src/app/robots.ts

@@ -45,7 +45,7 @@ export const Header = () => {
     queryKey: [PATHS.ME],
     queryFn: me,
   });
-      
+
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) =>
       open &&