[TOY] React로 마니또 뽑기만들기

 

친구들과 매년 크리스마스 마니또를 하는데, 종이를 찢어 뽑기를 몇 년째....

드디어 개발을 해보았다.

 

처음 마니또 뽑기를 만들 때,

단순하게, 리스트에서 본인을 제외 한 다른 사람 뽑기를 상상하고 코딩을 했는데

아니나 다를까. 랜덤 뽑기다 보니 undefined 가 나와 버렸다. 

찾아보니 sattoloCycle 이라는 알고리즘이 있다. 

 

sattoloCycle 은 모든 항목이 한 번씩만 등장하고, 자기 자신과 짝이 안 되도록 섞는 알고리즘.
이걸 쓰면 마니또처럼 “서로 다른 사람을 1:1로 매칭해야 하는 경우”에 완벽하게 들어맞는다.

function sattoloCycle<T>(arr: T[]): T[] {
  const a = arr.slice(); // 원본 배열 복사
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * i); // 0 ~ i-1 중 무작위
    [a[i], a[j]] = [a[j], a[i]];            // swap
  }
  return a;
}

🔍 작동 원리 (한 단계씩)

배열 맨 뒤(i = n-1)부터 앞으로 이동하면서
매번 앞쪽(0 ~ i-1) 중 하나와 자리를 바꿈

이 과정은 “단일 사이클(single cycle)”을 만들어냅니다.

그 결과, 누구도 자기 자리에 남지 않음 (no fixed point)
→ a[i] !== arr[i]가 항상 성립

즉, A→B, B→C, C→D, D→A 같은 “원형 관계”가 만들어집니다.

 

 

화면 소개를 해보겠다.

먼저 참가자 등록 화면이다. 마니또를 참여 할 참가자 리스트를 등록한다.

매칭 완료하기 버튼을 누르면, 매칭이 완료되고, 확인 화면이 노출된다.

미리 매칭 된 결과 값에 따라서,

본인의 이름을 적고 뽑기 버튼을 클릭하면, 본인에게 매칭된 상대를 alert으로 알려준다.

확인을 완료하면, 확인한 사람 리스트로 들어간다.

 

 

 

이렇게 마니또를 리액트로 만들어보았다~!

리액트로 이렇게 쉽게 만들어지는줄 알았으면 진작진작 만들어 볼 걸 그랬다.

+ 커서와 지피티와 리액트의 합작으로 화려한 ui까지ㅎ

디벨롭 한다면, 대상자의 핸드폰 번호를 받고, 결과를 한번에 핸드폰으로 전달하는 것이 좋을 것 같다.

이건 로컬로 할 수 있는지 확인 ..