이미지 갤러리 서비스 (Unsplash API)
SKILLS
React.js
JavaScript
Sass
TOOLS
Visual Studio Code
진행기간
2022.07.01 - 2022.07.15
개발인원
1명 (개발자 1명)
역할
기획
디자인
개발
기여도
5/5
카테고리
WEB
만든 이유
React와 외부 API 연동을 직접 다뤄보기 위해 만든 토이 프로젝트입니다. Unsplash 공개 API를 연동해 이미지 갤러리 서비스를 혼자 기획·디자인·개발했으며, 특히 리스트 위에 모달을 URL까지 함께 바꾸며 띄우는 라우팅 패턴을 직접 구현해보고 싶었습니다.
기능
이미지 리스트
∙
카테고리 키워드 검색으로 원하는 이미지를 필터링
이미지 상세 — 모달 + 페이지 이중 구조
∙
리스트에서 이미지 선택 시 URL이 /photos/:photoId로 변경되면서 상세 내용을 모달로 표시
∙
모달 상태에서 새로고침하면 독립 페이지로 전환 — URL 직접 접근도 지원
∙
상세에서 뒤로가기 시 이전 이미지 상세로 이동하는 히스토리 스택 처리
∙
상세 페이지에서 사진 정보·관련 이미지·컬렉션 확인 가능
앞으로 구현하고자 하는 것
∙
이미지 검색시 컬렉션이나 색상 등 선택의 폭을 넓히기
∙
리스트나 상세페이지에서 작가 선택시 작가 소개 자체페이지 제작
∙
상세페이지 관련 컬렉션이나 태그 선택시 컬렉션/태그 자체페이지 제작
참고
페이지 위에 route를 포함한 모달 띄우기
∙
모달로 띄울 시 router 위에 하나의 router를 추가하는 방식으로 기존 페이지 위에 새로운 페이지를 띄움
∙
모달에서 라우터 객체(ex.photoId)등을 사용하기 위해 withRouter를 지정해야함