🔥HOTSPOT FE

HOTSPOT은 가족 구성원의 데이터 사용량을 실시간으로 동기화하고, 관리자(부모)가 설정한 정책에 따라 자녀의 데이터 접근을 즉각적으로 제어하는 스마트 플랫폼입니다. 100만 가상 사용자의 트래픽 시뮬레이션을 견디는 고성능 실시간 대시보드와 일관된 사용자 경험을 제공합니다.

⚙️핵심 기능

1. 실시간 가족 데이터 통합 대시보드

가족 구성원 전체의 데이터 소진 현황을 실시간으로 집계해 도넛 차트 및 막대 바 형태로 시각화합니다.
복수 구성원이 동시에 데이터를 소진해도 잔여량 소진 시점과 차단 상태가 모든 단말에서 일관되게 반영됩니다.

2. 정책 기반 역할별 관리 시스템

백오피스를 사용하는 슈퍼 관리자 권한을 따로 두었습니다.
사용자엔 대표, 부모, 자녀의 세 역할을 만들었으며 이에 따른 권한별 메뉴 구성 및 기능 제한을 해두었습니다.
데이터 차단 및 허용 정책을 즉시 반영하며, 상태 변화에 따른 UI 피드백을 실시간으로 제공합니다.

3. 데이터 시각화

100만 가상 사용자의 트래픽 시뮬레이션을 견디는 실시간 UI를 처리하고 유저별로 상태를 동기화합니다.
신뢰성과 안정성 확보를 위해 E2E 테스트를, 렌더링 최적화를 위해 접근성 테스트를 예정 중입니다.

🖥️페이지 소개

Web(사용자)

온보딩

생년월일, 전화번호 입력
약관 동의

회선 정보를 바탕으로 회원가입 완료.

- 홈으로 이동할지 새로운 가족을 생성할지 선택 가능. - 새로운 가족을 생성해 여러 구성원 추가 가능.

가족 대시보드

구성원 별 사용량/가족 데이터 총량을 도넛 차트로 표시
구성원 별 한도 및 사용량을 프로그래스 바로 표시
나에게 적용된 정책 확인
새로고침으로 사용량 갱신 가능

내 대시보드

요금제에 따른 내 개별 데이터 사용량/내 개별 데이터 총량을 도넛 차트로 표시
월별 데이터 사용량
선물받은 데이터 사용량/선물받은 데이터 양을 표시
선물받은 데이터 건수, 선물한 데이터 건수

알림 페이지

개인 데이터 임계치(50%/30%/10%/0%) 알림
가족 공유 데이터 임계치 알림
선물 데이터 임계치 알림
시간 차단 정책 알림(적용/해제)
즉시 차단 정책 알림
앱/서비스 이용 차단 알림
데이터 선물 알림
SSE로 알림을 수신

리포트 페이지

월/일별 전체, 개인별 사용량 추이 확인
월/일별 개인별 앱 상세 사용량 확인

AI 리포트 페이지

리포트 신청 및 수령일 지정
리포트 수령일 변경
리포트 구독 취소
서비스 신청시 구성원별 AI 리포트 조회 가능
이전 리포트 조회(히스토리)

마이페이지

대표, 부모 메뉴
- 가족 관리 페이지
- 가족 정책 페이지
일반 메뉴(공통)
- 알림 설정
- 데이터 선물하기
- 로그아웃
- 회원탈퇴

가족 관리 페이지

대표자 기능
- 구성원 추가(가족관계증명서 첨부 필요)
- 구성원 권한 변경
- 구성원 삭제
부모 기능(공통)
- 구성원 이름, 전화번호, 역할 조회

정책 페이지

대표자 기능
- 구성원 한도, 적용된 정책, 차단된 서비스 수정
- 구성원 즉시 차단
부모 기능(공통)
- 구성원 한도, 적용된 정책, 차단된 서비스 확인

대표자 기능
- 가족에 적용할 커스텀 정책 생성(탬플릿 불러오기 가능)/수정/삭제
- 적용 정책에서 데이터 우선순위 지정(선착순/우선순위)

데이터 선물 페이지

구성원에게 데이터 선물
데이터 선물한 내역
데이터 선물받은 내역

알림 설정 페이지

알림
- 임계치 알림 설정
- 정책 적용/해제 알림 설정
- 앱 서비스 차단 적용/해제 알림 설정
- 선물받은 데이터 알림 설정

Admin(관리자)

가족 조회

전화번호를 통해 가족 검색
상세 버튼을 누르면 가족 상세 페이지로 이동

가족 상세 페이지

구성원 별 사용량/가족 데이터 총량을 도넛 차트로 표시
요금제에 따른 개별 데이터 사용량/개별 데이터 총량을 프로그래스 바로 표시
선물받은 데이터 사용량/선물받은 데이터 양을 받은 선물 별 프로그래스 바로 표시
구성원 권한 변경
구성원 즉시 차단
구성원 한도 설정
구성원 별 정책, 차단 서비스 적용

정책 관리 페이지

정책 추가 및 정책 삭제
정책 활성/비활성

구성원 추가 페이지/구성원 삭제 페이지/가족 생성 페이지

대기 중인 가족 구성원 신청 승인/거부
승인한 신청 보기
거부한 신청 보기
취소된 신청 보기

🏗️기술 스택

Language: Typescript
Framework: Next.js, React
Styling: Tailwind CSS
Visualization: Recharts
State Management: Redux Toolkit, TanStack Query
Package Manager: pnpm

