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] 리뷰 작성 기능 구현 #13

Closed
6 tasks done
reesekimm opened this issue Sep 29, 2020 · 0 comments
Closed
6 tasks done

[FE] 리뷰 작성 기능 구현 #13

reesekimm opened this issue Sep 29, 2020 · 0 comments
Labels
✨ FE Front-end 📦 Feature New feature
Milestone
Week 4

Comments

@reesekimm
Copy link
Owner

reesekimm commented Sep 29, 2020 •
edited
Loading

설명

리뷰 작성 기능 구현

구현 상세

  • 로그인 O -> 기존 리뷰 작성 화면 유지 / 로그인 X -> 로그인 안내
  • 로그인시 Header에 '작성하기' 버튼 노출
  • '작성하기' 버튼 클릭시 리뷰 작성 페이지로 이동 (STEP 1 : 도서 검색)
  • 리뷰 작성 완료시 팝업 닫힘 (리뷰작성-도서 검색 페이지에 머무름)
  • 작성한 리뷰는 메인페이지에서 확인 가능
  • 이미 리뷰를 작성했을 경우 리뷰 상세 화면 제공
@reesekimm reesekimm added the 📦 Feature New feature label Sep 29, 2020
@reesekimm reesekimm added this to the Week 4 milestone Sep 29, 2020
@reesekimm reesekimm added the ✨ FE Front-end label Sep 29, 2020
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] feat: 리뷰 작성 버튼 및 페이지 추가
3fd6169
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] refactor: 알라딘 api 버전 변경에 따른 수정
c5baafe 
알라딘 api 버전을 20070901 -> 20131101 로 업데이트하면서
응답 포맷이 자바스크립트 객체로 변경됨

- 서버단에서 json 변환 작업 생략
- 클라이언트단 reducer에서 JSON -> JS 객체로 변환해주는 작업 생략
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] chore: BookInfo 마이너한 css 수정
0d50e9f
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] feat: Modal 기능 개선 및 추가
7807c88 
1. Modal 내용 렌더링 로직 개선
Modal을 호출하는 쪽에서 template 및 template에 들어갈 content를 props로 전달하고 Modal 내부에서 template에 content를 주입하도록 변경
-> Modal 내부에서 비동기 요청하여 응답 결과를 template의 content로 전달할 수 있도록 함 (props의 apiCallback를 호출하여 비동기 요청)

2. Modal 내부에서 feedback Modal 렌더링할 수 있도록 기능 구현
feedback Modal의 경우 clickOutside 기능 비활성화
(useClickOutside 훅 내부에서 클릭된 엘리먼트로부터 'click-outside-disabled' id값을 가진 엘리먼트가 탐지될 경우 clickOutside 기능 실행 취소)

3. feedback Modal에 사용될 FeedbackTemplate 추가
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] feat: ReviewListItem에 Modal 변경 내용 반영
66e22fa
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] feat: 이미 리뷰를 작성한 도서의 경우 '리뷰상세' 화면 제공
10d8219 
이미 리뷰를 작성한 도서를 클릭시 리뷰작성 모달과 함께 피드백 모달 제공 -> 피드백 모달의 '확인' 버튼 클릭시 리뷰작성 화면 제거 후 리뷰상세 화면 제공

<문제>
리뷰상세 모달은 리뷰 작성 모달의 하위 컴포넌트이기 때문에 리뷰작성 모달을 useModal 훅을 사용하여 unmount하게 될 경우 리뷰상세 modal도 함께 unmount됨

<해결>
- Modal type (modalFor props)에 따라 각각의 modal root (subWrapper)를 생성
- 리뷰작성 modal root(DOM Element)의 style.display 값을 'none'으로 변경하여 리뷰작성 화면 숨김
- Modal 컴포넌트 내부에서 모든 modal root의 display 값을 'block'으로 원복
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] feat: 작성한 리뷰 상세 정보 Modal 내부에서 비동기 요청하여 제공
2362e30
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] fix: 리뷰상세 Modal 내부 클릭시 Modal 닫힘 현상 해결
df5318c 
Modal 컴포넌트의 clickOutside 기능 제거
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] feat: 마이너한 스타일 작업
495dcd8 
- Modal Header 스타일 수정
- FeedbackTemplate 스타일 추가
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] feat: 리뷰작성 컴포넌트 내부 상태관리 로직 추가
c8ad3bd
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] refactor: types 관리 폴더 단일화
867bfc1 
type은 redux 상태관리 및 컴포넌트에서 공통적으로 사용됨
-> /feature 내부에서 관리하던 redux용 types를 /common/types에서 일괄적으로 관리하도록 변경
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] feat: 리뷰 작성 기능 구현
c7d08ba
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] feat: 작성한 리뷰 메인페이지에 노출
7e0e46b
reesekimm added a commit that referenced this issue Oct 7, 2020
@reesekimm
[#13] feat: Loading indicator 추가 및 css 수정
b3d8957
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 📦 Feature New feature
Projects
None yet
Milestone
Week 4
Development

No branches or pull requests
1 participant
@reesekimm