fix: 슬라이드 제목 fallback/편집 동작 정리 (#315)

[PeraSite]

📌 관련 이슈

• close fix: 슬라이드 제목이 슬라이드 N으로 보이는 문제 #315

✨ 변경 내용

• 슬라이드 제목 관련 타입을 nullable 기준으로 정리해(title: string | null) API DTO/공유 타입/셀렉터에서 title 미설정 케이스를 안전하게 처리했습니다.
• getSlideTitle 공통 유틸을 추가하고, Slide/Feedback/Insight/ScriptBulkEdit 등 슬라이드 이름 렌더링 지점을 전부 동일 규칙으로 통일했습니다.
  • title이 있으면 해당 title 표시
  • title이 없으면 슬라이드 N 표시
• 슬라이드 이름 변경 popover 입력 UX를 수정했습니다.
  • title이 없을 때 input은 비어있게 유지
  • fallback은 placeholder로만 노출
• useUpdateSlide에 optimistic update + rollback을 추가해 제목 변경 시 캐시 반영 지연을 줄이고 실패 시 이전 값으로 복구되도록 했습니다.
• 회귀 방지 테스트를 추가했습니다.
  • src/hooks/queries/useSlides.test.tsx
  • src/utils/slideTitle.test.ts
  • src/components/slide/script/ScriptBulkEditModal.test.tsx
  • src/components/insight/RecentCommentsSection.test.tsx

💡 참고 사항

• 검증
  • npm run type-check
  • npm run test -- src/hooks/queries/useSlides.test.tsx src/utils/slideTitle.test.ts src/components/insight/RecentCommentsSection.test.tsx src/components/slide/script/ScriptBulkEditModal.test.tsx
  • npx -y react-doctor@latest . --verbose --diff (96/100, 기존 경고 10건)

[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!

이 Pull Request는 슬라이드 제목 처리 로직을 표준화하고, 사용자 경험을 개선하며, 데이터 일관성과 애플리케이션의 반응성을 향상시키는 데 중점을 둡니다. 제목이 없는 슬라이드에 대한 일관된 대체 텍스트 제공, 제목 편집 UI의 직관성 강화, 그리고 데이터 변경 시 즉각적인 피드백과 오류 복구 메커니즘을 도입하여 전반적인 시스템 견고성을 높였습니다.

Highlights

• 슬라이드 제목 타입 통일: 슬라이드 제목 관련 타입을 string | null로 통일하여 API DTO, 공유 타입, 셀렉터 등 전반적인 코드베이스에서 제목 미설정 케이스를 안전하게 처리하도록 변경했습니다.
• 슬라이드 제목 렌더링 유틸리티 도입: getSlideTitle 공통 유틸리티를 추가하여 슬라이드 제목이 없을 경우 '슬라이드 N'으로 표시하고, 있을 경우 해당 제목을 표시하는 일관된 렌더링 규칙을 적용했습니다. 이는 Slide, Feedback, Insight, ScriptBulkEdit 등 여러 화면에 반영되었습니다.
• 슬라이드 이름 변경 UX 개선: 슬라이드 이름 변경 팝오버의 입력 UX를 개선했습니다. 제목이 없을 때는 입력 필드를 비워두고, 대체 텍스트는 placeholder로만 노출되도록 하여 사용자 경험을 향상시켰습니다.
• 낙관적 업데이트 및 롤백 구현: useUpdateSlide 훅에 낙관적 업데이트(optimistic update)와 롤백(rollback) 기능을 추가하여 슬라이드 제목 변경 시 캐시 반영 지연을 줄이고, API 호출 실패 시 이전 값으로 복구되도록 안정성을 높였습니다.
• 회귀 방지 테스트 추가: 주요 기능 변경에 대한 회귀 방지 테스트를 추가하여 코드의 안정성을 확보했습니다. (useSlides 훅, slideTitle 유틸리티, ScriptBulkEditModal, RecentCommentsSection).

Changelog

• src/api/dto/analytics.dto.ts
  • SlideAnalyticsDto, SlideRetentionDto, RecentCommentSlideDto 인터페이스에서 title 속성 타입을 string | null로 변경했습니다.
• src/api/dto/scripts.dto.ts
  • ProjectScriptItemDto 인터페이스에 title?: string | null 속성을 추가했습니다.
• src/api/dto/slides.dto.ts
  • CreateSlideResponseDto, GetSlideResponseDto, UpdateSlideResponseDto 인터페이스에서 title 속성 타입을 string | null로 변경했습니다.
• src/api/dto/video.dto.ts
  • VideoSlideTimelineItemDto 인터페이스에 title: string | null 속성을 추가했습니다.
• src/components/comment/Comment.tsx
  • 슬라이드 참조 레이블을 표시할 때 getSlideTitle 유틸리티를 사용하도록 업데이트했습니다.
• src/components/common/TitleEditorPopover.tsx
  • useEffect를 제거하고 inputTitle, inputPlaceholder 프롭스를 추가하여 제목 편집 팝오버의 초기 상태 및 플레이스홀더 동작을 개선했습니다.
  • 팝오버 컴포넌트에 key 프롭스를 추가하여 inputTitle 또는 inputPlaceholder 변경 시 상태를 재설정하도록 했습니다.
• src/components/feedback/SlideViewer.tsx
  • 슬라이드 이미지의 alt 텍스트에 getSlideTitle 유틸리티를 적용하여 일관된 제목을 표시하도록 했습니다.
• src/components/feedback/slide/SlideInfoPanel.tsx
  • SlideTitle 컴포넌트의 fallbackTitle에 getSlideTitle 유틸리티를 사용하도록 변경했습니다.
• src/components/feedback/video/SlideWebcamStage.tsx
  • 활성 슬라이드 이미지의 alt 텍스트에 getSlideTitle 유틸리티를 적용했습니다.
• src/components/insight/DropOffAnalysisSection.tsx
  • 슬라이드 썸네일의 alt 텍스트에 getSlideTitle 유틸리티를 사용하도록 변경했습니다.
• src/components/insight/RecentCommentsSection.test.tsx
  • 제목이 있을 때와 null일 때 RecentCommentsSection이 올바른 슬라이드 제목을 렌더링하는지 확인하는 테스트 케이스를 추가했습니다.
• src/components/insight/RecentCommentsSection.tsx
  • 최근 댓글 섹션에서 슬라이드 레이블을 표시할 때 getSlideTitle 유틸리티를 사용하도록 업데이트했습니다.
• src/components/slide/SlideThumbnail.tsx
  • 슬라이드 썸네일의 alt 텍스트에 getSlideTitle 유틸리티를 적용하여 일관된 제목을 표시하도록 했습니다.
• src/components/slide/SlideViewer.tsx
  • 슬라이드 뷰어에서 슬라이드 이미지의 alt 텍스트에 imageAlt 변수를 사용하도록 변경했습니다.
• src/components/slide/script/ScriptBulkEditModal.test.tsx
  • 스크립트 일괄 편집 모달에서 슬라이드 제목이 null일 때와 존재할 때 올바르게 렌더링되는지 확인하는 테스트 케이스를 추가했습니다.
• src/components/slide/script/ScriptBulkEditModal.tsx
  • 스크립트 일괄 편집 모달에서 슬라이드 이미지의 alt 텍스트와 텍스트 영역의 aria-label에 getSlideTitle 유틸리티를 사용하도록 변경했습니다.
• src/components/slide/script/SlideTitle.tsx
  • SlideTitle 컴포넌트의 resolvedFallback 및 resolvedTitle 로직을 getSlideTitle 유틸리티를 사용하도록 재구성했습니다.
  • SlideTitleEditable 컴포넌트에 inputTitle과 inputPlaceholder 프롭스를 추가하여 TitleEditorPopover에 전달하도록 변경했습니다.
  • 슬라이드 제목 저장 로직에 낙관적 업데이트와 오류 발생 시 이전 제목으로 롤백하는 기능을 추가했습니다.
• src/hooks/UseSlideSelectors.test.tsx
  • useSlideTitle 훅이 슬라이드 제목이 없을 때 빈 문자열 대신 null을 반환하는지 확인하는 테스트를 업데이트했습니다.
  • useSlideTitle 훅이 null 제목을 올바르게 유지하는지 확인하는 테스트를 추가했습니다.
• src/hooks/queries/useSlides.test.tsx
  • useUpdateSlide 훅의 낙관적 업데이트가 상세 및 목록 캐시를 올바르게 업데이트하고 서버 응답 값을 유지하는지 확인하는 테스트를 추가했습니다.
  • 뮤테이션 실패 시 낙관적 캐시가 롤백되는지 확인하는 테스트를 추가했습니다.
• src/hooks/queries/useSlides.ts
  • useUpdateSlide 훅에 낙관적 업데이트를 위한 onMutate, onError, onSuccess 콜백을 구현하여 캐시를 즉시 업데이트하고 실패 시 롤백하도록 했습니다.
• src/hooks/useInsightPageModel.ts
  • 인사이트 페이지 모델에서 드롭오프 슬라이드, 이탈 분석 섹션, 슬라이드 유지율 차트 등 다양한 위치에서 슬라이드 제목을 표시할 때 getSlideTitle 유틸리티를 사용하도록 변경했습니다.
• src/hooks/useSlideSelectors.ts
  • useSlideTitle 훅이 슬라이드 제목이 없을 때 빈 문자열 대신 null을 반환하도록 수정했습니다.
• src/mocks/analytics.ts
  • 목업 슬라이드 분석 데이터를 생성할 때 getSlideTitle 유틸리티를 사용하여 제목을 설정하도록 변경했습니다.
• src/pages/FeedbackSlidePage.tsx
  • 피드백 슬라이드 페이지에서 현재 슬라이드 이미지의 alt 텍스트와 SlideTitle 컴포넌트의 fallbackTitle에 getSlideTitle 유틸리티를 사용하도록 변경했습니다.
• src/pages/feedback/useFeedbackVideo.ts
  • mapSlidesByTimeline 함수가 타임라인 항목에 title?: string | null을 허용하도록 변경하고, 슬라이드 제목을 생성할 때 getSlideTitle 유틸리티를 사용하도록 했습니다.
• src/types/recording.ts
  • convertToRecordingSlides 함수에서 녹화 슬라이드 제목을 설정할 때 getSlideTitle 유틸리티를 사용하도록 변경했습니다.
• src/types/share.ts
  • SharedPresentationSlide 인터페이스에서 title 속성 타입을 string | null로 변경했습니다.
• src/types/slide.ts
  • SlideListItem 인터페이스에서 title 속성 타입을 string | null로 변경했습니다.
• src/utils/sharedContent.ts
  • normalizeSharedSlides 함수에서 공유된 슬라이드 제목을 설정할 때 getSlideTitle 유틸리티를 사용하도록 변경했습니다.
• src/utils/slideTitle.test.ts
  • getSlideTitle 유틸리티의 동작을 검증하는 새로운 테스트 파일을 추가했습니다.
• src/utils/slideTitle.ts
  • 슬라이드 제목이 없거나 공백일 경우 '슬라이드 N'을 반환하는 getSlideTitle 유틸리티 함수를 새로 추가했습니다.

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

전반적으로 훌륭한 수정입니다. 슬라이드 제목이 null일 수 있는 경우를 처리하기 위해 타입 정의를 업데이트하고, getSlideTitle 유틸리티를 도입하여 fallback 로직을 중앙에서 관리하도록 한 점이 인상적입니다. 이를 통해 코드베이스 전반에 걸쳐 일관성을 크게 향상시켰습니다. 또한 useUpdateSlide 훅에 낙관적 업데이트(optimistic update)와 롤백 로직을 추가하여 사용자 경험을 개선한 점도 좋습니다. 회귀를 방지하기 위한 테스트 케이스 추가도 잘 이루어졌습니다. 몇 가지 사소한 개선 제안을 남겼으니 확인 부탁드립니다.