10. 02. 03일차 TIL - 팀프로젝트_01 시작

팀원들과 개인 학습을 일찍 끝마치고 팀소개프로젝트를 시작하기로 했다.

02일 아침 9시에 모여 어떤 웹사이트를 만들지 의논했고,

노션 작성을 시작으로, 웹사이트 워크프레임과 전반적인 디자인에 대해 이야기를 나누었다.

---

1. 노션을 통해 웹페이지에 들어갈 내용을 구상

1) 팀명 정하기 

     - 처음에는 i8이었다. (팀원의 mbti가 모두 i였기 때문에)

     - 재치있는 팀원의 제안으로 ELM이라는 팀명으로 결정

        (Engaging Learn Members : 적극적으로 소통하며 성장하는 동료들)

 

2) 웹사이트 콘텐츠

     - 메인 페이지, 팀소개 페이지, 팀원소개 페이지, 방명록페이지

    → 최대한 강의를 통해 배운 것을 모두 활용할 수 있는 방법을 고민하여 결정되었다.

 

① main page

구성 :  : logo, header, nav, fetch-weather-info, section_01 ( visual)

헤더 안에 로고, 네비게이션, 실시간 날씨(기온)정보를 포함한다.

section에 비쥬얼사진을 띄워 원페이지 디자인처럼 구성할 예정이다.

또한 헤더는 position: fixed를 사용하여 항상 상단에 고정될 수 있도록 구현할 계획이다.

 

② sub_01

구성 : jumbotron, title, ground_rules, team's goal, guest_book_btn

서브페이지 1번에서는 팀을 소개한다. 팀의 규칙과 팀의 목표를 소개할 계획이다.

강의에서 나온 점보트론을 한번 더 실습해볼 수 있다.

팀목표 아래 응원하기 btn을 만들어 클릭하면 방명록 페이지로 넘어갈 수 있도록 한다.

 

③ sub_02

구성 : title, team_card, modal_full_back, modal_screan

서브페이지 2번에서는 팀원을 소개한다. 팀카드를 만들고 클릭할 때,

모달창을 생성하여 팀원의 상세설명을 볼 수 있도록 구현할 계획이다.

팀원 카드를 클릭하였을 때의 모습 예시

 

④ sub_03

사이월드 감성을 활용해보자는 의견이 반영된 디자인 예시

 

구성 : input, btn, firebase

서브페이지 3번에서는 firebase를 활용하여 방명록 입력창에 작성된 데이터를 firestroe에 저장한 후

저장된 DB를 다시 웹사이트로 가져와 방명록 section에 기록될 수 있도록 구현할 예정이다.

시안에 사진을 넣어 미리 확인해보았을 때에는 모든 팀원들이 마음에 들어했다.
잘 구현하여 마음에 드는 웹사이트가 완성되었으면 하는 바람이다.

---

2. 코드 작성 ( sub_03 방명록페이지 제작)

나는 마지막 sub 페이지 (방명록) 파트를 담당하게 되었다.

html 뼈대를 잡는 작업은 생각보다 수월하였다.

 

css를 작성하기 전, 태그들이 본연에 가지고 있는 여백을 없애기 위하여 가장 먼저 reset 작업을 하였다. 

 

다음은 클래스 guest_book을 sub_03 페이지의 inner로 설정하였다.

border는 임시로 설정하여 작업 시 영역이 어떻게 구성되었는지를 확인하였다.

 

부모 태그인 div에 클래스를 지정한 후 display:flex를 사용하여 input과 btn을 정렬하였다.

 

input과 btn에는 class를 부여하여 css를 꾸몄다.

디자인이 확정된 것은 아니기에 임의로 설정한 후 대강적인 모습을 확인하였다.

 

또한 input과 btn에는 id를 부여하여 script에서 firestore DB 불러오기 작업 시 사용하였다.

input에 입력된 val값을 ELM_info_page_guest_list DB에 저장하고, 알림창으로 저장되었음을 알려주게 구현한다.

이후 firestore에 저장된 DB를 다시 가져와 방명록 기록창에 기록한다.

---

3. 작업을 하면서 궁금한 점 또는 어려웠던 점

1) input창이 포커스가 되면 placeholder 문구를 안보이게 설정하고 싶은데 구현이 제대로 되지 않았다. → 생각처럼 잘 구현되지 않았던 부분은 계속 고민해보면서 이벤트에 대해 공부해봐야겠다 .. 

 

2) 팀원들의 질문 중 이상한 여백이 생긴다는 질문을 했다. 같은 코드를 내 화면에서 입력했을 때는 문제가 없는 것을  확인하게 되어 nomalize와 reset 작업을 통해 해결하였다. 한번 더 nomalize와 reset 작업에 중요함을 알 수 있었다.