TIL - 22.04.28 insta_clone_UI

insta clone coding

이번 프로젝트를 하는데 있어서 목표는 다음과 같다.

• 최대한 실제 인스타그램 페이지와 비슷한 UI 구성하기
• 헤더, 본문, 푸터의 구성으로 만들 것
• 웹카드 구현 방법 정확하게 숙지
• 각 레이아웃의 설정이 왜 그렇게 되어있을지 현재 instagram
  UI 디자이너의 의도 파악하기

구현한 것

• 메인 페이지의 UI 대부분
  - 상단바.
  로고의 색 변화 및 하이퍼링크, 가운데 검색창 배열과 우측 아이콘 표시들
  아이콘 중 홈 버튼은 메인 파일로 돌아오도록 설정함
  • 스토리 업데이트 섹션
  • 스토리 카드 섹션
    - 푸터

구현해야 할 것

• 캐러셀
• 검색창 돋보기 사라지게하기
• 추천 친구 구현
• 더보기, 댓글 게시 추가하기
• 계정 클릭시 페이지로 이동하도록 모두 구현
• 모달 구현하기
  - 옵션
  • 좋아요
  • 사진
  • 태그
  • 이모티콘
• 푸터 소개 도움말 등등 클릭 버튼 활성화
• 반응형 웹페이지 만들기

구현한 코드파일

https://github.com/gihoyeom/insta_clone

코드 구현 영상

https://youtu.be/pH6LbO3_MxE

기존 코드 정리한 방식이 너무 더러웠는데, 구글링을 하던 중 매우 깔끔한 정리 코드를 보았다. 이를 바탕으로 하여 중간중간 수정을 했다. 검색 js파일과 댓글 부분은 조금 더 숙지할 필요가 있어보인다.

• 참고 : https://velog.io/@migdracios 내배캠 황영상님