feat: 11-DiceRoller 과제 구현(이윤지)

[le2yunji]

📝 과제 요약

• 과제명: DiceRoller
• 소요 시간: 1시간 40분

💡 설계 및 고민한 부분

AI 없이 스스로 설계하며 가장 신경 쓴 핵심 로직이나 아키텍처(컴포넌트 구조, 상태 관리 등), 혹은 사용자 경험(UX) 개선 사항을 적어주세요.

• Dice 컴포넌트와 DiceRoller 컴포넌트를 분리하여 input 에 들어온 값만큼 Dice 컴포넌트를 렌더링하는 방식을 사용했습니다.
• 1~6에 해당하는 주사위는 정사각형을 3x3으로 나누어 각 숫자에 해당하는 위치에 점을 찍어 표현하면 되겠다고 생각했습니다.
• 그래서 Dice 컴포넌트는 1 ~ 6 사이의 값을 props로 받아 해당 값에 맞는 주사위 눈을 렌더링하도록 구현했습니다.
• 주사위 눈 위치는 diceDotPositions 상수로 분리하여 값별 점 위치를 데이터로 관리했습니다.

📖 학습한 내용 및 어려웠던 점 (선택)

문제를 풀며 새롭게 알게 된 개념이나, 구현 중 막혔던 부분이 있다면 공유해 주세요.

• input type="number"를 사용하더라도 event.target.value는 string으로 들어온다는 점을 다시 확인했습니다.
• 따라서 input 상태는 string으로 관리하고, 실제 계산이 필요한 Roll 버튼 클릭 시점에 Number()로 변환하는 방식이 더 안전하다고 판단했습니다.
• 사용자가 input 값을 지우는 순간 빈 문자열이 될 수 있기 때문에, 입력 중인 값과 계산에 사용할 값을 분리해서 생각해야 한다는 점을 배웠습니다.

❓ 질문 사항 (선택)

라이브 리뷰 때 팀원들과 함께 토론하고 싶거나 의견이 궁금한 부분이 있다면 남겨주세요.

📸 스크린샷 (선택)

UI 관련 과제인 경우 결과 화면 캡처나 GIF를 첨부해 주세요.

2026-07-25.3.08.25.mov

[k0nghaa]

방어 처리를 꼼꼼하게 해주셨군요 !!