kyun2da/sejongcabinet

세종대 소프트웨어학과 사물함 예약 사이트

2020 소프트웨어 학술제 프로젝트 🥇

세부 정보

• PPT 다운로드

기술 스택

지원 브라우저 - IE 지원 X, 모바일 반응형 지원

개발자

• 허균
• 이종민

sejongcabinet's Issues

메인 페이지 사물함 사진 보여주는 기능

파이어베이스 사물함 데이터 가져오기

사물함 강제 취소 기능 및 고장 해제 및 고장 기능

창 크기를 줄였다가 늘리면 신청버튼이 없어짐

3-3 서버 열기함수 만들어서 버튼에 붙이기

창 크기를 줄이면 실제 사진이 잘리는 문제

reactfire 사용 제안합니다.

• 깃허브 주소

파이어베이스 구조를 계속 고민하다가 파이어베이스 오픈소스인 reactfire를 발견하였습니다.

• Easy realtime updates for your function components
• Access Firebase libraries from any component
• Built-in Support for prefetching
• Safely configure Firebase libraries

4가지의 장점이 존재한다고 합니다. 공식문서 확인해보시고 사용의견 부탁드립니다 :)

2. MyProfile 비밀번호 변경 기능

관리자 페이지 - 사물함 현재 들어있는 것 보여주는 기능

메인페이지 사물함 디자인 갱신

모바일 좌석 잘못표시되는 오류 (6x10)

React 컨테이너와 UI나누기

데이터를 받는 부분과 UI구성 부분을 나눈다

My Profile 페이지 만들기

간단하게 내가 예약한 사물함 번호나 비밀번호 변경 기능등을 추가하면 좋을 듯 함

3. 관리자가 서버 여는 기능

가이드 라인 제작

로그아웃 버튼 자리에 드롭다운 메뉴추가

3-1. 관리자가 고장 중인 것을 눌러서 고장 풀게 하기

4. 관리자가 사람들의 좌석을 취소시킬수 있도록 하게하기

사물함 최대 가로길이에 대한 의견 부탁드립니다

현재 개발상황

현재 PC와 모바일 둘 다 최대 가로길이 12에 맞춰놓고 사물함 버튼의 크기를 구성했습니다.

사물함의 가로길이와 세로길이에 맞춰서 화면에 딱 맞게 버튼의 크기를 구성하는 방법도 있는데, 이렇게 되면 사물함을 움직일 때 마다 버튼의 크기가 계속 바뀔 수 있어서 버튼의 크기는 고정하는 것이 좋을 것 같습니다.

문제점

왼쪽이 v1 오른쪽이 v2 입니다.

최대 길이를 12로 고정해서 사물함 버튼이 많이 작아졌는데 이부분을 어떻게 할지 의견 부탁드려요~

3-2 현재 사물함 총 예약된 개수 보여주기

메인 페이지에 실제 사물함 사진 넣어놓기

5. 엑셀로 다운받을 수 있도록 하기

엑셀로 하는 것보다 학번보기 버튼을 따로 만들어서 학번으로 캐비넷 이름을 보여줘도 좋을 것 같음 단, 이기능은 해상도때문에 컴퓨터만 지원해야할 것 같음

2-1. 로그아웃 기능 추가

디자인 가이드 만들기

eslint 설정 및 prettier 설정 방법

https://www.howdy-mj.me/typescript/cra-typescript-eslint-prettier/

관리자 페이지 만들기

관리자들이 사물함데이터를 엑셀로 옮기거나 정제된 폼으로 인쇄가 가능하도록 만들면 좋을 것 같음,
또한 매년 쓸 수 있도록 전체 사물함 위치 초기화 기능 등을 넣으면 좋을 것 같음,
마지막으로 회비를 안낸사람을 예약한 사물함에서 삭제할 수 있게 끔 하면 좋을 것 같음

관리자 페이지 - 이미지 추가 기능

도움말 버튼 넣어서 모달로 신청 프로세스나 기능 설명해주기

캐비넷 추가하면서 알게된 데이터 이슈일 수도(?) 있는 일

현재 캐비넷은 위의 그림과 같이 번호 0부터 시작이 되는 형식입니다.

