플러스프로젝트 배경
제공된 HTML/CSS 퍼블리싱 파일의 BEM 클래스 구조와 Stimulus.js 컨트롤러 패턴을 분석하고, 로그인부터 Swiper 기반 메인화면·좋아요 토글까지 React 컴포넌트 전환과 Axios 백엔드 연동 구조를 사전 구현했습니다. 로그인·마이페이지·메인 슬라이더 등 실제 사용 흐름 5가지를 검증해둔 덕분에, 3일 안에 현장에서 바로 쓸 수 있는 React 프론트엔드를 완성해 드릴 수 있습니다.
프로젝트 성과
HTML/CSS 그대로 재사용, 스타일 수정 0건
기존 BEM 클래스명을 React className으로 1:1 매핑. app.css·device.css 등 CSS 파일 4개를 수정 없이 사용해 원본 디자인 그대로 보존
5개 화면 전체 동작 확인
로그인·회원가입·메인·마이페이지·책 소개 화면, 로그인부터 좋아요 토글까지 실제 사용 흐름 E2E 검증
Swiper 가로·세로 슬라이드 구현
책 6권을 좌우 스와이프로 탐색, 각 카드 내 위아래 스와이프로 인용·소개·리뷰 섹션 전환. 원본 동작 그대로 재현
환경변수 1개로 mock → 실 서버 전환
VITE_API_BASE_URL 설정만으로 mock 비활성화. JWT Bearer 토큰 자동 첨부·401 만료 처리 인터셉터 내장
핵심 기능
Swiper 기반 가로·세로 도서 슬라이더
좌우로 책을 넘기고, 카드 내 위아래 스와이프로 인용·소개·리뷰 전환. 원본 JavaScript 동작을 React State로 재구현
진행 단계
퍼블리싱 파일 분석 + 컴포넌트 설계
2026.06.
HTML 6개 파일 BEM 구조·Stimulus.js 패턴 분석. React 컴포넌트 트리·라우트·타입 설계
프로젝트 상세
제공된 HTML/CSS 퍼블리싱 파일의 BEM 클래스 구조와 Stimulus.js 컨트롤러 패턴을 분석하고, 로그인부터 Swiper 기반 메인화면·좋아요 토글까지 React 컴포넌트 전환과 Axios 백엔드 연동 구조를 사전 구현했습니다. 로그인·마이페이지·메인 슬라이더 등 실제 사용 흐름 5가지를 검증해둔 덕분에, 3일 안에 현장에서 바로 쓸 수 있는 React 프론트엔드를 완성해 드릴 수 있습니다.
