본문 바로가기
프로젝트

Front project 3일차

by 승현0604 2023. 4. 22.

3일차

1 .슬라이드 쇼 적용

2. 고정Logo 생성

3. Rank생성하여 순위표시해주기 및 나머지 css꾸미기

 

 

1. react-slick를 통해서 경기일정 슬라이드쇼를 생성해주었습니다. 1주일에 경기가 6경기가 열리는데 그 경기수만큼 슬라이드쇼에 적용하여 자연스럽게 메인페이지에 보이게끔해주었습니다. (데이터는 위에놓았음)

 

다음과 같이 슬라이드쇼가 적용을 하게되어 경기일정이 하나씩 자동으로 넘어가게된다. 

 

2. LOGO고정

KT위즈 팀의 소셜미디어는 페이스북 유튜브등 여러가지로 널리 팬들에게 이끌고있다. 그래서 사용자입장에서 쇼셜미디어로 한번에 연결해주는 고정로고가 있으면 좋을것같다는 생각이 들었다. 

 

핵심 : 화면이 스크롤이 되어도 아이콘들이 계속해서 고정이되어야함. 

 

다음과 깉이 Logojs를 생성하여 여러가지소셜미디어를 생성해주고 이미지를 넣어주어 커스텀을 해주었다. 

react Logo.js
Logo.CSS

이렇게 고정로고까지 완료해주고 position:fixed를 통해서 스크롤을해도 정해진 위치에서 움직이지 않게끔해주었다. 

 

Logo완성본

 

3. Rank를 통해서 팀순위를 한번에 보여주게끔해주었습니다. 그리고 KT위즈가 특정팀이다보니 이 팀을 위주로 순위가 보여야한다는 특징을 가지기도 하고 위아래에 2순위정도만 보이게끔 설정을 해줘야하는게 이 Rank.js의 핵심이라고 볼 수 있다. 

 

데이터는 임의로 useState와 useEffect를 통해서 더미데이터형식을 임의로 가져와준 상태이다. 

 

그리고 테이블을 생성하고 map함수를 통해서 더미데이터를 하나씩 가져오고 filter을통해서 조건을 걸어주어 가져오게하였습니다. (물론 임의로 정해진 순위라 filter을 완벽한코드로 조건을 건건 아니지만 추후에 실시간데이터를 가져온다면 바뀌게할 예정입니다 ...시간이 충분하다면!)

 

그 이후로 여러가지 css를 입힌 결과 main화면은 이렇게 변했습니다. 

 

최종 main완성본

'프로젝트' 카테고리의 다른 글

Front porject 6일차  (0) 2023.04.22
Front project 5일차  (0) 2023.04.22
Front porject 4일차  (0) 2023.04.22
Front-project 2일차  (0) 2023.04.16
Front-project 1일차  (0) 2023.04.16