프로젝트 소개
- 외국인 근로자 취업 매칭 및 근로 계약 체결 지원 서비스
- Frontend 4명, Backend 4명 총 8명
- 카카오 테크 캠퍼스 수상
- 아이디어톤 우수상
- 최종 신규 서비스 개발 프로젝트 우수상 수상
링크
시연 영상
KakaoTalk_Video_2025-01-26-17-17-29.mp4
기여한 부분
1. 재사용 가능한 컴포넌트 설계 및 비동기 처리 개선
- Headless UI 패턴을 활용한
Select 합성 컴포넌트 설계
- AS-IS: Select 컴포넌트는 상태 관리와 UI 로직이 결합되어 재사용성과 확장성이 부족했고, 페이지 이동 시 상태가 초기화되는 문제가 있었음.
- Challenge: Headless UI 패턴 기반으로
Root, Trigger, Content, Option을 설계하고, 지역 상태 관리(useSelect) 및 전역 상태 관리(useGlobalSelect)를 위한 커스텀 훅을 구현.
- TO-BE: UI와 상태 관리가 분리되어 다양한 상황에서 유연하게 커스터마이징 가능하며, 페이지 이동 시에도 선택 상태를 유지할 수 있는 지속 가능한 상태 관리를 제공.
- 모달 관리 시스템 구현 및 코드 스플리팅
- AS-IS: 모달 상태를 개별적으로 관리하며 불필요한 props 전달로 코드가 비대해졌고, 렌더링 방식이 파편화되어 유지보수성이 저하됨.
- Challenge: 중앙화된 모달 관리 시스템을 구축하고,
ModalsDispatchContext와 ModalsStateContext를 통해 모달 열기/닫기 메서드를 제공. 동적 로딩(loadable/component)으로 성능 최적화.
- TO-BE: 부모 상태에 의존하지 않고 독립적으로 모달을 열 수 있게 개선. 사용자 인터랙션 시에만 모달을 로딩하도록 최적화.
- Suspense와 ErrorBoundary를 활용한 비동기 UI 관리
- AS-IS: 로딩과 에러 처리를 매번 명령형 방식으로 구현하여 코드 중복과 비효율성이 발생.
- Challenge: React의 Concurrent UI Pattern을 활용하여 로딩과 에러 상태를 선언적으로 관리할 수 있는
AsyncBoundary 컴포넌트를 설계. Suspense와 ErrorBoundary를 조합해 간단하고 일관된 상태 제어 가능.
- TO-BE: 로딩 및 에러 상태를 컴포넌트화하여 코드 중복을 줄이고, 선언적으로 비동기 처리를 수행.
2. Google OAuth 소셜 로그인 구현
- Google OAuth 로그인 플로우 처리
- AS-IS: 외국인 근로자를 대상으로 한 프로젝트에서, 복잡한 폼 형식의 기존 가입 방식은 사용자 접근성이 낮고, 가입 완료율이 저조했음.
- Challenge:
useGoogleOAuth 훅으로 인증 로직을 추상화하고, redirectToGoogleLogin 메서드로 사용자를 Google 인증 페이지로 리디렉션. SignInButton 컴포넌트를 별도로 구현해 재사용성을 강화. 서버 응답에 따라 신규 사용자는 회원가입 페이지로, 기존 사용자는 홈 페이지로 동적 리다이렉트 처리.
- TO-BE: 소셜 로그인 도입으로 사용자 기존 가입률 대비 35% 증가.
3. 다국어 지원 및 테스트 기반 안정성 강화
- i18n을 활용한 다국어 지원
- 베트남어 번역 기능을 추가하여 프로젝트 국제화를 구현하고, 외국인 사용자를 대상으로 사용자 경험을 확장.
- 테스트를 통한 안정성 확보
- Vitest와 React Testing Library(RTL)를 활용해 메인 페이지 커스텀 훅 및 인증/인가 관련 컴포넌트 단위 테스트를 작성하여 안정적인 코드를 보장.
4. 정적 테스트 및 CI/CD 파이프라인 구축
- 로컬 개발 환경 자동화
eslint, prettier, husky, lint-staged를 활용해 코드 컨벤션을 자동화하고 일관성을 유지.
- CI/CD 파이프라인 구축
- GitHub Actions를 사용해 정적 테스트 및 배포 프로세스를 자동화하여 배포 속도와 안정성을 향상.