기술 스택(FE)

서론

본 문서는 MARU 의 기술 스택(FE) 입니다.

기술 스택(FE)

프로젝트명: MARU
작성일: 2026-01-19
최종 수정일: 2026-02-19

수정 이력

수정일	수정 내용
2026-01-19	기술 스택 문서 최초 작성
2026-02-16	누락 라이브러리 추가 (결제 SDK, UI 컴포넌트 등)
2026-02-19	개발 도구 섹션 보완 (ESLint 플러그인, TypeScript 도구, Vite 플러그인 등)

핵심 프레임워크

기술	버전	용도
React	18.3.1	UI 라이브러리
TypeScript	5.5.3	정적 타입 시스템
Vite	5.3.3	빌드 도구

상태 관리

기술	버전	용도
Zustand	4.5.4	클라이언트 상태 관리
TanStack Query	5.51.1	서버 상태 관리

UI / 스타일링

기술	버전	용도
Tailwind CSS	3.4.4	유틸리티 CSS 프레임워크
shadcn/ui	-	컴포넌트 라이브러리 (Radix UI 기반)
Lucide React	0.408.0	아이콘 라이브러리
class-variance-authority	0.7.1	조건부 스타일 유틸리티
tailwind-merge	2.6.0	Tailwind 클래스 병합
tailwindcss-animate	1.0.7	애니메이션 유틸리티
cmdk	1.1.1	Command Menu 라이브러리
react-day-picker	8.10.1	날짜 선택 컴포넌트

폼 관리

기술	버전	용도
React Hook Form	7.52.1	폼 상태 관리
Zod	3.23.8	스키마 검증
@hookform/resolvers	3.9.0	RHF-Zod 통합

라우팅

기술	버전	용도
React Router DOM	6.24.1	클라이언트 라우팅

유틸리티 라이브러리

기술	버전	용도
Axios	1.11.0	HTTP 클라이언트
date-fns	3.6.0	날짜 유틸리티
clsx	2.1.1	조건부 클래스명

결제

기술	버전	용도
@tosspayments/tosspayments-sdk	2.5.0	토스페이먼츠 결제 SDK

테이블 / 차트

기술	버전	용도
TanStack Table	8.21.3	테이블 컴포넌트
Recharts	2.12.7	차트 라이브러리

드래그 앤 드롭

기술	버전	용도
@dnd-kit/core	6.3.1	DnD 코어
@dnd-kit/sortable	10.0.0	정렬 기능
@dnd-kit/utilities	3.2.2	DnD Kit 유틸리티

UI 피드백

기술	버전	용도
SweetAlert2	11.26.4	알림/확인 다이얼로그
sweetalert2-react-content	5.1.0	SweetAlert2 React 래퍼

개발 도구

빌드 / 컴파일

기술	버전	용도
TypeScript	5.5.3	정적 타입 검사
Vite	5.3.3	빌드 도구
@vitejs/plugin-react	4.3.1	Vite React 플러그인 (Fast Refresh 지원)

린팅

기술	버전	용도
ESLint	8.57.0	코드 린팅
@typescript-eslint/eslint-plugin	7.16.0	TypeScript ESLint 규칙
@typescript-eslint/parser	7.16.0	TypeScript ESLint 파서
eslint-plugin-react-hooks	4.6.2	React Hooks 규칙 검사
eslint-plugin-react-refresh	0.4.7	React Fast Refresh 호환성 검사
@tanstack/eslint-plugin-query	5.51.1	TanStack Query 사용 패턴 검사

CSS 후처리

기술	버전	용도
PostCSS	8.4.39	CSS 후처리
Autoprefixer	10.4.19	벤더 프리픽스 자동화
Tailwind CSS	3.4.4	유틸리티 CSS 빌드

타입 정의

기술	버전	용도
@types/node	20.14.10	Node.js 타입 정의
@types/react	18.3.3	React 타입 정의
@types/react-dom	18.3.0	React DOM 타입 정의

디렉토리 구조

frontend/src/
├── components/     # 공통 컴포넌트
├── constants/      # 상수 정의
├── features/       # 기능별 모듈
├── hooks/          # 커스텀 훅
├── layouts/        # 레이아웃 컴포넌트
├── lib/            # 유틸리티 함수
├── pages/          # 페이지 컴포넌트
├── router/         # 라우터 설정
├── services/       # API 서비스
├── shared/         # 공유 리소스 (UI, 스타일)
├── stores/         # Zustand 스토어
├── types/          # TypeScript 타입 정의
└── widgets/        # 위젯 컴포넌트