[FN] 공연 정보 조회 페이지 UI 수정

이전 게시글에서 공연 정보 Open API를 가져오고 카드 형태로 나타내는 것을 구현하였다.

[FN] 공연 정보 조회 / KOPIS 공연 정보 Open API 가져오기, XML - JSON 파싱

해당 방법으로 "콘서트, 뮤지컬, 연극, 클래식" 카테고리 페이지를 모두 구현하였다.

 

수정된 부분

// ClassicScreen.tsx
const filtered = classicList.filter((item: any) =>
        item.genrenm?.includes('클래식') 
      && item.prfstate?.includes('공연중')
      );

• 이전 게시글에서는 공연 종료된 공연들도 화면에 출력하였지만 prfstate 조건을 추가하여 현재 공연중인 공연만 출력

PerformancePosterList.tsx 

페이지에 가장 상단에 현재 진행중인 공연 포스터가 자동 슬라이드 되도록하면 더 좋을 것 같아서 PerformancePosterList 컴포넌트를 만들었다.

type Props = {
  data: any[];
};

const PerformancePosterSlide = ({ data }: Props) => {
  const flatListRef = useRef<FlatList>(null);
  const [currentIndex, setCurrentIndex] = useState(0);

• flatListRef: FlatList를 직접 스크롤하기 위해 참조 저장
• currentIndex: 현재 슬라이드 인덱스값을 저장

// 부모 컴포넌트 ClassicScreen.tsx

const recentPosters = concerts
  .filter((item) => item.poster) // 포스터가 있는 것만
  .slice(0, 5); // 상위 5개만

<PerformancePosterSlide data={recentPosters} />

• data라는 props를 받아서 포스터를 슬라이드로 보여주는 역할 - ClassicScreen에서 poster 전달

useEffect(() => {
  const interval = setInterval(() => {
    const nextIndex = (currentIndex + 1) % data.length;
    flatListRef.current?.scrollToIndex({ index: nextIndex, animated: true });
    setCurrentIndex(nextIndex);
  }, 5000);

  return () => clearInterval(interval);
}, [currentIndex, data.length]);

• 5초마다 currentIndex값 증가, scrollToIndex로 해당 페이지로 이동
• 마지막 이미지 후에는 다시 첫 번째 이미지로

const onMomentumScrollEnd = (event: any) => {
  const newIndex = Math.round(event.nativeEvent.contentOffset.x / width);
  setCurrentIndex(newIndex);
};

• 사용자가 손으로 스크롤을 넘겼을 때 currentIndex값을 업데이트해서 슬라이드를 정확하게 위치시킴

// ClassicScreen.tsx
<ScrollView contentContainerStyle={styles.scrollContent}>
        {classics.length > 0 && (
          <PerformancePosterSlide data={recentPosters} />
        )}
  
        <View style={styles.titleContainer}>
          <Text style={styles.titleText}>진행 중인 클래식</Text>
        </View>
        
        {classics.map((item) => (
          <View key={item.mt20id}>
            {renderItem({ item })}
          </View>
        ))}
</ScrollView>

• FlatList로 카드만 스크롤하던 이전 코드에서 전체를 ScrollView로 감싸주고 포스터 슬라이드부터 밑으로 슬라이드 가능하도록 수정

scrollContent: {
    paddingBottom: 80,
  },
titleContainer: {
    backgroundColor: "#fff",
    borderBottomWidth: 3,
    borderBottomColor: "#2457BD",
    marginBottom: 20,
  },
titleText: {
    textAlign: "center",
    marginTop: 10,
    fontSize: 18,
    color: "#2457BD",
    marginBottom: 10,
    fontWeight: "bold",
  },

• 추가된 스타일

수정된 공연 정보 조회 화면

 

 

 

 

 

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."