“부산광역시 전체가 왜 안 나올까?”

- 값의 규칙이 공유되지 않아 생긴 필터링 버그 해결기

팀 프로젝트를 진행하면서 가장 많이 느끼는 것은

코드보다 중요한 건 ‘팀원 간의 규칙 공유’라는 사실이다.

이번에 나는 ‘반경 기반 게시글 필터링’ 기능을 구현하면서

다른 팀원이 만든 Filter 컴포넌트와 미묘한 불일치 때문에

예상치 못한 버그를 겪었다.

그 과정을 기록해본다.

---

🧩 1. 문제 상황: “부산광역시만 선택했는데 글이 하나도 안 나와요”

나는 FitList 페이지에서 다음 조건을 구현했다.

• 시/도 또는 시군구를 선택하면 지역 필터 모드
• 둘 다 선택 안 하면 반경 필터 모드

그런데 실제로 테스트해보니,

시/도 = 부산광역시

시군구 = (선택 안 함)

이 경우 부산광역시 전체 게시글이 나와야 하는데,

필터링된 목록은 0개였다.

콘솔에는 이런 값이 찍혔다.

filter.sido: "부산광역시"
filter.sigungu: ""

여기서 나는 문제의 핵심을 발견했다.

---

🕵️ 2. 문제 원인: “시군구 미선택 = 빈 문자열” 규칙을 몰랐다

Filter 컴포넌트를 만든 팀원은,

시/도 변경 시 시군구 필터를 초기화하는 로직을 이렇게 만들어놨다.

onChange({ ...value, sido: next, sigungu: '' })

즉,

• 시군구를 선택 안 했을 때 값은 "시·군·구 선택"이 아니라
• 빈 문자열 ''

이었고, 나는 이 사실을 모르고 이렇게 해석해버린 것이다:

const hasSigunguFilter =
  filter.sigungu !== "시·군·구 선택" && filter.sigungu !== "전체"

여기에 filter.sigungu = '' 이 들어오면 결과는?

'' !== "시·군·구 선택" → true
'' !== "전체" → true
=> hasSigunguFilter = true

즉,

시군구를 선택하지 않았음에도

시군구 필터가 켜진 것으로 로직이 오해했다.

그리고 필터는 이렇게 적용됐다:

item.sigungu === filter.sigungu(빈 문자열)

당연히 '남구' === '' 같은 조건을 만족할 게시글은 없다.

그래서 부산광역시만 선택해도 아무 글도 나오지 않았던 것.

---

⚒️ 3. 해결: 시군구 값이 빈 문자열일 때는 필터 OFF 처리

나는 시군구 필터 조건을 이렇게 수정했다.

const hasSigunguFilter =
  !!filter.sigungu &&
  filter.sigungu !== "시·군·구 선택" &&
  filter.sigungu !== "전체"

이제 filter.sigungu === ''이면:

!!'' → false
=> hasSigunguFilter = false  // 필터 꺼짐

즉,

시/도 = 부산광역시만 선택해도

→ 부산광역시 전체 글이 자연스럽게 렌더링된다.

---

💡 4. 이번 문제에서 배운 것: 협업에서는 “규칙”이 코드보다 중요하다

이 문제는 기술적으로 어렵지 않았다.

하버사인 거리 계산도 아니고, 좌표 연산도 아니었다.

문제의 본질은 팀 간의 “값 규칙(value contract)”이 공유되지 않았다는 것.

예를 들어:

의미	Filter가 넘긴 값	FitList가 기대한 값
시군구 선택 안 함	""	"시·군·구 선택"
“전체” 선택	없음(미구현)	"전체"

서로가 다른 규칙으로 개발했기 때문에,

겉으로 보기엔 멀쩡한 기능이지만 내부에서 충돌이 발생한 것이다.

---

🤝 5. 교훈: 컴포넌트 간 데이터 규칙을 먼저 정의하자

앞으로 팀에서 기능을 나눠 개발할 때는 다음을 꼭 먼저 정리해야 한다.

✔️ 1) 컴포넌트 간 값의 규칙(Value Contract)

• 선택 안 했을 때 어떤 값? null, "", "선택"…
• 기본값은 무엇?
• “전체”의 의미는?

✔️ 2) 상태 변화에 따른 값의 흐름

• 시/도 바뀌면 시군구는 무엇으로 초기화되는가?
• 값은 문자열인가? null인가?

✔️ 3) 명시적인 타입 정의

type SigunguValue = '' | '전체' | '시·군·구 선택' | string

✔️ 4) 문서화

Notion이라든지 confluence라든지

몇 글자이면 된다.

“시군구 미선택 시 ''을 보낸다.”

이 한 문장만 있었어도

이번 이틀짜리 트러블슈팅은 5분 만에 해결됐을 것이다.

---

🧭 6. 마무리

이번 경험은 작은 버그처럼 보였지만

개발 협업에서 정말 중요한 본질을 깨닫게 해줬다.

“코드를 잘 짜는 것보다,

규칙을 공유하는 것이 더 중요하다.”

앞으로 팀 프로젝트를 진행할 때

이 경험을 바탕으로 더욱 단단한 협업을 만들어갈 것이다.