[유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 프로젝트 3주차 중간발표 끝!

우선 3주차에는 금요일에 중간발표가 있었다. 

발표 전까지 기능 개발 + 대략적인 css 통합을 해야해서 바쁘게 진행했다.

 

이번주에는 아래 파트를 진행했다. 

• 선수상세페이지의 2024 시즌 api받아와서 완성
• 선수상세페이지의 캐러셀 슬라이드 완성
• 다른분이 만든 선수리스트페이지에 내가 만든 선수상세페이지를 연결하기 

추석이 껴있어서 상대적으로 시간이 부족하기도 했고..

금요일에 중간발표 및 점검도 있어서 기능완성을 위주로 진행했다. 

 

아래 부분부터는 노션에 정리해둔 개발파트글을 가져왔다. 

---

선수 상세페이지는 세 가지 컴포넌트로 나누어서 구현했습니다.

• 선수 이미지와 약력
• 2024 시즌별 기록
• 선수별 캐러셀 슬라이드

선수 이미지와 약력

 

 

 

시즌별 기록

선수의 2024 시즌 기록을 Recharts라이브러리를 사용하여 시각적으로 구현했습니다.

• 평균자책점
• 탈삼진
• 세이브
• 홀드
• 승

총 다섯 가지의 기록을 그래프로 표현하여 시즌 성과를 한눈에 파악하도록 만들었습니다. [선수상세보기] API의 데이터를 받아 Radar Chart로 구현하였고, 툴팁 기능을 사용하여 각 데이터 포인터에 호버하면 해당 야구 용어의 의미가 표시되도록 했습니다. 예를 들어 사용자가 "평균자책점"이나 "탈삼진" 등과 같은 야구 용어에 마우스를 올리면, 간단한 설명이 나타나 야구 용어에 익숙하지 않은 사람도 쉽게 접근할 수 있도록 했습니다.

 

 

타선수 캐러셀 슬라이드

Swiper 라이브러리를 활용하여 동일 포지션의 선수들을 캐러셀 슬라이드로 구현했습니다. 이를 통해 사용자가 타선수들의 프로필과 기록을 쉽게 비교할 수 있도록 했습니다. 타선수 캐러셀 슬라이드설명각 선수 카드에 호버 시 블러 오버레이 처리와 함께 프로필 버튼이 나타나 클릭시 해당 선수의 상세페이지로 이동할 수 있도록 처리했습니다. 이를 통해 사용자들이 직관적으로 선수 정보를 확인하고, 원하는 선수의 세부 사항을 확인할 수 있도록 만들었습니다. (각 선수 클릭시 들어가는 부분은 차후에 연결할 예정입니다.)

 

전체 시연 동영상

화면 녹화 중 2024-09-20 155026.mp4

12.35MB

 

 

---

금요일 멘토링에서 받은 전체적인 평가는 다음과 같다. 

기능적인 부분에서는 거의 다 구현했고, 컴포넌트화한 부분이 많이 들어갔다.
추가로 스켈레톤 UI와 메모리제이션을 적용했으면 좋겠고, 전체적인 css통일성을 맞췄으면 좋겠다.

 

 

위 피드백을 바탕으로 아래 UI/UX 수정이 들어가기로했고, 

• 선수리스트 페이지에서 UI가 상대적으로 큰 부분
• Navbar의 높이가 얇고, 1단/2단 카테고리 글자크기가 동일한 부분

내가 맡은 선수상세페이지에서는 이런 부분을 4주차에 진행할 예정이다.

• 현재 완성한 투수외의 코칭스텝/포수/내야수/외야수/응원단 페이지 개발
• 선수리스트에서 api받아서 사용하는 코드로 수정
• 하단 캐러셀에 제목 부분 추가
• 하단 캐러셀 클릭시 각 선수 상세페이지이동하기

 

---

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : React 2기 과정(B-log) 리뷰로 작성 되었습니다.