인스타그램 UI 클론 코딩 프로젝트
오늘은 인스타그램 UI 클론 코딩 프로젝트의 마지막 날이다. 오늘은 댓글을 보여주는 부분, 댓글을 다는 부분, 친구 추천 부분을 구현하였다. 또, 원래 사진을 더블클릭하면 좋아요가 눌리는 기능을 구현하였는데, carousel에 이가 적용되지 않아 고민이었었던 것을 오늘 해결했다. 사진과 carousel의 z-index 값을 조정하여 carousel에 ondblclick=함수() 기능을 추가함으로써 이를 해결하였다. 좋아요를 누른 사람 수를 클릭하면 팝오버창을 열어 누구누구가 눌렀는지도 볼 수 있는 기능과 피드 오른쪽 위의 ... 아이콘을 누르면 더보기 모달을 여는 기능도 추가하였다.
댓글
댓글 입력
친구 추천
좋아요 누른 사람 팝오버
더보기 모달
전체 모습
평가
<필수 구현>
사이트의 본문
- 스토리 부분은 구현하지 않아도 좋습니다. ✅
- 두개의 단으로 나누어야 합니다.
- 왼쪽 단에는 게시글들이 나열됩니다. ✅
- 오른쪽 단에는 프로필사진/이름/설명과 Follow 버튼이 있는 네임카드 리스트가 있습니다. ✅
- 게시글 : 최소 세개의 게시글이 표시되야 합니다. ✅
- 상단에 네임카드가 배치, ✅
- 옵션 : ... 버튼을 오른쪽에 배치하고 클릭시 모달이 등장하게 할 수 있습니다 ✅
- 본문에는 사진이 한장또는 여러장을 carousel을 이용해 표시해야 합니다. ✅
- 좋아요/댓글/메시지송신 아이콘이 사진 아래 배치됩니다. ✅
- 아이콘들 아래에 사진에 대한 설명이 추가됩니다. ✅
- 옵션 : 글자수가 일정수준 이상이 되면 더보기 버튼을 추가하고 길이를 줄일 수 있습니다. ❌
- 설명 아래에 댓글 리스트가 표시됩니다. ✅
- 댓글 작성하는 칸과 Post 버튼이 추가되야 합니다. ✅
- 상단에 네임카드가 배치, ✅
사이트의 Footer
- Footer
- 실제 인스타그램은 무한로딩을 이용하여 하단에 Footer 대신 오른쪽 단에 존재합니다. ✅
- 오른쪽 단 or 사이트 하단에 Footer를 만들어서 본인의 이름을 기입해주세요! ✅
<추가 구현>
1. 로고 누르면 새로고침이 되는 기능
2. 맨 위의 검색창 (입력 모드 이전에는 '검색'이 가운데 정렬, 입력 모드 돌입 시 왼쪽 정렬)
3. 사진 더블 클릭 시 좋아요 눌림 및 사진에 큰 하트 띄우기 (밑의 좋아요 하트도 칠해짐)
4. 하트 클릭 시 좋아요 눌리고, 이미 눌린 상태일 경우 좋아요 취소
5. 좋아요 누른 사람 수 클릭 시 팝오버 창이 띄워짐
데모 영상
KPT 회고
Keep
- 튜터님께 질문을 바로바로 하기 보다는 구글링을 하거나 나만의 방법을 찾는 것은 좋은 습관인 것 같음
- 이번 프로젝트에서는 변수명을 잘 지은 것 같음
- class는 중복이 가능하다는 점을 이용하여 코드 길이를 단축시킴
- Keyframes 애니메이션을 활용하여 디자인 완성도를 높임
Problem
- 코드가 지저분함
- 계획을 대충 짜고 넘어가다보니 욕심만 앞서 마감일에 휘둘리는 경향이 있음
- 디자인에 신경을 쓴다고 쓰는데 그닥 이쁘지는 않음 (ㅠㅠ....)
Try
- css, html, javascript 파일을 분리하여 작성해보자
- 계획을 짜는 데에 시간을 아끼지 말고, 계획을 잘 세워 시간을 잘 분배해보자
- 기능 구현이 우선임을 잊지 말자 (난 디자인 감각이 좋지 않으니까 그런거에 더 신경을 쓸 것이 아니라 그런 문제는 뒤로 하는 방향으로 프로젝트를 진행하자)