😎 완성!

URL
시연영상

프론트앤드 GITFLOW 꼭 확인!!!

https://www.canva.com/design/DAFekW90rKI/lJzJBLcx3mgI0xHLRlMa7g/edit?utm_source=shareButton&utm_medium=email&utm_campaign=designshare

중간 발표 시나리오

실전 발표 시연 시나리오

04월 03일 멘토링 질문 리스트

FE
1. 로그인시 서버에서 유저 정보를 담아서 데이터를 주는데, 그 데이터를 암호화 해서 로컬스토리지에 저장후 복호화해 조건부 랜더링으로 띄워주는 방식을 사용하고 있습니다. 이 방식보다 보안적으로 더 좋은 방식이 있을까요?
2. 비품 프로그램 특성상 관리자 중심적인 API인데, 모든 테스터들에게 관리자권한을 부여해준뒤에 테스트를 진행해야할까요? 유저 테스트 진행 방식에 대해 궁금합니다.
BE
1. 승인처리 절차가 결재 시스템을 의미하는지? 단계를 설정 하고, 수행 하게 끔.
2. 카카오 로그인 유지하고, 구글 로그인 같이 써도 되는지 - 카카오 없애고 구글로?
3. 현업 입장에서 저희 서비스에 추가할 만한 기능을 추천해주실 수 있는지
  
  기준 설정, 그리고 그것을 모은 페이지 구현. or 색칠놀이.
  
  설정 페이지 (부가적인 정보 관리 페이지)
  
  비품 복수 등록 (엑셀)
  
  구글 로그인
  
  권한 설정 → 공용 비품, 결재시스템 세분화(단계 욕심 안부리면 가능할지도), 결재시스템 커스텀(가능한가?) 자바 디자인 패턴 - facade, strategy
  
  알림톡,
  
  TODO. (페이지) -
  
  설정 페이지 (부가적인 정보 관리 페이지) - 카테고리 관리, 부서 관리, 권한 관리, 협력 업체, 유저 개인정보 설정
  
  비품 복수 등록 (엑셀)
  
  마스터 계정 권한 부여 페이지 (설정으로 이동 해도됨) 아마 하게될듯.
  
  중간 관리자(부서 비품관리대장) 대시보드

0. 3조 프로젝트 룰

점심 시간 12시 - 1시
저녁 시간 6시 - 7시
9~11시 ~ 9시 ~11시
일요일 자율
정규 회의 시간 데일리 오후 3시
코드 리뷰
통합 회의 ****

<aside> 📢 S3 배포용 링크: https://bipumin.shop

</aside>

<aside> 📢 피그마 : https://www.figma.com/file/ggkFoo4tUm7hjzH6hd8iJW/항해99_A팀_3조?t=bpgJMD709xKHrqa0-0

</aside>

<aside> 📢 스웨거 : https://bipum-in.shop/swagger-ui/index.html

</aside>

프론트엔드 깃허브 주소	‣
백엔드 깃허브 주소

<aside> ♥️ 멘토링 사전노트

</aside>

1. 프로젝트 :: 비품인

제목_없는_아트워크 2.png

기능 구현 목표

[x] 로그인: JWT 로그인 [관리자 / 사원]

관리자 탭

[x] 관리자 대시보드: 비품 관리자를 위한 대시보드를 제공하여 비품의 상태, 이력 등을 한눈에 파악할 수 있도록 하는 기능을 제공할 수 있습니다.
- [x] 재고등록 : 관리자가 비품에 관련한 재고를 등록
- [x] 알림 기능: 비품의 유통기한이나 수리/보수 일정 등에 대한 알림 기능 필요. (유지 보수나 교체를 빠르게 처리) - 관리자의 알림톡에 자동 메세징 (카카오톡 알리고 문자 API)
- [x] 구매관리: 비품을 구매할 때 필요한 정보를 기록하고 관리할 수 있는 기능 필요. (공급업체 정보, 구매 일자, 가격 등을 관리) - 크롤링을 통한 최저 물품 링크 찾기
- [x] 재고관리: 비품의 수량과 위치를 관리하고 추적할 수 있는 기능 필요. (재고 부족 혹은 과다를 예방)

공용 탭

[x] 수리/보수 기록: 비품의 수리 / 보수 기록을 기록하고 추적할 수 있는 기능 필요. (비품의 수명 연장) - 가까운 A/S 지점 찾기 기능
[x] 대여/반납 기능: 비품을 대여 / 반납할 수 있는 기능 필요. (비품의 사용 상태를 파악)
[x] 보고서 작성 기능: 비품 관련 보고서를 작성할 수 있는 기능 필요. (비품의 재고 상태, 유지보수 이력, 대여/반납 이력 등을 포함한 보고서를 작성) - 알림 기능과 묶임
[x] 분류 기능: 비품을 카테고리로 분류 [컴퓨터, 마우스, 프린터기…]
[x] 검색 기능: 비품을 검색할 수 있는 기능 필요. (필요한 비품을 빠르게 검색 가능) [사원명, 카테고리명, 제품명]

기능 구현 보류

[ ] 통계/분석 기능: 비품 관련 데이터를 통계/분석할 수 있는 기능 필요. (비품 관리 효율성 높임)
[ ] 보안 기능: 비품에 대한 접근 권한을 관리할 수 있는 보안 기능 필요. (불법적인 비품 사용 방지 가능)
[ ] QR 코드 기능: 비품의 QR 코드를 생성하고, 모바일 앱을 통해 QR 코드를 스캔하여 비품 정보를 확인할 수 있는 기능을 제공할 수 있습니다.
[ ] 비품 이미지 업로드 기능: 비품의 이미지를 업로드하여 더욱 직관적인 비품 관리를 할 수 있는 기능을 제공할 수 있습니다.

4. API 설계서 - swagger / postman 사용하셔도 무방합니다.

Swagger UI

API 설계

FE 코드 컨벤션

폴더명은 소문자
컴포넌트 파일명은 파스칼 케이스
컴포넌트 함수 명은 파스칼 케이스
컴포넌트 함수는 export default function 처럼 한 줄로 사용
Styled-components는 컴포넌트 함수 아래에 위치
Non-components는 카멜케이스
변수명은 카멜케이스
상수명은 대문자로
inline style 사용하지 않기
재사용성이 있는 코드는 모듈화를 해서 중복 코드를 피한다.
ES6 문법 사용한다.(구조분해 할당 사용,스프레드 연산자, 화살표 함수, let과 const 만 사용 var X, null을 체크하지 않고 optional chaining사용)
불필요한 주석을 사용하지 않는다.