MapleStory(PC)와 MapleStory M의 캐릭터, 길드 정보를 조회하는 웹 앱입니다.
- 랜딩 hero + 탭 기반 통합 검색 (PC/길드/메이플M)
- PC 메이플스토리 캐릭터 종합 검색 (스탯, 장비, 스킬, 심볼, 유니온, 헥사스텟)
- 메이플스토리 M 캐릭터 검색 (장비 옵션 상세)
- 길드 멤버 일괄 조회 + 단일 기준 정렬 + 엑셀 다운로드
- 캐릭터 프로필 이미지 생성 (canvas)
- 다크/라이트 테마 (no-FOUC, localStorage 유지)
- IndexedDB 기반 클라이언트 캐싱
- bits-ui Dialog 기반 접근성(ESC/focus trap/portal) 모달
- 다국어 지원 (한국어/English/繁體中文) — localStorage + navigator.language 자동 감지
- Node.js v22+
- MapleHands API 서버 실행 중 (
https://mapleserver.asdfghjkkl11.com기본)
git clone https://github.com/asdfghjkkl11/MapleSearch.git
cd MapleSearch
npm install| Command | Description |
|---|---|
npm run dev |
개발 서버 실행 (http://localhost:6789) |
npm run build |
프로덕션 빌드 → build/ |
npm run preview |
빌드 결과 미리보기 |
npm test |
Vitest 단위 테스트 1회 실행 |
npm run test:watch |
Vitest watch 모드 |
MapleSearch/
├── src/
│ ├── routes/ # SvelteKit 페이지 라우트
│ │ ├── +layout.svelte # sticky header + 네비 + 테마 토글 + loading overlay
│ │ ├── +page.svelte # 메인 (hero + 탭 검색)
│ │ ├── +error.svelte # 404/에러 페이지
│ │ ├── search/
│ │ │ ├── +page.svelte # 캐릭터 검색 폼
│ │ │ └── [name]/+page.svelte # 캐릭터 상세 정보
│ │ ├── guild/
│ │ │ ├── +page.svelte # 길드 검색 폼
│ │ │ └── [server]/[name]/+page.svelte # 길드 상세 정보
│ │ └── mobile/
│ │ ├── +page.svelte # 메이플M 검색 폼
│ │ └── [server]/[name]/+page.svelte # 메이플M 캐릭터 정보
│ ├── lib/
│ │ ├── component/ # Svelte 컴포넌트
│ │ │ ├── Searchbar.svelte # pill 스타일 검색창
│ │ │ ├── ServerSelect.svelte # 서버 선택 드롭다운
│ │ │ ├── Modal.svelte # bits-ui Dialog 래퍼 (ESC/focus trap/portal)
│ │ │ ├── Equipment.svelte / CashEquipment.svelte / MobileEquipment.svelte
│ │ │ ├── Lskill.svelte / Vskill.svelte / Hskill.svelte
│ │ │ ├── Symbol.svelte / Union.svelte
│ │ │ ├── GuildMember.svelte # 길드원 + 단일 정렬 + Excel 다운로드
│ │ │ ├── datePicker/ # 날짜 선택 컴포넌트
│ │ │ └── icon/ # SVG 아이콘 (currentColor 기반)
│ │ ├── i18n/ # 메시지 카탈로그
│ │ │ ├── ko.js # 한국어
│ │ │ ├── en.js # English
│ │ │ └── zh-TW.js # 繁體中文
│ │ └── js/
│ │ ├── common.js # nvl, optionParse, inputInt, IDB 유틸
│ │ ├── common.test.js # 유틸리티 테스트 (35개)
│ │ ├── mapper.js # apiServer, 서버 목록, 아이템 순서
│ │ ├── api.js # MapleHands JSON 클라이언트
│ │ ├── i18n.js # locale/t/optionShort 스토어, translate 헬퍼
│ │ ├── i18n.test.js # i18n 회귀 테스트 (22개)
│ │ ├── loading.svelte.js # 로딩 카운터 스토어 (rune)
│ │ └── theme.svelte.js # 다크/라이트 토글 스토어 (rune)
│ ├── app.html # no-FOUC 테마/locale 스크립트, favicon, analytics
│ └── app.css # Tailwind + semantic 디자인 토큰 + 레거시 alias
├── static/ # favicon.ico, meso-icon-*.png, font/
├── svelte.config.js # SvelteKit 설정
├── vite.config.js # Vite + Tailwind 설정
└── package.json
- SvelteKit v2 + Svelte v5 (runes + legacy 혼합)
- Vite v6
- Tailwind CSS v4 (
@tailwindcss/vite) + semantic 디자인 토큰 - bits-ui (Modal =
Dialog.Root+ Portal) - dayjs (날짜 처리)
- ExcelJS (엑셀 다운로드)
- idb (IndexedDB 래퍼)
- Vitest (테스트)
- Pretendard 웹폰트 (400/500/700)
SPA 모드 (adapter-static)로 빌드됩니다. Netlify, Vercel 등에 배포 가능합니다.
- 빌드 출력:
build/ - SPA 폴백:
200.html