{content}
; 8 | } 9 | -------------------------------------------------------------------------------- /frontend/src/component/atom/H2.tsx: -------------------------------------------------------------------------------- 1 | type Props = { 2 | cssOption?: string; 3 | content: string; 4 | }; 5 | 6 | export default function H2({ cssOption, content = '' }: Props) { 7 | return{content}
; 8 | } 9 | -------------------------------------------------------------------------------- /frontend/src/constant/README.md: -------------------------------------------------------------------------------- 1 | # 여기는 📚constant 디렉토리입니다 2 | 3 | 공통으로 사용되는 상수들을 모아놓은 디렉토리 입니다. 4 | 5 | 구현방법 6 | 7 | ```ts 8 | export const PATH = { 9 | MAIN: '/main', 10 | }; 11 | ``` 12 | 13 | - 대문자로 이루어진 스네이크케이스로 변수명을 짓습니다. 14 | -------------------------------------------------------------------------------- /frontend/src/type/Rank.ts: -------------------------------------------------------------------------------- 1 | type RankType = 2 | | { name: 'traffic'; unit: '개' } 3 | | { name: 'success-rate'; unit: '%' } 4 | | { name: 'elapsed-time'; unit: 'ms' } 5 | | { name: 'dau'; unit: '명' }; 6 | 7 | export type { RankType }; 8 | -------------------------------------------------------------------------------- /backend/proxy-server/src/domain/port/output/project-cache.repository.ts: -------------------------------------------------------------------------------- 1 | export interface ProjectCacheRepository { 2 | findIpByDomain(domain: string): Promise10 | {content} 11 |
12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /backend/proxy-server/src/domain/entity/project.entity.ts: -------------------------------------------------------------------------------- 1 | import type { ProjectRow } from 'database/query/project.repository.mysql'; 2 | 3 | type Project = ProjectRow; 4 | 5 | export class ProjectEntity { 6 | readonly ip: string; 7 | 8 | constructor(project: Project) { 9 | this.ip = project.ip; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /frontend/src/component/atom/ValidIcon.tsx: -------------------------------------------------------------------------------- 1 | type Props = { 2 | type: 'success' | 'fail'; 3 | }; 4 | 5 | export default function Icon({ type = 'fail' }: Props) { 6 | return ( 7 | 8 | {type === 'success' ? '✓' : '✕'} 9 | 10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /backend/console-server/nest-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/nest-cli", 3 | "collection": "@nestjs/schematics", 4 | "sourceRoot": "src", 5 | "compilerOptions": { 6 | "deleteOutDir": true, 7 | "assets": [ 8 | { 9 | "include": "mail/templates/**/*" 10 | } 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /backend/console-server/src/log/traffic/metric/traffic-rank.metric.ts: -------------------------------------------------------------------------------- 1 | import { IsNumber, IsString } from 'class-validator'; 2 | import { Type } from 'class-transformer'; 3 | 4 | export class TrafficRankMetric { 5 | @IsString() 6 | host: string; 7 | 8 | @Type(() => Number) 9 | @IsNumber() 10 | count: number; 11 | } 12 | -------------------------------------------------------------------------------- /backend/console-server/src/project/dto/create-project-response.dto.ts: -------------------------------------------------------------------------------- 1 | import { Exclude, Expose } from 'class-transformer'; 2 | import { ApiProperty } from '@nestjs/swagger'; 3 | 4 | @Exclude() 5 | export class ProjectResponseDto { 6 | @ApiProperty({ 7 | example: '1', 8 | }) 9 | @Expose() 10 | id: number; 11 | } 12 | -------------------------------------------------------------------------------- /backend/console-server/src/clickhouse/util/clickhouse-client.error.ts: -------------------------------------------------------------------------------- 1 | import { ClickhouseError } from '../core/clickhouse.error'; 2 | 3 | export class ClickhouseClientError extends ClickhouseError { 4 | constructor(message: string, error?: Error) { 5 | super(message, error); 6 | super.name = 'ClickhouseClientError'; 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /frontend/src/component/atom/Span.tsx: -------------------------------------------------------------------------------- 1 | type Props = { 2 | cssOption?: string; 3 | content?: string; 4 | style?: React.CSSProperties; 5 | }; 6 | 7 | export default function Span({ cssOption, content, style }: Props) { 8 | return ( 9 | 10 | {content} 11 | 12 | ); 13 | } 14 | -------------------------------------------------------------------------------- /frontend/src/hook/api/useProjectDAU.ts: -------------------------------------------------------------------------------- 1 | import { getDAU } from '@api/get/ProjectPage'; 2 | import { useSuspenseQuery } from '@tanstack/react-query'; 3 | 4 | export default function useProjectDAU(project: string) { 5 | return useSuspenseQuery({ 6 | queryKey: ['projectDAU', project], 7 | queryFn: () => getDAU(project) 8 | }); 9 | } 10 | -------------------------------------------------------------------------------- /backend/console-server/src/log/rank/metric/host-error-rate.metric.ts: -------------------------------------------------------------------------------- 1 | import { Type } from 'class-transformer'; 2 | import { IsNumber, IsString } from 'class-validator'; 3 | 4 | export class HostErrorRateMetric { 5 | @IsString() 6 | host: string; 7 | 8 | @Type(() => Number) 9 | @IsNumber() 10 | is_error_rate: number; 11 | } 12 | -------------------------------------------------------------------------------- /frontend/src/boundary/README.md: -------------------------------------------------------------------------------- 1 | # 여기는 🌫️boundary 디렉토리입니다 2 | 3 | 에러처리를 위한 컴포넌트들을 모아놓은 디렉토리입니다. 4 | 5 | 사용방법 6 | 7 | ```tsx 8 | import CustomErrorBoundary from 'boundary/CustomErrorBoundary'; 9 | 10 |"{{projectName}}" 서비스를 위한 왓치덕스의 네임서버입니다.
8 |프로젝트를 등록해주셔서 감사합니다! DNS 등록 절차까지 마무리해주세요 :)
9 |네임 서버 정보:
10 |-
11 | {{#each nameServers}}
12 |
- {{this}} 13 | {{/each}} 14 |
Best regards,
왓치덕스
7 |
8 |
10 |
11 | );
12 | }
13 |
--------------------------------------------------------------------------------
/frontend/src/component/template/DataLayout.tsx:
--------------------------------------------------------------------------------
1 | type Props = {
2 | children: React.ReactNode;
3 | cssOption?: string;
4 | };
5 |
6 | export default function DataLayout({ children, cssOption }: Props) {
7 | return (
8 |
10 | {children}
11 |
12 | );
13 | }
14 |
--------------------------------------------------------------------------------
/backend/console-server/src/log/elapsed-time/dto/get-path-elapsed-time.rank.ts:
--------------------------------------------------------------------------------
1 | import { IsNotEmpty, IsString } from 'class-validator';
2 | import { ApiProperty } from '@nestjs/swagger';
3 |
4 | export class GetPathElapsedTimeRank {
5 | @IsNotEmpty()
6 | @IsString()
7 | @ApiProperty({
8 | description: '프로젝트명',
9 | example: 'watchducks',
10 | required: true,
11 | })
12 | projectName: string;
13 | }
14 |
--------------------------------------------------------------------------------
/frontend/src/constant/Rank.ts:
--------------------------------------------------------------------------------
1 | import { RankType } from '@type/Rank';
2 |
3 | const RANK_OPTIONS: { value: RankType; label: string }[] = [
4 | { value: { name: 'traffic', unit: '개' }, label: '트래픽양' },
5 | { value: { name: 'success-rate', unit: '%' }, label: '요청 성공률' },
6 | { value: { name: 'elapsed-time', unit: 'ms' }, label: '평균 응답시간' },
7 | { value: { name: 'dau', unit: '명' }, label: 'DAU' }
8 | ];
9 |
10 | export { RANK_OPTIONS };
11 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/📚-documentation.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "\U0001F4DA Documentation"
3 | about: 문서 작성 및 수정
4 | title: "[DOCS] "
5 | labels: ''
6 | assignees: ''
7 |
8 | ---
9 |
10 | ## 📑 문서 유형
11 |
12 |
13 | ## 📝 작업 내용
14 |
15 |
16 | ## ✅ 체크리스트
17 | - [ ] 기술적 정확성 검토
18 | - [ ] 맞춤법/문법 검토
19 | - [ ] 포맷팅 검토
20 | - [ ] 예제 코드 검증
21 |
22 | ## 🔍 참고 자료
23 |
24 |
--------------------------------------------------------------------------------
/frontend/src/index.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | html,
6 | body {
7 | width: 100%;
8 | height: 100%;
9 | }
10 |
11 | body {
12 | @apply bg-[#fcfcfc] dark:bg-[#00142B];
13 | }
14 |
15 | .apexcharts-menu-item {
16 | color: black;
17 | }
18 |
19 | .apexcharts-xaxistooltip {
20 | display: none !important;
21 | }
22 |
23 | .apexcharts-yaxistooltip {
24 | display: none !important;
25 | }
26 |
--------------------------------------------------------------------------------
/backend/console-server/src/log/success-rate/dto/get-success-rate.dto.ts:
--------------------------------------------------------------------------------
1 | import { ApiProperty } from '@nestjs/swagger';
2 | import { Type } from 'class-transformer';
3 | import { IsNumber } from 'class-validator';
4 |
5 | export class GetSuccessRateDto {
6 | @IsNumber()
7 | @Type(() => Number)
8 | @ApiProperty({
9 | description: '기수',
10 | example: 5,
11 | required: true,
12 | })
13 | generation: number;
14 | }
15 |
--------------------------------------------------------------------------------
/backend/console-server/src/log/traffic/dto/get-traffic-top5-chart.dto.ts:
--------------------------------------------------------------------------------
1 | import { IsNumber } from 'class-validator';
2 | import { Type } from 'class-transformer';
3 | import { ApiProperty } from '@nestjs/swagger';
4 |
5 | export class GetTrafficTop5ChartDto {
6 | @IsNumber()
7 | @Type(() => Number)
8 | @ApiProperty({
9 | description: '기수',
10 | example: 9,
11 | required: true,
12 | })
13 | generation: number;
14 | }
15 |
--------------------------------------------------------------------------------
/backend/console-server/src/log/elapsed-time/dto/get-top5-elapsed-time.dto.ts:
--------------------------------------------------------------------------------
1 | import { ApiProperty } from '@nestjs/swagger';
2 | import { Type } from 'class-transformer';
3 | import { IsNumber } from 'class-validator';
4 |
5 | export class GetTop5ElapsedTimeDto {
6 | @IsNumber()
7 | @Type(() => Number)
8 | @ApiProperty({
9 | description: '기수',
10 | example: 5,
11 | required: true,
12 | })
13 | generation: number;
14 | }
15 |
--------------------------------------------------------------------------------
/backend/console-server/src/project/dto/find-by-generation.dto.ts:
--------------------------------------------------------------------------------
1 | import { IsNotEmpty, IsNumber } from 'class-validator';
2 | import { Type } from 'class-transformer';
3 | import { ApiProperty } from '@nestjs/swagger';
4 |
5 | export class FindByGenerationDto {
6 | @ApiProperty({
7 | example: '9',
8 | description: '부스트캠프 기수',
9 | })
10 | @IsNotEmpty()
11 | @Type(() => Number)
12 | @IsNumber()
13 | generation: number;
14 | }
15 |
--------------------------------------------------------------------------------
/backend/name-server/jest.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 | preset: 'ts-jest/presets/default-esm', // ES 모듈 지원을 위한 프리셋
3 | testEnvironment: 'node', // 테스트 환경 설정
4 | extensionsToTreatAsEsm: ['.ts'], // ESM으로 취급할 파일 확장자
5 | transform: {
6 | '^.+\\.ts$': [
7 | 'ts-jest',
8 | {
9 | useESM: true, // ts-jest에서 ESM 사용 설정
10 | },
11 | ],
12 | },
13 | moduleNameMapper: {
14 | '^(\\.{1,2}/.*)\\.js$': '$1', // 모듈 경로 매핑
15 | },
16 | };
--------------------------------------------------------------------------------
/frontend/.gitignore:
--------------------------------------------------------------------------------
1 | # Created by https://www.toptal.com/developers/gitignore/api/react
2 | # Edit at https://www.toptal.com/developers/gitignore?templates=react
3 |
4 | ### react ###
5 | .DS_*
6 | *.log
7 | logs
8 | **/*.backup.*
9 | **/*.back.*
10 |
11 | node_modules
12 | bower_components
13 |
14 | *.sublime*
15 |
16 | psd
17 | thumb
18 | sketch
19 | .env
20 |
21 | # End of https://www.toptal.com/developers/gitignore/api/react
22 | # Editor directories and files
--------------------------------------------------------------------------------
/backend/console-server/src/log/traffic/dto/get-traffic-by-generation.dto.ts:
--------------------------------------------------------------------------------
1 | import { IsNumber } from 'class-validator';
2 | import { Type } from 'class-transformer';
3 | import { ApiProperty } from '@nestjs/swagger';
4 |
5 | export class GetTrafficByGenerationDto {
6 | @IsNumber()
7 | @Type(() => Number)
8 | @ApiProperty({
9 | description: '기수',
10 | example: 5,
11 | required: true,
12 | })
13 | generation: number;
14 | }
15 |
--------------------------------------------------------------------------------
/backend/console-server/src/log/traffic/dto/get-traffic-daily-difference.dto.ts:
--------------------------------------------------------------------------------
1 | import { IsNumber } from 'class-validator';
2 | import { Type } from 'class-transformer';
3 | import { ApiProperty } from '@nestjs/swagger';
4 |
5 | export class GetTrafficDailyDifferenceDto {
6 | @IsNumber()
7 | @Type(() => Number)
8 | @ApiProperty({
9 | description: '기수',
10 | example: 9,
11 | required: true,
12 | })
13 | generation: number;
14 | }
15 |
--------------------------------------------------------------------------------
/backend/proxy-server/src/common/core/proxy.error.ts:
--------------------------------------------------------------------------------
1 | export class ProxyError extends Error {
2 | public readonly statusCode;
3 | public readonly originalError;
4 | private readonly NAME = 'ProxyError';
5 |
6 | constructor(message: string, statusCode: number, originalError?: Error) {
7 | super(message);
8 |
9 | this.statusCode = statusCode;
10 | this.originalError = originalError;
11 | this.name = this.NAME;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/backend/console-server/src/project/dto/count-project-by-generation.dto.ts:
--------------------------------------------------------------------------------
1 | import { ApiProperty } from '@nestjs/swagger';
2 | import { IsNotEmpty, IsNumber } from 'class-validator';
3 | import { Type } from 'class-transformer';
4 |
5 | export class CountProjectByGenerationDto {
6 | @ApiProperty({
7 | example: '5',
8 | description: '부스트캠프 기수',
9 | })
10 | @IsNotEmpty()
11 | @Type(() => Number)
12 | @IsNumber()
13 | generation: number;
14 | }
15 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/🔧-refactor.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "\U0001F527 Refactor"
3 | about: 코드 리팩터링 제안
4 | title: "[REFACTOR]"
5 | labels: refactor
6 | assignees: ''
7 |
8 | ---
9 |
10 | ## 🔧 리팩토링 대상
11 |
12 |
13 | ## 🎯 개선 목적
14 |
15 |
16 | ## 📝 개선 방안
17 |
18 |
19 | ## ✅ 체크리스트
20 | - [ ] 기존 기능 동작 보장
21 | - [ ] 테스트 코드 작성/수정
22 | - [ ] 성능 영향도 검토
23 |
24 | ## 📊 예상 결과
25 |
26 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/🚀-feature-request.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "\U0001F680 Feature Request"
3 | about: 새로운 기능 제안
4 | title: "[FEAT] "
5 | labels: feature, task
6 | assignees: ''
7 |
8 | ---
9 |
10 | ## 📝 기능 설명
11 |
12 |
13 | ## 🎯 해결하려는 문제
14 |
15 |
16 | ## 🛠 구현 방안
17 |
18 |
19 | ## ✅ 작업 체크리스트
20 | - [ ] 작업 1
21 | - [ ] 작업 2
22 |
23 | ## 📎 참고 자료
24 |
25 |
--------------------------------------------------------------------------------
/backend/proxy-server/src/common/error/missing-host-header.error.ts:
--------------------------------------------------------------------------------
1 | import { ProxyError } from '../core/proxy.error';
2 | import { ErrorMessage } from 'common/constant/error-message.constant';
3 | import { HttpStatus } from 'common/constant/http-status.constant';
4 |
5 | export class MissingHostHeaderError extends ProxyError {
6 | constructor() {
7 | super(ErrorMessage.VALIDATION.MISSING_HOST_HEADER, HttpStatus.BAD_REQUEST);
8 | this.name = 'MissingHostHeaderError';
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/backend/console-server/src/config/clickhouse.config.ts:
--------------------------------------------------------------------------------
1 | import { registerAs } from '@nestjs/config';
2 |
3 | export default registerAs('clickhouse', () => ({
4 | clickhouse: {
5 | url: process.env.CLICKHOUSE_URL ?? 'http://localhost:8123',
6 | username: process.env.CLICKHOUSE_USER ?? 'default',
7 | database: process.env.CLICKHOUSE_DATABASE ?? 'default',
8 | password: process.env.CLICKHOUSE_PASSWORD ?? '',
9 | request_timeout: 30 * 1000, // 30s
10 | },
11 | }));
12 |
--------------------------------------------------------------------------------
/frontend/src/api/axios.ts:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | import { AxiosResponse } from 'axios';
3 |
4 | const $axios = axios.create({
5 | baseURL: import.meta.env.VITE_API_URL
6 | });
7 |
8 | const api = {
9 | get: async
4 |
13 | );
14 | }
15 |
--------------------------------------------------------------------------------
/backend/console-server/src/log/success-rate/dto/get-project-success-rate-response.dto.ts:
--------------------------------------------------------------------------------
1 | import { Expose, Type } from 'class-transformer';
2 | import { ApiProperty } from '@nestjs/swagger';
3 |
4 | export class GetProjectSuccessRateResponseDto {
5 | @ApiProperty({
6 | description: '프로젝트의 이름',
7 | example: 'watchducks',
8 | })
9 | @Expose()
10 | projectName: string;
11 | @ApiProperty({
12 | description: '프로젝트의 응답 성공률',
13 | example: 85.5,
14 | })
15 | @Expose()
16 | @Type(() => Number)
17 | success_rate: number;
18 | }
19 |
--------------------------------------------------------------------------------
/frontend/tsconfig.node.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2022",
4 | "lib": ["ES2023"],
5 | "module": "ESNext",
6 | "skipLibCheck": true,
7 |
8 | /* Bundler mode */
9 | "moduleResolution": "bundler",
10 | "allowImportingTsExtensions": true,
11 | "isolatedModules": true,
12 | "moduleDetection": "force",
13 | "noEmit": true,
14 |
15 | /* Linting */
16 | "strict": true,
17 | "noUnusedLocals": true,
18 | "noUnusedParameters": true,
19 | "noFallthroughCasesInSwitch": true
20 | },
21 | "include": ["vite.config.ts"]
22 | }
23 |
--------------------------------------------------------------------------------
/frontend/src/constant/Chart.ts:
--------------------------------------------------------------------------------
1 | const CHART_COLORS = ['#FF6B6B', '#FF9F43', '#FECA57', '#4ECB71', '#4B7BEC'];
2 | const SUCCESS_FAIL_COLORS = ['#4ADE80', '#FF4444'];
3 | const POLAR_AREA_COLORS = ['#FF6B6B', '#FF9F43', '#FECA57', '#4ECB71', '#4B7BEC', '#4ADE80'];
4 |
5 | const RESPONSE_TIME_LEGENDS = [
6 | { color: '#4ADE80', range: '0 ~ 200', description: 'great' },
7 | { color: '#FFA500', range: '201 ~ 1000', description: 'good' },
8 | { color: '#FF4444', range: '1001 ~', description: 'bad' }
9 | ];
10 |
11 | export { CHART_COLORS, RESPONSE_TIME_LEGENDS, SUCCESS_FAIL_COLORS, POLAR_AREA_COLORS };
12 |
--------------------------------------------------------------------------------
/frontend/src/component/atom/Loading.tsx:
--------------------------------------------------------------------------------
1 | export default function Loading() {
2 | return (
3 |
5 |
12 | 데스크톱으로 접속해주세요!
6 |
7 | 이 서비스는 768px 이상의 화면에서 최적의 경험을 제공합니다.
8 |
9 | 데스크톱 환경에서 접속해주세요.
10 |
4 |
10 | );
11 | }
12 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/🐞-bug-report.md:
--------------------------------------------------------------------------------
1 | ---
2 | name: "\U0001F41E Bug Report"
3 | about: 버그 리포트 작성
4 | title: "[BUG] "
5 | labels: bug
6 | assignees: ''
7 |
8 | ---
9 |
10 | ## 🔍 버그 설명
11 |
12 |
13 | ## 💻 재현 방법
14 | 1. A 페이지로 이동
15 | 2. B 버튼 클릭
16 | 3. C 입력
17 | 4. D 에러 발생
18 |
19 | ## ✔️ 기대한 결과
20 |
21 |
22 | ## ❌ 실제 결과
23 |
24 |
25 | ## 🔍 환경 정보
26 | - OS: [e.g. Windows 10]
27 | - Browser: [e.g. Chrome 120.0]
28 | - Version: [e.g. 1.0.0]
29 |
30 | ## 📎 추가 정보
31 |
32 |
--------------------------------------------------------------------------------
/frontend/src/component/page/ProjectPage.tsx:
--------------------------------------------------------------------------------
1 | import Loading from '@component/atom/Loading';
2 | import useGroupNames from '@hook/api/useGroupNames';
3 | import useNavbarStore from '@store/NavbarStore';
4 | import { Navigate } from 'react-router-dom';
5 |
6 | export default function ProjectPage() {
7 | const { generation } = useNavbarStore();
8 |
9 | const { data, isLoading } = useGroupNames(generation);
10 | if (isLoading) {
11 | return
5 |
6 |
7 |
8 | Loading...
9 |
17 |
18 |
19 | );
20 | }
21 |
--------------------------------------------------------------------------------
/frontend/src/store/NavbarStore.ts:
--------------------------------------------------------------------------------
1 | import { BOOST_CAMP_OPTION, GENERATION_VALUE } from '@constant/NavbarSelect';
2 | import { NavbarState } from '@type/Navbar';
3 | import { create } from 'zustand';
4 |
5 | const useNavbarStore = create
7 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/frontend/src/hook/useAlert.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | type Props = {
4 | time: number;
5 | };
6 |
7 | export default function useAlert({ time }: Props) {
8 | const [isVisible, setIsVisible] = useState
8 |
10 |
10 |
11 | 
12 |
13 |
17 |
18 | );
19 | }
20 |
--------------------------------------------------------------------------------
/backend/proxy-server/src/common/logger/createFastifyLogger.ts:
--------------------------------------------------------------------------------
1 | import type { FastifyInstance } from 'fastify';
2 | import type { ErrorLog } from './logger.interface';
3 | import type { HttpLogEntity } from 'domain/entity/http-log.entity';
4 |
5 | export interface Logger {
6 | info(log: HttpLogEntity | { message: string }): void;
7 |
8 | error(log: ErrorLog): void;
9 | }
10 |
11 | export const createFastifyLogger = (server: FastifyInstance): Logger => {
12 | const logInfo = (log: HttpLogEntity | { message: string }): void => {
13 | server.log.info(log);
14 | };
15 |
16 | const logError = (log: ErrorLog): void => {
17 | server.log.error(log);
18 | };
19 |
20 | return {
21 | info: logInfo,
22 | error: logError,
23 | };
24 | };
25 |
--------------------------------------------------------------------------------
/backend/proxy-server/src/domain/entity/http-log.entity.ts:
--------------------------------------------------------------------------------
1 | interface HttpLog {
2 | method: string;
3 | host: string;
4 | path?: string;
5 | statusCode: number;
6 | responseTime: number;
7 | userIp: string;
8 | }
9 |
10 | export class HttpLogEntity {
11 | readonly method: string;
12 | readonly host: string;
13 | readonly path: string | undefined;
14 | readonly statusCode: number;
15 | readonly responseTime: number;
16 | readonly userIp: string;
17 |
18 | constructor(log: HttpLog) {
19 | this.method = log.method;
20 | this.host = log.host;
21 | this.path = log.path;
22 | this.statusCode = log.statusCode;
23 | this.responseTime = log.responseTime;
24 | this.userIp = log.userIp;
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/backend/proxy-server/src/database/query/project-cache.repository.redis.ts:
--------------------------------------------------------------------------------
1 | import { RedisClient } from 'database/redis/redis-database';
2 | import { ProjectCacheRepository } from 'domain/port/output/project-cache.repository';
3 |
4 | export class ProjectCacheRepositoryRedis implements ProjectCacheRepository {
5 | readonly TTL_DAY = 24 * 60 * 60;
6 | private readonly redisClient: RedisClient;
7 |
8 | constructor() {
9 | this.redisClient = RedisClient.getInstance();
10 | }
11 |
12 | async findIpByDomain(domain: string): Promise...
)
15 | }
16 | ```
17 |
18 | - 아토믹디자인에 따라 컴포넌트를 구분합니다
19 |
20 | - atom, molecule, organism, page 단위로 나뉩니다.
21 | - 반드시 이전 단위뿐만 아니라 하위 단위도 포함하여 만들어도 됩니다 (ex. atom + molcule = organism)
22 | - atom: 최소단위의 컴포넌트
23 | - molecule: atom을 조합한 컴포넌트
24 | - organism: molecule을 조합한 컴포넌트
25 | - page: template, organism을 조합한 컴포넌트
26 |
27 | - 컴포넌트는 함수형 컴포넌트로 작성합니다
28 | - 컴포넌트 이름은 카멜케이스로 작성합니다
29 | - 컴포넌트 이름으로 디렉토리를 짓습니다
30 | - 컴포넌트의 props는 type으로 정의합니다
31 | - 컴포넌트의 props는 구조분해할당으로 받습니다
32 | - 컴포넌트의 props는 필수값은 defaultProps로 정의합니다
33 |
--------------------------------------------------------------------------------
/backend/console-server/test/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import type { TestingModule } from '@nestjs/testing';
2 | import { Test } from '@nestjs/testing';
3 | import type { INestApplication } from '@nestjs/common';
4 | import * as request from 'supertest';
5 | import { AppModule } from '../src/app.module';
6 |
7 | describe('AppController (e2e)', () => {
8 | let app: INestApplication;
9 |
10 | beforeEach(async () => {
11 | const moduleFixture: TestingModule = await Test.createTestingModule({
12 | imports: [AppModule],
13 | }).compile();
14 |
15 | app = moduleFixture.createNestApplication();
16 | await app.init();
17 | });
18 |
19 | it('/ (GET)', () => {
20 | return request(app.getHttpServer()).get('/').expect(200).expect('Hello World!');
21 | });
22 | });
23 |
--------------------------------------------------------------------------------
/backend/name-server/test/constant/packet.ts:
--------------------------------------------------------------------------------
1 | import type { Packet } from 'dns-packet';
2 |
3 | export const NORMAL_PACKET: Packet = {
4 | id: 1,
5 | type: 'query',
6 | flags: 0,
7 | questions: [
8 | {
9 | name: 'example.com',
10 | type: 'A',
11 | class: 'IN',
12 | },
13 | ],
14 | };
15 | export const NOT_EXIST_DOMAIN_PACKET: Packet = {
16 | id: 1,
17 | type: 'query',
18 | flags: 0,
19 | questions: [
20 | {
21 | name: 'not_exist_example.com',
22 | type: 'A',
23 | class: 'IN',
24 | },
25 | ],
26 | };
27 | export const EMPTY_PACKET: Packet = {};
28 | export const NONE_QUESTION_PACKET: Packet = {
29 | id: 1,
30 | type: 'query',
31 | flags: 0,
32 | questions: [],
33 | };
34 |
--------------------------------------------------------------------------------
/frontend/src/component/atom/Alert.tsx:
--------------------------------------------------------------------------------
1 | import { Fragment } from 'react/jsx-runtime';
2 |
3 | type Props = {
4 | cssOption?: string;
5 | content: string;
6 | isVisible?: boolean;
7 | };
8 |
9 | export default function Alert({ cssOption = '', content = '', isVisible = false }: Props) {
10 | const defaultStyle =
11 | 'fixed left-1/4 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center whitespace-nowrap';
12 |
13 | return (
14 |
17 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/backend/proxy-server/src/index.ts:
--------------------------------------------------------------------------------
1 | import 'reflect-metadata';
2 | import { fastifyServer } from 'server/fastify.server';
3 | import type { FastifyInstance } from 'fastify';
4 | import type { Logger } from 'common/logger/createFastifyLogger';
5 |
6 | const SIGNALS = ['SIGINT', 'SIGTERM'];
7 |
8 | async function main() {
9 | const { server, logger } = await fastifyServer.listen();
10 |
11 | SIGNALS.forEach((signal) => {
12 | process.on(signal, async () => await handleShutdown(signal, server, logger));
13 | });
14 | }
15 |
16 | async function handleShutdown(signal: string, server: FastifyInstance, logger: Logger) {
17 | await fastifyServer.stop(server, logger);
18 |
19 | console.log({ message: `Server stopped on ${signal}` });
20 | process.exit(0);
21 | }
22 |
23 | main().catch((error) => {
24 | console.error('Fatal error:', error);
25 | process.exit(1);
26 | });
27 |
--------------------------------------------------------------------------------
/backend/console-server/src/log/log.module.ts:
--------------------------------------------------------------------------------
1 | import { Module } from '@nestjs/common';
2 | import { TypeOrmModule } from '@nestjs/typeorm';
3 | import { Project } from '../project/entities/project.entity';
4 | import { ClickhouseModule } from '../clickhouse/clickhouse.module';
5 | import { ElapsedTimeModule } from './elapsed-time/elapsed-time.module';
6 | import { TrafficModule } from './traffic/traffic.module';
7 | import { SuccessRateModule } from './success-rate/success-rate.module';
8 | import { AnalyticsModule } from './analytics/analytics.module';
9 | import { RankModule } from './rank/rank.module';
10 |
11 | @Module({
12 | imports: [
13 | TypeOrmModule.forFeature([Project]),
14 | ClickhouseModule,
15 | ElapsedTimeModule,
16 | TrafficModule,
17 | SuccessRateModule,
18 | AnalyticsModule,
19 | RankModule,
20 | ],
21 | })
22 | export class LogModule {}
23 |
--------------------------------------------------------------------------------
/frontend/src/hook/useCustomMutation.ts:
--------------------------------------------------------------------------------
1 | import { getErrorByCode } from '@boundary/toastError';
2 | import { UseMutationOptions, useMutation } from '@tanstack/react-query';
3 | import axios from 'axios';
4 | import { toast } from 'react-toastify';
5 |
6 | type ErrorResponse = {
7 | code: number;
8 | message: string;
9 | };
10 |
11 | export default function useCustomMutation요청이 만료됐습니다. 재시도해주세요
18 | 23 |
14 | {showNavbar &&
21 |
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/frontend/src/boundary/CustomErrorBoundary.tsx:
--------------------------------------------------------------------------------
1 | import CustomErrorFallback from '@boundary/CustomErrorFallback';
2 | import Loading from '@component/atom/Loading';
3 | import { QueryErrorResetBoundary } from '@tanstack/react-query';
4 | import { Suspense } from 'react';
5 | import { ErrorBoundary } from 'react-error-boundary';
6 |
7 | type Props = {
8 | children: React.ReactNode;
9 | };
10 |
11 | export default function CustomErrorBoundary({ children }: Props) {
12 | return (
13 |
14 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/backend/console-server/src/mail/mail.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@nestjs/common';
2 | import { MailerService } from '@nestjs-modules/mailer';
3 | import { ConfigService } from '@nestjs/config';
4 |
5 | @Injectable()
6 | export class MailService {
7 | private readonly nameServers: string[];
8 |
9 | constructor(
10 | private readonly mailerService: MailerService,
11 | private readonly configService: ConfigService,
12 | ) {
13 | this.nameServers = this.configService.get
15 | {!isProjectPath ? (
16 |
19 |
21 | )}
22 |
23 |
13 |
16 |
17 | {isVisible && (
18 |
13 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/frontend/src/util/Time.ts:
--------------------------------------------------------------------------------
1 | const generateTimeSlots = () => {
2 | const result: Array<[string, number]> = [];
3 | const today = new Date();
4 | const yesterday = new Date(today);
5 | yesterday.setDate(today.getDate() - 1);
6 | const startDate = new Date(yesterday);
7 | startDate.setHours(0, 0, 0, 0);
8 |
9 | for (let i = 0; i < 144; i++) {
10 | const timestamp = new Date(startDate);
11 | timestamp.setMinutes(i * 10);
12 | const formattedTime = `${timestamp.getFullYear()}-${String(timestamp.getMonth() + 1).padStart(2, '0')}-${String(timestamp.getDate()).padStart(2, '0')} ${String(timestamp.getHours()).padStart(2, '0')}:${String(timestamp.getMinutes()).padStart(2, '0')}:00`;
13 | result.push([formattedTime, 0]);
14 | }
15 | return result;
16 | };
17 |
18 | const fillEmptySlots = (rawData: Array<[string, string]>) => {
19 | const timeSlots = generateTimeSlots();
20 | const dataMap = new Map(rawData.map(([timestamp, value]) => [timestamp, Number(value)]));
21 | return timeSlots.map(([timestamp]) => [timestamp, dataMap.get(timestamp) || 0]);
22 | };
23 |
24 | export { fillEmptySlots };
25 |
--------------------------------------------------------------------------------
/frontend/src/hook/useDarkMode.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 |
3 | function useDarkMode(): [boolean, () => void] {
4 | const localStorageChecker = (): boolean => {
5 | if (!localStorage.theme) return false;
6 | return localStorage.theme === 'dark' ? true : false;
7 | };
8 |
9 | const [dark, setDark] = useState
14 | {RANK_OPTIONS.map((option) => (
15 |
21 | ))}
22 |
23 |
24 |
26 |
12 |
27 | );
28 | }
29 |
--------------------------------------------------------------------------------
/backend/console-server/src/log/rank/dto/get-elapsed-time-rank-response.dto.ts:
--------------------------------------------------------------------------------
1 | import { ApiProperty } from '@nestjs/swagger';
2 | import { Expose } from 'class-transformer';
3 | import { IsNumber, IsString } from 'class-validator';
4 |
5 | export class ElapsedTimeRank {
6 | @IsString()
7 | @Expose()
8 | projectName: string;
9 |
10 | @IsNumber()
11 | @Expose()
12 | value: number;
13 | }
14 |
15 | export class GetElapsedTimeRankResponseDto {
16 | @ApiProperty({
17 | description: '총 갯수',
18 | example: 30,
19 | })
20 | @IsNumber()
21 | total: number;
22 |
23 | @ApiProperty({
24 | description: '응답 소요 시간 짧은 순으로 정렬된 프로젝트명과 시간(ms)',
25 | example: [
26 | {
27 | projectName: 'test059',
28 | value: 100,
29 | },
30 | {
31 | projectName: 'test007',
32 | value: 110,
33 | },
34 | {
35 | projectName: 'test079',
36 | value: 120,
37 | },
38 | ],
39 | })
40 | @Expose()
41 | rank: ElapsedTimeRank[];
42 | }
43 |
--------------------------------------------------------------------------------
/backend/console-server/src/log/rank/dto/get-success-rate-rank-response.dto.ts:
--------------------------------------------------------------------------------
1 | import { ApiProperty } from '@nestjs/swagger';
2 | import { Expose, Transform, Type } from 'class-transformer';
3 | import { IsNumber, IsString } from 'class-validator';
4 |
5 | export class SuccessRateRank {
6 | @IsString()
7 | projectName: string;
8 |
9 | @Type(() => Number)
10 | @Transform(({ value }) => Math.floor(value))
11 | @IsNumber()
12 | value: number;
13 | }
14 |
15 | export class GetSuccessRateRankResponseDto {
16 | @ApiProperty({
17 | description: '총 갯수',
18 | example: 30,
19 | })
20 | @IsNumber()
21 | total: number;
22 |
23 | @ApiProperty({
24 | description: '응답 성공률 순위',
25 | example: [
26 | {
27 | projectName: 'test059',
28 | value: 98,
29 | },
30 | {
31 | projectName: 'test007',
32 | value: 98,
33 | },
34 | {
35 | projectName: 'test079',
36 | value: 98,
37 | },
38 | ],
39 | })
40 | @Expose()
41 | rank: SuccessRateRank[];
42 | }
43 |
--------------------------------------------------------------------------------
/frontend/src/component/organism/RankingList.tsx:
--------------------------------------------------------------------------------
1 | import RankingItem from '@component/molecule/RankingItem';
2 | import RankingTab from '@component/molecule/RankingTab';
3 | import DataLayout from '@component/template/DataLayout';
4 | import useRankData from '@hook/api/useRankData';
5 | import useNavbarStore from '@store/NavbarStore';
6 | import { RankType } from '@type/Rank';
7 | import { useState } from 'react';
8 |
9 | export default function RankingList() {
10 | const [rankType, setRankType] = useState
13 |
14 |
16 |
17 |
19 |
20 |
21 |
22 |
23 |
25 |
26 |
17 |
24 |
18 |
20 |
21 |
23 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | 
17 |
18 | 
23 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/frontend/src/chart/Chart.tsx:
--------------------------------------------------------------------------------
1 | import { useDefaultOptions } from '@hook/useDefaultOption';
2 | import { ApexOptions } from 'apexcharts';
3 | import { merge } from 'lodash-es';
4 | import { lazy, Suspense } from 'react';
5 |
6 | const ReactApexChart = lazy(() => import('react-apexcharts'));
7 |
8 | type ApexChartType =
9 | | 'line'
10 | | 'area'
11 | | 'bar'
12 | | 'pie'
13 | | 'donut'
14 | | 'radialBar'
15 | | 'scatter'
16 | | 'bubble'
17 | | 'heatmap'
18 | | 'treemap'
19 | | 'boxPlot'
20 | | 'candlestick'
21 | | 'radar'
22 | | 'polarArea'
23 | | 'rangeBar';
24 |
25 | type Props = {
26 | type: ApexChartType;
27 | series: ApexOptions['series'];
28 | options: ApexCharts.ApexOptions;
29 | };
30 |
31 | export function Chart({ type, options: chartOptions, series }: Props) {
32 | const { defaultOptions } = useDefaultOptions();
33 |
34 | const options = merge({}, defaultOptions, chartOptions);
35 |
36 | return (
37 |
19 |
32 | );
33 | }
34 |
--------------------------------------------------------------------------------
/frontend/src/component/molecule/ValidateTextInput.tsx:
--------------------------------------------------------------------------------
1 | import Input from '@component/atom/Input';
2 | import ValidIcon from '@component/atom/ValidIcon';
3 | import { forwardRef, ForwardedRef } from 'react';
4 |
5 | type Props = {
6 | type: string;
7 | value: string;
8 | isValid: boolean;
9 | placeholder?: string;
10 | onChange?: (e: React.ChangeEvent
20 | 
25 |
29 |
31 |
21 |
29 |
33 | );
34 | });
35 |
--------------------------------------------------------------------------------
/backend/proxy-server/src/domain/entity/http-log.entity.test.ts:
--------------------------------------------------------------------------------
1 | import { HttpLogEntity } from 'domain/entity/http-log.entity';
2 | import type { HttpLogType } from 'domain/port/input/log.use-case';
3 |
4 | describe('HttpLogEntity 테스트', () => {
5 | let log: HttpLogType;
6 |
7 | beforeEach(() => {
8 | log = {
9 | method: 'GET',
10 | host: 'api.example.com',
11 | path: '/users',
12 | statusCode: 200,
13 | responseTime: 100,
14 | userIp: '127.0.0.1',
15 | };
16 | });
17 |
18 | it('모든 속성을 가지고 인스턴스를 생성해야 한다.', () => {
19 | const httpLogEntity = new HttpLogEntity(log);
20 |
21 | expect(httpLogEntity.method).toBe(log.method);
22 | expect(httpLogEntity.host).toBe(log.host);
23 | expect(httpLogEntity.path).toBe(log.path);
24 | expect(httpLogEntity.statusCode).toBe(log.statusCode);
25 | expect(httpLogEntity.responseTime).toBe(log.responseTime);
26 | });
27 |
28 | it('path 속성이 undefined인 경우에 올바르게 처리해야 한다.', () => {
29 | log.path = undefined;
30 |
31 | const httpLogEntity = new HttpLogEntity(log);
32 |
33 | expect(httpLogEntity.path).toBeUndefined();
34 | });
35 | });
36 |
--------------------------------------------------------------------------------
/backend/console-server/src/log/elapsed-time/dto/get-path-elapsed-time-response.dto.ts:
--------------------------------------------------------------------------------
1 | import { Exclude, Expose, Type } from 'class-transformer';
2 | import { ApiProperty } from '@nestjs/swagger';
3 |
4 | export class PathResponseTime {
5 | @ApiProperty({
6 | example: '/api/v1/resource',
7 | description: '사용자의 요청 경로',
8 | })
9 | @Expose()
10 | path: string;
11 |
12 | @ApiProperty({
13 | example: 123.45,
14 | description: '해당 경로의 평균 응답 소요 시간 (ms).',
15 | })
16 | @Expose()
17 | avgResponseTime: number;
18 | }
19 |
20 | @Exclude()
21 | export class GetPathElapsedTimeResponseDto {
22 | @ApiProperty({
23 | example: 'watchducks',
24 | description: '프로젝트 이름',
25 | })
26 | @Expose()
27 | projectName: string;
28 |
29 | @ApiProperty({
30 | type: [PathResponseTime],
31 | description: '프로젝트의 가장 빠른 응답 경로 배열',
32 | })
33 | @Expose()
34 | @Type(() => PathResponseTime)
35 | fastestPaths: PathResponseTime[];
36 |
37 | @ApiProperty({
38 | type: [PathResponseTime],
39 | description: '프로젝트의 가장 느린 응답 경로 배열',
40 | })
41 | @Expose()
42 | @Type(() => PathResponseTime)
43 | slowestPaths: PathResponseTime[];
44 | }
45 |
--------------------------------------------------------------------------------
/backend/console-server/src/project/dto/create-project.dto.ts:
--------------------------------------------------------------------------------
1 | import { IsEmail, IsIP, IsNotEmpty, IsNumber, IsString } from 'class-validator';
2 | import { ApiProperty } from '@nestjs/swagger';
3 | import { Type } from 'class-transformer';
4 |
5 | export class CreateProjectDto {
6 | @ApiProperty({
7 | example: 'watchducks',
8 | description: '프로젝트 명',
9 | })
10 | @IsString()
11 | @IsNotEmpty()
12 | name: string;
13 |
14 | @ApiProperty({
15 | example: '123.123.78.90',
16 | description: '프로젝트 IP (0.0.0.0 ~ 255.255.255.255 사이의 값이어야 합니다)',
17 | })
18 | @IsIP()
19 | @IsNotEmpty()
20 | ip: string;
21 |
22 | @ApiProperty({
23 | example: 'www.watchdukcs.com',
24 | description: '프로젝트 도메인 네임',
25 | })
26 | @IsString()
27 | @IsNotEmpty()
28 | domain: string;
29 |
30 | @ApiProperty({
31 | example: 'watchducks@gmail.com',
32 | description: '프로젝트 소유자 이메일',
33 | })
34 | @IsEmail()
35 | @IsNotEmpty()
36 | email: string;
37 |
38 | @ApiProperty({
39 | example: 9,
40 | description: '부스트캠프 기수',
41 | })
42 | @Type(() => Number)
43 | @IsNumber()
44 | @IsNotEmpty()
45 | generation: number;
46 | }
47 |
--------------------------------------------------------------------------------
/backend/name-server/src/index.ts:
--------------------------------------------------------------------------------
1 | import { Application } from 'app';
2 | import { logger } from 'common/utils/logger/console.logger';
3 |
4 | async function main(): Promise
30 |
32 | setShowTooltip(true)}
15 | onMouseLeave={() => setShowTooltip(false)}>
16 |
21 |
22 | {showTooltip && (
23 |
33 | );
34 | }
35 |
--------------------------------------------------------------------------------
/backend/console-server/src/config/typeorm.config.ts:
--------------------------------------------------------------------------------
1 | import { registerAs } from '@nestjs/config';
2 | import type { TypeOrmModuleOptions } from '@nestjs/typeorm';
3 |
4 | export default registerAs('typeOrmConfig', () => {
5 | const isDevEnv = ['development', 'test', 'debug'].includes(process.env.NODE_ENV as string);
6 | return (
7 | isDevEnv
8 | ? {
9 | type: 'mysql',
10 | host: process.env.DEV_MYSQL_HOST,
11 | port: process.env.DEV_MYSQL_PORT,
12 | username: process.env.DEV_MYSQL_USERNAME,
13 | password: process.env.DEV_MYSQL_PASSWORD,
14 | database: process.env.DEV_MYSQL_DATABASE,
15 | autoLoadEntities: true,
16 | synchronize: false,
17 | }
18 | : {
19 | type: 'mysql',
20 | host: process.env.DB_HOST,
21 | port: process.env.DB_PORT,
22 | username: process.env.DB_USERNAME,
23 | password: process.env.DB_PASSWORD,
24 | database: process.env.DB_NAME,
25 | autoLoadEntities: true,
26 | synchronize: false,
27 | }
28 | ) as TypeOrmModuleOptions;
29 | });
30 |
--------------------------------------------------------------------------------
/backend/proxy-server/src/common/logger/error-log.repository.ts:
--------------------------------------------------------------------------------
1 | import path from 'path';
2 | import fs from 'fs';
3 | import type { ErrorLog } from './logger.interface';
4 |
5 | export class ErrorLogRepository {
6 | private readonly logDir = 'logs';
7 | private readonly errorLogFile = 'error.log';
8 |
9 | constructor() {
10 | this.initializeLogDirectory();
11 | }
12 |
13 | public async saveErrorLog(log: ErrorLog): Promise
24 |
31 | )}
32 |
25 |
26 |
30 |
27 | {text}
28 |
29 |
18 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/frontend/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
11 |
16 |
17 |
18 |
22 |
23 |
27 |
31 |
32 |
19 |
23 |
27 |
24 | {averageTime || 0}ms
25 |
26 |
28 | {RESPONSE_TIME_LEGENDS.map((item, index) => (
29 |
38 |
30 |
31 |
35 |
36 | ))}
37 |
20 | 
25 |
26 |
27 |
28 | );
29 | }
30 |
31 | return (
32 |
33 |
37 | {MENU_ITEMS.map((item) => (
38 |
43 | ))}
44 |
45 | );
46 | }
47 |
--------------------------------------------------------------------------------
/frontend/src/hook/api/useTotalDatas.ts:
--------------------------------------------------------------------------------
1 | import {
2 | getTotalTrafficCount,
3 | getTotalProjectCount,
4 | getTotalResponseRate,
5 | getDailyDifferenceTraffic,
6 | getTotalElapsedTime
7 | } from '@api/get/MainPage';
8 | import { useSuspenseQueries } from '@tanstack/react-query';
9 |
10 | export default function useTotalDatas(generation: string) {
11 | const [trafficResult, projectResult, responseResult, dailyDifferenceResult, elapsedTimeResult] =
12 | useSuspenseQueries({
13 | queries: [
14 | {
15 | queryKey: ['totalTraffic', generation],
16 | queryFn: () => getTotalTrafficCount(generation)
17 | },
18 | {
19 | queryKey: ['totalProjectCount', generation],
20 | queryFn: () => getTotalProjectCount(generation)
21 | },
22 | {
23 | queryKey: ['totalResponseRate', generation],
24 | queryFn: () => getTotalResponseRate(generation)
25 | },
26 | {
27 | queryKey: ['dailyDifferenceTraffic', generation],
28 | queryFn: () => getDailyDifferenceTraffic(generation)
29 | },
30 | {
31 | queryKey: ['elapsedTime', generation],
32 | queryFn: () => getTotalElapsedTime(generation)
33 | }
34 | ]
35 | });
36 |
37 | return {
38 | totalTraffic: trafficResult.data.count,
39 | totalProjectCount: projectResult.data.count,
40 | totalResponseRate: responseResult.data.success_rate,
41 | dailyDifferenceTraffic: dailyDifferenceResult.data.traffic_daily_difference,
42 | elapsedTime: elapsedTimeResult.data.avg_elapsed_time
43 | };
44 | }
45 |
--------------------------------------------------------------------------------
/backend/console-server/src/main.ts:
--------------------------------------------------------------------------------
1 | import { ValidationPipe } from '@nestjs/common';
2 | import { NestFactory } from '@nestjs/core';
3 | import { SwaggerModule, DocumentBuilder } from '@nestjs/swagger';
4 | import { AppModule } from './app.module';
5 |
6 | async function bootstrap() {
7 | const app = await NestFactory.create(AppModule, {
8 | logger: ['error', 'warn'],
9 | });
10 |
11 | app.useGlobalPipes(
12 | new ValidationPipe({
13 | transform: true,
14 | }),
15 | );
16 | app.setGlobalPrefix('api');
17 | app.enableCors();
18 |
19 | const config = new DocumentBuilder()
20 | .setTitle('Watchducks API')
21 | .setDescription('초 훌륭한! 오직 성호님만을 위한! 그런! 완벽한! API 문서!')
22 | .setVersion('1.0')
23 | .build();
24 |
25 | const document = SwaggerModule.createDocument(app, config);
26 | SwaggerModule.setup('api-docs', app, document);
27 |
28 | const port = process.env.PORT || 3000;
29 | const server = await app.listen(port);
30 |
31 | console.log(`Application is running on: ${await app.getUrl()}`);
32 |
33 | process.on('SIGTERM', () => {
34 | console.log('SIGTERM signal received: closing HTTP server');
35 | server.close(() => {
36 | console.log('HTTP server closed');
37 | process.exit(0);
38 | });
39 | });
40 |
41 | process.on('SIGINT', () => {
42 | console.log('SIGINT signal received: closing HTTP server');
43 | server.close(() => {
44 | console.log('HTTP server closed');
45 | process.exit(0);
46 | });
47 | });
48 | }
49 | bootstrap();
50 |
--------------------------------------------------------------------------------
/backend/name-server/src/common/utils/validator/configuration.validator.ts:
--------------------------------------------------------------------------------
1 | import { ConfigurationError } from '../../error/configuration.error';
2 | import * as process from 'node:process';
3 |
4 | export interface ServerConfig {
5 | proxyServerIp: string;
6 | nameServerPort: number;
7 | ttl: number;
8 | authoritativeNameServers: string[];
9 | nameServerIp: string;
10 | proxyHealthCheckEndpoint: string;
11 | healthCheckIp:string;
12 | }
13 |
14 | export class ConfigurationValidator {
15 | static validate(): ServerConfig {
16 | const { PROXY_SERVER_IP, NAME_SERVER_PORT } = process.env;
17 | const { TTL, AUTHORITATIVE_NAME_SERVERS, NAME_SERVER_IP, PROXY_HEALTH_CHECK_ENDPOINT, PROXY_HEALTH_CHECK_IP } = process.env;
18 |
19 | if (
20 | !PROXY_SERVER_IP ||
21 | !NAME_SERVER_PORT ||
22 | !TTL ||
23 | !AUTHORITATIVE_NAME_SERVERS ||
24 | !NAME_SERVER_IP ||
25 | !PROXY_HEALTH_CHECK_ENDPOINT ||
26 | !PROXY_HEALTH_CHECK_IP
27 | ) {
28 | throw new ConfigurationError('Missing required environment variables');
29 | }
30 |
31 | return {
32 | proxyServerIp: PROXY_SERVER_IP,
33 | nameServerPort: parseInt(NAME_SERVER_PORT, 10),
34 | ttl: parseInt(TTL, 10),
35 | authoritativeNameServers: AUTHORITATIVE_NAME_SERVERS.split(',').map((s) => s.trim()),
36 | nameServerIp: NAME_SERVER_IP,
37 | proxyHealthCheckEndpoint: PROXY_HEALTH_CHECK_ENDPOINT,
38 | healthCheckIp :PROXY_HEALTH_CHECK_IP
39 | };
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/frontend/src/api/get/ProjectPage.ts:
--------------------------------------------------------------------------------
1 | import { api } from '@api/axios';
2 | import {
3 | ProjectElapsedTime,
4 | ProjectSuccessRate,
5 | ProjectDAU,
6 | ProjectTraffic,
7 | ProjectExist
8 | } from '@type/api';
9 | import { GroupOption } from '@type/Navbar';
10 |
11 | export const getGroupNames = async (generation: string) => {
12 | const response = await api.get
23 | {isProjectPath && (
24 |
30 | )}
31 |
37 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/frontend/src/hook/api/useRankData.ts:
--------------------------------------------------------------------------------
1 | import {
2 | getRankingTraffic,
3 | getRankingSuccessRate,
4 | getRankingElapsedTime,
5 | getRankingDAU
6 | } from '@api/get/RankingPage';
7 | import { useSuspenseQuery } from '@tanstack/react-query';
8 |
9 | export default function useRankData(rankType: string, generation: string) {
10 | const now = new Date();
11 | const tomorrowMidnight = new Date();
12 | tomorrowMidnight.setHours(24, 0, 0, 0);
13 | const timeUntilMidnight = tomorrowMidnight.getTime() - now.getTime();
14 |
15 | const queryOptions = {
16 | staleTime: tomorrowMidnight.getTime(),
17 | gcTime: timeUntilMidnight
18 | };
19 |
20 | switch (rankType) {
21 | case 'traffic':
22 | return useSuspenseQuery({
23 | queryKey: ['rankingTraffic', rankType, generation],
24 | queryFn: () => getRankingTraffic(generation),
25 | ...queryOptions
26 | });
27 | case 'success-rate':
28 | return useSuspenseQuery({
29 | queryKey: ['rankingSuccessRate', rankType, generation],
30 | queryFn: () => getRankingSuccessRate(generation),
31 | ...queryOptions
32 | });
33 | case 'elapsed-time':
34 | return useSuspenseQuery({
35 | queryKey: ['rankingElapsedTime', rankType, generation],
36 | queryFn: () => getRankingElapsedTime(generation),
37 | ...queryOptions
38 | });
39 | case 'dau':
40 | return useSuspenseQuery({
41 | queryKey: ['rankingDAU', rankType, generation],
42 | queryFn: () => getRankingDAU(generation),
43 | ...queryOptions
44 | });
45 | default:
46 | throw new Error('Invalid rank');
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/backend/console-server/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3.8'
2 | services:
3 |
4 | redis:
5 | image: redis:latest
6 | container_name: app-redis
7 | restart: always
8 | ports:
9 | - "6379:6379"
10 | networks:
11 | - app-network
12 |
13 | nginx:
14 | image: nginx:latest
15 | ports:
16 | - "80:80"
17 | - "443:443"
18 | volumes:
19 | - ./nginx.conf:/etc/nginx/nginx.conf
20 | - /etc/letsencrypt:/etc/letsencrypt
21 | depends_on:
22 | - server-blue
23 | - server-green
24 | networks:
25 | - app-network
26 |
27 | server-blue:
28 | image: ghcr.io/boostcampwm-2024/web35-watchducks/backend/console-server:latest
29 | container_name: app-server-blue-1
30 | environment:
31 | - TZ=Asia/Seoul
32 | - NODE_ENV=production
33 | - PORT=3001
34 | restart: always
35 | volumes:
36 | - ./.env:/usr/src/app/.env
37 | healthcheck:
38 | test: ["CMD", "nc", "-z", "localhost", "3001"]
39 | interval: 10s
40 | timeout: 2s
41 | retries: 5
42 | networks:
43 | - app-network
44 |
45 | server-green:
46 | image: ghcr.io/boostcampwm-2024/web35-watchducks/backend/console-server:latest
47 | container_name: app-server-green-1
48 | environment:
49 | - TZ=Asia/Seoul
50 | - NODE_ENV=production
51 | - PORT=3002
52 | restart: always
53 | volumes:
54 | - ./.env:/usr/src/app/.env
55 | healthcheck:
56 | test: ["CMD", "nc", "-z", "localhost", "3002"]
57 | interval: 10s
58 | timeout: 2s
59 | retries: 5
60 | networks:
61 | - app-network
62 |
63 | networks:
64 | app-network:
65 | name: app-network
66 | driver: bridge
--------------------------------------------------------------------------------
/frontend/src/component/page/ProjectDetailPage.tsx:
--------------------------------------------------------------------------------
1 | import CustomErrorBoundary from '@boundary/CustomErrorBoundary';
2 | import ProjectDAU from '@component/organism/ProjectDAU';
3 | import ProjectElapsedTime from '@component/organism/ProjectElapsedTime';
4 | import ProjectSuccessRate from '@component/organism/ProjectSuccessRate';
5 | import ProjectTrafficChart from '@component/organism/ProjectTrafficChart';
6 | import useIsExistGroup from '@hook/api/useIsExistGroup';
7 | import { Navigate, useParams } from 'react-router-dom';
8 |
9 | export default function ProjectDetailPage() {
10 | const { id } = useParams();
11 |
12 | if (id === undefined) {
13 | return
26 |
50 | );
51 | }
52 |
--------------------------------------------------------------------------------
/backend/proxy-server/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "proxy-server",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "src/index.ts",
6 | "type": "module",
7 | "scripts": {
8 | "test": "jest --config jest.config.js -ts-config=tsconfig.test.json",
9 | "build": "tsc -p tsconfig.json && tsc-alias -p tsconfig.json",
10 | "start": "NODE_ENV=production tsx src/index.ts",
11 | "start:dev": "NODE_ENV=development tsx src/index.ts",
12 | "lint": "eslint src/**/*.ts",
13 | "lint:fix": "eslint src/**/*.ts --fix"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "https://github.com/boostcampwm-2024/web35-WatchDucks.git"
18 | },
19 | "private": true,
20 | "devDependencies": {
21 | "@babel/core": "^7.26.0",
22 | "@babel/preset-env": "^7.26.0",
23 | "@babel/preset-typescript": "^7.26.0",
24 | "@eslint/eslintrc": "^3.1.0",
25 | "@types/jest": "^29.5.14",
26 | "@types/node": "^22.9.0",
27 | "@typescript-eslint/eslint-plugin": "^8.13.0",
28 | "@typescript-eslint/parser": "^8.13.0",
29 | "babel-jest": "^29.7.0",
30 | "eslint": "^9.14.0",
31 | "eslint-config-prettier": "^9.1.0",
32 | "eslint-plugin-prettier": "^5.2.1",
33 | "jest": "^29.7.0",
34 | "prettier": "^3.3.3",
35 | "ts-jest": "^29.2.5",
36 | "tsc-alias": "^1.8.10",
37 | "tsx": "^4.19.2",
38 | "typescript": "^5.6.3"
39 | },
40 | "dependencies": {
41 | "@clickhouse/client": "^1.8.0",
42 | "@fastify/reply-from": "^11.0.1",
43 | "@types/supertest": "^6.0.2",
44 | "clickhouse": "^2.6.0",
45 | "dotenv": "^16.4.5",
46 | "fastify": "^5.1.0",
47 | "mysql2": "^3.11.4",
48 | "redis": "^4.7.0",
49 | "reflect-metadata": "^0.2.2",
50 | "supertest": "^7.0.0",
51 | "tsyringe": "^4.8.0"
52 | }
53 | }
54 |
--------------------------------------------------------------------------------
27 |
43 |
44 |
28 |
29 |
31 |
32 |
33 |
34 |
36 |
37 |
38 |
39 |
41 |
42 |
45 |
46 |
48 |
49 |