[TIL] #DAY - 003 - 첫 프로젝트 발표! (내일배움캠프AI 3기, PC-TEAM [PEFLIX], 클론코딩, 넷플릭스 따라하기)

 

오늘도 즐코중~

아니 3일차인데 무슨 프로젝트냐구요???? (!)

그러게요 저도 놀랐습니다 심지어 3일차인데 프로젝트는 완성까지.. 거기다가 발표까지???

역시 닉값하는 스파르타였다고...한다.... 

사실은 완전 3일차는 아니고 저번주 금요일부터 사전 OT를 통한 미니프로젝트 기간이였다!

 

그래도 이건 너무 한거 아니냐고~~ㅠ ( 하지만 다했다고 한다 )

팀을 잘만난건지 모두 힘들텐데 늦은 새벽까지 남아서 코딩했... A-3 팀 화이팅!

 

이제 고만 넋두리하구 우리가한 프로젝트를 보여주는 시간을 가져보겠다!

 

PC-TEAM [PEFLIX] 로고

우선 우리팀을 소개하자면 패션이라는 카테고리로 팀이 묶였다는걸 의미있게 생각해 Fashion 을 우리의 열정으로 탈 바꿈해 Passion Coding 이라는 팀으로 줄여서 PC-TEAM 이 되었다! ( 아주 만족 )

그렇게 시작된 우리팀은 첫 미니 프로젝트로 팀소개를 주제로하여 html + css + javascript 이용하여 웹페이지를 제작하기로한다!

처음 맡은 프로젝트로 막막해서 못하고있을때 우리의 팀장인 웅주님이 넷플릭스 기획을 딱 - 끝 ! 

 

와이어 프레임

 

시연 영상

https://youtu.be/TMlo9u3SNnE

시연 영상부터 보기로 하자!

첫 시작부터 웅장 : )

 

1.  인트로  http://hanmari-code.shop/

 

뭐 대충 이런 화면이 나오는데  의도한건 아래 움짤 참고 ! 

 

인트로 참고

 

아주 만족스럽게 잘나온다 ! (귿귿)

 

2. 프로필 선택  http://hanmari-code.shop/profile_select

 

인트로 다음으로든 프로필 선택 화면이 나온다!

역시 넷플릭스하면 프로필 이미지 선택해야쥐 ~

 

3. 팀 소개 페이지 http://hanmari-code.shop/profile_select/main_team

 

여기를 가장 신경쓴 부분이다 여러기능들이 들어가있는데 팝업 / 슬라이드 /  댓글 등등 코드 하나하나 뒤져보면 이걸 이렇게했네 하는 부분이 많은데 다못보여준거같기도해서 아쉽긴 하지만 첫 프로젝트인만큼 보여줄수있는 부분은 전부 보여준거같아서 기분이 좋다.

 

재생 옆 상세정보 클릭!

팀 상세정보 팝업이 딱 ! 아주 잘나온다 이게 우리 주요 기능 중 하나인 팝업 입니다.

그리고 상세정보 하단에 보면 이렇게 응원댓글을 남길수 있다고한다... ( 혹시 응원하고싶으시면.. 언제든지...)

팝업 속 댓글 창 ! 

그리고 팝업창을 나와서 아래로 내려보면 슬라이드를 통하여 각 팀원에 관심사를 볼수있다. 이미지는 얼마든지 추가가되지만 우리는 통일하기위해 음악, 브랜드, 영화, 음식 각 2가지씩을 넣기로하였다.

팀원이 좋아하는 관심사 확인 하기~!

뭐 이런식으로 우리 팀 소개 페이지를 작성하였다.

더 자세한 내용은 시연 영상이나 홈페이지로 접속하여 봐주시면 감사하겠다 !

자세한 코드리뷰는 추후에 하도록하겠다.( 언젠가는... )

 

 

PC-TEAM [PEFLIX]

 http://hanmari-code.shop/