카드/FlmCard

1.react-native-freelifemakers-ui NPM 모듈 설치하기 / react-native-freelifemakers-ui NPM Module Install

# npm install react-native-freelifemakers-ui

2.사용하기 / Usage
1)모듈 불러오기 / import Module

import { FlmCard, FlmText, FlmButton } from "react-native-freelifemakers-ui";

2)카드 / FlmCard

         <FlmCard>
          <FlmText category="subtitle">이것은 기본 카드입니다.</FlmText>
          <FlmText category="subtitle">This is a basic card.</FlmText>

          <Text style={styles.cardContentText}>
            추가 콘텐츠를 여기에 넣을 수 있습니다. / You can add additional
            content here.
          </Text>
        </FlmCard>

3.예제코드 / Example Code

import React, { useState } from "react";
import { View, Text, StyleSheet, Alert, ScrollView, Image } from "react-native";
import { FlmCard, FlmText, FlmButton } from "react-native-freelifemakers-ui";

// FlmCardExample 컴포넌트
// This component demonstrates the usage of FlmCard.
const FlmCardApp = () => {
  const [cardPressCount, setCardPressCount] = useState(0);

  const handleCardPress = (cardName) => {
    setCardPressCount((prevCount) => prevCount + 1);

    // 간단한 Alert 사용 (In real apps, use a custom modal)
    Alert.alert(
      "카드 클릭  / Card Clicked",
      `${cardName} 카드가 클릭되었습니다! (총 ${cardPressCount + 1}회)\n"${cardName}" card was clicked! (Total ${cardPressCount + 1} times)`,
      [{ text: "확인 (OK)" }],
    );
  };

  return (
    <ScrollView style={styles.scrollViewContainer}>
      <View style={styles.container}>
        <FlmText category="subtitle" style={{ marginTop: 20 }}>
          FlmCard 사용 예시 / FlmCard Example
        </FlmText>

        {/* 기본 카드 (Basic Card) */}
        <FlmText category="subtitle" style={{ marginTop: 20 }}>
          기본카드 / Basic FlmCard
        </FlmText>
        <FlmCard>
          <FlmText category="subtitle">이것은 기본 카드입니다.</FlmText>
          <FlmText category="subtitle">This is a basic card.</FlmText>

          <Text style={styles.cardContentText}>
            추가 콘텐츠를 여기에 넣을 수 있습니다. / You can add additional
            content here.
          </Text>
        </FlmCard>

        {/* 제목과 부제목이 있는 카드 (Card with Title and Subtitle) */}
        <FlmText category="subtitle" style={{ marginTop: 20 }}>
          제목과 부제목이 있는 카드
        </FlmText>
        <FlmText category="subtitle">Card with Title and Subtitle</FlmText>
        <FlmCard
          title="카드 제목 / Card Title"
          subtitle="이것은 카드의 부제목입니다. (This is the card's subtitle)"
        >
          <Text style={styles.cardContentText}>
            제목과 부제목이 있는 카드입니다. (Card with title and subtitle.)
          </Text>
          <Text style={styles.cardContentText}>
            카드 내용이 여기에 표시됩니다. (Card content is displayed here.)
          </Text>
        </FlmCard>

        {/* 커스텀 스타일 및 onPress 기능이 있는 카드 / Card with Custom Styles and onPress */}
        <FlmText category="subtitle" style={{ marginTop: 20 }}>
          커스텀 스타일 및 onPress 기능이 있는 카드
        </FlmText>
        <FlmText category="subtitle">
          Card with Custom Styles and onPress
        </FlmText>
        <FlmCard
          title="클릭 가능한 카드 / Clickable Card"
          subtitle="이 카드를 눌러보세요! / Try tapping this card!"
          onPress={() => handleCardPress("클릭 가능한 / Clickable")}
          style={styles.clickableCard}
          titleStyle={styles.clickableCardTitle}
          elevation={5}
          borderRadius={12}
        >
          <Text style={styles.cardContentText}>
            이 카드를 누르면 알림이 표시됩니다./ An alert is shown when this
            card is tapped.
          </Text>
          <Text style={styles.cardContentText}>
            클릭 횟수: {cardPressCount} / Click Count: {cardPressCount}
          </Text>
        </FlmCard>

        {/* 배경색이 다른 카드  / Card with Different Background Color */}
        <FlmText category="subtitle" style={{ marginTop: 20 }}>
          배경색이 다른 카드
        </FlmText>
        <FlmText category="subtitle">
          Card with Different Background Color
        </FlmText>
        <FlmCard
          title="다른 색상의 카드 / Card with Different Color"
          backgroundColor="#e0f2f7"
          elevation={3}
        >
          <Text style={styles.cardContentText}>
            이 카드는 다른 배경색을 가지고 있습니다. / This card has a different
            background color.
          </Text>
        </FlmCard>

        {/* 콘텐츠 패딩을 조정한 카드  / Card with Adjusted Content Padding */}
        <FlmText category="subtitle" style={{ marginTop: 20 }}>
          콘텐츠 패딩을 조정한 카드
        </FlmText>
        <FlmText category="subtitle">
          Card with Adjusted Content Padding
        </FlmText>
        <FlmCard
          title="패딩 조정 카드 / Card with Custom Padding"
          contentStyle={{ paddingHorizontal: 30, paddingVertical: 20 }}
        >
          <Text style={styles.cardContentText}>
            이 카드는 내부 콘텐츠의 패딩이 다릅니다. / This card has customized
            inner padding.
          </Text>
        </FlmCard>

        {/* 이미지 카드 (Image Card) */}
        <FlmText category="subtitle" style={{ marginTop: 20 }}>
          이미지 카드
        </FlmText>
        <FlmText category="subtitle">Image Card</FlmText>
        <FlmCard
          title="이미지 카드 / Image Card"
          subtitle="아름다운 풍경 이미지 / Beautiful Landscape Image"
          elevation={4}
          borderRadius={10}
        >
          <Image
            source={{
              uri: "https://picsum.photos/400/200",
            }}
            style={styles.cardImage}
            resizeMode="cover"
            onError={(e) =>
              console.log("Image loading error:", e.nativeEvent.error)
            }
          />
          <Text style={styles.cardContentText}>
            이 카드는 이미지를 포함하고 있습니다. 이미지 아래에 추가적인 설명을
            넣을 수 있습니다. / This card contains an image. Additional
            description can be added below the image.
          </Text>
        </FlmCard>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollViewContainer: {
    flex: 1,
    backgroundColor: "#f0f2f5",
  },
  container: {
    padding: 10,
    alignItems: "center",
    paddingBottom: 30,
  },
  cardContentText: {
    fontSize: 16,
    color: "#555555",
    lineHeight: 24,
  },
  clickableCard: {
    backgroundColor: "#fff3e0",
    borderWidth: 1,
    borderColor: "#ffab40",
  },
  clickableCardTitle: {
    color: "#d84315",
  },
  cardImage: {
    alignSelf: "stretch",
    height: 200,
    borderRadius: 8,
    marginBottom: 10,
  },
});

export default FlmCardApp;

4.스크린샷/ScreenShot