Feat/#68: 메인화면 리스트 api 연결 #75

donut74 · 2025-12-31T08:02:20Z

⚙️ Related ISSUE Number

#68

📄 Work Description

1. `api/urls.ts`

역할: API 엔드포인트 상수 정의
주요 내용:
- 파티 리스트 조회 엔드포인트 추가 (GET_PARTIES: "/api/parties")

2. `api/partyApi.ts`

역할: 파티 리스트 조회 API 함수 및 유효성 검사
주요 기능:
- getPartyList: 파티 리스트 조회 API 호출
- isValidPartyItem: 파티 아이템 필수 필드 검증
  - 화면 표시에 필요한 필드 검증 (partyId, title, pricePerPerson, participantStatus, distance, distanceKm, timeAgo, isClosed)
  - 카테고리 유효값 검증 (ALL, DELIVERY, GROCERY, HOUSEHOLD)
- isValidPartyListResponse: API 응답 데이터 구조 검증
  - activeParties, closedParties 배열 검증
  - 각 배열의 아이템 유효성 검증
에러 처리:
- try-catch로 네트워크 오류 처리
- 유효하지 않은 데이터 시 빈 데이터 구조 반환
- 앱 크래시 방지를 위한 안전한 폴백 처리

3. `hooks/usePartyList.ts`

역할: React Query를 사용한 파티 리스트 조회 훅
주요 기능:
- useQuery로 파티 리스트 데이터 조회
- 카테고리 필터 상태 관리 (partyType, setPartyType)
- 쿼리 키에 카테고리, 위도, 경도 포함하여 자동 refetch
- 위치 정보가 있을 때만 쿼리 실행 (enabled 옵션)

4. `app/(tabs)/index.tsx`

역할: 홈 화면 메인 컴포넌트
주요 기능:
- 위치 정보 조회 (useUserCoords)
- 파티 리스트 조회 (usePartyList)
- 카테고리 필터 UI (MainCategory)
- 파티 리스트 표시 (PartyList)
위치 정보 처리:
- 컴포넌트 마운트 시 위치 정보 자동 조회
- 위도/경도를 문자열로 변환하여 API 호출

5. `components/main/MainCard.tsx`

역할: 개별 파티 카드 컴포넌트
주요 기능:
- 파티 정보 표시 (제목, 가격, 인원수, 거리, 시간)
- 이미지 표시 및 에러 처리
  - 이미지 로딩 실패 시 카테고리별 기본 아이콘 표시
  - imageError 상태로 이미지 로딩 실패 감지
- 마감 파티 시각적 처리
  - 마감 시 오버레이 적용 (rgba(0, 0, 0, 0.4))
  - 이미지 블러 효과 (blurRadius: 2)
  - 뱃지 색상 변경 (회색 배경)
- 카테고리별 아이콘 매핑
  - ALL, DELIVERY, GROCERY, HOUSEHOLD 각각의 아이콘

6. `components/main/MainCategory.tsx`

역할: 카테고리 필터 컴포넌트
주요 기능:
- 카테고리 선택 UI (전체, 배달, 장보기, 생활용품)
- 선택된 카테고리 하이라이트 표시
- 카테고리 변경 시 콜백 호출 (onCategoryChange)

7. `components/main/PartyList.tsx`

역할: 파티 리스트 표시 컴포넌트
주요 기능:
- 활성 파티와 종료된 파티를 합쳐서 표시
- FlatList로 파티 카드 리스트 렌더링
- 로딩 상태 처리
  - 로딩 중일 때 빈 상태 화면 숨김
  - 데이터가 없을 때만 빈 상태 메시지 표시
- 빈 상태 UI
  - "아직 우리 동네에 파티가 없어요" 메시지
  - 첫 파티 생성 유도 문구

8. `types/party.ts`

역할: 파티 관련 TypeScript 타입 정의
주요 타입:
- PartyCategory: 파티 카테고리 타입 (ALL, DELIVERY, GROCERY, HOUSEHOLD)
- PartyListParams: 파티 리스트 조회 파라미터
- PartyItem: 파티 아이템 데이터 구조
  - partyId, thumbnailImage, title, pricePerPerson
  - participantStatus, distance, distanceKm, timeAgo
  - isClosed, category, createdAt
