HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생
/
😃
이재호팀
/
🎯
룰렛 만들기 토이프로젝트
🎯

룰렛 만들기 토이프로젝트

프로젝트 기한 : 2023.06.06 ~ 2023.06.26
🧑‍🎓
멘토님의 소중한 조언
참고 사이트
웹 룰렛 사이트
항목명과 항목을 비율을 자유롭게 설정하고, 룰렛을 작성하여 추첨할 수 있습니다. 항목마다 좋아하는 비율로 할 수 있습니다.
웹 룰렛 사이트
https://kr.web-roulette.com/normals
웹 룰렛 사이트
 
일정
To-do
0
In progress
1
Complete
4
 
요구사항 명세서
세부 기능
내용
최대 룰렛 아이템 개수
10개
비율
최대 100%가 되도록 내부적으로 계산
룰렛 돌아가는 시간
3초
룰렛 멈추는 방식 (자동 or 사용자)
자동
룰렛 타입
원형
룰렛 저장 기능
O (로컬 스토리지)
항목추가랑 룰렛 배치
가로 확정
시작버튼
룰렛 가운데
룰렛 돌아가는 대상
화살표(x) 원판 돌아감
룰렛 업데이트 이벤트
1. 항목의 내용 Input에서 focus out. 2. 항목의 비율 Input에서 focus out. 3. 항목의 체크박스 click. 4. 항목 제거(X) 버튼 click.
초기화 버튼
Refresh 아이콘 버튼 클릭하면 alert 경고창 등장하고 확인 누르면 폼 내용 초기화
결과 내역 저장하는 방법
모달처럼 가운데에 띄우고 뒤엔 블러처리 스크롤처리
항목 명 글자 수 제한
20글자
룰렛만들기 버튼
추후에 필요하면 만들기
개발 및 회의 결과
이름
텍스트
날짜
개발환경
No Framework. Only Vanilla JavaScript
Jun 6, 2023
와이어프레임 공유
손으로 그리거나, Figma 쓰거나 등등 자유롭게 와이어프레임 작성
Jun 7, 2023
1차 회의 UI
피그마 링크
Jun 7, 2023
2차 회의 UI
화살표 디자인 변경
Jun 8, 2023
3차 회의
기능 분할 및 역할 분담
Jun 9, 2023
환경설정 회의
웹팩 사용하기로 결정. 그리고 기능 세부 분할
Jun 12, 2023
리팩토링 회의
Jun 22, 2023