2026.01 - 현재프론트엔드 개발회사 프로젝트
직구라운드
글로벌 B2B/B2C 해외 직구 플랫폼의 프론트엔드를 Next.js 기반으로 개발하고 있습니다. 견적서·요청서·제안서 등 B2B 거래 전 주기와 공급/정산/구매 내역 관리, 실시간 1:1 채팅, 검색 결과 페이지, 커뮤니티, SEO 인프라를 구축했습니다.
기술 스택
TypeScriptNext.jsReactTailwind CSSZustandReact QueryReact Hook FormZodTiptapSTOMPMSWStorybookVitei18n
주요 성과
- B2B 거래 관리 시스템 구현 — 견적서 작성·수정·PDF 미리보기·엑셀 다운로드, 요청서·제안서 CRUD 및 상세 페이지 (구매/공급 양방향)
- 상품·공급사 통합 검색 결과 페이지 구현 — 탭 전환, 정렬·페이지네이션의 URL 동기화 기반 SSR, 타입 정합성 개선
- STOMP 기반 실시간 1:1 채팅 클라이언트 연동 — REST+WS 하이브리드 구조, WS 전용 토큰 분리 전환, 회원 유형별 액션 버튼·거래 진행상태 이벤트 처리, 파일 전송 에러 복구
- Storybook 빌더 webpack → Vite 전환 — cold build 평균 28.9s → 13.9s (약 2.08× 빠름), 산출물 크기 -23.5%, 컴포넌트 개발 DX·CI 시간 개선
- 텍스트 에디터 Plate.js → Tiptap v2 전면 교체 — 웹 기준으로 도입했던 에디터가 모바일 환경에서 입력·레이아웃 문제를 일으켜, 모바일 호환이 검증된 Tiptap v2로 재작성
- 공급·정산·구매 내역 관리 — 리스트+상세+필터, 반응형 테이블, 엑셀/PDF 다운로드, 메모 기능
- 토크라운드(커뮤니티) 기능 구현 — 게시글·댓글·QnA·신고/삭제 모달, API 스펙 정합성 수정, SSR/CSR 통합
- SEO 인프라 구축 — metadata·robots·sitemap·manifest·JSON-LD·OG·hreflang 적용, 18개 공개 페이지 metadata 생성, AI 봇 허용·301 redirect·커스텀 404·OG/favicon/PWA 아이콘 에셋 배치
- 공통 UI·다국어(ko/en/zh)·반응형 디자인 체계 구축 — AlertDialog/ConfirmDialog 공통 컴포넌트, 필터 시스템, 테이블·폼의 모바일~데스크톱 대응, hreflang·i18n 라우팅