이 컴포넌트에서는 게시글 배열을 Props로 받아와서 FlatList를 사용해 화면에 보여줍니다. 지금은 아직 FlatList에서 renderItem 부분을 구현하지 않은 상태입니다.

각 게시글의 제목, 작성자, 날짜를 보여줄 ArticleItem 컴포넌트를 만들어봅시다. components 디렉터리에 ArticleItem.tsx 컴포넌트를 생성하세요.

components/ArticleItem.tsx

import React from 'react';
import {StyleSheet, Pressable, Text, View, Platform} from 'react-native';

export interface ArticleItemProps {
  id: number;
  title: string;
  publishedAt: string;
  username: string;
}

function ArticleItem({id, title, publishedAt, username}: ArticleItemProps) {
  const onPress = () => {
    // TODO: 눌렀을 때 게시글 열기
    console.log(id);
  };

  const formattedDate = new Date(publishedAt).toLocaleString();

  return (
    <Pressable
      style={({pressed}) => [
        styles.block,
        Platform.OS === 'ios' && pressed && styles.pressed,
      ]}
      onPress={onPress}
      android_ripple={{color: '#eeeeee'}}>
        <Text style={styles.title}>{title}</Text>
        <View style={styles.footer}>
          <Text style={styles.smallText}>{username}</Text>
          <Text style={styles.smallText}>{formattedDate}</Text>
        </View>
      </Pressable>
  );
}

const styles = StyleSheet.create({
  block: {
    paddingVertical: 16,
    paddingHorizontal: 12,
    backgroundColor: 'white',
  },
  pressed: {
    backgroundColor: '#eeeeee',
  },
  title: {
    fontSize: 14,
    fontWeight: 'bold',
  },
  footer: {
    marginTop: 16,
  },
  smallText: {
    fontSize: 10,
    color: '#546e7a',
  },
});

export default ArticleItem;