https://fandom-k-9-4.netlify.app/
- 'Fandom-K'는 아이돌 조공 플랫폼입니다.
- 크레딧을 충전하여 아이돌에게 후원과 인기 투표를 할 수 있습니다.
- 모금된 크레딧과 아이돌 인기 순위를 실시간으로 확인 할 수 있습니다.
- 관심있는 아이돌을 마이페이지에서 팔로잉 할 수 있습니다.
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 김민준 | 박문균 | 김충오 | 박상욱 | 문창기 |
| - Project leader로서 팀 운영 - List 페이지의 이달의 차트 기능 구현 - 아이돌 프로필 컴포넌트 제작 |
- 랜딩 페이지 구현 - 버튼 컴포넌트 제작 - My 페이지 아이돌 추가,삭제 구현 - My 페이지 무한스크롤 기능 구현 - 헤더 일부 수정 |
- List 페이지의 조공 컴포넌트 구현 - API 세팅 - List 페이지 무한스크롤 기능 구현 - 아이돌 데이터 추가 - GitHub 레포지토리 세팅 |
- 헤더 컴포넌트 제작 - My 페이지 제작 - 아이돌 데이터 추가 - PPT 제작 |
- 모달 컴포넌트 제작 - List 페이지 크레딧 컴포넌트 제작 - 노션의 트러블슈팅 업데이트 - 아이돌 데이터 추가 - 발표 |
 |
 |
 |
|---|---|---|
| JavaScript | HTML | CSS |
 |
 |
|---|---|
| Git | GitHub |
 |
 |
 |
|---|---|---|
| React | Vite | React-Router |
-
'지금 시작하기' 버튼 클릭시 , localStorage 초기화하고
/list로 이동합니다. -
아래로 스크롤 시, 애니메이션을 추가하였습니다.
-
'로고' 클릭 시 페이지 새로고침이 가능합니다.
-
상단의 프로필 이미지를 클릭시
/mypage로 이동합니다. -
크레딧 충전
- 크레딧은 localstorage로 관리합니다.
- '충전하기' 버튼을 클릭 시 충전하기 모달창으로 이동합니다.
-
아이돌 후원하기
- PC에서 후원 리스트는 좌/우측 버튼 클릭 시 다음 순서의 후원 리스트가 보입니다.
- Tablet, Mobile 에서 터치 스크롤을 통해 조작합니다.
- '후원하기' 버튼을 누르면 해당 아이돌을 후원할 수 있는 모달창으로 이동합니다.
-
이달의 차트
- 여자 아이돌, 남자 아이돌 탭 클릭 시, 해당 성별에 맞는 아이돌 목록을 투표가 많은 순으로 보여줍니다.
- ‘차트 투표하기’ 버튼 클릭 시 투표하기 모달창으로 이동합니다.
-
크레딧 충전 모달
- 충전할 금액 선택 후 “충전하기”버튼 클릭 시 localstorage로 관리되는 크레딧이 충전됩니다.
-
후원하기 모달
- ‘후원하기’ 버튼 클릭 시 후원이 완료됩니다.
- 후원한 만큼 localStorage에서 관리되는 크레딧이 차감됩니다.
-
투표 모달
- 크레딧을 차감하여 선택한 아이돌에게 투표합니다.
-
아이돌 목록
- PC, Tablet 에서 아이돌 목록은 좌/우측 버튼 클릭 시 다음 순서의 후원 리스트가 보입니다.
- Mobile 에서 터치 스크롤을 통해 조작합니다.
-
아이돌 분류
- 전체, 남자, 여자 아이돌을 분류할 수 있습니다.
-
관심있는 아이돌 추가 및 삭제
- 아이돌 목록에서 한 명 또는 여러 명의 아이돌을 관심 아이돌로 추가 및 삭제하는 기능을 구현했습니다.
- 관심 있는 아이돌로 추가하고 싶은 카드를 중복으로 선택가능합니다.
- 선택된 카드는 체크표시가 됩니다.
- 랜딩페이지
- 크레딧 충전하기
- 충전된 크레딧으로 후원하기
- 투표 순위를 볼 수 있는 이달의 차트
- 충전된 크레딧으로 투표하기
- 관심있는 아이돌을 추가 할 수 있는 마이페이지
- 데이터 받아 오기 실패 시 에러메시지 출력
