인스타그램과 최대한 비슷하게 만들려고 노력했습니다.
https://www.figma.com/file/yaZNezu1wyCMvXCJcW82hL/Untitled?node-id=3%3A2
- 935px 이상
- 660px 이하
이렇게 두가지 상황으로 구분하여 반응형 웹으로 만들었습니다.
카드 안에 있는 엘립시스 아이코 버튼을 누르면 각종 버튼이 들어 있는 모달창이 뜨게 만들었습니다.
검색창에 포커스 인 아웃 될 때 최근 검색어 창이 나왔다 사라지게 만들었습니다.
스토리 원형 상자 바깥 보더라인을 인스타와 비슷하게 만들었고 작은 캐러셀을 구현하였습니다.
화면이 변할 때 그 변화를 추적해 이미지 사이즈를 바꾸고 캐러셀의 이동범위르 바꾸도로 설정했습니다.
캐러셀 양쪽에 트랜지션을 넣어 카드가 슬라이딩되는 애니매이팅을 넣었습니다.
- 인스타 클론 설명 영상 : https://youtu.be/YLSBOC5AdSo
- 블로그 : https://velog.io/@aboutjoo