feat/PD_SLD 대본 박스 구현

[wonellyho]

📌 관련 이슈

• close feat: PD_SLD 대본 박스 개발 #7

✨ 변경 내용

• 슬라이드 이름 변경 토글
• 이모지 토글
• 대본 변경 기록 토글
• 의견 토글
• 전체 script 섹션 열고 닫기 구현
• 컴포넌트 분리

💡 참고 사항

1. 스크린샷

2. 추후에 view 컴포넌트(이모지, 변경기록, 의견), 로직 분리 (상태/핸들러 바깥으로 빼기) 작업을 진행할 예정입니다.(화이팅)
3. 피그마UI 에 있는 아이콘들은 src/assets/icons에 저장하여 방식으로 삽입했습니다.
4. 토글 반복 동작은 hooks/useToggle.ts 를 만들어 처리했습니다.

---

refactor

1. ScriptBox의 상태/핸들러(로직)는 유지하고, 상단바 위젯(이모지/변경기록/의견/슬라이드제목)을 props 기반 뷰 컴포넌트로 분리하였습니다.
2. 추후 서버 데이터/요청 로직은 ScriptBox(컨테이너)에 집중시키고, 자식들은 전달받은 props로 렌더링만 수행하도록 구조화할 것입니다. (워크북 실습처럼)

[gemini-code-assist]

Summary of Changes

Hello @wonellyho, 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은 슬라이드 대본을 관리하기 위한 ScriptBox 컴포넌트를 새롭게 추가합니다. 이 컴포넌트는 슬라이드 이름 변경, 이모지 반응 표시, 대본 변경 기록 확인, 의견 작성 및 관리, 그리고 전체 대본 섹션의 확장/축소와 같은 다양한 인터랙티브 기능을 제공하여 사용자 경험을 향상시킵니다.

Highlights

• 슬라이드 대본 박스 구현: 슬라이드 대본을 관리하고 상호작용할 수 있는 새로운 ScriptBox 컴포넌트가 추가되었습니다.
• 토글 기능 추가: 슬라이드 이름 변경, 이모지 반응, 대본 변경 기록, 의견 섹션, 그리고 전체 스크립트 섹션을 열고 닫는 다양한 토글 기능이 구현되었습니다.
• 커스텀 훅 useToggle: 재사용 가능한 useToggle 커스텀 훅이 추가되어 불리언 상태 관리를 효율적으로 처리합니다.
• 새로운 SVG 아이콘: 새로고침, 답글, 작은 화살표, 휴지통 기능을 위한 SVG 아이콘들이 추가되었습니다.

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

안녕하세요! 대본 박스 UI 및 토글 기능 구현을 위한 PR 잘 보았습니다. 전반적으로 기능 구현이 잘 이루어진 것 같습니다. 특히 useToggle 훅을 만들어 반복되는 토글 로직을 추상화한 점이 인상 깊습니다.

코드 리뷰에서는 몇 가지 개선점을 제안드렸습니다. 주로 React 컨벤션, 코드 일관성, 웹 접근성, 그리고 JSX 문법 정확성에 대한 내용입니다. 예를 들어, useState 상태 설정 함수의 네이밍 컨벤션, 변수명의 오타 수정, <img> 태그의 alt 속성 추가, 그리고 JSX 내 올바른 주석 사용법에 대해 코멘트를 남겼습니다.

PR 설명에 남겨주신 것처럼 추후에 컴포넌트를 분리하고 로직을 개선하면 가독성과 유지보수성이 훨씬 좋아질 것으로 기대됩니다. 좋은 코드 감사합니다!

[AndyH0ng]

우앗 수고하셨습니다!