Merge branch 'main' into refactor/test-code

Author: six-standard

.github/workflows/docker-publish.yaml

@@ -27,14 +27,10 @@ jobs:
       - name: Create .env file
         run: |
           echo "NEXT_PUBLIC_BASE_URL=${{ secrets.NEXT_PUBLIC_BASE_URL }}" >> .env
-          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 "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 "NEXT_PUBLIC_GA_ID=${{ secrets.NEXT_PUBLIC_GA_ID }}" >> .env
           echo "NEXT_PUBLIC_SENTRY_DSN=${{ secrets.NEXT_PUBLIC_SENTRY_DSN }}" >> .env
-          echo "NEXT_PUBLIC_ARCADE_URL=${{ secrets.NEXT_PUBLIC_ARCADE_URL }}" >> .env
           cp .env .env.production
 
       - name: Build Next.js application

Dockerfile

@@ -16,7 +16,6 @@ COPY .env.production ./.env.production
 COPY package.json pnpm-lock.yaml ./
 RUN pnpm install --no-frozen-lockfile --prod
 
-
 EXPOSE 3000
 
 CMD ["pm2-runtime", "start", "ecosystem.config.js"]

src/apis/instance.request.ts

@@ -3,7 +3,7 @@ import returnFetch, { FetchArgs } from 'return-fetch';
 import { ENVS } from '@/constants';
 import { ServerNotRespondingError } from '@/errors';
 
