[SecureGen] 기능 추가 - 비밀번호 생성 히스토리 관리

2025.06.22 - [IT 정보/AI 활용 앱개발] - 첫 화면 개발

첫 화면 개발

 

 

---

 

Q : 생성한 비밀번호의 내역을 관리하고 싶어. 5개정도 화면 하단에서 목록으로 확인할 수 있게 해주고, 목록을 길게 누를 때 복사되도록 만들어줘

---

 

좋아, 아주 실용적인 기능이야! 👍
사용자가 생성한 최근 비밀번호 5개를 하단 리스트로 보여주고, 길게 눌렀을 때 클립보드에 복사되도록 구현해볼게. 아래 코드는 기존 UI 코드에 기능을 확장한 버전이야:

---

🔧 주요 변경 사항

1. 최근 비밀번호 내역 state (history) 추가
2. 비밀번호 생성 시 내역에 push (최대 5개 유지)
3. FlatList로 하단에 내역 렌더링
4. 길게 누르면 복사 및 알림 표시

---

✅ 업데이트된 주요 코드 부분

import { FlatList, TouchableOpacity, ToastAndroid, Platform } from 'react-native';
...

const [history, setHistory] = useState([]);

const generatePassword = () => {
  ...
  setPassword(pw);

  // 히스토리 업데이트: 새 항목을 앞에 추가, 최대 5개 유지
  setHistory(prev => {
    const updated = [pw, ...prev];
    return updated.slice(0, 5);
  });
};

const handleCopy = (pw) => {
  Clipboard.setString(pw);
  if (Platform.OS === 'android') {
    ToastAndroid.show('복사되었습니다: ' + pw, ToastAndroid.SHORT);
  } else {
    Alert.alert('복사 완료!', pw);
  }
};

---

🧾 FlatList UI 추가

<Text style={{ fontSize: 16, fontWeight: 'bold', marginTop: 30 }}>최근 생성한 비밀번호</Text>
<FlatList
  data={history}
  keyExtractor={(item, index) => index.toString()}
  renderItem={({ item }) => (
    <TouchableOpacity
      onLongPress={() => handleCopy(item)}
      style={styles.historyItem}
    >
      <Text style={styles.historyText}>{item}</Text>
    </TouchableOpacity>
  )}
/>

---

🎨 스타일 예시

historyItem: {
  padding: 10,
  marginTop: 5,
  backgroundColor: '#f0f0f0',
  borderRadius: 5,
},
historyText: {
  fontSize: 16,
  color: '#333',
},

---

이제 새 비밀번호를 생성하면 아래에 5개까지 저장되고, 길게 누르면 복사 + 알림까지 표시돼. 너무 자연스럽게 들어가는 기능이라 UX도 좋아질 거야!

혹시 리스트 항목 옆에 "아이콘"을 넣어서 복사 버튼처럼 보이게 하고 싶거나, 더 많은 히스토리 관리 기능(예: 삭제, 고정 등)을 추가하고 싶다면 알려줘 😎📱✨

 

---

 

 

히스토리 기능 추가 화면

 

 

 

---

 

반응형

 

---

 

Q : 업데이트를 위해 추가된 라이브러리 설치도 알려줄래

 

---

 

 

물론이지! 👨‍💻 방금 구현한 최근 비밀번호 내역 관리 기능을 위해 필요한 라이브러리는 다음과 같아:

---

📦 필요한 라이브러리 요약

라이브러리 설치 명령어 설명

@react-native-community/slider	이미 설치했다면 생략 가능	비밀번호 길이 조절용 슬라이더
react-native-paper	npm install react-native-paper	스위치, 체크박스 등 UI 컴포넌트 용 (선택 사항)
react-native-vector-icons	npm install react-native-vector-icons	Paper UI 아이콘 연동 또는 직접 아이콘 사용시
FlatList	내장 (React Native 기본 제공)	최근 비밀번호 목록 구현
Clipboard	React Native 내장 or 패키지 depending on 버전	클립보드 복사 기능
ToastAndroid / Alert	내장	복사 완료 시 피드백 제공 (Android/공통)

👉 Clipboard 사용 시 현재 React Native 버전이 최신이라면 기본적으로 지원되며, 예전 버전에서는 @react-native-clipboard/clipboard 패키지로 따로 설치할 수 있어:

npm install @react-native-clipboard/clipboard

그리고 설치 후에는 다음처럼 임포트해줘야 해:

import Clipboard from '@react-native-clipboard/clipboard';

---

필요하다면 history 리스트를 Redux나 Context API로 관리하도록 구조를 확장할 수도 있어.
혹시 최근 비밀번호를 앱 종료 후에도 유지하고 싶다면 AsyncStorage 연동도 추천해! 다음 단계로 해보고 싶어? 😎🔐📲