IT의 IT 블로그

안녕하세요. 지난 글에서는NBA Game Picker 프로젝트에서홈 화면경기 목록 페이지경기 상세 페이지까지 어떻게 확장했는지 정리했습니다. 이번 글에서는 그다음 단계로 진행한 Matchup Score 설명 페이지(/about-score) 구성 과정을 정리해보려고 합니다. 이 프로젝트는 단순히 NBA 경기 일정을 보여주는 것이 아니라,오늘 가장 볼 만한 경기를 추천하는 것이 핵심입니다. 그래서 추천 점수를 보여주는 것만으로는 부족했고,사용자가 그 점수를 이해할 수 있는 페이지가 필요하다고 생각했습니다.1. /about-score 페이지가 필요했던 이유 홈 화면과 상세 페이지에는Watchability Score가 이미 표시되고 있었습니다.예를 들어 사용자는 홈에서 추천 경기를 보면서이런 궁금증을 가질 수..

안녕하세요. 지난 글에서는NBA Game Picker 프로젝트를 왜 만들었고,어떤 방향으로 설계했는지 정리했고, 이후에는홈 화면을 어떻게 구조화하고 컴포넌트로 분리했는지 정리했습니다. 이번 글에서는 그다음 단계로 진행한경기 목록 페이지(/games)와 경기 상세 페이지(/games/[gameId]) 구현 과정을 정리해보려고 합니다. 홈 화면이 오늘 볼 만한 경기를 빠르게 보여주는 역할이었다면,이번에 만든 두 페이지는 추천 → 비교 → 상세 확인으로 이어지는 흐름을 만드는 작업이었습니다.1. 홈 화면 다음에 필요했던 것홈 화면만 있을 때도오늘 경기, 추천 경기, 팀 순위, 득점 리더처럼핵심 정보는 어느 정도 한 화면에서 볼 수 있었습니다. 하지만 실제로 서비스를 사용한다고 생각해보면아쉬운 점이 분명히 있었..

안녕하세요. 지난 글에서는NBA Game Picker 프로젝트를 왜 만들었고,어떤 방향으로 설계했는지에 대해 정리했습니다. 이번 글에서는홈 화면을 어떻게 구조화하고, 컴포넌트로 분리했는지그 과정을 정리해보려고 합니다.1. 왜 컴포넌트 분리를 하게 되었는가홈 화면을 처음 구현할 때는모든 코드를 page.tsx 하나에 작성했습니다.초기에는 문제가 없어 보였지만기능이 추가되면서 점점 구조가 복잡해졌습니다.예를 들면 다음과 같은 요소들이 한 파일 안에 모두 들어가 있었습니다.오늘 경기 리스트오늘의 추천 경기팀 순위득점 리더매치업 데이터카드 UI 스타일점수 관련 로직이 상태에서는어느 하나를 수정하려고 해도 전체 파일을 같이 봐야 하는 상황이 발생했습니다.2. 문제의 핵심문제는 단순히 코드가 길어진 것이 아니라역할..

안녕하세요.이번 글에서는 제가 진행하고 있는 사이드 프로젝트인NBA Game Picker를 소개해보려고 합니다. 이 프로젝트는NBA 경기 데이터를 기반으로오늘 가장 볼 만한 경기를 추천해주는 웹 서비스입니다. 단순히 경기 일정을 나열하는 것이 아니라,사용자가 빠르게 경기를 선택할 수 있도록추천 중심의 UX로 설계한 것이 핵심입니다. 아래 링크에서 실제 서비스와 코드를 함께 확인하실 수 있습니다.🔗 서비스 바로가기https://nba-game-picker.vercel.app🔗 GitHubhttps://github.com/Ryuintae/nba-game-picker1. 왜 이 프로젝트를 만들었는가NBA를 자주 보면서 항상 느꼈던 불편함이 있었습니다.오늘 경기 많네… 근데 뭐 보지?접전 경기 뭐지?득점 ..