2026.01 - 2026.06프론트엔드 개발회사 프로젝트
직구라운드 글로벌 B2B/B2C 플랫폼
검색·거래·실시간 채팅·다국어·검색 노출 구조를 개발하고, 공유 가능한 검색 상태와 안정적인 다국어 변경 체계를 구축했습니다.
- 51.8%
- Storybook 빌드 시간 단축
- 800+
- i18n 사용처 구조 개편
- 3개 언어
- 24개 페이지 검색 노출 정비
문제
글로벌 거래 화면의 상태가 복잡하고, 다국어 키 충돌이 조용히 오류를 만들며, 개발 도구의 긴 빌드 시간이 반복 작업을 늦추고 있었습니다.
해결
- 검색 탭·정렬·페이지네이션을 URL과 동기화해 공유·재진입 가능한 SSR 검색 화면을 설계했습니다.
- STOMP 메시지 수신 시 React Query 캐시를 직접 갱신해 불필요한 refetch를 제거했습니다.
- i18n 네임스페이스와 CI 검증 스크립트를 도입해 중복·누락 키를 구조적으로 차단했습니다.
- Storybook 빌더를 webpack에서 Vite로 전환했습니다.
결과
- 800여 다국어 사용처를 안전한 네임스페이스 구조로 개편했습니다.
- 3개 언어·24개 페이지의 검색 노출 규칙을 정비했습니다.
- Storybook 빌드 시간을 28.9초에서 13.9초로 51.8% 단축했습니다.
기술 스택
Next.jsReactTypeScriptReact QueryTailwind CSSnext-intlSTOMPtiptapStorybookJSON-LD
주요 성과
- 상품·공급사 통합 검색과 공급·구매·견적·정산 관리 화면 구현
- 탭·정렬·페이지네이션 URL 동기화 기반 SSR 검색 화면 설계
- B2B 견적·정산 문서 PDF·Excel 생성 기능 구현
- STOMP 기반 1:1 채팅과 WebSocket 전용 토큰 인증 구조 구현
- i18n 네임스페이스 도입 및 CI 단계 중복·누락 검증
- Plate.js에서 tiptap으로 에디터 전환
- 3개 언어·24개 페이지 SEO 구조와 메타데이터 생성 규칙 정비
- Storybook webpack → Vite 전환