프로젝트명 - 비품인

목차

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

팀원 소개

스택	이름	깃허브 주소
FE	박성인	https://github.com/Adult96
FE	김선중	https://github.com/Seogun95
FE	권구민	https://github.com/9mean2

비품인 배포 사이트

비품인

비품인 시연 영상 사이트

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

🖥️ 비품인 간단 시연영상

깃허브 레포

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

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

프로젝트 기능

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

🌟 1. 회원가입 및 로그인

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

이미지 더보기

🗝️ 2. 마스터 계정 로그인

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

이미지 더보기

👨‍💼 3. 관리자 모드

3-1. 대시보드

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

이미지 더보기

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

이미지 더보기

3-2.요청현황

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

이미지 더보기

3-3. 비품관리

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

이미지 더보기

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

이미지 더보기

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

이미지 더보기

3-4. 비품등록

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

이미지 더보기

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

이미지 더보기

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

이미지 더보기

3-5. 관리자 설정

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

이미지 더보기

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

이미지 더보기

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

이미지 더보기

3-6.모드 전환

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

이미지 더보기

👥 4. 유저 모드

4-1. 대시보드

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

이미지 더보기

4-2. 요청하기

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

이미지 더보기

4-3. 요청 내역

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

이미지 더보기

4-4. 재고 보기

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

이미지 더보기

5. ✏️ 내 정보 수정 기능

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

이미지 더보기

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

이미지 더보기

FE 적용 기술

기술 구현(라이브러리 미사용)

☑ 드래그 앤 드롭

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

☑ infinite scroll

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

☑ SSE

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

☑ Alert Popup

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

기술 구현(라이브러리 사용)

☑ crypto-js

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

☑ XLSX

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

☑ mem

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

FE 트러블 슈팅

더 자세한 내용은 WIKI 를 통해 확인 가능합니다.

민감한 정보의 암호화 및 복호화

이벤트 버블링

Alert Popup 자동화

axios 통신 후 state 업데이트 문제 해결

브라우저 자동 캐쉬 처리

Provisional headers are shown 에러

서비스 아키텍쳐

ERD

API 명세

비품인 API 명세 스웨거