{"id":1795,"date":"2025-08-03T22:57:53","date_gmt":"2025-08-03T22:57:53","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1795"},"modified":"2025-08-04T08:16:46","modified_gmt":"2025-08-04T08:16:46","slug":"flmcard","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/08\/03\/flmcard\/","title":{"rendered":"\uce74\ub4dc\/FlmCard"},"content":{"rendered":"\n

1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Install<\/strong><\/p>\n\n\n\n

# npm install react-native-freelifemakers-ui<\/code><\/pre>\n\n\n\n
2.\uc0ac\uc6a9\ud558\uae30 \/ Usage<\/strong>
1)\ubaa8\ub4c8 \ubd88\ub7ec\uc624\uae30 \/ import Module
<\/p>\n\n\n\n
import { FlmCard, FlmText, FlmButton } from \"react-native-freelifemakers-ui\";<\/code><\/pre>\n\n\n\n
2)\uce74\ub4dc \/ FlmCard<\/p>\n\n\n\n
         <FlmCard>\n          <FlmText category=\"subtitle\">\uc774\uac83\uc740 \uae30\ubcf8 \uce74\ub4dc\uc785\ub2c8\ub2e4.<\/FlmText>\n          <FlmText category=\"subtitle\">This is a basic card.<\/FlmText>\n\n          <Text style={styles.cardContentText}>\n            \ucd94\uac00 \ucf58\ud150\uce20\ub97c \uc5ec\uae30\uc5d0 \ub123\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \/ You can add additional\n            content here.\n          <\/Text>\n        <\/FlmCard><\/code><\/pre>\n\n\n\n
