Feat: 콜렉션 페이지 기능 및 UI 구현

[ParkSohyunee]

개요

• 콜렉트한 리스트를 모아볼 수 있는 콜렉션 페이지를 구현했습니다.
• 리스트가 담겨있는 폴더 조회, 폴더 추가하기 기능을 완료했습니다.

작업 사항

• 콜렉션 폴더 조회 페이지 구현
  • /collection 페이지 UI Ver3.0 완료
  • 폴더 조회 API 연동
• 폴더 추가하기 기능 구현
  • 폴더 생성 API 연동
  • (에러 핸들링) 에러 케이스에 따른 토스트메세지 적용(폴더 이름 중복, 권한 없음(로그인x))
• 폴더 추가하기 바텀시트(BottomSheet) 구현
  • 열리고, 닫힐때 부드러운 애니메이션 적용

참고 사항

• 폴더 아이콘은 svg 파일을 사용하는대신 css로 직접 구현했습니다. 그 이유는 사이즈, 색상, 디자인 변경 등에 유연하게 스타일 할 수 있고, 용량을 줄일 수 있기 때문입니다.
• 후속 작업으로 콜렉션 상세페이지 작업 예정입니다. (관련 주요 기능)
  • 폴더 상세 리스트 조회하기
  • 폴더 수정하기
  • 폴더 삭제하기

스크린샷

📃 콜렉션 페이지 전체 폴더 조회

🗂️ 폴더 추가하기 바텀시트

리뷰어에게

• 공통으로 사용하는 컴포넌트들은 추후 리팩토링 예정으로 참고 부탁드립니다.

[vercel]

@ParkSohyunee is attempting to deploy a commit to the Eujin Ahn's projects Team on Vercel.

A member of the Team first needs to authorize it.

[Nahyun-Kang]

소현님 LGTM!! 콜렉션 폴더 너무 아기자기 귀여워요 ㅎㅎ 오랜만에 보는 소현님의 코드는 언제나 깔끔하고 좋네요! 고생하셨습니다 :)

• 애니메이션에 forwards가 있는 것도 처음 알았네요 ㅎㅎ

[ParkSohyunee]

Ver1.0 콜렉션 페이지 컴포넌트입니다.