지브리 애니메이션 검색 서비스 제작의 사본

Overview

Notice

• 웹사이트 제작 테스트를 위한 구현이 되어있습니다.

• React로 다시 제작할 예정입니다.

• 해당 웹사이트로 수익을 창출하지 않습니다.

웹사이트 톺아보기

메인 페이지:

Features

• 타이틀을 가운데에 위치시킨 상태에서 반응형으로 제작하기 위해 transform 속성 사용.

• 검색이 잘 될 수 있는 이미지의 alt 값 작성.

검색 페이지:

Features

• API에서 이미지를 지원하지 않아 firebase를 사용하여 이미지 삽입 (비동기 처리).

• 키보드 이벤트를 사용하여 검색 기능 구현.

• textContent와 innerHTML 메소드를 사용하여 페이지 구현.

• firebase realtime을 사용하여 실시간 댓글 기능 구현. 실시간 채팅 가능.

• 객체 구조 분해를 통한 작품 추천 구현.

이벤트 페이지:

Notes

• 카드를 뒤집어 같은 그림을 맞추는 카드 뒤집기 게임입니다.

• 카드가 랜덤하게 섞인다는 점, 게임 후 팝업창을 띄우는 점에 신경썼습니다.

Features

• dataset을 이용하여 사용자 지정 테이터 설정.

• 카드를 랜덤하게 섞기위해 random 함수 사용. 이때, 각 배열의 요소를 랜덤한 수와 위치를 바꾸는 방식으로 셔플함.

• grid로 간편한 레이아웃 제작.

감독 페이지:

Features

• 이미지를 핑크 박스 밖으로 나오게 만들기위해 이미지만 단독으로 움직일 수 있도록 구현.

• grid를 이용하여 간편한 overview 레이아웃 제작.

• position relative와 absolute를 이용한 타임라인 구현.

• 모바일의 경우 x축으로 스크롤 바를 만들어 대응.

로그인 페이지:

Features

• 사용자로부터 이미지를 받는 input 태그 위에 버튼 태그를 덮어씌워 커스터마이징.

• 사진 삭제 버튼 클릭시 forEach로 firebase의 데이터를 삭제.

• change 버튼 클릭 시 데이터를 firebase로 보내 웹페이지에 그림.

• cancle 버튼 클릭 시 머물렀던 페이지로 되돌아감. 이때 js 파일 로드 속도 때문에 오류가 날 경우 appenChild를 이용해 JS를 동적으로 불러오게 함.

• 파일 용량 제한.

TODO