- PartyListResponse: API 응답 데이터 구조
  - activeParties, closedParties 배열
  - hasNext, totalCount

9. `components/main/MainHeader.tsx`

스토어 연동:
- useAuthStore를 사용하여 사용자 정보 가져오기
- 닉네임 동적 표시
  - 스토어에서 닉네임 가져와서 캐러셀 인사말에 포함
  - 기본값: "한입만"
- 위치 정보 동적 표시
  - 스토어에서 위치 정보 가져와서 헤더에 표시
  - 기본값: "위치 없음"

🔑 주요 개선 사항

데이터 유효성 검사
- 화면 표시에 필요한 필수 필드 검증
- 쿼리 업데이트 시마다 자동 유효성 검사 수행
- 유효하지 않은 데이터 시 안전한 폴백 처리
에러 처리 강화
- 네트워크 오류 시 빈 데이터 반환
- 앱 크래시 방지
- 사용자 친화적인 빈 상태 화면 표시
이미지 에러 처리
- 이미지 로딩 실패 시 카테고리별 기본 아이콘 표시
- 이미지 에러 상태 관리로 안정적인 UI 제공
로딩 상태 관리
- 필터 변경 시 로딩 중 빈 상태 화면 숨김
- 사용자 경험 개선
마감 파티 시각적 처리
- 오버레이 및 블러 효과로 마감 상태 명확히 표시
- 뱃지 색상 변경으로 상태 구분

📷 Screenshot

(백에서 ALL 카테고리로 하나를 넣어주셔서,,,
일단 공지 아이콘으로 기본이미지 넣어놓긴 했는데, 추후에 삭제해도 좋을 것 같습니다)

2025-12-31.4.36.02.mov

💬 To Reviewers

지금은 useQuery로 한번에 데이터를 불러오는데 추후에
useInfiniteQuery로 변경하는 작업이 필요할 것 같습니다!

…PI-연결

- 화면 표시에 필요한 필수 필드 검증 로직 추가 - participantStatus, distance, distanceKm, timeAgo 등 검증 - category 유효값 검증 (ALL, DELIVERY, GROCERY, HOUSEHOLD) - API 응답 데이터 유효성 검사 함수 추가 - 에러 발생 시 빈 데이터 반환으로 앱 크래시 방지 - 쿼리 업데이트 시마다 자동 유효성 검사 수행

DandelionQZ

카테고리 선택과 관련된 로직을 훅으로 관리하는 방법이 인상깊었습니다! 저는 이런경우 zustand store를 생성해서 전역으로 선택된 카테고리 값과 카테고리 변경 함수를 다뤘었거든요. props로 선택된 카테고리와 카테고리 변경 함수를 props로 넘겨줘야하지만 이렇게 훅으로 작성하는 방법도 있구나하고 새롭게 알고갑니다!! 수고하셨어요 ~!

DandelionQZ · 2025-12-31T13:03:37Z

TinyBite/components/main/PartyList.tsx

+interface PartyListProps {
+  data: PartyListResponse | undefined;
+  isLoading?: boolean;
+  onCardPress?: (partyId: number) => void;
+}


값을 props로 받지 않고 PartyList 컴포넌트 내부에서 자체적으로 호출하는 건 어떤가요? 역할이 분리되어서 부모 컴포넌트가 많은 역할을 맡게되지 않아도 될거 같아서요!

DandelionQZ · 2025-12-31T13:09:02Z

TinyBite/api/partyApi.ts

isValidPartyItem와 isValidPartyListResponse를 구현하게 된 이유가 궁금합니다!

donut74 added 29 commits December 30, 2025 14:30

feat/#68: 파티 리스트 API 엔드포인트 추가

fa9a531

feat/#68: 파티 리스트 API 타입 정의 추가

3cef998

refactor/#68: 파티 리스트 엔드포인트 이름 변경

