• 1. 팀원 소개
• 2. 비품인 배포 사이트
• 3. 비품인 시연 영상 사이트
• 4. 깃허브 레포
• 5. 프로젝트 기능
• 6. FE 적용 기술
• 7. FE 트러블 슈팅
• 8. 서비스 아키텍쳐
• 9. ERD
• 10. API 명세

비품인

🖥️ 비품인 시연영상, 아키텍처, 트러블슈팅

🖥️ 비품인 간단 시연영상

FE : https://github.com/Bipum-In/Bipum-In-FE

BE : https://github.com/Bipum-In/Bipum-In-BE

비품 관리 협업툴인 비품인 서비스는 마스터, 관리자, 사원으로 나뉘어 서비스를 사용할 수 있습니다.

• 회원가입 시 구글 계정을 통해 로그인을 할 수 있습니다.
• 로그인에 성공하여 토큰을 발급 받아야만 모든 페이지를 정상적으로 이용할 수 있습니다.

• 최초 마스터 계정으로 로그인 시 회사의 초기 부서 설정을 할 수 있습니다.
• 비품 총괄 관리자를 선임/해임 할 수 있습니다.

• 대시보드에서는 비품 종류를 카테고리별로 분류하여 수량과 상태를 한 눈에 확인할 수 있습니다
• 알림 박스에서 최신순으로 유저에 대한 알림을 실시간으로 받을 수 있습니다.
• 또한 상단 검색기능을 통해 비품과 유저에 대한 요청을 확인 할 수 있습니다.

• 실시간으로 받은 알림을 클릭 해 모달을 띄우고 대시보드 안에서도 쉽게 비품을 부여하거나 상세정보 등을 확인할 수 있습니다.
• 헤더에 있는 알림창 에서도 같은 기능을 사용할 수 있습니다.

• 요청 별로 '처리 전', '처리 중', '처리 완료' 상태를 쉽게 구분하여 확인할 수 있습니다
• 상단에 각각의 요청 탭을 통해 확인도 가능합니다.

• 상태별로 비품에 대한 조회가 가능합니다.
• 모달을 배치하여 상태를 파악 후 손쉽게 비품을 등록할 수 있습니다.

• 해당 비품에 대한 상세정보를 알고싶을 때는 원하는 리스트를 클릭하여 비품에 대한 히스토리와 상태를 확인할 수 있습니다.
• 협력업체 수정, 사용자 수정이 가능하고, 이미지를 클릭 시 확대된 이미지를 확인할 수 있습니다.

• 키워드를 검색하여 원하는 비품에 대한 정보를 손쉽게 확인 할 수 있습니다.

• 비품 단일 등록 시에는 관리자가 원하는 이미지와 함께 비품을 등록할 수 있습니다.
• 네이버 쇼핑 API를 통해 자동으로 이미지를 크롤링하여 비품을 손쉽게 등록할 수 있습니다.

• 비품에 맞는 소분류가 존재하지 않을 시 직접 입력하여 추가할 수도 있습니다.

• 복수 등록 시에는 엑셀을 통해 더욱 편리하게 여러가지 비품을 등록할 수 있습니다.

• 카테고리 관리, 부서 및 권한 관리, 협력 업체 관리를 할 수 있습니다.
• 카테고리 관리에서는 추가, 수정, 삭제 가 가능합니다.

• 부서 및 권한 관리에서는 공용 비품 책임자를 선임/해임이 가능합니다.
• 부서 내 사원 또한 삭제할 수 있습니다.

• 협력 업체 관리에서는 회사에 비품을 제공하는 협력사를 관리할 수 있습니다.

• 관리자 권한을 갖은 계정은 유저 모드 전환 기능이 있기 때문에 유저 계정을 만들 필요 없이 유저 기능을 이용할 수 있습니다.

• 유저 대시보드에서는 유저가 사용 중인 비품 목록을 확인할 수 있습니다.
• 개인에게 부여된 비품 목록과 공용 비품 목록을 확인할 수 있습니다.

• 비품에 대한 비품 요청, 반납 요청, 수리 요청 등을 할 수 있습니다.

• 유저가 요청했던 히스토리를 확인할 수 있습니다.

• 재고보기 기능을 통해, 요청하고 싶은 비품의 배고를 파악 할 수 있습니다.

• 내 정보에서 회원가입 시 입력했던 비밀번호를 입력하여 수정 할 수 있습니다.

• 만약 비밀번호를 분실했을 경우 비밀번호 찾기를 통해 임시 비밀번호를 발급받아 로그인할 수 있습니다.

드래그 앤 드롭 기능을 도입함으로써 UX 경험을 향상시킬것으로 기대 되었고, 타 웹사이트에서 이미 많이 도입하고 있으므로 시장에서의 경쟁력을 유지하고자 결정하였습니다. 또한 자바스크립트에서 이미 드래그앤 드롭 기능을 내장하고 있기 때문에 웹 애플리케이션의 구조와 디자인이 이미지 드래그 앤 드롭 기능을 적용하기에 적합하다고 판단하였습니다.

사용자가 페이지를 탐색하여 필요한 데이터만 로드되기 때문에 서버와 클라이언트 사이의 데이터 전송량이 현저히 줄어들 수 있어 효율성이 향상되어 선택했습니다.

클라이언트는 알림을 받는 입장이므로 양방향 통신이 필요하지 않았고, HTTP 통신을 사용해 별도의 세팅이 필요없고 좀 더 가볍게 사용할 수 있는 SSE를 선택했습니다.

toastify 라이브러리를 사용하지 않고 새로운 DOM에 Render해 인자로 받은 시간값이 종료됨에 따라 unmount 하는 로직을 사용해 구현 했고, 코드 재사용성을 고려해 query error 발생시 자동으로 Alert Popup이 나타나도록 로직을 구현했습니다.

로컬 스토리지에 저장된 사용자 데이터를 조작하고, 민감한 페이지에 접근할 수 있는 보안 문제가 발생할것을 우려해, FE에서 로컬스토리지에 저장된 정보를 암호화 하기 위해 crypto-js 라이브러리를 선택했습니다.

사용자가 간편하게 비품 복수 등록을 하기위해 XLSX 라이브러리를 사용해 sheet의 읽기와 쓰기등 여러가지 기능을 이용하기 위해 선택했습니다.

Refresh Token을 사용해 AccessToken을 재발급 받을때 사용자가 동일한 시간에 여러개의 요청을 보낼시 서로 다른 2개의 Access Token이 발급되기 때문에 메모이제이션 기능이 필요했지만 함수형 컴포넌트가 아닌곳에서 useCallback,useMemo hook을 사용할수 없기 때문에 메모이제이션 기능을 라이브러리로 도입했습니다.

비품인 API 명세 스웨거