캐비넷 추가나 삭제를 반복하다 보면 위의 그림과 같이 중간 번호가 없어지는 현상이 발생하는데요

이 것을 리덕스로 자바스크립트에서 받아오면 위의 그림과 같이 중간에 null 값이 생기게 됩니다.
이를 메인페이지에서 캐비넷을 렌더링할때 null값은 제외하셔야 될 것 같아서 이슈 띄워 놓습니다!

My Profile 내 사물함 취소할 수 있는 버튼과 사물함 위치 보여주기

favicon 소융대 로고로 변경

이슈 슬랙테스트

관리자 페이지 - 사물함 크기 변경 - 예약 되어 있는 사용자 없어지는 것 주의해주기

사물함 신청 및 취소 기능 구현

이메일 대신 학번을 아이디로 활용

파이어베이스로 하면 될 것 같아서 제가 가져갑니당~

중앙 정렬 스타일 컴포넌트로 정의하기

선택된 좌석에 마우스 대면 tooltip으로 학번표시

가져온 사물함 데이터 UI로 잘 뿌려주기

같은 학번 다른 이메일로 사물함 여러개 신청 가능 (사진2)

이 문제또한 학번 중복검사 하면 되는 문제라 일단 이슈만 열어놓고 파이어베이스 학번으로 고친 후 같은 학번으로 안되게 되는지 확인 하고 닫겠습니당

현재 회원가입시 오류가 있습니다.

문제점

회원가입시 파이어베이스 Authentication의 User로는 가입이되나 Database에 저장이 안되는 문제가 있는 것 같습니다.

(SignUp.tsx)

SignUp.tsx에서 createUserWithEmailAndPassword 함수 이후에 user 값이 안받아지는 것 같습니다

관리자 페이지 - 사물함 삭제 - 예약 되어 있는 사용자 없어지는 것 주의해주기

PC뷰와 모바일뷰 컴포넌트로 나누기

모바일 로그인 페이지 패스워드로 표시

Material UI makeStyles에서 미디어 쿼리 사용하기

Material UI 요소의 style을 미디어 쿼리에 따라 다르게 꾸며야 할 때

Material UI의 makeStyles에서 미디어 쿼리 사용은 다음과 같이 사용 가능합니다.

["@media (min-height:800px)"]: { marginTop: 10 }

src/lib/styles/media 에서 미디어쿼리 값을 불러와서 사용하는 경우 ${media.medium} 로 불러오면 양쪽에 공백이 생기는 것을 발견했습니다.

따라서 makeStyles과 미디어 쿼리를 동시에 사용 할 때는 다음처럼 사용하면 될 것 같습니다.

const useStyles = makeStyles(() => ({
  backwards: {
    [`${media.medium.trim()}`]: { left: '3%' },
    [`${media.large.trim()}`]: { left: '10%' },
  },
}));

11월 11일 이후 해야 할 것

1. 회원가입 페이지

- 모바일 화면에서 로고가 너무 화면을 크게 차지하고 회원가입 폼이 밑으로 내려간 것 다시 올려야 함
- 회원가입 페이지에 뒤로가기 버튼 구현

2. 메인 페이지

- Header 추가 (헤더에 유저이름과 Map 버튼? 아마 추가)
- 슬라이더 UI 변경
- Grid 디스플레이마다 가로 세로 길이 맞추기
- Grid UI 변경
- Grid 선택과 데이터 submit 기능 구현

관리자 페이지 - 사물함 제목 바꾸기 기능

1. 한 사람이 여러개의 사물함을 신청할 수 없도록 하기

관리자 페이지 - 사물함 추가

React 반응형 모듈

https://twojobui.tistory.com/25
https://www.npmjs.com/package/react-responsive

Color Palette 제안 합니다.

https://material-ui.com/customization/color/#official-color-tool

여기에 보면 많은 색상 팔레트들이 있습니다.
rgb(63,81,181) 계속 이런식으로 쓰기 보다는 칼라팔레트 테마를 정해서

버튼에는 색상에 값을 줘서 값으로 쓰는게 어떨지 제안합니다