로스트아크 공식 웹사이트의 핵심 기능을 클론하며
Spring Boot + React 기반 풀스택 개발 역량을 강화하기 위한 프로젝트입니다.
프로젝트 정보
프로젝트명
LostArk Clone — 로스트아크 웹사이트 클론
프로젝트 목적
- 로스트아크 핵심 기능 클론을 통한 실전 개발 능력 향상
- Spring Boot & React 기반 풀스택 경험
- Stove API 연동을 통한 외부 데이터 처리 역량 강화
개발 기간
- Phase 1: 회원 관리 시스템 (2주)
- Phase 2: 캐릭터 정보 조회 (1주)
- Phase 3: 거래소/경매장 조회 (1주)
- Phase 4: 게시판 시스템 (2주)
핵심 기능 (MVP)
회원 관리 시스템
- 회원가입(이메일 인증, 중복 체크, 약관)
- 로그인/로그아웃(JWT, 자동 로그인, 소셜 로그인 선택)
- 프로필 편집
- 비밀번호 변경 및 재설정
- 회원 탈퇴(Soft Delete)
캐릭터 정보 조회
- 캐릭터명 검색
- 검색 이력 저장
- 서버/클래스/레벨/아이템 레벨 등 기본 정보
- 장비/스킬/각인/보석/카드 등 상세 정보
- 즐겨찾기 기능
사용 API
- /characters/{name}
- /armories/characters/{name}
-
- Stove LostArk Official API
거래소·경매장 조회
- 거래소 아이템 검색, 카테고리별 조회, 최저가 정렬
- 경매장 장비 검색, 필터(각인/품질)
- 관심 아이템 등록, 가격 알림(선택)
게시판 시스템
- 게시글 CRUD
- 조회수, 추천/비추천
- 댓글·대댓글
- 제목/내용/작성자 검색
- 페이징 및 정렬 기능
기술 스택
Backend
- Java 17, Spring Boot 3.2
- Spring Data JPA, Spring Security + JWT
- MySQL 8.x, Redis
- WebClient/RestTemplate
Frontend
- React 18 + TypeScript
- Axios, React Query
- Tailwind CSS / Styled Components
- React Router
Infrastructure
- Docker
- AWS/Vercel (배포) (생각중)
- GitHub Actions (CI/CD)
시스템 아키텍처
Frontend(React 3000) │ REST API │ Backend(Spring Boot 8080) │ │ MySQL DB Redis Cache │ Stove API(External)
Backend Layered Structure
- Controller → Service → Repository → DB
데이터베이스 설계(요약)
테이블설명
| users | 회원 정보 |
| email_verification_tokens | 이메일 인증 토큰 |
| user_roles | 권한 정보 |
| character_favorites | 즐겨찾기 캐릭터 |
| item_favorites | 관심 아이템 |
| boards | 게시판 종류 |
| posts | 게시글 |
| comments | 댓글 |
| post_likes | 게시글 추천 |
| search_history | 검색 기록 |
(상세 ERD는 별도 문서 참고)
보안 요구사항
- JWT 인증(Access 1h / Refresh 7d)
- BCrypt 비밀번호 암호화
- HTTPS 적용(배포 시)
- CORS, Rate Limiting 설정
- XSS/SQL Injection 방어
- 개인정보 암호화
- Soft Delete + 로그인 이력
성능 요구사항
- API 평균 응답 200ms 이하
- 페이지 로딩 3초 이내
- Redis 캐싱 전략:
- 캐릭터 정보: 10분
- 거래소 데이터: 5분
- 게시글 목록: 1분
- 동시 접속 100명 처리 목표
개발 로드맵 (7주)
Phase 1 (2주): 회원 관리
- Week 1: 회원가입, 로그인, 이메일 인증
- Week 2: 프로필, 비밀번호 재설정
Phase 2 (1주): 캐릭터 정보
- Week 3: API 연동, 상세 정보 조회, 즐겨찾기
Phase 3 (1주): 거래소/경매장
- Week 4: 아이템 조회 + 필터 + 관심 아이템
Phase 4 (2주): 게시판
- Week 5: 게시글 CRUD, 검색
- Week 6: 댓글, 추천, 페이징
Phase 5 (1주): 최적화 & 배포
- Week 7: 성능 개선, 테스트, 배포