3.\uc608\uc81c\ucf54\ub4dc \/ Example Code<\/strong><\/p>\n\n\n\n
import React, { useState } from \"react\";\nimport { View, Text, StyleSheet, Alert, ScrollView, Image } from \"react-native\";\nimport { FlmCard, FlmText, FlmButton } from \"react-native-freelifemakers-ui\";\n\n\/\/ FlmCardExample \ucef4\ud3ec\ub10c\ud2b8\n\/\/ This component demonstrates the usage of FlmCard.\nconst FlmCardApp = () => {\n  const [cardPressCount, setCardPressCount] = useState(0);\n\n  const handleCardPress = (cardName) => {\n    setCardPressCount((prevCount) => prevCount + 1);\n\n    \/\/ \uac04\ub2e8\ud55c Alert \uc0ac\uc6a9 (In real apps, use a custom modal)\n    Alert.alert(\n      \"\uce74\ub4dc \ud074\ub9ad  \/ Card Clicked\",\n      `${cardName} \uce74\ub4dc\uac00 \ud074\ub9ad\ub418\uc5c8\uc2b5\ub2c8\ub2e4! (\ucd1d ${cardPressCount + 1}\ud68c)\\n\"${cardName}\" card was clicked! (Total ${cardPressCount + 1} times)`,\n      [{ text: \"\ud655\uc778 (OK)\" }],\n    );\n  };\n\n  return (\n    <ScrollView style={styles.scrollViewContainer}>\n      <View style={styles.container}>\n        <FlmText category=\"subtitle\" style={{ marginTop: 20 }}>\n          FlmCard \uc0ac\uc6a9 \uc608\uc2dc \/ FlmCard Example\n        <\/FlmText>\n\n        {\/* \uae30\ubcf8 \uce74\ub4dc (Basic Card) *\/}\n        <FlmText category=\"subtitle\" style={{ marginTop: 20 }}>\n          \uae30\ubcf8\uce74\ub4dc \/ Basic FlmCard\n        <\/FlmText>\n        <FlmCard>\n          <FlmText category=\"subtitle\">\uc774\uac83\uc740 \uae30\ubcf8 \uce74\ub4dc\uc785\ub2c8\ub2e4.<\/FlmText>\n          <FlmText category=\"subtitle\">This is a basic card.<\/FlmText>\n\n          <Text style={styles.cardContentText}>\n            \ucd94\uac00 \ucf58\ud150\uce20\ub97c \uc5ec\uae30\uc5d0 \ub123\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \/ You can add additional\n            content here.\n          <\/Text>\n        <\/FlmCard>\n\n        {\/* \uc81c\ubaa9\uacfc \ubd80\uc81c\ubaa9\uc774 \uc788\ub294 \uce74\ub4dc (Card with Title and Subtitle) *\/}\n        <FlmText category=\"subtitle\" style={{ marginTop: 20 }}>\n          \uc81c\ubaa9\uacfc \ubd80\uc81c\ubaa9\uc774 \uc788\ub294 \uce74\ub4dc\n        <\/FlmText>\n        <FlmText category=\"subtitle\">Card with Title and Subtitle<\/FlmText>\n        <FlmCard\n          title=\"\uce74\ub4dc \uc81c\ubaa9 \/ Card Title\"\n          subtitle=\"\uc774\uac83\uc740 \uce74\ub4dc\uc758 \ubd80\uc81c\ubaa9\uc785\ub2c8\ub2e4. (This is the card's subtitle)\"\n        >\n          <Text style={styles.cardContentText}>\n            \uc81c\ubaa9\uacfc \ubd80\uc81c\ubaa9\uc774 \uc788\ub294 \uce74\ub4dc\uc785\ub2c8\ub2e4. (Card with title and subtitle.)\n          <\/Text>\n          <Text style={styles.cardContentText}>\n            \uce74\ub4dc \ub0b4\uc6a9\uc774 \uc5ec\uae30\uc5d0 \ud45c\uc2dc\ub429\ub2c8\ub2e4. (Card content is displayed here.)\n          <\/Text>\n        <\/FlmCard>\n\n        {\/* \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \ubc0f onPress \uae30\ub2a5\uc774 \uc788\ub294 \uce74\ub4dc \/ Card with Custom Styles and onPress *\/}\n        <FlmText category=\"subtitle\" style={{ marginTop: 20 }}>\n          \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \ubc0f onPress \uae30\ub2a5\uc774 \uc788\ub294 \uce74\ub4dc\n        <\/FlmText>\n        <FlmText category=\"subtitle\">\n          Card with Custom Styles and onPress\n        <\/FlmText>\n        <FlmCard\n          title=\"\ud074\ub9ad \uac00\ub2a5\ud55c \uce74\ub4dc \/ Clickable Card\"\n          subtitle=\"\uc774 \uce74\ub4dc\ub97c \ub20c\ub7ec\ubcf4\uc138\uc694! \/ Try tapping this card!\"\n          onPress={() => handleCardPress(\"\ud074\ub9ad \uac00\ub2a5\ud55c \/ Clickable\")}\n          style={styles.clickableCard}\n          titleStyle={styles.clickableCardTitle}\n          elevation={5}\n          borderRadius={12}\n        >\n          <Text style={styles.cardContentText}>\n            \uc774 \uce74\ub4dc\ub97c \ub204\ub974\uba74 \uc54c\ub9bc\uc774 \ud45c\uc2dc\ub429\ub2c8\ub2e4.\/ An alert is shown when this\n            card is tapped.\n          <\/Text>\n          <Text style={styles.cardContentText}>\n            \ud074\ub9ad \ud69f\uc218: {cardPressCount} \/ Click Count: {cardPressCount}\n          <\/Text>\n        <\/FlmCard>\n\n        {\/* \ubc30\uacbd\uc0c9\uc774 \ub2e4\ub978 \uce74\ub4dc  \/ Card with Different Background Color *\/}\n        <FlmText category=\"subtitle\" style={{ marginTop: 20 }}>\n          \ubc30\uacbd\uc0c9\uc774 \ub2e4\ub978 \uce74\ub4dc\n        <\/FlmText>\n        <FlmText category=\"subtitle\">\n          Card with Different Background Color\n        <\/FlmText>\n        <FlmCard\n          title=\"\ub2e4\ub978 \uc0c9\uc0c1\uc758 \uce74\ub4dc \/ Card with Different Color\"\n          backgroundColor=\"#e0f2f7\"\n          elevation={3}\n        >\n          <Text style={styles.cardContentText}>\n            \uc774 \uce74\ub4dc\ub294 \ub2e4\ub978 \ubc30\uacbd\uc0c9\uc744 \uac00\uc9c0\uace0 \uc788\uc2b5\ub2c8\ub2e4. \/ This card has a different\n            background color.\n          <\/Text>\n        <\/FlmCard>\n\n        {\/* \ucf58\ud150\uce20 \ud328\ub529\uc744 \uc870\uc815\ud55c \uce74\ub4dc  \/ Card with Adjusted Content Padding *\/}\n        <FlmText category=\"subtitle\" style={{ marginTop: 20 }}>\n          \ucf58\ud150\uce20 \ud328\ub529\uc744 \uc870\uc815\ud55c \uce74\ub4dc\n        <\/FlmText>\n        <FlmText category=\"subtitle\">\n          Card with Adjusted Content Padding\n        <\/FlmText>\n        <FlmCard\n          title=\"\ud328\ub529 \uc870\uc815 \uce74\ub4dc \/ Card with Custom Padding\"\n          contentStyle={{ paddingHorizontal: 30, paddingVertical: 20 }}\n        >\n          <Text style={styles.cardContentText}>\n            \uc774 \uce74\ub4dc\ub294 \ub0b4\ubd80 \ucf58\ud150\uce20\uc758 \ud328\ub529\uc774 \ub2e4\ub985\ub2c8\ub2e4. \/ This card has customized\n            inner padding.\n          <\/Text>\n        <\/FlmCard>\n\n        {\/* \uc774\ubbf8\uc9c0 \uce74\ub4dc (Image Card) *\/}\n        <FlmText category=\"subtitle\" style={{ marginTop: 20 }}>\n          \uc774\ubbf8\uc9c0 \uce74\ub4dc\n        <\/FlmText>\n        <FlmText category=\"subtitle\">Image Card<\/FlmText>\n        <FlmCard\n          title=\"\uc774\ubbf8\uc9c0 \uce74\ub4dc \/ Image Card\"\n          subtitle=\"\uc544\ub984\ub2e4\uc6b4 \ud48d\uacbd \uc774\ubbf8\uc9c0 \/ Beautiful Landscape Image\"\n          elevation={4}\n          borderRadius={10}\n        >\n          <Image\n            source={{\n              uri: \"https:\/\/picsum.photos\/400\/200\",\n            }}\n            style={styles.cardImage}\n            resizeMode=\"cover\"\n            onError={(e) =>\n              console.log(\"Image loading error:\", e.nativeEvent.error)\n            }\n          \/>\n          <Text style={styles.cardContentText}>\n            \uc774 \uce74\ub4dc\ub294 \uc774\ubbf8\uc9c0\ub97c \ud3ec\ud568\ud558\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubbf8\uc9c0 \uc544\ub798\uc5d0 \ucd94\uac00\uc801\uc778 \uc124\uba85\uc744\n            \ub123\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \/ This card contains an image. Additional\n            description can be added below the image.\n          <\/Text>\n        <\/FlmCard>\n      <\/View>\n    <\/ScrollView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  scrollViewContainer: {\n    flex: 1,\n    backgroundColor: \"#f0f2f5\",\n  },\n  container: {\n    padding: 10,\n    alignItems: \"center\",\n    paddingBottom: 30,\n  },\n  cardContentText: {\n    fontSize: 16,\n    color: \"#555555\",\n    lineHeight: 24,\n  },\n  clickableCard: {\n    backgroundColor: \"#fff3e0\",\n    borderWidth: 1,\n    borderColor: \"#ffab40\",\n  },\n  clickableCardTitle: {\n    color: \"#d84315\",\n  },\n  cardImage: {\n    alignSelf: \"stretch\",\n    height: 200,\n    borderRadius: 8,\n    marginBottom: 10,\n  },\n});\n\nexport default FlmCardApp;\n<\/code><\/pre>\n\n\n\n
4.\uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/strong><\/p>\n\n\n\n
\n