/FE-PAGING_TEAM-A

Team-CMD Semi-Hackaton FE:PAGING A조

Primary LanguageHTML

FE-PAGING_TEAM-A

Team-CMD Semi-Hackaton FE:PAGING A조

🚩주제

마블 시네마틱 유니버스를 소개하는 웹 사이트 만들기

👩🏼‍🤝‍🧑🏼 팀원

  • 산업경영공학과 16학번 김영웅
  • 컴퓨터공학과 18학번 이동복
  • 컴퓨터공학과 20학번 안혜지
  • 컴퓨터공학과 20학번 정윤정

📏사용 기술 스택 및 도구

  • 협업: 디스코드, 깃허브
  • 디자인: Figma
  • 언어 및 프레임워크: HTML, CSS, JS

📆개발 일정 및 현황

  • 22.01.09 회의(자기소개 및 방향설정)
  • 22.01.16 회의(기획, 디자인, 역할분담)
    • 메인페이지 - 정윤정
    • 캐릭터, 영화 페이지 - 김영웅
    • 뉴스, 시리즈 페이지 - 이동복
    • 게임 페이지 - 안혜지
  • 22.01.18 회의 (메인 디자인, 각자 페이지 제작시 필요한 정보)
  • 22.01.23 디자인 완성 & 회의 (폰트, 디자인 피드백, 개발 협업 유의사항)
  • 22.01.24 회의(디자인 마무리, 폰트, 파비콘, 타이틀)
  • 22.01.29 회의 (전체 개발 30% 완성, 피드백)
  • 22.02.04 회의 (전체 개발 60% 완성, 뉴스, 캐릭터 페이지 완성, 게임 진입페이지 완성, 메인 헤더 & 슬라이드 완성, 피드백)
  • 22.02.12 회의 (전체 개발 80% 이상 완성, 디자인 디테일 피드백 완료, 메인, 시리즈, 영화 페이지 완성, 퀴즈부분 거의 완성)
  • 22.02.13 게임페이지 외 모든 페이지 헤더추가 및 연결완료
  • 22.02.15 회의 (전체 개발 95% 이상 완성, 캐릭터, 영화, 시리즈, 뉴스 페이지 피드백, 스크롤 메인 네비게이션 부분 active효과 추가, 게임 페이지 완성)
  • 22.02.16 회의 (개발 완료, 마지막 전체 피드백 게임 디자인 세부 수정, 페이즈 사진 크기 세부 수정)

✅결과물

메인페이지

11111

캐릭터페이지

22222

시리즈페이지

33333333

뉴스페이지

44444

게임페이지

55555555

영화/드라마페이지

66666666

나의 개발 과정

https://atom-dryer-ac5.notion.site/857ec69d4c63488db2aabe66339524e2

💥 아쉽거나 힘들었던 부분

  • JSON을 활용해서 캐릭터 소개 모달창마다 이미지와 정보, 클립 넣어주는 과정
    • JSON을 활용해서 작업해본적이 없었기 때문
  • 영화 페이지에서 영화들을 클릭해서 드래그하는데 클릭 이벤트때문에 드래그를 놓으면 모달이 생성되는것
    • 모달 클릭 이벤트를 click→dblclick으로 바꾸어서 해결했지만 근본적인 방법이 아닌듯함.
    • 더 공부해서 해결 방법을 찾아야 함.
  • 빠듯한 시간과 조원끼리의 합의로 인해서 반응형으로 만들지 못함.
    • 내 파트 반응형으로 바꿔보기

😀이 프로젝트로 얻은 점

  • git을 활용해서 협업하는 방법을 배우고 사용할 수 있게 되었다.
  • JSON을 활용해 데이터를 하드 코딩 안하고 변경하는 방법을 알게 되었다.
  • 바닐라 js로 modal과 drag이벤트를 만들고 활용해보았다.