[실전 프로젝트] 페이지마다 컴포넌트 나누기

1. 첫 로그인 사용자에게 알림 설정 유도하는 팝업(PushNotificationPop.js), 마이페이지에 알림 설정 수정하는 페이지(MyPageNotification) 안에 들어가는 글자나 토글(Toggle), 드롭다운(DropDown)이 공통적인 부분이라서 src/componetns/Notification.js에 새로운 컴포넌트로 만듬

공통적으로 들어가는 부분

수정 후 (기존이랑 변한 건 없음)

수정 후 (기존이랑 변한 건 없음)

2. AsmrPopUp 컴포넌트 나누기

• 뒤로가기 (element)
• 음원 4개
  : src/components/SoundTrack.js를 만들었다.

  

• 믹스 저장버튼 (element)
  

  

• 믹스 제목 팝업
  

  

3. 믹스 제목 팝업 만들면서 src/redux/modules/asmr.js에 믹스명과 선택한 음원 정보들을 DB에 보내줘야 해서 겸사겸사 apis.js URL 바뀐 거 수정하고, 추가하고 asmr.js도 알아보기 쉽게 수정했다. (아직 DB에서 만들어 지지 않아서 테스트 못해봄)

4. Asmr.js → 기존에는 카테고리 변경 시 음원이 정지 되는 코드였으나 상의 해본 결과 페이지를 이동해도 음원이 유지 되기 때문에 카테고리를 변경해도 음원이 재생 된다고 판단하여 코드를 수정함

 

5. Asmr 컴포넌트 나누기

• 카테고리
  : src/components/AsmrCategory.js를 만들어서 분리
  

  

• 음원정보
  : src/components/AsmrList.js를 만들어서 분리
  

  

• 음원성공 에니메이션 (element)

6. PlayList → input → maxLength 속성 추가 (18글자로 제한)

 

7. 다이어리 페이지 CSS 수정