modify: 배포 전 전체 코드 정리, 핫픽스 (#11)

Author: Nuung

.env.sample

@@ -1,6 +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'>
 SENTRY_AUTH_TOKEN=<'sentry auth token here'>
 NEXT_PUBLIC_EVENT_LOG=<'Whether to send an event log here (true | false)'>

readme.md

@@ -37,3 +37,13 @@ docker push nuung/velog-dashboard-v2-fe:latest
 docker pull nuung/velog-dashboard-v2-fe:latest
 docker run -p 3000:3000 nuung/velog-dashboard-v2-fe:latest
 ```
+
+## docker 관련, 이미지 정리
+
+```shell
+# 사용하지 않는 모든 이미지 정리
+docker image prune -af
+
+# 볼륨, 캐시, 컨테이너 포함 등 모든 사용하지 않는 리소스 정리
+docker system prune -af --volumes
+```

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

@@ -3,7 +3,7 @@
 import { Dropdown, Ranker, Rank } from '@/components';
 import { SCREENS } from '@/constants';
 import { useResponsive, useSearchParam } from '@/hooks';
-import { trackUserEvent } from '@/utils/trackUtil';
+import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 
 const data = [
   { rank: 1, name: '정현우', count: 1235 },
@@ -26,7 +26,7 @@ export const Content = () => {
           ['좋아요', 'likes'],
         ]}
         onChange={(data) => {
-          trackUserEvent('SORT_INTERACT_BOARD');
+          trackUserEvent(MessageEnum.SORT_INTERACT_BOARD);
           setSearchParams({ type: data as string });
         }}
         defaultValue={'조회수'}

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

@@ -14,7 +14,7 @@ import {
 import { postList, postSummary } from '@/apis';
 import { PATHS } from '@/constants';
 import { useSearchParam } from '@/hooks/useSearchParam';
-import { trackUserEvent } from '@/utils/trackUtil';
+import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 
 const sorts: Array<OptionType> = [
   ['작성일순', ''],
@@ -68,7 +68,9 @@ export const Content = () => {
               <Button
                 size="SMALL"
                 disabled
-                onClick={() => trackUserEvent('REFRESH_INTERACT_MAIN')}
+                onClick={() =>
+                  trackUserEvent(MessageEnum.REFRESH_INTERACT_MAIN)
+                }
               >
                 새로고침
               </Button>
@@ -80,7 +82,7 @@ export const Content = () => {
             <div className="flex items-center gap-3">
               <Check
                 onChange={() => {
-                  trackUserEvent('SORT_INTERACT_MAIN');
+                  trackUserEvent(MessageEnum.SORT_INTERACT_MAIN);
                   setSearchParams({
                     asc: `${!(searchParams.asc === 'true')}`,
                   });
@@ -94,7 +96,7 @@ export const Content = () => {
                 }
                 options={sorts}
                 onChange={(data) => {
-                  trackUserEvent('SORT_INTERACT_MAIN');
+                  trackUserEvent(MessageEnum.SORT_INTERACT_MAIN);
                   setSearchParams({ sort: encodeURI(data as string) });
                 }}
               />

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

@@ -7,7 +7,7 @@ import { useMutation } from '@tanstack/react-query';
 import { Input, Button } from '@/components';
 import { LoginVo } from '@/types';
 import { login, sampleLogin } from '@/apis';
-import { trackUserEvent } from '@/utils/trackUtil';
+import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 
 const responsiveStyle =
   "flex items-center gap-5 max-MBI:before:inline-block max-MBI:before:bg-[url('/favicon.png')] max-MBI:before:[background-size:_100%_100%] max-MBI:before:w-16 max-MBI:before:h-16";
@@ -22,7 +22,7 @@ export const Content = () => {
   } = useForm<LoginVo>({ mode: 'all' });
 
   const onSuccess = () => {
-    trackUserEvent('LOGIN');
+    trackUserEvent(MessageEnum.LOGIN);
     replace('/main?asc=false&sort=');
   };
 

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

@@ -2,7 +2,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Icon, NameType } from '@/components';
 import { COLORS } from '@/constants';
-import { trackUserEvent } from '@/utils/trackUtil';
+import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 
 export const defaultStyle =
   'w-[180px] h-[65px] px-9 transition-all duration-300 shrink-0 max-MBI:w-[65px] max-MBI:px-0 ';
@@ -48,7 +48,7 @@ export const Section = <T extends clickType>({
         href={action}
         className={defaultStyle + navigateStyle}
         id="navigation"
-        onClick={() => trackUserEvent('NAVIGATE')}
+        onClick={() => trackUserEvent(MessageEnum.NAVIGATE)}
       >
         <Icon
           size={25}

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

@@ -8,7 +8,7 @@ import { PATHS, SCREENS } from '@/constants';
 import { NameType } from '@/components';
 import { useResponsive } from '@/hooks';
 import { logout, me } from '@/apis';
-import { trackUserEvent } from '@/utils/trackUtil';
+import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 import { defaultStyle, Section, textStyle } from './Section';
 
 const PARAMS = {
@@ -114,7 +114,7 @@ export const Header = () => {
                   className="text-DESTRUCTIVE-SUB text-I3 p-5 max-MBI:p-4 flex whitespace-nowrap w-auto"
                   onClick={() => {
                     out();
-                    trackUserEvent('LOGOUT');
+                    trackUserEvent(MessageEnum.LOGOUT);
                   }}
                 >
                   로그아웃

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

@@ -6,7 +6,7 @@ import { parseNumber } from '@/utils/numberUtil';
 import { COLORS, PATHS } from '@/constants';
 import { Icon } from '@/components';
 import { PostType, UserDto } from '@/types';
-import { trackUserEvent } from '@/utils/trackUtil';
+import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 import { Graph } from './Graph';
 
 export const Section = (p: PostType) => {
@@ -21,7 +21,7 @@ export const Section = (p: PostType) => {
       <div
         className={`p-[25px] h-fit cursor-pointer bg-BG-SUB flex justify-between items-center gap-4 ${!open ? 'rounded-[4px] max-MBI:pb-[35px_!important]' : 'rounded-t-[4px]'} max-xl:flex-col max-MBI:flex-col max-MBI:p-[20px]`}
         onClick={() => {
-          trackUserEvent('SECTION_INTERACT_MAIN');
+          trackUserEvent(MessageEnum.SECTION_INTERACT_MAIN);
           setOpen((prev) => !prev);
         }}
       >

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

@@ -3,7 +3,7 @@
 import { useState } from 'react';
 import { Icon } from '@/components';
 import { PostSummaryDto } from '@/types';
-import { trackUserEvent } from '@/utils/trackUtil';
+import { trackUserEvent, MessageEnum } from '@/utils/trackUtil';
 import { SidebarContent } from './SidebarContent';
 import { BarContent } from './BarContent';
 
@@ -38,7 +38,7 @@ export const Summary = ({ totalPostCount, stats }: PostSummaryDto) => {
       <section
         className={`flex flex-col w-full px-5 bg-BG-SUB rounded-[4px] cursor-pointer MBI:hidden`}
         onClick={() => {
-          trackUserEvent('SECTION_INTERACT_MAIN');
+          trackUserEvent(MessageEnum.SECTION_INTERACT_MAIN);
           setOpen((prev) => !prev);
         }}
       >

src/utils/trackUtil.tsx

@@ -21,10 +21,12 @@ export const MessageEnum = {
 const EVENT_LOG = process.env.NEXT_PUBLIC_EVENT_LOG || 'false';
 const STATUS = process.env.NODE_ENV;
 
-export const trackUserEvent = (event_type: keyof typeof MessageEnum) => {
+export const trackUserEvent = (event: keyof typeof MessageEnum | number) => {
+  const eventType = typeof event === 'number' ? event : MessageEnum[event];
+
   if (EVENT_LOG === 'true') {
     instance('/event', {
-      body: { eventType: MessageEnum[event_type] },
+      body: { eventType },
       method: 'POST',
     });
   }