인스타그램 UI 클론 코딩 프로젝트
오늘부터는 인스타그램 UI 클론 코딩을 진행했다. 클론 코딩이라 어렵지 않을 것이라 생각했지만 생각보다 보여지는 배치를 그대로 따라서 구현하는 것도 힘든 일이었다. 그 와중에 나만의 개성 포인트들을 가져가고 싶다는 생각이 계속 들어 자꾸 욕심만 나서 더 어려웠던 것 같다... ㅠㅠ 오늘은 우선 홈 화면 및 사진 피드를 구성했다. 또, 이후에 어느 기능을 구현하고 싶은지 생각해두었다.
홈 화면
상단 헤더에 네비게이션 바를 구현했다. 로고 및 홈 아이콘을 누르면 새로고침이 된다. 검색바에 현재 place holder 부분의 '검색'이 가운데 정렬되어 있지만 검색어를 입력하기 위해 검색바를 클릭하면 왼쪽 정렬로 바뀐다. DM, 포스팅, Explore, 알림의 아이콘들은 버튼으로 만들어두기만 했고 페이지 이동은 아직 구현해두지 않았다. 헤더는 스크롤을 내려도 계속 고정되어있다. 로고는 네온 사인처럼 희미하게 반짝반짝 빛난다. 나름의 감성,,,,!
피드
피드에는 프로필 사진, 사용자 ID, 위치, 사진, 더보기 버튼, 좋아요 버튼, 댓글 버튼, 공유 버튼, 좋아요를 누른 사람 수, 사진에 대한 포스트 내용, 댓글 등이 담긴다. 현재 버튼으로 구현할 좋아요, 댓글, 공유 버튼과 좋아요를 누른 사람 수는 버튼으로 설정해두었고, 좋아요 버튼은 누를 경우 빨간색으로 바뀌고, 이미 빨간색인 경우 다시 검은색으로 돌아오도록 JavaScript 함수를 짜두었다. 또, 사진을 더블클릭할 경우에도 좋아요 버튼이 빨간색으로 바뀌도록 함수를 짰다. 댓글 기능은 아직 짜다 만 상태여서 div 크기 보려고 초록 배경이다...! (디자인 구린거 아님!)
내일 추가하고자 하는 기능
1. 좋아요를 누를 경우 하트가 빨간색으로 변하기는 하는데 빨간색으로 칠해지는 것은 아니다...! 고민해서 해결해보자! 색 반전 시킨다음에 빨간색으로 칠하면 되려나????
2. 사진 피드 게시글 2줄 이상일 경우 줄이기 기능, 더보기 버튼 생성 (현재는 overflow=hidden으로 div를 넘어가는 경우에 안 보이게만 설정해둔 상태이다)
3. 좋아요 누른 사람 수 클릭 시 좋아요 누른 사람들 토글(?)로 띄우는 기능
4. 배경이 너무 심심한데 별똥별 같은거 애니메이션 넣어보고 싶다!
5. 사진 더블 클릭 시 하트가 뿅 떠올랐다가 사라지는 애니메이션도 넣어보고 싶다!
(4, 5번은 Keyframes 연습에 도움이 될지도!)