[jaqwe2301]

📄 PR 내용 요약

• 카카오 인앱 브라우저/사파리 클립보드 복사 안되는 문제 해결

✅ 작업 내용 상세

• 기본적으로 최신 클립보드 API를 사용해 복사를 시도하고, 보안 정책이나 브라우저 제약으로 실패하는 경우 구형 복사 방식(임시 textarea + copy 명령)으로 처리

아이폰 유저인 준열님 테스트 부탁드립니다~!

📝 체크리스트

• 기능이 정상 동작하는지 확인
• 로컬 빌드/테스트 통과
• 불필요한 코드/주석 제거

[gemini-code-assist]

Summary of Changes

Hello @jaqwe2301, 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은 특정 브라우저 환경에서 클립보드 복사 기능이 제대로 작동하지 않던 문제를 해결하기 위해 복사 로직을 개선합니다. 사용자 경험을 향상시키고 다양한 환경에서의 기능 일관성을 보장하기 위해, 최신 API와 구형 대체 방식을 모두 활용하는 유연한 복사 유틸리티를 도입하고 기존 코드에 적용했습니다.

Highlights

• 클립보드 복사 기능 개선: 카카오 인앱 브라우저 및 Safari에서 클립보드 복사가 작동하지 않던 문제를 해결하기 위해 새로운 copyText 유틸리티 함수를 도입했습니다.
• copyText 유틸리티 함수 추가: src/shared/lib/copyText.ts 파일에 copyText 함수를 추가하여, 최신 navigator.clipboard.writeText API를 우선 사용하고 실패 시 임시 textarea와 document.execCommand('copy')를 활용하는 대체 로직을 구현했습니다.
• 기존 복사 로직 대체: useTeamRoom.ts의 초대 링크 생성 및 TeamRoomCreatedModal.tsx의 초대 링크 복사 로직에서 navigator.clipboard.writeText 호출을 새로 추가된 copyText 함수로 대체했습니다.

Changelog

• src/entities/teamroom/hooks/useTeamRoom.ts
  • copyText 유틸리티 함수를 임포트했습니다.
  • 초대 링크 복사 로직에서 navigator.clipboard.writeText 대신 copyText 함수를 사용하도록 변경했습니다.
• src/shared/lib/copyText.ts
  • 새로운 파일로, 클립보드 복사를 위한 copyText 유틸리티 함수를 추가했습니다. 이 함수는 최신 API를 우선 시도하고 실패 시 구형 방식을 사용합니다.
• src/shared/ui/modal/TeamRoomCreatedModal.tsx
  • copyText 유틸리티 함수를 임포트했습니다.
  • 모달 내 초대 링크 복사 로직에서 navigator.clipboard.writeText 대신 copyText 함수를 사용하도록 변경했습니다.

Activity

• 이 PR에는 아직 사람의 활동(댓글, 리뷰 등)이 없습니다.

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. ↩

[junye0l]

최고민혁님 감사합니다 😊

[gemini-code-assist]

Code Review

이 PR은 카카오 인앱 브라우저나 사파리와 같이 보안 정책이 엄격한 환경에서도 클립보드 복사 기능이 동작하도록, 다양한 브라우저를 지원하는 copyText 유틸리티 함수를 도입했습니다. 기존의 navigator.clipboard.writeText 직접 호출을 이 새로운 유틸리티로 교체한 것은 좋은 접근입니다.

제 리뷰는 구현의 견고성을 높이는 데 중점을 두었습니다. 새로 추가된 copyText 함수의 반환값이 확인되지 않아 복사 실패 시에도 사용자에게 성공한 것처럼 보일 수 있는 문제를 지적했습니다. 또한, 프로젝트 가이드라인에 따라 사용자 경험을 개선하기 위해 alert 대신 Toast와 같은 논블로킹 방식의 알림을 사용할 것을 제안했습니다. 마지막으로, copyText 함수 내의 임시 textarea가 렌더링에 영향을 주지 않도록 더 확실하게 숨기는 방법을 제안했습니다.

[gemini-code-assist]

두 가지 개선점을 제안합니다.

1. 복사 성공 여부 확인: copyText 함수는 복사 성공 시 true, 실패 시 false를 반환합니다. 현재 코드는 반환값을 확인하지 않아 복사에 실패해도 성공 메시지가 표시됩니다. await copyText(inviteUrl)의 결과를 확인하여 조건에 맞는 메시지를 보여주는 것이 좋습니다.

2. alert 대신 Toast 사용: alert는 사용자의 인터랙션을 막는 블로킹(blocking) 방식이므로 사용자 경험에 좋지 않습니다. 일반적인 규칙에 따라 Toast와 같은 논블로킹(non-blocking) 알림을 사용하는 것을 권장합니다.

아래는 복사 성공 여부를 확인하는 예시 코드입니다. Toast UI 적용은 프로젝트의 다른 부분과 일관성을 맞추어 구현하시면 됩니다.

Suggested change

	await copyText(inviteUrl);
	alert('초대 링크가 복사되었습니다.');
	if (await copyText(inviteUrl)) {
	// Toast.success('초대 링크가 복사되었습니다.'); // 예시: Toast 사용
	} else {
	// Toast.error('클립보드 복사에 실패했습니다.'); // 예시: Toast 사용
	}

References

1. Use non-blocking notifications like Toasts instead of alert() for better user experience.

[jaqwe2301]

오마이갓

[junye0l]

오마이갓

다른 수정사항이랑 같이 올려주세요 나중에 ㅎㅎ...

[gemini-code-assist]

두 가지 개선점을 제안합니다.

1. 복사 성공 여부 확인: copyText 함수는 복사 성공 시 true, 실패 시 false를 반환합니다. 현재 코드는 반환값을 확인하지 않아 복사에 실패해도 성공 메시지가 표시됩니다. await copyText(inviteLink)의 결과를 확인하여 조건에 맞는 메시지를 보여주는 것이 좋습니다.

2. alert 대신 Toast 사용: alert는 사용자의 인터랙션을 막는 블로킹(blocking) 방식이므로 사용자 경험에 좋지 않습니다. 일반적인 규칙에 따라 Toast와 같은 논블로킹(non-blocking) 알림을 사용하는 것을 권장합니다.

아래는 복사 성공 여부를 확인하는 예시 코드입니다. Toast UI 적용은 프로젝트의 다른 부분과 일관성을 맞추어 구현하시면 됩니다.

Suggested change

	await copyText(inviteLink);
	alert('초대 링크가 복사되었습니다!');
	if (await copyText(inviteLink)) {
	// Toast.success('초대 링크가 복사되었습니다!'); // 예시: Toast 사용
	} else {
	// Toast.error('클립보드 복사에 실패했습니다.'); // 예시: Toast 사용
	}

References

1. Use non-blocking notifications like Toasts instead of alert() for better user experience.

[gemini-code-assist]

textarea를 화면에 보이지 않게 처리하는 현재 방식(opacity: 0)은 대부분의 경우 잘 동작합니다. 하지만 더 견고한 방법은 position: 'absolute'와 함께 화면 밖으로 요소를 이동시키는 것입니다. 이렇게 하면 렌더링에 미치는 잠재적인 영향을 최소화하고 스크린 리더가 요소를 읽는 것을 방지할 수 있습니다.

Suggested change

	ta.style.position = 'fixed';
	ta.style.top = '0';
	ta.style.left = '0';
	ta.style.opacity = '0';
	ta.style.position = 'absolute';
	ta.style.left = '-9999px';