추가적으로 디자인 토큰을 체계화하고, 빌드/캐시 최적화를 진행할 예정.

📂디렉토리 구조

한정된 자원(한 달, 2인) 내에서 최대한의 효율을 내기 위해 공통되는 컴포넌트나 함수, 스타일을 정의해놓고 이를 가능한 한 활용하는 방식으로 개발하고자 Turborepo 기반 monorepo 구성을 차용.

apps
- web: 사용자 서비스
- admin: 관리자 서비스
packages
- 두 서비스의 공통 컴포넌트, 함수 등

apps(실 서비스 단) 내부 구조

컴포넌트의 재사용을 추구하고자 FSD 아키텍처를 기반으로 폴더 구성.

src/
├── 📂 app/                      # [App Layer] 애플리케이션 설정 및 진입점
│   ├── 📂 (shell)              # App Router 기반 페이지 경로 정의
│   ├── 📂 _providers/           # QueryClient, StoreProvider 등 전역 설정
│   ├── layout.tsx               # Root Layout 및 전역 Provider 연결
│   └── page.tsx                 # 서비스 메인 진입 페이지
│
├── 📂 pages-layer/              # [Pages Layer] 화면 단위의 페이지 구성
│   └── 📂 report/
│       └── index.ts             # 내부 요소 중 필요한 것만 골라 export
│
├── 📂 widgets/                  # [Widgets Layer] 독립적인 비즈니스 블록 조합
│   ├── 📂 header/
│   └── 📂 report/
│
├── 📂 features/                 # [Features Layer] 사용자 액션 및 비즈니스 기능
│   ├── 📂 auth/                 # ex) 이메일 로그인 로직 및 폼 UI
│   └── 📂 user-selector/        # ex) 유저 선택 등 실제 상호작용 기능
│
├── 📂 domains/                 # [Entities Layer] 비즈니스 도메인 모델 및 데이터 단위
│   ├── 📂 user/                 # ex) 사용자 정보 모델, 프로필 UI, 타입 정의
│   └── 📂 report/               # ex) 리포트 데이터 모델, 호출 api, 데이터 표시 ui 등
│
└── 📂 shared/                   # [Shared Layer] 재사용 가능한 순수 공통 모듈
    ├── 📂 api/                  # Axios/Fetch 인스턴스 및 공통 API 로직
    ├── 📂 assets/               # 정적 이미지 소스 모음
    ├── 📂 constants/            # 상수값 모음
    ├── 📂 store/                # 전역 변수(RTK) 훅
    ├── 📂 ui/                   # 디자인 시스템 기반 원자적(Atomic) 컴포넌트
    └── 📂 lib/                  # 유틸리티 함수, 공통 Hooks, 상수 정의

각 layer 밑으로 slices(user, post 등 기능 분류), segments(ui, model, api 등 구현을 위한 세부사항)가 들어간다.

packages(공통) 내부 구조

ui/src/
├── 📂 assets            # 정적 이미지 소스 모음 (코드적 가공이 필요한 것만)
├── 📂 components        # 공통 컴포넌트
├── 📂 lib               # 공통 함수
└── 📂 styles            # 전역 스타일 정의
└── index.ts             # 필요 파일들을 외부로 빼는 module

🏃실행 방법

버전
- Node.js 버전: 18 이상 권장
- Package Manager 버전: pnpm@10.29.3

.env 파일 구성 및 설정 방법

// apps/admin에 하나 apps/web에 하나
// apps/admin
NEXT_PUBLIC_ADMIN_BASE_URL=관리자 서버 링크
// apps/web
NEXT_PUBLIC_BASE_URL=유저 서버 링크

pnpm 및 필요 라이브러리 설치
```
npm install -g pnpm
pnpm install
```

실행

#전체 실행
pnpm run start

#web(사용자) 실행
pnpm --filter=@hotspot/web run start

#admin(관리자) 실행
pnpm --filter=@hotspot/admin run start

#공통 컴포넌트 storybook 실행
pnpm --filter=@hotspot/ui storybook

#공통 컴포넌트 storybook 실행 pnpm --filter=@hotspot/ui storybook

Name		Name	Last commit message	Last commit date
Latest commit History 126 Commits
.gemini		.gemini
.github		.github
.husky		.husky
.idea		.idea
.vscode		.vscode
apps		apps
packages		packages
.gitignore		.gitignore
.npmrc		.npmrc
Dockerfile.admin		Dockerfile.admin
Dockerfile.web		Dockerfile.web
LICENSE		LICENSE
README.md		README.md
biome.json		biome.json
commitlint.config.mjs		commitlint.config.mjs
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
pnpm-workspace.yaml		pnpm-workspace.yaml
turbo.json		turbo.json

Folders and files

Latest commit

History

Repository files navigation

🔥HOTSPOT FE

⚙️핵심 기능

1. 실시간 가족 데이터 통합 대시보드

2. 정책 기반 역할별 관리 시스템

3. 데이터 시각화

🖥️페이지 소개

Web(사용자)

로그인

온보딩

가족 대시보드

내 대시보드

알림 페이지

리포트 페이지

AI 리포트 페이지

마이페이지

가족 관리 페이지

정책 페이지

데이터 선물 페이지

알림 설정 페이지

Admin(관리자)

로그인

가족 조회

가족 상세 페이지

정책 관리 페이지

구성원 추가 페이지/구성원 삭제 페이지/가족 생성 페이지

🏗️기술 스택

📂디렉토리 구조

apps(실 서비스 단) 내부 구조

packages(공통) 내부 구조

🏃실행 방법

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases 1

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages