사이드 프로젝트 | NBA Game Picker (2) - 홈 화면 구조와 컴포넌트 분리

안녕하세요.

 

지난 글에서는
NBA Game Picker 프로젝트를 왜 만들었고,
어떤 방향으로 설계했는지에 대해 정리했습니다.

 

이번 글에서는

홈 화면을 어떻게 구조화하고, 컴포넌트로 분리했는지

그 과정을 정리해보려고 합니다.

---

1. 왜 컴포넌트 분리를 하게 되었는가

홈 화면을 처음 구현할 때는
모든 코드를 page.tsx 하나에 작성했습니다.

초기에는 문제가 없어 보였지만
기능이 추가되면서 점점 구조가 복잡해졌습니다.

예를 들면 다음과 같은 요소들이 한 파일 안에 모두 들어가 있었습니다.

• 오늘 경기 리스트
• 오늘의 추천 경기
• 팀 순위
• 득점 리더
• 매치업 데이터
• 카드 UI 스타일
• 점수 관련 로직

이 상태에서는

어느 하나를 수정하려고 해도 전체 파일을 같이 봐야 하는 상황이 발생했습니다.

---

2. 문제의 핵심

문제는 단순히 코드가 길어진 것이 아니라

역할이 섞여 있다는 점이었습니다.

하나의 파일 안에

• UI
• 데이터
• 로직

이 모두 섞여 있다 보니
코드를 이해하고 수정하는 데 부담이 커졌습니다.

---

3. 구조를 나누는 기준

그래서 구조를 나눌 때
기준을 명확하게 잡았습니다.

기준

• UI → components
• 데이터 → data
• 로직 → lib
• 타입 → types

이 기준을 기반으로
기존 구조를 점진적으로 분리했습니다.

---

4. 현재 구조

현재는 다음과 같은 구조로 정리했습니다.

features/nba
├─constants
├─data
├─lib
└─types

여기서 핵심은

 **“기능이 아니라 역할 기준으로 나눈 것”**입니다.

---

5. 컴포넌트 분리 대상

홈 화면을 기준으로
다음 컴포넌트들을 분리했습니다.

---

1) Card

가장 기본이 되는 UI 컴포넌트입니다.

• title
• action
• children

형태로 구성해서
모든 섹션에서 재사용할 수 있도록 만들었습니다.

하나의 레이아웃을 여러 곳에서 공통으로 사용하는 역할입니다.

---

2) GameRow

경기 리스트에서 사용하는 컴포넌트입니다.

• 경기 시간
• 팀 매치업
• 추천 점수

 홈 화면과 /games 페이지에서 모두 재사용할 수 있도록 설계했습니다.

---

3) RankingList

팀 순위를 보여주는 컴포넌트입니다.

• 순위
• 팀 이름
• 승률

단순 테이블 구조지만
별도 컴포넌트로 분리하면서 재사용성을 확보했습니다.

---

4) ScoringLeaders

득점 리더를 보여주는 컴포넌트입니다.

• 순위
• 선수 이름
• 팀
• 평균 득점

이후 별도 페이지로 확장하기 쉽게 구조를 잡았습니다.

---

6. 분리하면서 중요했던 점

1) props 설계

컴포넌트를 나누면서 가장 중요했던 부분은

props를 어떻게 설계할 것인가였습니다.

예를 들어 GameRow는
필드를 하나씩 나누지 않고

 

interface GameRowProps {
game: HomeGameItem;
}

 

이처럼 데이터 단위로 전달하는 방식으로 구성했습니다.

이렇게 하면 구조가 단순해지고 유지보수가 쉬워집니다.

---

2) 재사용성 고려

처음부터 재사용을 고려해서 설계했습니다.

• Card → 모든 섹션 공통
• GameRow → 홈 / games 페이지 공통
• RankingList → 다른 페이지 확장 가능
• ScoringLeaders → 별도 페이지로 확장 가능

단순 분리가 아니라 확장을 고려한 구조로 가져갔습니다.

---

3) 스타일 일관성

컴포넌트를 나누면서
UI도 자연스럽게 정리되었습니다.

• border 스타일 통일
• radius 통일
• spacing 통일
• 다크모드 대응 일관화

결과적으로 전체 UI의 완성도가 올라갔습니다.

---

7. 분리 이후 변화

컴포넌트를 분리한 이후 가장 큰 변화는 다음과 같습니다.

before

• page.tsx 하나에 모든 코드 존재
• 수정 시 영향 범위 큼
• 구조 파악이 어려움

after

• 역할별 파일 분리
• 필요한 부분만 수정 가능
• 코드 가독성 개선

유지보수성과 확장성이 크게 개선되었습니다.

---

8. 현재 단계에서의 의미

지금 단계는 단순히 UI를 만든 것이 아니라

**“서비스 구조를 설계하는 단계”**라고 생각합니다.

이 작업을 통해

• 데이터 흐름
• 컴포넌트 구조
• 재사용성

이 세 가지를 정리할 수 있었습니다.

---

9. 마무리

이번 작업을 통해 느낀 점은

UI를 만드는 것보다 구조를 만드는 것이 더 중요하다는 것이었습니다.

 

처음에는 빠르게 화면을 만드는 데 집중했지만,
기능이 늘어날수록

구조를 정리하는 작업이 필수라는 것을 느꼈습니다.