Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[#12] 정산페이지 레이아웃 작업 및 더미 데이터를 사용한 기능 구현 #55

Merged
merged 62 commits into from
Jan 21, 2024

Conversation

jiohjung98
Copy link
Member

@jiohjung98 jiohjung98 commented Jan 19, 2024

close #12

Description

  • 정산 내역 부분
  • 정산 예정 금액 부분 날짜에 따라 ui 변경
  • 지난달 정산 금액 부분 날짜에 따라 ui 변경
  • 조회 기간에 따라 데이터 렌더링
  • 엑셀 다운로드 기능 구현
  • 반응형 작업 및 모바일 레이아웃 구현

추가된 라이브러리는 다음과 같습니다.

  • react-datepicker: 기간 설정하는 달력 컴포넌트
  • react-paginate: 정산페이지 페이지네이션 기능
  • semantic-ui-css, semantic-ui-react : 셀렉터 드롭다운 구현
  • xlsx : 엑셀 다운로드 기능
  • date-fns, date-fns-tz: 캘린더 한글 지원

유의할 점 및 ETC (Optional)

  • 데이터 렌더링 테이블 보면 키값과 데이터들이 완전 수직으로 나오지 않는 문제가 있는데 추후 수정할 예정입니다.
  • 셀렉터(드롭다운) 디자인 변경 예정이므로 디자인 확정 시 수정할 예정입니다.
  • 캘린더 디자인 변경 예정이므로 확정 시 수정할 예정입니다.
  • 팝업 컴포넌트 위치 수정할 예정입니다.
  • 녹화 영상에 카페 소리가 들어가서 소리 키면 많이 시끄럽네요...

스크린샷 (Optional)

image

-.Clipchamp.mp4

Copy link
Collaborator

@jinjoo-jung jinjoo-jung left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

반응형도 엄청 빨리 하셨네요..! 정산 페이지도 까다로웠을 거 같은데 잘 해주신 거 같아요...!! 수고하셨습니다 👍🏻

Copy link
Collaborator

@turkey-kim turkey-kim left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생많으셨습니다!
늦게 남겨서, 다음 PR에라도 반영해주심 좋을 것 같습니다!

Comment on lines +102 to +109
@media (max-width: 900px) {
margin: 10px 20px;

display: flex;
flex-direction: column;
justify-content: center;
}
`;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

미디어 쿼리 쓰는 부분 현재 theme파일 들어가면, 상수화되어 있는데 사용하시는게 좋을 것 같습니다!
추후 변경될 수 있는 너비라 생각해서 다음 PR에서라도 반영되면 좋을 것 같아요!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

앗 넵 알겠습니다 다음 pr에서는 반영해놓겠습니다 !

Comment on lines +187 to +189
@media (max-width: 500px) {
width: 100%;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이런 (500px) 부분도, 지훈님이 설정해주신 theme파일 지오님 영역에서 상수화해서 관리하면 좋을 것 같습니다!

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 알겠습니다 !!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design 스타일 feat 기능 구현
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[design] 정산관리 페이지 레이아웃
5 participants