MOPL Frontend

React + TypeScript 기반의 MOPL 프론트엔드 애플리케이션입니다.

Tech Stack

Category	Technology
Framework	React 19, TypeScript 5.9
Build Tool	Vite 7
Styling	Tailwind CSS v4, shadcn/ui
State Management	Zustand 5
Routing	React Router DOM 7 (HashRouter)
HTTP Client	Axios
Form	React Hook Form, Zod
Real-time	STOMP.js, SockJS
Package Manager	pnpm

Getting Started

Prerequisites

• Node.js 18+
• pnpm

Installation

pnpm install

Development

pnpm dev

Build

pnpm build

Lint

pnpm lint

Project Structure

src/
├── lib/
│   ├── api/           # API client and domain modules
│   ├── types/         # Type definitions
│   ├── stores/        # Zustand state stores
│   ├── hooks/         # Custom React hooks
│   └── utils/         # Utility functions
├── assets/            # SVG icons and illustrations
├── components/
│   ├── ui/            # Reusable UI components (shadcn/ui)
│   └── layout/        # Layout components (GNB, SideMenu, etc.)
└── pages/             # Page components
    └── {path}/
        ├── page.tsx
        └── components/

Key Architecture Decisions

• HashRouter - CSR 환경에 최적화된 해시 기반 라우팅
• Zustand stores - 데이터 페칭은 반드시 store를 통해 수행
• CUD 패턴 - Create/Update/Delete는 API 직접 호출 후 store 동기화
• Type imports - 모든 타입은 @/lib/types에서만 import
• Pretendard Variable - 한국어/영문 최적화 폰트 및 24개 타이포그래피 클래스

Team

Role	Name
팀장	정기주
팀원	김재민
팀원	민재영
팀원	정영진