배지/FlmBadge

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 { FlmBadge, FlmText, FlmButton } from "react-native-freelifemakers-ui";

2)사용하기 / Usage
— 기본 / Default

 <FlmBadge children="5" />

— 사용자정의 / Custom

<FlmBadge
            children="99+"
            size={34}
            textStyle={{fontSize: 10}}
            backgroundColor="#10b981"
        />

3.예제코드 / Example code

import React from 'react';
import {StyleSheet, View, Text} from 'react-native';
import {FlmBadge, FlmText, FlmButton} from 'react-native-freelifemakers-ui';

// FlmBadge 컴포넌트 사용 예시
// This is an example of how to use the FlmBadge component.
const FlmBadgeApp = () => {
  return (
    <View style={styles.container}>
      <FlmText category="subtitle" style={{marginBottom: 10}}>
        FlmBadge 컴포넌트 사용 예제 / Example of using the FlmBadge component
      </FlmText>
      <FlmText category="subtitle" style={{marginBottom: 10}}>
        다양한 크기와 색상의 배지를 표시하는 방법을 보여줍니다. / Shows how to
        display badges of different sizes and colors.
      </FlmText>

      {/* 1. 기본 사용 예시 / Basic usage example */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>단독 배지 / sole badge</Text>
        <View style={styles.exampleRow}>
          <FlmBadge children="5" />
          <FlmBadge
            children="99+"
            size={34}
            textStyle={{fontSize: 10}}
            backgroundColor="#10b981"
          />
          <FlmBadge
            children="New"
            size={38}
            textStyle={{fontSize: 10}}
            backgroundColor="#f97316"
          />
        </View>
      </View>

      {/* 2. 아이콘 옆에 배치하여 알림 표시하는 예시 */}
      {/* 2. Example of displaying notifications by placing them next to the icon */}
      <View style={styles.section}>
        <Text style={styles.sectionTitle}>알림 아이콘 / Notification icon</Text>
        <View style={styles.exampleRow}>
          {/* 알림 아이콘 역할을 하는 View */}
          {/* View that acts as a notification icon */}
          <View style={styles.iconWrapper}>
            <Text style={styles.iconText}>🔔</Text>
            {/* 배지를 절대 위치로 아이콘의 오른쪽 상단에 배치합니다. */}
            {/* Position the badge absolutely on the top-right of the icon. */}
            <FlmBadge children="1" style={styles.badgeAbsolute} />
          </View>
          <View style={styles.iconWrapper}>
            <FlmText style={styles.iconText}>📧</FlmText>
            <FlmBadge
              children="12"
              size={24}
              textStyle={{fontSize: 10}}
              style={styles.badgeAbsolute}
            />
          </View>
        </View>
      </View>

      {/* 3. `visible` prop을 사용한 표시/숨김 예시 */}
      {/* 3. Example of showing/hiding using the `visible` prop */}
      <View style={styles.section}>
        <FlmText style={styles.sectionTitle}>표시/숨김 - Show/Hide</FlmText>
        <View style={styles.exampleRow}>
          <FlmBadge children="2" visible={true} />
          <FlmBadge children="1" visible={false} />
          <FlmText style={styles.smallText}>- 보이지 않음 / invisible</FlmText>
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#fff',
  },
  section: {
    marginBottom: 30,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  exampleRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 20, // 항목 간의 간격
  },
  iconWrapper: {
    position: 'relative',
    padding: 10,
  },
  iconText: {
    fontSize: 30,
  },
  badgeAbsolute: {
    position: 'absolute',
    top: -5,
    right: -5,
  },
  smallText: {
    fontSize: 14,
    color: '#6b7280',
  },
});

export default FlmBadgeApp;