네비게이션 마이크로 프론트엔드

Single-Spa Application 구성

🛠️ 기술 스택

🎨 스크린샷

🚀 실행 방법

환경변수

VITE_PARCEL_URL= # 주입할 Parcel 주소
VITE_STATIC_ASSETS_URL= # 정적 파일(.svg, .img) 저장 주소

주입할 Parcel

사용자 컨트롤 컴포넌트: PickMe-Auth-Parcel

개발 서버 실행

npm run dev

MFA 빌드 실행

npm run build:mfa

📂 폴더 구조

PickMe-Nav-Application
├─ .github
│  └─ workflows # 깃헙 액션 워크플로어 프로세스
│     ├─ deploy-gh-pages.yml # 깃헙 페이지로 배포
│     └─ vite-build.yml # Vite로 빌드
├─ public # 정적 자원
│  ├─ monogram-hq.svg
│  └─ resolution-logo.svg
├─ src
│  ├─ app
│  │  ├─ App.svelte
│  │  ├─ main.ts # 개발 서버 진입점
│  │  └─ application.ts # single-spa 애플리케이션 빌드 진입점
│  ├─ pages # 페이지
│  │  └─ nav
│  │     ├─ index.ts
│  │     ├─ store # 상태저장소
│  │     │  └─ themeStore.ts # 다크모드 테마
│  │     └─ ui
│  │        ├─ Logo.svelte # 로고
│  │        ├─ AuthControl.svelte # 인증 parcel 컨트롤
│  │        ├─ DarkModeToggle.svelte # 다크모드 컨트롤
│  │        ├─ Tools.svelte # 컨트롤 툴즈
│  │        ├─ NavButton.svelte # 네비게이션 버튼
│  │        ├─ NavList.svelte # 네비게이션 리스트
│  │        └─ TopBar.svelte # 네비게이션 바
│  └─ shared
│     └─ single-spa-svelte # third-party
├─ steiger.config.ts # FSD 린트 설정
└─ vite.config.ts # Vite 설정 파일