{"id":1770,"date":"2025-07-26T02:40:39","date_gmt":"2025-07-26T02:40:39","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1770"},"modified":"2025-07-26T04:12:07","modified_gmt":"2025-07-26T04:12:07","slug":"flmdialog","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/07\/26\/flmdialog\/","title":{"rendered":"\ub2e4\uc774\uc5bc\ub85c\uadf8\/FlmDialog"},"content":{"rendered":"\n<p>\ud83c\udf0f \uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<br>\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google Drive :<br><a rel=\"noreferrer noopener\" href=\"https:\/\/drive.google.com\/drive\/folders\/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=drive_link\" target=\"_blank\">https:\/\/drive.google.com\/drive\/folders\/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=drive_link<\/a><\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \uc6a9\ub3c4 \/ Purpose<br>&#8211;\uc9e7\uc740 \uc9c8\ubb38\uc774\ub098 \uc54c\ub9bc, \ud655\uc778 \uc694\uccad\uc744 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc804\ub2ec\ud558\ub294 \ub300\ud654 \uc0c1\uc790.<br>&#8211;\uba54\uc2dc\uc9c0 \uc804\ub2ec, \ud655\uc778\/\ucde8\uc18c \ub4f1 \uac04\ub2e8\ud55c \uc758\uc0ac\uacb0\uc815 \uc694\uccad\uc5d0 \uc0ac\uc6a9\ub428.<br>&#8211;\uc0ac\uc774\uc988\ub294 \uc791\uace0, \ub0b4\uc6a9\ub3c4 \uac04\ub2e8\ud568.<br>\u2013 A dialog box used to present brief questions, alerts, or confirmation requests to the user.<br>\u2013 Typically used to deliver messages or request simple decisions such as confirm\/cancel.<br>\u2013 Small in size and simple in content.<\/p>\n\n\n\n<p>\ud83d\udc49\ud83c\udffb \uc0ac\uc6a9\uc608 \/ Examples of Use<br>&#8212; \uc0ad\uc81c\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?\u201d \u2192 \ud655\uc778 \/ \ucde8\uc18c \ubc84\ud2bc<br>&#8212; \u201c\ub85c\uadf8\uc544\uc6c3\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?\u201d<br>&#8212; \uacbd\uace0\ucc3d \/ \uc815\ubcf4\ucc3d<br>\u2013 \u201cAre you sure you want to delete this?\u201d \u2192 Confirm \/ Cancel buttons<br>\u2013 \u201cDo you want to log out?\u201d<br>\u2013 Warning or informational messages<\/p>\n\n\n\n<p><strong>1.react-native-freelifemakers-ui NPM \ubaa8\ub4c8 \uc124\uce58\ud558\uae30 \/ react-native-freelifemakers-ui NPM Module Instal<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install react-native-freelifemakers-ui<\/code><\/pre>\n\n\n\n<p><strong>2.\uc0ac\uc6a9\ud558\uae30 \/ Usage<\/strong><br><strong>1)\ubaa8\ub4c8 \ubd88\ub7ec\uc624\uae30 \/ import Module<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import {FlmText, FlmButton, FlmDialog} from 'react-native-freelifemakers-ui';<\/code><\/pre>\n\n\n\n<p><strong>2)\uae30\ubcf8 \ub2e4\uc774\uc5bc\ub85c\uadf8 \/ Default Dialog<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        &lt;FlmButton\n          title=\"\uae30\ubcf8 \ub2e4\uc774\uc5bc\ub85c\uadf8 \uc5f4\uae30\/Open default dialog\"\n          onPress={handleOpenBasicDialog}\n        \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>3)\ud655\uc778,\ucde8\uc18c \ub2e4\uc774\uc5bc\ub85c\uadf8 \uc5f4\uae30 \/ the Confirm,Cancel dialog<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        &lt;FlmButton\n          title=\"\ud655\uc778,\ucde8\uc18c \ub2e4\uc774\uc5bc\ub85c\uadf8 \uc5f4\uae30\/Open the Confirm,Cancel dialog\"\n          onPress={handleOpenConfirmDialog}\n        \/&gt;\n        &lt;View style={styles.buttonSpacer} \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>4)\ucee4\uc2a4\ud140 \ub2e4\uc774\uc5bc \ub85c\uadf8 \/ Custom Dialog<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>        &lt;FlmButton\n          title=\"\ucee4\uc2a4\ud140 \ub2e4\uc774\uc5bc\ub85c\uadf8 \uc5f4\uae30\/Open custom dialog\"\n          onPress={handleOpenCustomDialog}\n        \/&gt;<\/code><\/pre>\n\n\n\n<p><strong>3.\uc608\uc81c\ucf54\ub4dc \/ Example code<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ FlmDialogApp.js\nimport React, {useState} from 'react';\nimport {SafeAreaView, ScrollView, View, StyleSheet, Alert} from 'react-native';\n\nimport {FlmText, FlmButton, FlmDialog} from 'react-native-freelifemakers-ui';\n\nconst FlmDialogApp = () =&gt; {\n  const &#91;isBasicDialogVisible, setIsBasicDialogVisible] = useState(false);\n  const &#91;isConfirmDialogVisible, setIsConfirmDialogVisible] = useState(false);\n  const &#91;isCustomDialogVisible, setIsCustomDialogVisible] = useState(false);\n\n  \/\/ \uae30\ubcf8 \ub2e4\uc774\uc5bc\ub85c\uadf8 \/ Default Dialog\n  const handleOpenBasicDialog = () =&gt; {\n    console.log(\n      '\uae30\ubcf8 \ub2e4\uc774\uc5bc\ub85c\uadf8 \uc5f4\uae30 \ubc84\ud2bc \ud074\ub9ad\ub428\/Open Basic Dialog button clicked',\n    );\n    setIsBasicDialogVisible(true);\n  };\n  const handleCloseBasicDialog = () =&gt; {\n    console.log('\uae30\ubcf8 \ub2e4\uc774\uc5bc\ub85c\uadf8 \ub2eb\ud798\/Close the basic dialog');\n    setIsBasicDialogVisible(false);\n  };\n\n  \/\/ \ud655\uc778,\ucde8\uc18c \ub2e4\uc774\uc5bc\ub85c\uadf8 \/ Confirm,Cancel Dialog\n  const handleOpenConfirmDialog = () =&gt; {\n    console.log(\n      '\ud655\uc778,\ucde8\uc18c \ub2e4\uc774\uc5bc\ub85c\uadf8 \uc5f4\uae30 \ubc84\ud2bc \ud074\ub9ad\ub428\/Click the OK\/Cancel dialog open button',\n    );\n    setIsConfirmDialogVisible(true);\n  };\n  const handleCloseConfirmDialog = () =&gt; {\n    console.log('\ud655\uc778,\ucde8\uc18c \ub2e4\uc774\uc5bc\ub85c\uadf8 \ub2eb\ud798\/Confirm,Cancel dialog closes');\n    setIsConfirmDialogVisible(false);\n  };\n\n  const handleConfirmAction = () =&gt; {\n    console.log(\n      \"\ud655\uc778 \ub2e4\uc774\uc5bc\ub85c\uadf8 \ub0b4\ubd80: '\ud655\uc778' \ubc84\ud2bc \ud074\ub9ad\ub428\/Inside the confirmation dialog: 'OK' button clicked\",\n    );\n    Alert.alert(\n      '\ud655\uc778\/Confirm',\n      '\uc791\uc5c5\uc774 \ud655\uc778\ub418\uc5c8\uc2b5\ub2c8\ub2e4!\/Your work has been confirmed!',\n    );\n    handleCloseConfirmDialog();\n  };\n\n  const handleCancelAction = () =&gt; {\n    console.log(\n      \"\ud655\uc778 \ub2e4\uc774\uc5bc\ub85c\uadf8 \ub0b4\ubd80: '\ucde8\uc18c' \ubc84\ud2bc \ud074\ub9ad\ub428\/Inside the confirmation dialog: 'Cancel' button clicked\",\n    );\n    Alert.alert(\n      '\ucde8\uc18c\/Cancel',\n      '\uc791\uc5c5\uc774 \ucde8\uc18c\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\/The operation has been cancelled.',\n    );\n    handleCloseConfirmDialog();\n  };\n\n  \/\/ \ucee4\uc2a4\ud140 \ub2e4\uc774\uc5bc\ub85c\uadf8 \/ Custom Dialog\n  const handleOpenCustomDialog = () =&gt; {\n    console.log(\n      '\ucee4\uc2a4\ud140 \ub2e4\uc774\uc5bc\ub85c\uadf8 \uc5f4\uae30 \ubc84\ud2bc \ud074\ub9ad\ub428\/Open Custom Dialog button clicked',\n    );\n    setIsCustomDialogVisible(true);\n  };\n  const handleCloseCustomDialog = () =&gt; {\n    console.log('\ucee4\uc2a4\ud140 \ub2e4\uc774\uc5bc\ub85c\uadf8 \ub2eb\ud798\/Custom dialog closed');\n    setIsCustomDialogVisible(false);\n  };\n\n  const handleCustomAction = action =&gt; {\n    console.log(\n      `\ucee4\uc2a4\ud140 \ub2e4\uc774\uc5bc\ub85c\uadf8 \ub0b4\ubd80: '${action}' \ubc84\ud2bc \ud074\ub9ad\ub428\/Inside a custom dialog: '${action}' button is clicked`,\n    );\n    Alert.alert(\n      '\ucee4\uc2a4\ud140 \uc561\uc158\/Custom Action',\n      `${action} \ubc84\ud2bc\uc774 \ud074\ub9ad\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\/The ${action} button was clicked.`,\n    );\n    handleCloseCustomDialog();\n  };\n\n  return (\n    &lt;SafeAreaView style={styles.container}&gt;\n      &lt;ScrollView contentContainerStyle={styles.scrollViewContent}&gt;\n        &lt;FlmText style={styles.heading}&gt;FlmDialog \uc0ac\uc6a9 \uc608\uc81c&lt;\/FlmText&gt;\n        &lt;FlmText style={styles.heading}&gt;FlmDialog Usage Example&lt;\/FlmText&gt;\n\n        &lt;FlmButton\n          title=\"\uae30\ubcf8 \ub2e4\uc774\uc5bc\ub85c\uadf8 \uc5f4\uae30\/Open default dialog\"\n          onPress={handleOpenBasicDialog}\n        \/&gt;\n        &lt;View style={styles.buttonSpacer} \/&gt;\n\n        &lt;FlmButton\n          title=\"\ud655\uc778,\ucde8\uc18c \ub2e4\uc774\uc5bc\ub85c\uadf8 \uc5f4\uae30\/Open the Confirm,Cancel dialog\"\n          onPress={handleOpenConfirmDialog}\n        \/&gt;\n        &lt;View style={styles.buttonSpacer} \/&gt;\n\n        &lt;FlmButton\n          title=\"\ucee4\uc2a4\ud140 \ub2e4\uc774\uc5bc\ub85c\uadf8 \uc5f4\uae30\/Open custom dialog\"\n          onPress={handleOpenCustomDialog}\n        \/&gt;\n        &lt;View style={styles.buttonSpacer} \/&gt;\n      &lt;\/ScrollView&gt;\n\n      {\/* \uc624\ubc84\ub808\uc774\uac00 \ud654\uba74\uc804\uccb4\ub97c \ub36e\uac8c \ud558\uae30 \uc704\ud574\uc11c FlmDialog \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 ScrollView \ubc16\uc5d0 \uc124\uc815 *\/}\n      {\/* \uc774\ub807\uac8c \ud558\uba74 SafeAreaView\ub97c \uae30\uc900\uc73c\ub85c \uc624\ubc84\ub808\uc774\uac00 \uc791\ub3d9. *\/}\n      {\/* Set FlmDialog components outside ScrollView to make overlay cover the entire screen *\/}\n      {\/* This makes overlay work based on SafeAreaView. *\/}\n\n      {\/* \uae30\ubcf8 \ub2e4\uc774\uc5bc\ub85c\uadf8 \/ Default Dialog *\/}\n      &lt;FlmDialog\n        isVisible={isBasicDialogVisible}\n        onClose={handleCloseBasicDialog}\n        title=\"\uc54c\ub9bc\/Notification\"\n        message=\"\uc774\uac83\uc740 \uae30\ubcf8\uc801\uc778 \uc54c\ub9bc \ub2e4\uc774\uc5bc\ub85c\uadf8\uc785\ub2c8\ub2e4.\/This is a basic notification dialog.\"\n        buttons={&#91;{text: '\ub2eb\uae30\/Close', onPress: handleCloseBasicDialog}]}\n      \/&gt;\n\n      {\/* \ud655\uc778,\ucde8\uc18c \ub2e4\uc774\uc5bc\ub85c\uadf8 \/ Confirm, Cancle Dialog *\/}\n      &lt;FlmDialog\n        isVisible={isConfirmDialogVisible}\n        onClose={handleCloseConfirmDialog}\n        title=\"\ud655\uc778 \ud544\uc694\/Confirmation required\"\n        message=\"\uc774 \uc791\uc5c5\uc744 \uacc4\uc18d\ud558\uc2dc\uaca0\uc2b5\ub2c8\uae4c?\/Do you want to continue with this task?\"\n        buttons={&#91;\n          {\n            text: 'Cancle',\n            onPress: handleCancelAction,\n            style: styles.cancelButton,\n          },\n          {\n            text: 'Confirm',\n            onPress: handleConfirmAction,\n            style: styles.confirmButton,\n          },\n        ]}\n      \/&gt;\n\n      {\/* \ucee4\uc2a4\ud140 \uc2a4\ud0c0\uc77c \ub2e4\uc774\uc5bc\ub85c\uadf8 \/ Custom Style Dialog *\/}\n      &lt;FlmDialog\n        isVisible={isCustomDialogVisible}\n        onClose={handleCloseCustomDialog}\n        title=\"\ud2b9\ubcc4\ud55c \uc54c\ub9bc!\/Special reminder!\"\n        message=\"\ub2e4\uc591\ud55c \uc2a4\ud0c0\uc77c\uacfc \ubc84\ud2bc\uc744 \uac00\uc9c4 \ub2e4\uc774\uc5bc\ub85c\uadf8\uc785\ub2c8\ub2e4.\/Record different styles and buttons.\"\n        style={styles.customDialogContainer}\n        titleStyle={styles.customDialogTitle}\n        messageStyle={styles.customDialogMessage}\n        buttons={&#91;\n          {\n            text: 'Action1',\n            onPress: () =&gt; handleCustomAction('\uc561\uc158 1 \/ Action 1'),\n            style: styles.customActionButton,\n          },\n          {\n            text: 'Action2',\n            onPress: () =&gt; handleCustomAction('\uc561\uc158 2 \/ Action 2'),\n            style: styles.customActionButton,\n          },\n        ]}\n      \/&gt;\n    &lt;\/SafeAreaView&gt;\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: '#f5f5f5',\n  },\n  scrollViewContent: {\n    paddingVertical: 30,\n    alignItems: 'center',\n  },\n  heading: {\n    fontSize: 26,\n    fontWeight: 'bold',\n    marginBottom: 20,\n    textAlign: 'center',\n    color: '#333',\n  },\n  buttonSpacer: {\n    height: 20, \/\/ \ubc84\ud2bc \uc0ac\uc774 \uac04\uaca9 \/ Spacing between buttons\n  },\n  \/\/ \ub2e4\uc774\uc5bc\ub85c\uadf8 \ubc84\ud2bc \ucee4\uc2a4\ud130\ub9c8\uc774\uc9d5 \uc608\uc2dc \/ Example of customizing a dialog button\n  cancelButton: {\n    backgroundColor: '#dc3545',\n  },\n  confirmButton: {\n    backgroundColor: '#28a745',\n  },\n  \/\/ \ucee4\uc2a4\ud140 \ub2e4\uc774\uc5bc\ub85c\uadf8 \uc2a4\ud0c0\uc77c \uc608\uc2dc \/ Example of a custom dialog style\n  customDialogContainer: {\n    backgroundColor: '#e0f7fa',\n    borderColor: '#00bcd4',\n    borderWidth: 2,\n    borderRadius: 15,\n    padding: 25,\n  },\n  customDialogTitle: {\n    color: '#006064',\n    fontSize: 24,\n    textShadowColor: 'rgba(0,0,0,0.1)',\n    textShadowOffset: {width: 1, height: 1},\n    textShadowRadius: 2,\n  },\n  customDialogMessage: {\n    color: '#00838f',\n    fontSize: 18,\n    lineHeight: 26,\n  },\n  customActionButton: {\n    backgroundColor: '#673ab7',\n    paddingVertical: 12,\n    paddingHorizontal: 25,\n    borderRadius: 8,\n  },\n});\n\nexport default FlmDialogApp;\n<\/code><\/pre>\n\n\n\n<p><strong>4.\uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"\ub2e4\uc774\uc5bc\ub85c\uadf8\/FlmDialog\" width=\"473\" height=\"840\" src=\"https:\/\/www.youtube.com\/embed\/LOudtS1vtJo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>\ud83c\udf0f \uc2a4\ud06c\ub9b0\uc0f7\/ScreenShot\uad6c\uae00\ub4dc\ub77c\uc774\ube0c\/Google Drive :https:\/\/drive.google.com\/drive\/folders\/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=drive_link \ud83d\udc49\ud83c\udffb \uc6a9\ub3c4 \/ Purpose&#8211;\uc9e7\uc740 \uc9c8\ubb38\uc774\ub098 \uc54c\ub9bc, \ud655\uc778 \uc694\uccad\uc744 \uc0ac\uc6a9\uc790\uc5d0\uac8c \uc804\ub2ec\ud558\ub294 \ub300\ud654 \uc0c1\uc790.&#8211;\uba54\uc2dc\uc9c0 \uc804\ub2ec, \ud655\uc778\/\ucde8\uc18c \ub4f1 \uac04\ub2e8\ud55c \uc758\uc0ac\uacb0\uc815 \uc694\uccad\uc5d0 \uc0ac\uc6a9\ub428.&#8211;\uc0ac\uc774\uc988\ub294 \uc791\uace0, \ub0b4\uc6a9\ub3c4 \uac04\ub2e8\ud568.\u2013 A dialog box used to present brief questions, alerts, or confirmation requests to the user.\u2013 Typically used to deliver messages or request simple decisions such as confirm\/cancel.\u2013 Small in [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,15,1],"tags":[],"class_list":["post-1770","post","type-post","status-publish","format-standard","hentry","category-reactnative","category-rnuimodule","category-uncategorized","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=1770"}],"version-history":[{"count":8,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1770\/revisions"}],"predecessor-version":[{"id":1779,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1770\/revisions\/1779"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}