🌏 스크린샷/ScreenShot
구글드라이브/Google Drive :
https://drive.google.com/drive/folders/1hhhIYmU8kSGOUTN9wd7H9igSppl6AE71?usp=drive_link
👉🏻 용도 / Purpose
–짧은 질문이나 알림, 확인 요청을 사용자에게 전달하는 대화 상자.
–메시지 전달, 확인/취소 등 간단한 의사결정 요청에 사용됨.
–사이즈는 작고, 내용도 간단함.
– A dialog box used to present brief questions, alerts, or confirmation requests to the user.
– Typically used to deliver messages or request simple decisions such as confirm/cancel.
– Small in size and simple in content.
👉🏻 사용예 / Examples of Use
— 삭제하시겠습니까?” → 확인 / 취소 버튼
— “로그아웃하시겠습니까?”
— 경고창 / 정보창
– “Are you sure you want to delete this?” → Confirm / Cancel buttons
– “Do you want to log out?”
– Warning or informational messages
1.react-native-freelifemakers-ui NPM 모듈 설치하기 / react-native-freelifemakers-ui NPM Module Instal
npm install react-native-freelifemakers-ui2.사용하기 / Usage
1)모듈 불러오기 / import Module
import {FlmText, FlmButton, FlmDialog} from 'react-native-freelifemakers-ui';2)기본 다이얼로그 / Default Dialog
<FlmButton
title="기본 다이얼로그 열기/Open default dialog"
onPress={handleOpenBasicDialog}
/>3)확인,취소 다이얼로그 열기 / the Confirm,Cancel dialog
<FlmButton
title="확인,취소 다이얼로그 열기/Open the Confirm,Cancel dialog"
onPress={handleOpenConfirmDialog}
/>
<View style={styles.buttonSpacer} />4)커스텀 다이얼 로그 / Custom Dialog
<FlmButton
title="커스텀 다이얼로그 열기/Open custom dialog"
onPress={handleOpenCustomDialog}
/>3.예제코드 / Example code
// FlmDialogApp.js
import React, {useState} from 'react';
import {SafeAreaView, ScrollView, View, StyleSheet, Alert} from 'react-native';
import {FlmText, FlmButton, FlmDialog} from 'react-native-freelifemakers-ui';
const FlmDialogApp = () => {
const [isBasicDialogVisible, setIsBasicDialogVisible] = useState(false);
const [isConfirmDialogVisible, setIsConfirmDialogVisible] = useState(false);
const [isCustomDialogVisible, setIsCustomDialogVisible] = useState(false);
// 기본 다이얼로그 / Default Dialog
const handleOpenBasicDialog = () => {
console.log(
'기본 다이얼로그 열기 버튼 클릭됨/Open Basic Dialog button clicked',
);
setIsBasicDialogVisible(true);
};
const handleCloseBasicDialog = () => {
console.log('기본 다이얼로그 닫힘/Close the basic dialog');
setIsBasicDialogVisible(false);
};
// 확인,취소 다이얼로그 / Confirm,Cancel Dialog
const handleOpenConfirmDialog = () => {
console.log(
'확인,취소 다이얼로그 열기 버튼 클릭됨/Click the OK/Cancel dialog open button',
);
setIsConfirmDialogVisible(true);
};
const handleCloseConfirmDialog = () => {
console.log('확인,취소 다이얼로그 닫힘/Confirm,Cancel dialog closes');
setIsConfirmDialogVisible(false);
};
const handleConfirmAction = () => {
console.log(
"확인 다이얼로그 내부: '확인' 버튼 클릭됨/Inside the confirmation dialog: 'OK' button clicked",
);
Alert.alert(
'확인/Confirm',
'작업이 확인되었습니다!/Your work has been confirmed!',
);
handleCloseConfirmDialog();
};
const handleCancelAction = () => {
console.log(
"확인 다이얼로그 내부: '취소' 버튼 클릭됨/Inside the confirmation dialog: 'Cancel' button clicked",
);
Alert.alert(
'취소/Cancel',
'작업이 취소되었습니다./The operation has been cancelled.',
);
handleCloseConfirmDialog();
};
// 커스텀 다이얼로그 / Custom Dialog
const handleOpenCustomDialog = () => {
console.log(
'커스텀 다이얼로그 열기 버튼 클릭됨/Open Custom Dialog button clicked',
);
setIsCustomDialogVisible(true);
};
const handleCloseCustomDialog = () => {
console.log('커스텀 다이얼로그 닫힘/Custom dialog closed');
setIsCustomDialogVisible(false);
};
const handleCustomAction = action => {
console.log(
`커스텀 다이얼로그 내부: '${action}' 버튼 클릭됨/Inside a custom dialog: '${action}' button is clicked`,
);
Alert.alert(
'커스텀 액션/Custom Action',
`${action} 버튼이 클릭되었습니다./The ${action} button was clicked.`,
);
handleCloseCustomDialog();
};
return (
<SafeAreaView style={styles.container}>
<ScrollView contentContainerStyle={styles.scrollViewContent}>
<FlmText style={styles.heading}>FlmDialog 사용 예제</FlmText>
<FlmText style={styles.heading}>FlmDialog Usage Example</FlmText>
<FlmButton
title="기본 다이얼로그 열기/Open default dialog"
onPress={handleOpenBasicDialog}
/>
<View style={styles.buttonSpacer} />
<FlmButton
title="확인,취소 다이얼로그 열기/Open the Confirm,Cancel dialog"
onPress={handleOpenConfirmDialog}
/>
<View style={styles.buttonSpacer} />
<FlmButton
title="커스텀 다이얼로그 열기/Open custom dialog"
onPress={handleOpenCustomDialog}
/>
<View style={styles.buttonSpacer} />
</ScrollView>
{/* 오버레이가 화면전체를 덮게 하기 위해서 FlmDialog 컴포넌트들을 ScrollView 밖에 설정 */}
{/* 이렇게 하면 SafeAreaView를 기준으로 오버레이가 작동. */}
{/* Set FlmDialog components outside ScrollView to make overlay cover the entire screen */}
{/* This makes overlay work based on SafeAreaView. */}
{/* 기본 다이얼로그 / Default Dialog */}
<FlmDialog
isVisible={isBasicDialogVisible}
onClose={handleCloseBasicDialog}
title="알림/Notification"
message="이것은 기본적인 알림 다이얼로그입니다./This is a basic notification dialog."
buttons={[{text: '닫기/Close', onPress: handleCloseBasicDialog}]}
/>
{/* 확인,취소 다이얼로그 / Confirm, Cancle Dialog */}
<FlmDialog
isVisible={isConfirmDialogVisible}
onClose={handleCloseConfirmDialog}
title="확인 필요/Confirmation required"
message="이 작업을 계속하시겠습니까?/Do you want to continue with this task?"
buttons={[
{
text: 'Cancle',
onPress: handleCancelAction,
style: styles.cancelButton,
},
{
text: 'Confirm',
onPress: handleConfirmAction,
style: styles.confirmButton,
},
]}
/>
{/* 커스텀 스타일 다이얼로그 / Custom Style Dialog */}
<FlmDialog
isVisible={isCustomDialogVisible}
onClose={handleCloseCustomDialog}
title="특별한 알림!/Special reminder!"
message="다양한 스타일과 버튼을 가진 다이얼로그입니다./Record different styles and buttons."
style={styles.customDialogContainer}
titleStyle={styles.customDialogTitle}
messageStyle={styles.customDialogMessage}
buttons={[
{
text: 'Action1',
onPress: () => handleCustomAction('액션 1 / Action 1'),
style: styles.customActionButton,
},
{
text: 'Action2',
onPress: () => handleCustomAction('액션 2 / Action 2'),
style: styles.customActionButton,
},
]}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#f5f5f5',
},
scrollViewContent: {
paddingVertical: 30,
alignItems: 'center',
},
heading: {
fontSize: 26,
fontWeight: 'bold',
marginBottom: 20,
textAlign: 'center',
color: '#333',
},
buttonSpacer: {
height: 20, // 버튼 사이 간격 / Spacing between buttons
},
// 다이얼로그 버튼 커스터마이징 예시 / Example of customizing a dialog button
cancelButton: {
backgroundColor: '#dc3545',
},
confirmButton: {
backgroundColor: '#28a745',
},
// 커스텀 다이얼로그 스타일 예시 / Example of a custom dialog style
customDialogContainer: {
backgroundColor: '#e0f7fa',
borderColor: '#00bcd4',
borderWidth: 2,
borderRadius: 15,
padding: 25,
},
customDialogTitle: {
color: '#006064',
fontSize: 24,
textShadowColor: 'rgba(0,0,0,0.1)',
textShadowOffset: {width: 1, height: 1},
textShadowRadius: 2,
},
customDialogMessage: {
color: '#00838f',
fontSize: 18,
lineHeight: 26,
},
customActionButton: {
backgroundColor: '#673ab7',
paddingVertical: 12,
paddingHorizontal: 25,
borderRadius: 8,
},
});
export default FlmDialogApp;
4.스크린샷/ScreenShot