deploy: 3.0.0 배포 (#214)

[AndyH0ng]

📌 관련 이슈

• close deploy: 3.0.0 배포 #214

💡 참고 사항

스크린샷, 참고 링크, 추가 설명 등 (없으면 생략 가능)

[gemini-code-assist]

Summary of Changes

Hello @AndyH0ng, 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은 사용자 인터페이스의 반응성과 편의성을 크게 개선하고, 소셜 공유 기능을 확장하는 데 중점을 둡니다. 모바일 환경에서 헤더 요소들의 가시성을 최적화하고, 사용자 메뉴에 테마 변경 기능을 추가하여 개인화된 경험을 제공합니다. 또한, 인스타그램 공유 방식을 현대적인 QR 코드 기반으로 전환하여 공유 과정을 간소화했습니다. 전반적으로 사용자 경험을 향상시키고 코드의 재사용성을 높이는 변경사항들이 포함되어 있습니다.

Highlights

• 반응형 UI 개선: 모바일 환경에서 헤더 버튼의 텍스트를 숨기고 아이콘만 표시하는 iconOnlyOnMobile prop을 추가하여 UI 반응성을 향상했습니다.
• 사용자 메뉴 및 테마 토글 기능 추가: 기존 드롭다운을 Popover 컴포넌트로 교체하고, 사용자 정보 표시와 함께 다크/라이트 모드 테마를 전환할 수 있는 기능을 추가했습니다.
• 인스타그램 QR 코드 공유 기능 구현: 인스타그램 공유 방식을 QR 코드 기반으로 변경하여, 모바일에서는 스토리 딥링크를 시도하고 웹에서는 QR 코드 이미지 다운로드 후 인스타그램으로 이동하도록 개선했습니다.
• 피드백 헤더 정보 중앙화: 발표 및 공유 콘텐츠의 제목, 게시자, 게시일 등 헤더에 표시되는 정보를 useFeedbackHeaderInfo라는 새로운 커스텀 훅으로 통합하여 관리합니다.
• 스크립트 표시 스타일 개선: 스크립트 패널 및 슬라이드 정보 패널의 텍스트 스타일을 pre-wrap, leading-relaxed, break-words 등으로 업데이트하여 가독성을 높였습니다.

Changelog

• src/components/common/layout/HeaderButton.tsx
  • Added iconOnlyOnMobile prop to HeaderButtonProps.
  • Implemented conditional rendering to hide button text on mobile when iconOnlyOnMobile is true and an icon is present.
  • Adjusted button styling to justify-center when text is hidden on mobile.
• src/components/common/layout/LoginButton.tsx
  • Replaced Dropdown component with Popover for the user menu.
  • Added useLocation and useThemeStore hooks.
  • Introduced isSlideRoute and isDark state variables.
  • Applied iconOnlyOnMobile prop to HeaderButton instances for guest and non-social users.
  • Redesigned the user menu content within Popover to include user details, a theme toggle, logout, and withdraw options.
  • Updated styling for the user menu trigger button and its content.
• src/components/common/layout/PresentationTitleEditor.tsx
  • Added useLocation hook.
  • Introduced titleOverride prop to PresentationTitleEditorProps.
  • Added titleClassName prop to PresentationTitleEditorProps and PresentationTitleEditorEditable.
  • Implemented logic to determine resolvedTitle using titleOverride or presentation title.
  • Added isProjectTabPath to apply specific titleClassName for project tab routes.
  • Passed titleClassName to TitleEditorPopover and PresentationTitleEditorEditable.
• src/components/common/layout/ShareButton.tsx
  • Added useLocation hook and isSlideRoute variable.
  • Applied iconOnlyOnMobile prop to the HeaderButton for the share button based on isSlideRoute.
• src/components/feedback/FeedbackHeaderCenter.tsx
  • Removed direct useParams, usePresentation, and dayjs imports.
  • Replaced with useFeedbackHeaderInfo hook to fetch header data.
• src/components/feedback/FeedbackHeaderLeft.tsx
  • Removed direct useParams, usePresentation, and dayjs imports.
  • Replaced with useFeedbackHeaderInfo hook to fetch header data.
  • Passed titleOverride from useFeedbackHeaderInfo to PresentationTitleEditor.
• src/components/feedback/ScriptPanel.tsx
  • Updated script container styling to rounded-2xl border border-gray-200 pb-4.
  • Modified script text styling to leading-relaxed wrap-break-word and whiteSpace: 'pre-wrap'.
• src/components/feedback/slide/SlideInfoPanel.tsx
  • Updated script container styling to rounded-2xl border border-gray-200 pb-4.
  • Modified script text styling to leading-relaxed break-words and whiteSpace: 'pre-wrap'.
• src/components/share/share-modal/ShareModal.tsx
  • Changed shareToInstagram import to shareQrToInstagram.
  • Updated Instagram share button onClick handler to use shareQrToInstagram with shareUrl.
• src/hooks/useFeedbackHeaderInfo.ts
  • Added new file.
  • Implemented useFeedbackHeaderInfo hook to centralize fetching and formatting of presentation and shared content details (title, publisher, posted date).
  • Utilizes useParams, usePresentation, useSharedContent, and dayjs.
  • Defines fallback values for title, publisher, and posted date.
• src/pages/FeedbackSlidePage.tsx
  • Updated script container styling to rounded-2xl border border-gray-200 pb-4.
  • Modified script text styling to leading-relaxed break-words and whiteSpace: 'pre-wrap'.
• src/router/Router.tsx
  • Adjusted div containing ShareButton and LoginButton to have gap-3 md:gap-8 for responsive spacing.
• src/utils/snsShare.ts
  • Added INSTAGRAM_WEB_URL constant.
  • Implemented isMobileDevice, buildQrCodeUrl, downloadImage, and openInstagramStoryDeepLink helper functions.
  • Replaced shareToInstagram with shareQrToInstagram which handles QR code generation, mobile deep-linking, and web image download for Instagram sharing.
  • Updated shareToKakao error handling to catch generic errors.

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은 3.0.0 버전을 위한 중요한 UI/UX 개선 사항들을 포함하고 있습니다. 주요 변경점으로는 테마 전환 기능이 포함된 새로운 디자인의 사용자 메뉴 팝오버, 특정 경로에서 아이콘만 표시되도록 반응형으로 개선된 헤더 버튼, 그리고 QR 코드를 활용한 인스타그램 공유 기능 개선 등이 있습니다. 또한 피드백 페이지의 데이터 로직을 중앙에서 관리하는 useFeedbackHeaderInfo 훅을 새로 도입하여 코드의 구조와 유지보수성을 향상시킨 점이 돋보입니다. 전반적으로 변경 사항들이 잘 구현되었으며, 코드 명확성 개선을 위한 작은 제안 1건을 남깁니다.

[gemini-code-assist]

이 조건문의 || pathname.endsWith('/videos') 부분은 불필요해 보입니다. 정규식은 이미 /:projectId/videos와 같은 경로를 올바르게 처리하고 있습니다. Router.tsx를 보면 최상위 /videos 경로는 정의되어 있지 않으므로, 이 추가적인 검사가 필요한 경우는 없을 것으로 보입니다. 불필요한 코드를 제거하면 코드가 더 명확해지고 유지보수하기 좋아질 것입니다.

Suggested change

	const isProjectTabPath =
	/^\/[^/]+\/(slide|insight|videos)(\/[^/]+)?$/.test(pathname) || pathname.endsWith('/videos');
	const isProjectTabPath = /^\/[^/]+\/(slide|insight|videos)(\/[^/]+)?$/.test(pathname);