YEEP

개요

Yeep 프로젝트는 노스페이스 필리핀 지사의 전 사원을 체계적으로 관리할 수 있도록 설계된 시스템으로, 사용자 앱과 관리자 페이지를 함께 구축한 프로젝트입니다. 직원 개개인이 자신의 정보를 확인하고 활용할 수 있는 앱을 제공하는 동시에, 관리자 측에서는 사원 데이터 관리, 권한 설정, 업무 현황 파악 등이 가능하도록 직관적인 관리 페이지를 구현하였습니다.

진행 방식

고도화를 위한 운영 및 일부 구축 프로젝트이며, React Native 및 React.js 환경에서 작업을 진행하였습니다. 스타일 처리로는 TailwindCSS 를 사용하였으며, Redux 로 중앙데이터 관리를 진행하였습니다. 디자인 수급은 figma 로 이루어졌으며 기획자 1명, 디자이너 1명, 백엔드 2명, 프론트엔드 3명의 구성원으로 협업을 진행하였습니다.

주요 작업 내용

• 1. 사용자 앱

  • React Native 환경에서 뉴스, 공지사항, FAQ, 헬프데스크 등 서브 화면 UI 구축 및 데이터 연동

  • 탭 기능, 게시물 등록/수정 및 좋아요 기능 등 구현

• 2. 관리자 웹

  • 메인, 서브 등 전체 관리자 페이지 90% 개발

  • MUI 를 활용한 어드민 페이지 개발 생산성 향상

  • react-hook-form의 Controller를 활용하여 MUI 컴포넌트들과 폼 상태를 연동하여 복잡한 폼 로직을 간소화

  • 각 페이지 CRUD 구현 및 페이지별 기능 구현

    • - Chart.js 를 활용하여 Bar 차트, Doughnut 차트 등 페이지별 데이터를 다양하게 시각화하여 사용자가 각 페이지의 현황을 직관적으로 파악할 수 있도록 유도
    • - react-hook-form 을 활용해 목록에서 전체, 대기, 승인, 거절 상태를 체크박스 형태로 구현, status 별로 즉시 리스트 필터링 하여 볼 수 있도록 구현(중복 선택 가능)
    • - 등록 시 타겟 그룹을 선별하여 저장할 수 있는 팝업 구현
    • - 사용자 문의에 답변 등록 및 승인, 거절 등 피드백 기능 구현
    • - 로그인 유효성 데이터 검증
    • - 이외에 비밀번호 수정 기능, 번역된 언어 수정 기능, 버전 수정 기능 등 개발

💫 Trouble shooting

• 필수값 상태 보장

  문제: 상태별 필터링 관련 특정 목록페이지에서 대기(PENDING) 상태가 항상 체크되어있어야 했는데, 전체 해제 시 PENDING 체크박스가 해제되는 문제 발생

  해결: useFormContext 의 watch 기능을 기반으로 특정 필드를 기준으로 초기값을 제어하여 값이 유지되도록 처리 → 폼 데이터가 유실되는 문제 해결

• 차트 반응형 및 크기 제어 이슈

  문제: 차트가 화면 컨테이너 크기에 맞게 자동으로 조정되지 않고, 고정된 크기로 유지되어 레이아웃이 깨지는 문제 발생

  해결: responsive: true, maintainAspectRatio: false 옵션을 설정하고, useEffect 에서 canvas 스타일을 직접 조작하여 크기 제어

• 파일 업로드 로직 중복

  문제: 페이지마다 하드코딩으로 파일 업로드 로직들이 난잡하게 나열되어 있었음

  해결: 파일 관리 커스텀훅(useFileManager)을 구현하여 각 파일별로 훅을 불러와 간편하게 메서드로 활용할 수 있도록 개선

• 팝업 내 양방향 데이터 이동 및 상태 동기화 문제

  문제: 뉴스 등록 페이지에서 두 개의 리스트 간에 항목을 이동시킬 때 중복 방지와 상태 동기화가 복잡하고, 선택된 상태가 초기화되는 문제 발생

  해결: some 메서드를 사용한 중복 체크 로직을 만들어 같은 요소가 두 번 들어가지 않게 하고, 이동할 때마다 state 로 선택 상태를 초기화해서 깔끔하게 관리