안녕하세요. 내일배움캠프 Node.js 5기 시무11조 시연영상입니다.

1. 프로젝트 개요

• 페이지 개발 목적

저희가 진행한 프로젝트는 서로가 빨리 친해질 수 있도록 자기소개와 TMI를 공유하는 페이지를 개발했습니다. 각자 맡은 부분을 수행하고 협력하면서 팀으로서 유대감을 높이고 전반적으로 코딩에 익숙해지는 과정을 가지자는 게 목적입니다.

• 페이지 구성

프로젝트 시작하면서 정했던 팀 목표와 규칙을 작성했고, 팀원 개인의 상세페이지를 볼 수 있는 개인 프로필과 오늘의TMI를 작성할 수 있는 방명록을 구현했습니다. 팀원의 블로그로 바로 이동할 수 있는 버튼과 원하는 구역으로 바로 이동할 수 있는 움직이는 사이드바도 만들어봤습니다.

2.프로젝트 시연

• 상세페이지 보기

개인 프로필에 상세보기 버튼을 누를 경우, 자기소개 페이지가 열려서 팀원의 정보를 알 수 있도록 했고 버튼을 다시 누르면 페이지가 닫히게 토글 기능을 추가했습니다. 다른 상세페이지를 열 때는 기존 페이지가 닫히고 새 페이지 열리도록 구현했습니다.

상세보기 버튼을 눌러서 토글을 열면 상세보기 글자가 닫기로 변경되며, 다시 누르면 상세보기로 변경됩니다. 상세보기를 눌러서 토글이 열려있는 상황에서 다른 팀원의 상세보기 버튼을 누르면 열려있던 토글이 닫히며 닫기 버튼의 글자가 상세보기로 변경되도록 했습니다.

• 오늘의 TMI 작성

페이지 하단에 firebase와 연결하여 오늘의 TMI를 작성할 수 있는 구역을 만들었습니다. 사소한 내용이라도 공유하여 빨리 친해질 수 있는 소통의 공간입니다. 닉네임과 오늘의 TMI를 작성하고 옆에 작성 버튼을 누르거나 엔터키를 누를 경우 작성 일자와 함께 밑에 표기되도록 했으며 가장 최근에 적은 TMI가 맨 위에 오게 만들었습니다. TMI는 서버에 저장되며 삭제 버튼인 휴지통을 누를 시 삭제가 가능하고 해당 위치에는 밑에 있는 TMI가 채워지게 했습니다.

• 블로그 연결

각 팀원의 블로그로 바로 연결할 수 있는 버튼을 만들어서 팀원의 TIL을 공유할 수 있도록 했습니다.