yamong-fe-v3

메인 인덱스 | bob-yamong

이 문서는 yamong-fe-v3 레포의 실제 라우팅과 화면 구성을 기준으로 정리한 노트입니다.

레포지토리 정보

이름: yamong-fe-v3
주요 목적: 컨테이너, 인프라, 알림, 정책을 한 화면 안에서 다루는 React 기반 운영 프론트엔드입니다.

주요 기술 스택

• 프레임워크: React 18과 React Router를 사용합니다.
• 빌드 도구: Vite를 사용합니다.
• 언어: TypeScript를 사용합니다.
• 상태 관리: Recoil을 사용합니다.
• 스타일링: styled-components를 사용합니다.
• 시각화/입력: Recharts, d3, d3-hexbin, react-grid-layout, @monaco-editor/react, react-select, react-tooltip, framer-motion, lucide-react를 사용합니다.

아키텍처

• 유형: 여러 라우트를 가진 제품형 Single Page Application입니다.
• 구성 요소:
  • src/main.tsx에서 RecoilRoot로 앱을 감쌉니다.
  • src/App.tsx는 /, /Container, /User, /Infrastructure, /Alert, /Policy 라우트를 둡니다.
  • src/component/Sidebar/Sidebar.tsx는 호버 시 열리는 사이드바 내비게이션을 제공합니다.
  • src/pages/Dashboard/Dashboard.tsx는 KPI 카드, 추세 차트, Top Rule Blocks, Alert drawer를 묶어 보여줍니다.
  • src/pages/Policy/Policy.tsx는 정책 표와 편집기 전환 흐름을 제공합니다.
  • src/pages/Policy/PolicyEdit/RawEditor/RawEditor.tsx는 @monaco-editor/react 기반의 편집기와 diff 뷰를 사용합니다.

주요 파일

1. src/main.tsx - RecoilRoot로 앱을 시작합니다.
2. src/App.tsx - 라우트와 전역 레이아웃을 정의합니다.
3. src/component/Sidebar/Sidebar.tsx - 사이드바 내비게이션을 제공합니다.
4. src/pages/Dashboard/Dashboard.tsx - KPI, 추세, 규칙, 알림 드로어를 구성합니다.
5. src/pages/Policy/Policy.tsx - 정책 목록과 편집기 상태를 관리합니다.
6. src/pages/Policy/PolicyEdit/RawEditor/RawEditor.tsx - Monaco 편집기와 diff 편집기를 사용합니다.
7. src/pages/Infrastructure/Infrastructure.tsx - 인프라와 파드 조회 화면을 제공합니다.
8. src/pages/User/User.tsx - 로그인과 가입 화면을 전환합니다.

포트폴리오 메모

• 대시보드, 정책 편집, 인프라 조회, 사용자 화면을 한 앱 안에서 분리해 둡니다.
• Sidebar와 라우트 구성이 명확해서 운영 콘솔 느낌의 화면 구조를 보여줍니다.
• 시각화와 편집기, 드래그형 레이아웃 도구가 함께 들어 있어 제품형 프론트엔드로 읽힙니다.