-const ABORT_MS = 10000;
+const ABORT_MS = 5000;
 
 type ErrorType = {
   code: string;

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

@@ -5,7 +5,7 @@ import { startHolyLoader } from 'holy-loader';
 import { useMemo } from 'react';
 import { leaderboardList } from '@/apis';
 import { Rank } from '@/app/components';
-import { PATHS } from '@/constants';
+import { PATHS, URLS } from '@/constants';
 import { useSearchParam } from '@/hooks';
 import { Dropdown, EmptyState } from '@/shared';
 import { LeaderboardItemType } from '@/types';
@@ -17,17 +17,16 @@ export type searchParamsType = {
   dateRange: string;
 };
 
+const defaultParams = {
+  based: 'user' as const,
+  sort: 'viewCount' as const,
+  limit: '10',
+  dateRange: '30',
+};
+
 export const Content = () => {
   const [searchParams, setSearchParams] = useSearchParam<searchParamsType>();
 
-  // 기본값 설정
-  const defaultParams = {
-    based: 'user' as const,
-    sort: 'viewCount' as const,
-    limit: '10',
-    dateRange: '30',
-  };
-
   const finalParams = {
     ...defaultParams,
     ...searchParams,
@@ -39,16 +38,18 @@ export const Content = () => {
   });
 
   const data = useMemo(() => {
-    const value = (
-      finalParams.based === 'user' ? boards?.users : boards?.posts
-    ) as LeaderboardItemType[];
-    return (
-      value?.map((item) => ({
-        name: finalParams.based === 'user' ? item.email.split('@')[0] : item.title,
-        value: finalParams.sort === 'viewCount' ? item.viewDiff : item.likeDiff,
-      })) || []
-    );
-  }, [boards, finalParams.based, finalParams.sort]);
+    const isUserBased = finalParams?.based === 'user';
+    const isViewBased = finalParams?.sort === 'viewCount';
+
+    const value = ((isUserBased ? boards?.users : boards?.posts) || []) as LeaderboardItemType[];
+
+    return value.map(({ username, title, viewDiff, likeDiff, slug }) => ({
+      key: isUserBased ? username : title,
+      username,
+      url: URLS.VELOG + `/@${username}` + (isUserBased ? '/posts' : `/${slug}`),
+      value: isViewBased ? viewDiff : likeDiff,
+    }));
+  }, [boards, finalParams?.based, finalParams?.sort]);
 
   const handleChange = (param: Partial<searchParamsType>) => {
     startHolyLoader();
@@ -109,8 +110,15 @@ export const Content = () => {
             icon="📊"
           />
         ) : (
-          data?.map(({ name, value }, index) => (
-            <Rank name={name} key={index} count={value} rank={index + 1} />
+          data?.map(({ key, username, url, value }, index) => (
+            <Rank
+              name={key}
+              key={index}
+              url={url}
+              count={value}
+              rank={index + 1}
+              suffix={finalParams.based === 'post' ? username : ''}
+            />
           ))
         )}
       </div>

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

@@ -52,7 +52,7 @@ export const Content = () => {
     fetchNextPage();
   }, [inView]);
 
-  const joinedPosts = useMemo(() => posts?.pages.flatMap((i) => i.posts), [posts]);
+  const joinedPosts = useMemo(() => posts?.pages.flatMap((i) => i.posts) || [], [posts]);
 
   // 로딩 중이 아니고 게시물이 없는 경우
   const isEmpty = !isLoading && (!joinedPosts || joinedPosts.length === 0);

src/app/components/Rank.tsx

@@ -1,33 +1,47 @@
+'use client';
+
 import { HTMLAttributes } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 export interface IProp extends HTMLAttributes<HTMLDivElement> {
   name: string;
   rank: number;
+  url: string;
   count?: string | number;
   suffix?: string;
 }
 
 const colorTable = ['border-[#DAA520]', 'border-[#A9A9A9]', 'border-[#B87333]'];
 
-export const Rank = ({ name, rank, count, suffix = '회' }: IProp) => {
+export const Rank = ({ name, rank, count, url, suffix }: IProp) => {
   return (
-    <div
+    <button
       className={twMerge(
-        'min-w-[40%] w-full p-[25px] bg-BG-SUB rounded-[4px] gap-3 justify-between flex',
+        'min-w-[40%] group w-full p-[25px] bg-BG-SUB rounded-[4px] gap-3 justify-between flex cursor-pointer items-center',
         rank > 3 ? 'border-0' : `border-2 ${colorTable[rank - 1]}`,
       )}
+      onClick={() => window.open(url, '_blank', 'noopener,noreferrer')}
     >
-      <span
-        data-rank={rank}
-        className="text-TITLE-3 text-TEXT-MAIN flex items-center gap-3 before:content-[attr(data-rank)_'위'] before:text-SUBTITLE-4 before:text-TEXT-ALT max-TBL:text-TITLE-4 max-TBL:before:text-SUBTITLE-5 max-MBI:text-SUBTITLE-4 max-MBI:before:text-SUBTITLE-5"
-      >
-        {name}
-      </span>
+      <div className="flex items-center gap-3">
+        <span className="text-SUBTITLE-4 text-TEXT-ALT shrink-0 max-TBL:text-SUBTITLE-5 max-MBI:text-SUBTITLE-5">
+          {rank + '위'}
+        </span>
+
+        <div className="flex flex-col gap-0 items-start">
+          <span className="group-hover:underline break-words text-left text-TITLE-3 text-TEXT-MAIN flex items-center gap-3 max-TBL:text-TITLE-4 max-MBI:text-SUBTITLE-4">
+            {name}
+          </span>
+          {suffix !== undefined && (
+            <span className="text-SUBTITLE-4 w-fit text-TEXT-ALT max-TBL:text-SUBTITLE-5 max-MBI:text-SUBTITLE-5">
+              {String(suffix)}
+            </span>
+          )}
+        </div>
+      </div>
+
       <span className="text-SUBTITLE-3 shrink-0 text-TEXT-SUB max-TBL:text-TITLE-4 max-MBI:text-SUBTITLE-4">
-        {count}
-        {suffix}
+        {count}회
       </span>
-    </div>
+    </button>
   );
 };

src/app/components/Summary/SidebarContent.tsx

@@ -24,7 +24,7 @@ export const SidebarContent = ({ title, content, increasement, typeIsCount, id }
         <Inform.Title>{title}</Inform.Title>
         <Inform.Horizontal>
           <Inform.Content suffix={typeIsCount ? '회' : '개'}>{parseNumber(content)}</Inform.Content>
-          {increasement !== 0 && (
+          {increasement && (
             <Inform.Highlighted suffix="↑">{parseNumber(increasement)}</Inform.Highlighted>
           )}
         </Inform.Horizontal>

src/types/leaderboard.type.ts

@@ -1,6 +1,7 @@
 type LeaderboardListUser = {
   id: string;
   email: string;
+  username: string;
   totalViews: string;
   totalLikes: string;
   totalPosts: string;
@@ -12,6 +13,7 @@ type LeaderboardListPost = {
   id: string;
   title: string;
   slug: string;
+  username: string;
   totalViews: number;
   totalLikes: number;
   viewDiff: number;