5e64313

feat/#68: 파티 리스트 조회 API 함수 추가

b57428d

feat/#68: 파티 리스트 조회 React Query hook 추가

e2013ac

feat/#68: 메인 리스트 카드 Api 데이터 연동

4bd44f7

chore/#68: 파티 리스트 임시 데이터 추가

ceb558c

feat/#68: 파티 리스트 컴포넌트 추가

83ca212

feat/#68: 메인 화면 파티 리스트 API 연동

d229c17

feat/#68: 파티 리스트 카테고리 필터 기능 추가

e80cbd2

feat/#68: 카테고리 필터 클릭 기능 추가

0576b1f

chore/#68: 필터화에 맞게 mockdata 수정

2224188

feat/#68: 카테고리 컴포넌트 메인화면 연결

d96b675

style/#68: 카테고리 투명 보더 추가로 위치 이동 없이 수정

d4f6521

chore/#68: 공지 아이콘 추가

43828be

feat/#68: 데이터 없을 때 UI 추가

7fd8a21

feat/#68: 마감파티 시에 UI 추가

98ba564

feat/#68: 마감파티 이미지 블러 효과 추가

f68e7af

feat/#68: 이미지 없을 때 기본 이미지 표시

55ce8e4

feat/#68: 메인화면 헤더 location 데이터 연결

e03c837

feat/#68: 헤더 닉네임 데이터 연결

d635c57

chore/#68: 백 데이터 연결로 mockdata 삭제

0ae0aa3

feat/#68: 파티 카드 이미지 에러 처리 및 기본 이미지 표시 기능 추가

0bb07a6

chore/#68: 불필요한 콘솔 로그 제거 및 주석 처리

3b74c94

Merge remote-tracking branch 'origin/develop' into feat/68-메인화면-리스트-A…

97f1c15

…PI-연결

feat/#68: 데이터 불러올 때 isLoading을 이용해 빈 데이터 화면이 나오지 않도록 함

25bad07

style/#68: 카테고리 activeOpacity 값 조정

fd3ab0e

style/#68: PartyList paddingBottom 값 조정

be10cb2

donut74 requested a review from DandelionQZ December 31, 2025 08:02

donut74 self-assigned this Dec 31, 2025

donut74 linked an issue Dec 31, 2025 that may be closed by this pull request

feat: 메인화면 리스트 API 연결 #68

Open

3 tasks

DandelionQZ reviewed Dec 31, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Feat/#68: 메인화면 리스트 api 연결 #75

Feat/#68: 메인화면 리스트 api 연결 #75

Uh oh!

donut74 commented Dec 31, 2025 •

edited

Loading

Uh oh!

DandelionQZ left a comment

Uh oh!

DandelionQZ Dec 31, 2025

Uh oh!

DandelionQZ Dec 31, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Feat/#68: 메인화면 리스트 api 연결 #75

Are you sure you want to change the base?

Feat/#68: 메인화면 리스트 api 연결 #75

Uh oh!

Conversation

donut74 commented Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚙️ Related ISSUE Number

📄 Work Description

1. api/urls.ts

2. api/partyApi.ts

3. hooks/usePartyList.ts

4. app/(tabs)/index.tsx

5. components/main/MainCard.tsx

6. components/main/MainCategory.tsx

7. components/main/PartyList.tsx

8. types/party.ts

9. components/main/MainHeader.tsx

🔑 주요 개선 사항

📷 Screenshot

💬 To Reviewers

Uh oh!

DandelionQZ left a comment

Choose a reason for hiding this comment

Uh oh!

DandelionQZ Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

DandelionQZ Dec 31, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

donut74 commented Dec 31, 2025 •

edited

Loading

1. `api/urls.ts`

2. `api/partyApi.ts`

3. `hooks/usePartyList.ts`

4. `app/(tabs)/index.tsx`

5. `components/main/MainCard.tsx`

6. `components/main/MainCategory.tsx`

7. `components/main/PartyList.tsx`

8. `types/party.ts`

9. `components/main/MainHeader.tsx`