🔀 Random Picker

이번엔 누가 할래? 쓸모 있는 랜덤 피커

👩🏻‍💻 프로젝트

• 진행기간: 2024.02.12 ~ 2024.02.20
• 배포링크: 🔀 Random Picker
• 회고기록: 랜덤 추첨기 프로젝트 배움 기록
• 이슈관리: Github Projects
• 레퍼런스: random-presenter-picker

🖼️ 완성 화면

라이트 모드

random-picker-light.mov

다크 모드

random-picker-dark.mov

🛠️ 기술 스택

• 개발 언어: TypeScript React
• 스타일: emotion
• 빌드: vite
• 배포: vercel

🎨 화면별 요구사항

Figma Wireframe

MainPage.tsx 메인 화면

• 타이틀은 랜덤 피커로 한다.
• 다크/라이트 모드를 사용할 수 있으며, 새로고침이나 페이지 이동을 하더라도 모드가 유지된다.
• 타이틀 하단에 타이틀 이미지가 뜨며, 다크/라이트 모드에 따라 다른 이미지가 뜬다.
• 참여자 설정 버튼을 누르면 → 참여자 설정 화면으로 이동한다.
• 당첨자 뽑기 버튼을 눌렀을 때, 등록된 참여자가 있다면 → 당첨자 뽑기 화면으로 이동한다.
• 당첨자 뽑기 버튼을 눌렀을 때, 등록된 참여자가 없다면 → 참여자를 먼저 입력해 주세요. \n참여자 설정 화면으로 이동합니다. 알럿이 뜨며 참여자 설정 화면으로 이동한다.

SettingPage.tsx 참여자 설정 화면

• 타이틀은 랜덤 피커로 한다.
• 다크/라이트 모드를 사용할 수 있으며, 새로고침이나 페이지 이동을 하더라도 모드가 유지된다.
• 설명 문구는 참여자를 입력해 주세요 (6자 이하) 로 한다.
• input에 아무것도 입력하지 않고 입력 버튼을 누르면 → 이름을 입력해 주세요. 알럿이 뜬다.
• input에 6자를 초과해 입력하여 입력 버튼을 누르면 → 참여자 이름은 6자 이하로 입력해 주세요. 알럿이 뜬다.
• input에 아무것도 입력하지 않고 완료 버튼을 누르면 → 1명 이상의 참여자 이름을 입력해 주세요. 알럿이 뜬다.
• 이름 input에 이름을 입력하면 → 참여자 리스트에 입력한 이름이 보여진다.
• 참여자는 최대 10명까지 입력할 수 있으며, 10명을 초과하면 참여자는 10명까지만 입력할 수 있어요. 알럿이 뜬다.
• 초기화 버튼을 누르면 → 모든 참여자 이름이 삭제된다.
• 참여자 이름을 모두 입력한 후 완료 버튼을 누르면 → 참여자 리스트업이 완료되었습니다. 알럿이 뜨며 → 메인 화면으로 이동한다.
• 다른 화면을 거쳐 다시 들어오더라도 등록된 리스트를 확인할 수 있다.

ConfirmPage.tsx 참여자 확인 화면

• 타이틀은 랜덤 피커로 한다.
• 다크/라이트 모드를 사용할 수 있으며, 새로고침이나 페이지 이동을 하더라도 모드가 유지된다.
• 설명 문구는 참여자를 확인해 주세요. 로 한다.
• 등록된 참여자 리스트를 한번 더 확인할 수 있도록 리스트가 뜬다.
• 리스트 하단의 확인 버튼을 누르면 → 로딩 화면으로 이동한다.

LoadingPage.tsx 로딩 화면

• 타이틀은 랜덤 피커로 한다.
• 다크/라이트 모드를 사용할 수 있으며, 새로고침이나 페이지 이동을 하더라도 모드가 유지된다.
• 설명 문구는 당첨자 뽑는 중.. 잠시만 기다려주세요 🙏🏻 로 한다.
• 로딩 중일 때는 → 프로세스가 진행 중이라는 gif가 4초동안 보여진다.
• 4초 이후 → 당첨자 확인 화면으로 이동한다.

WinnerPage.tsx 당첨자 확인 화면

• 타이틀은 랜덤 피커로 한다.
• 다크/라이트 모드를 사용할 수 있으며, 새로고침이나 페이지 이동을 하더라도 모드가 유지된다.
• 로딩 화면이 끝나면 → 랜덤으로 뽑힌 1명의 당첨자 이름과 함께 축하 gif가 뜬다.
• 당첨자 확인 화면 하단의 홈으로 버튼을 누르면 → 메인 화면으로 이동한다.
• 당첨자 확인 화면 하단의 다시하기 버튼을 누르면 → 랜덤 픽 프로세스 4초 동안 로딩 화면이 뜬다.
• 랜덤 픽 프로세스는 무한 반복할 수 있다.