문어 (Muneo) Frontend

문제 없는 시공을 위한 어시스턴트 — 문어 웹/관리자 서비스 프론트엔드 모노레포입니다

🚀 프로젝트 실행

1. 의존성 설치 (루트에서 실행 — pnpm workspace)

pnpm install

2. 환경 변수 설정

apps/web/.env.local, apps/admin/.env 파일을 각각 생성하고 API 서버 주소 등을 입력하세요.

# apps/web/.env.local
NEXT_PUBLIC_API_URL=

# apps/admin/.env
VITE_API_URL=

3. 개발 서버 실행

pnpm dev:web    # web (Next.js) - localhost:3000
pnpm dev:admin  # admin (Vite) - localhost:5173

4. 프로덕션 빌드

pnpm build:web
pnpm build:admin

5. 테스트

pnpm test           # 유닛 테스트 (Vitest)
pnpm test:e2e        # E2E 테스트 (Playwright)
pnpm storybook       # 디자인 시스템 Storybook

📁 프로젝트 구조

muneo/
├── apps/
│   ├── web/                          # Next.js — 사용자 서비스
│   │   └── src/
│   │       ├── api/                  # analyze, auth, chatbot, estimate, files, history, user
│   │       ├── app/                  # App Router — (auth), (landing), (main), api, providers
│   │       ├── components/           # FloatingChatLauncher, analytics 등 전역 컴포넌트
│   │       ├── hooks/ store/         # 전역 훅 · Zustand 스토어
│   │       ├── lib/                  # formatters, forms, parsers, validations
│   │       ├── constants/ types/
│   │       └── assets/
│   └── admin/                        # Vite + React Router 7 — 관리자 서비스
│       └── src/
│           ├── api/                  # auth, users
│           ├── pages/                # GlobalError, Login, NotFound, UserDetail, UsersList
│           ├── components/           # Badge, Card, Toast
│           ├── layout/ router/ store/ providers/
│           └── lib/ constants/ types/ styles/
├── packages/
│   ├── design-system/                # @muneo/design-system — 공유 디자인 시스템
│   │   └── src/
│   │       ├── ui/                   # Button, Modal, Dropdown, DatePicker, ChatBubble, ChatInput,
│   │       │                         # FloatingChat, Portal, SelectButton, Sidebar, StatusCard, Text, TextField
│   │       ├── styles/                # tokens.css.ts · theme.css.ts · sprinkles.css.ts · typography.ts
│   │       └── assets/icons/          # SVG → TSX 자동 변환 아이콘 (scripts/build-icons.ts)
│   ├── eslint-config/
│   └── typescript-config/
└── e2e/                              # Playwright E2E 스펙 10개 + mock-server

🔧 기술 스택

역할	종류
Web
Admin
Styling
State & Data
Monorepo
Testing
Infra
Tooling

👥 팀원

이경준	김승찬