🎃챔피언 정보 관리 시스템

🐶개요

제작기간 : 2023.08.08 ~ 2023.08.18 (평일 8일)

<<리그 오브 레전드>>를 더욱 재미있게 플레이 하고 싶으신가요? 혹은 <<아케인>>을 더욱 재밌게 보고 싶은가요?

리그 오브 레전드의 챔피언에 대한 정보를 관리할 수 있는 프레임워크 없이 JavaScript로만 만든 SPA 웹페이지입니다.

챔피언을 등록, 수정, 삭제를 할 수 있고, 원한다면 원본으로 초기화 할 수 있습니다. 당신의 챔피언들을 만들어 보고, 몰랐던 정보들을 알아가 보세요.

컴포넌트별로 나누어 재사용을 하였고, 컴포넌트 별로 통신을 위하여 중앙집중식 저장소로 상태를 관리하였으며, 이의 변화를 감지하는 옵저버를 사용하였습니다.

🎁기술 스택

✨Browser✨

✨Library✨

✨Deploy / Dev ✨

🙉업데이트

버전	날짜	내용
1.0	23.08.18	버젼 1.0 출시
1.1	23.08.28	Skeleton UI 추가 => LCS 점수 0점
1.2	23.09.02	뒤로가기 시 무한 스크롤 안되는 이슈 해결
1.3	23.09.07	LCP 개선을 위해 가장 큰 이미지 최적화 -> 특정 이미지 로딩 성능 42 ~ 67퍼 개선

🥏유저플로우

전체화면으로 보시길 권장드립니다.

🌞기능설명

1. 챔피언 검색

• 정규 표현식을 사용하여 챔피언의 이름을 한 글자만 같더라도, 검색이 되도록 하였습니다.
• 공백을 입력하면 전체 챔피언을 확인할 수 있습니다.
• 검색 버튼을 누르거나, Enter 키를 입력하여 검색할 수 있습니다.
• 검색시 아래 챔피언 리스트만 부분 렌더링 되어 불필요한 새로고침을 줄였습니다.

2. 챔피언 등록

• 이름, 닉네임, 지역, 포지션, 역할, 썸네일 사진, 배경 사진 등의 정보를 입력받을 수 있습니다.
• 썸네일 사진과 배경 사진은 각각 업로드 후 원하는 크기를 조절 한 후 확정 버튼을 눌러야 합니다.
• 등록 후 자동으로 이름 순으로 정렬되어 아래 챔피언 리스트만 부분 랜더링이 됩니다.

3. 챔피언 삭제

• localStorage에 존재하는 챔피언을 삭제합니다.
• 삭제 버튼을 누를 시에 삭제 모드로 변경됩니다. 원하는 챔피언들을 클릭하고, 삭제 버튼을 한번 더 누를 시에 챔피언들이 삭제됩니다.
• 체크박스만이 아니라 챔피언을 클릭하면 선택이 되도록, label 태그를 추가 이용하였습니다.

4. 챔피언 리스트 초기화

• 챔피언의 등록, 수정, 삭제시 LocalStorage의 정보를 수정을 하며, 이는 홈페이지를 재시작해도 정보가 남아있습니다.
• JSON파일은 Read-Only 파일이며, 챔피언의 기본 정보를 가지고 있고, 초기 설정시 LocalStorage로 정보를 불러옵니다.
• 초기화 버튼을 누르면 JSON 파일로부터 챔피언의 정보를 받아와 LocalStorage를 초기화 시켜줍니다.

5. 챔피언 수정

• 챔피언의 이름, 닉네임, 지역, 포지션, 역할, 썸네일 사진, 배경 사진 등의 정보를 수정할 수 있습니다.
• 기본 정보를 불러와 사용자의 편의성을 높였습니다.
• 썸네일 사진과 배경 사진은 각각 확정 버튼 클릭해야 합니다.

6. 무한 스크롤

• Observer Intersection을 이용하여 사진의 lazy loading을 적용하여 초기에 빠르게 화면을 로딩할 수 있습니다.
• 챔피언을 10개 단위로 불러옵니다. 챔피언을 다 불러왔을 경우 성능 개선을 위해 Observer의 관측을 제거합니다.

7. 프로필 페이지

• 챔피언의 정보를 시각적으로 알아보기 쉽게 아이콘을 연동 시켰습니다.
• 헤더나 네비게이션바 없이 직관적으로 버튼과 클릭으로 페이지를 이동할 수 있게 하였습니다.
• 메인 버튼을 눌러 이전 화면으로 이동할 수 있고, 수정 버튼을 눌러 챔피언의 사진편집을 포함한 정보를 수정할 수 있습니다.

8. 반응형

Flex와 max-width 속성을 적극 활용하여 미디어 쿼리 속성을 최소한으로 사용하였습니다.

테스크탑 환경(1024px~) - 아래 예시는 1430*900

메인화면	챔피언 상세	모달

태블릿 환경(768px~1023px) - 아래 예시는 IPad Air 820*1180

메인화면	챔피언 상세	모달

모바일 환경(~767px) - 아래 예시는 Iphone 12 Pro 390*844

메인화면	챔피언 상세	모달

9. 로딩 애니메이션

홈화면 렌더링 시 로딩 애니메이션

챔피언 수정, 등록 시 로딩 애니메이션

• 요소를 다 불러오기 전에 화면을 가리고, 클릭을 막습니다.
• Home 화면 로드할 때, 챔피언을 수정하고 등록 할 때 로딩 화면이 나타납니다.

10. 사진 편집

• Cropper 라이브러리를 사용하여 사진의 크기를 조절할 수 있게 하였습니다.
• 챔피언 등록, 챔피언 수정 시에 사진 편집이 가능합니다.
• 썸네일 크기와 배경 이미지 크기에 맞게 기본 비율 설정은 자동으로 맞췄으며, 위치와 크기만 지정하면 됩니다.
• 사진 편집의 유무와 관계없이 확정 버튼은 꼭 눌러줘야 합니다.