feat: 대본 읽기 속도 설정, 계산 추가 (#311)

[PeraSite]

📌 관련 이슈

• close feat: 대본 시간 측정 기능 #311

✨ 변경 내용

• 대본 읽기 속도 설정 모달을 추가하고 프리셋 드롭다운 + 200~400 범위 슬라이더로 속도 조절 UX를 구성했습니다.
• 읽기 속도 저장 구조를 정수값(분당 글자수) 기반으로 정리하고, 대본 길이/예상 시간 계산 유틸 및 테스트를 추가했습니다.
• 현재 대본/전체 대본 예상 시간을 속도 변경에 맞춰 연동하고, 대본 하단 시간+설정 버튼의 클릭 영역을 확장했습니다.

💡 참고 사항

• 검증
  • npm run test -- src/utils/scriptDuration.test.ts
  • npm run type-check
  • npx -y react-doctor@latest . --verbose --diff

[gemini-code-assist]

Summary of Changes

Hello @PeraSite, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 사용자가 대본 읽기 속도를 설정하고, 이에 따라 현재 슬라이드 및 전체 대본의 예상 읽기 시간을 실시간으로 확인할 수 있도록 하는 기능을 추가합니다. 이를 통해 발표 준비 시 시간 관리를 더욱 효율적으로 할 수 있도록 사용자 경험을 개선했습니다.

Highlights

• 읽기 속도 설정 모달 추가: 대본 읽기 속도를 설정할 수 있는 모달이 추가되었으며, 프리셋 드롭다운과 200~400 범위의 슬라이더를 통해 사용자 친화적인 속도 조절 UX를 제공합니다.
• 읽기 속도 저장 및 계산 로직 개선: 읽기 속도 저장 구조가 분당 글자수(정수값) 기반으로 정리되었고, 대본 길이 및 예상 시간 계산 유틸리티와 관련 테스트가 추가되었습니다.
• 예상 시간 연동 및 UI 개선: 현재 대본 및 전체 대본의 예상 시간이 설정된 읽기 속도에 맞춰 실시간으로 연동되며, 대본 하단에 있는 시간 및 설정 버튼의 클릭 영역이 확장되어 사용 편의성이 향상되었습니다.

Changelog

• src/assets/icons/icon-setting.svg
  • 설정 아이콘을 위한 새로운 SVG 파일이 추가되었습니다.
• src/components/slide/script/ScriptBoxContent.tsx
  • 읽기 속도 설정 모달을 열기 위한 버튼이 추가되었습니다.
  • 현재 슬라이드의 예상 읽기 시간을 표시하고, 속도 변경에 따라 연동되도록 업데이트되었습니다.
• src/components/slide/script/ScriptBulkEditModal.tsx
  • 전체 대본의 예상 읽기 시간을 계산하고 모달 내에 표시하도록 수정되었습니다.
• src/components/slide/script/ScriptReadingSpeedModal.tsx
  • 읽기 속도 프리셋 선택 드롭다운과 속도 조절 슬라이더를 포함하는 새로운 모달 컴포넌트가 추가되었습니다.
• src/hooks/index.ts
  • 새로운 useScriptReadingSpeed 훅이 내보내지도록 업데이트되었습니다.
• src/hooks/useScriptReadingSpeed.ts
  • 읽기 속도 상태를 관리하고 관련 옵션 및 프리셋 정보를 제공하는 새로운 커스텀 훅이 추가되었습니다.
• src/stores/scriptReadingSpeedStore.ts
  • 읽기 속도 설정을 영구적으로 저장하고 관리하기 위한 Zustand 스토어가 추가되었습니다.
• src/utils/scriptDuration.test.ts
  • 새로 추가된 scriptDuration 유틸리티 함수들에 대한 단위 테스트가 작성되었습니다.
• src/utils/scriptDuration.ts
  • 대본의 읽을 수 있는 글자 수를 세고, 대본 예상 시간을 계산하며, 읽기 속도를 정규화하고, 시간을 포맷하는 유틸리티 함수들이 추가되었습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

대본 읽기 속도 설정 및 계산 기능 추가에 대한 PR을 리뷰했습니다. Zustand를 사용한 상태 관리와 영속성 처리, 상세한 테스트를 포함한 유틸리티 함수, 그리고 기존 컴포넌트들과의 통합까지 매우 견고하게 구현되었습니다. 엣지 케이스와 성능(Map을 사용한 조회, 숨겨진 컴포넌트에 대한 쿼리 비활성화 등)에 대한 고려가 돋보여 코드 품질이 매우 높습니다. 일관성과 유지보수성을 더욱 향상시킬 수 있는 몇 가지 제안 사항을 남깁니다.