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.

Sign up for GitHub

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

Jump to bottom

[FE] Modal 상태관리 로직 리팩토링 #18

Closed
5 tasks done
reesekimm opened this issue Oct 8, 2020 · 0 comments
Closed
5 tasks done

[FE] Modal 상태관리 로직 리팩토링 #18

reesekimm opened this issue Oct 8, 2020 · 0 comments
Labels
✨ FE Front-end 🔧 Refactor Refactoring
Milestone
Week 5

Comments

@reesekimm
Copy link
Owner

reesekimm commented Oct 8, 2020 •
edited
Loading

설명

  • Modal 컴포넌트의 재사용성을 높이기 위해 리뷰작성, 리뷰상세 Modal의 open/close 및 Modal 내부 콘텐츠를 redux로 관리
  • Modal의 wrapper 영역 클릭하여 Modal 닫는 기능 복구

구현 상세

  • modal slice, saga 추가하여 어플리케이션 내부 어디에서든 리뷰작성, 리뷰상세 Modal을 open/close 할 수 있도록 함
  • 페이지 단위 Template에 리뷰작성, 리뷰상세 Modal을 위치시킴
    • 기존 BookListItem 컴포넌트에 포함되어있던 리뷰작성 Modal 제거
    • 기존 WriteReviewTemplate에 포함되어있던 리뷰상세 Modal 제거
  • 피드백 Modal의 경우 기존대로 컴포넌트 내부에 위치시키고 useModal을 사용하여 open/close
  • Modal의 내부 콘텐츠는 Modal을 열 때 비동기적으로 요청하여 렌더링할 수 있음
    • (리뷰상세 Modal) 도서 검색 결과 -> 도서 클릭 -> 이미 작성한 리뷰가 있는 경우 -> 비동기 요청 후 응답 로드
    • (리뷰상세 Modal) 메인페이지 / 마이페이지 -> 리뷰 클릭 -> 동기적으로 로드
  • 모든 Modal은 wrapper 영역 클릭시 닫힘
@reesekimm reesekimm added 🔧 Refactor Refactoring ✨ FE Front-end labels Oct 8, 2020
@reesekimm reesekimm added this to the Week 5 milestone Oct 8, 2020
reesekimm added a commit that referenced this issue Oct 12, 2020
@reesekimm
[#18] refactor: 리뷰작성, 리뷰상세 Modal용 redux 상태관리 로직 추가 및 적용
2e56e00 
- 리뷰작성, 리뷰상세 Modal 상태관리를 위한 slice, saga 추가

- BaseTemplate에 리뷰작성, 리뷰상세 Modal 추가하고 기존 BookListItem과 WriteReviewTemplate에 포함되어있던 Modal 제거
-> 불필요한 Modal 렌더링 방지하고 컴포넌트의 재사용성을 높임

- 리뷰상세 Modal의 경우 내가 작성한 리뷰를 비동기적으로 요청하여 응답내용을 렌더링하도록 함
-> 비동기 요청 없이 리뷰상세 내용 전달하는 로직 구현 필요
reesekimm added a commit that referenced this issue Oct 12, 2020
@reesekimm
[#18] feat: wrapper 영역 클릭하여 Modal 닫는 기능 복구
b287612 
- useModal 훅에서 ref를 리턴
- Modal의 wrapper 영역에 ref 추가 및 className='close_modal' 추가
reesekimm added a commit that referenced this issue Oct 12, 2020
@reesekimm
[#18] refactor: 리뷰상세 Modal 내용 동기적 로드 기능 추가
1fad52e 
store상의 reviewDetailModal.data에 클릭한 ReviewListItem의 리뷰 정보를 저장하고 Modal의 content로 전달
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
✨ FE Front-end 🔧 Refactor Refactoring
Projects
None yet
Milestone
Week 5
Development

No branches or pull requests
1 participant
@reesekimm