[jaqwe2301]

📄 PR 내용 요약

• 팀룸 초대 페이지 - 유저 및 팀룸 정보 조회 추가
• 배경색 변경 및 노이즈 배경 적용
• 로그인 페이지 기기 별 크기 맞춤 여백 조정
• 팀장 지원 단계에서 아무 동작을 하지 않은 유저 처리

✅ 작업 내용 상세

팀룸 초대 페이지 - 유저 및 팀룸 정보 조회 추가

• 팀룸 초대 페이지에서 프로필 이미지, 유저 이름, 팀룸명 추가하였습니다.
• 구현 과정에서 확인해보니, 페이지에 접속했을 때 리프레시 토큰이 없다면 로그인 페이지로 바로 이동하는 문제를 발견하였습니다.
• /invite 경로일 때만 로그인 페이지로 이동하지 않도록 예외 처리하였습니다.
• 만약 로그인 되지 않은 유저라면 프로필 이미지 대신 빈 유저를 의미하는 이미지를 띄워줍니다. (재형님 요청사항)

팀장 지원 단계에서 아무 동작을 하지 않은 유저 처리

• 팀장 지원 단계에서 본인의 지원 유무를 서버에 의존하고 있었는데, 프론트에서 상태처리를 추가하여 프론트에서도 팀장 지원 여부를 알 수 있도록 수정하였습니다.

기타

• 배경색이 피그마와 다른 색상으로 적용되어 있어서 변경하였습니다.
• 노이즈 효과를 배경에 적용하였습니다.
• 로그인 페이지에서 높이가 작은 기기일 경우 간격이나 여백이 올바르지 않게 보이는 경우가 있었습니다.
• clamp라는 css 속성을 사용하여 최소값과 최대값을 벗어나지 않도록 지정하였습니다.

📸 스크린샷 (선택사항)

💬 참고 사항

• 알림 기능과 협업툴 요청하기를 같이 구현하고 있습니다!
• 현재 백엔드 분들 작업을 기다려야 해서 우선 로딩 UI 먼저 적용할 예정입니다!

📝 체크리스트

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

[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은 팀룸 초대 페이지의 사용자 경험을 개선하고, 애플리케이션의 전반적인 UI 일관성을 강화하는 데 중점을 둡니다. 초대 페이지에서 사용자와 팀룸 정보를 명확하게 보여주어 사용자가 팀에 합류하기 전에 필요한 정보를 얻을 수 있도록 했습니다. 또한, 인증 흐름을 개선하여 초대 링크를 통해 접근하는 사용자가 불필요하게 로그인 페이지로 리디렉션되는 것을 방지하고, 로그인 페이지의 반응형 디자인을 개선하여 다양한 기기에서 최적의 UI를 제공합니다.

Highlights

• 팀룸 초대 페이지 개선: 팀룸 초대 페이지에 사용자 프로필 이미지, 사용자 이름, 팀룸 이름을 표시하도록 기능을 추가했습니다.
• 인증 흐름 예외 처리: 로그인 만료 시 /invite 경로에서는 로그인 페이지로 즉시 이동하지 않도록 예외 처리를 적용했습니다.
• 기본 프로필 이미지 제공: 로그인되지 않은 사용자에게는 기본 사용자 아이콘을 표시하도록 구현했습니다.
• UI/UX 개선: 전역 배경색을 변경하고, 시각적 효과를 위해 노이즈 오버레이 배경을 적용했습니다.
• 반응형 디자인 강화: 로그인 페이지의 레이아웃과 여백을 다양한 기기 크기에 맞춰 clamp CSS 속성을 사용하여 조정했습니다.

Changelog

• public/assets/icons/user.svg
  • 기본 사용자 아이콘 SVG 파일이 추가되었습니다.
• src/App.tsx
  • 전역 배경색이 bg-[#141F3B]에서 bg-bg-default Tailwind CSS 변수로 변경되었습니다.
  • 애플리케이션의 최상위 main 요소 내부에 noise-overlay 클래스를 가진 div가 추가되어 노이즈 배경 효과가 적용되었습니다.
• src/app/AuthGuard.tsx
  • onAuthBlocked 콜백에서 로그인 만료 시 alert 메시지가 제거되었습니다.
  • 로그인 만료 시 /invite 경로에서는 로그인 페이지로 리디렉션되지 않도록 조건이 추가되었습니다.
  • authReady가 false일 때 로딩 UI를 표시하는 조건에 /invite 경로 예외 처리가 추가되었습니다.
• src/entities/teamroom/api/teamroom-api.ts
  • publicClient가 임포트되었고, InviteTeamRoomInfo 타입이 추가되었습니다.
  • 초대 토큰을 사용하여 팀룸 정보를 조회하는 getTeamRoomInfoByInviteToken 함수가 추가되었습니다.
• src/entities/teamroom/api/teamroom-dto.ts
  • 팀룸 초대 정보를 담는 InviteTeamRoomInfo 인터페이스가 정의되었습니다.
• src/entities/teamroom/hooks/useTeamRoom.ts
  • getTeamRoomInfoByInviteToken API 함수가 임포트되었습니다.
  • 초대 토큰으로 팀룸 정보를 가져오는 useInviteTeamRoomInfo 커스텀 훅이 추가되었습니다.
• src/entities/user/hooks/useCurrentUser.ts
  • useCurrentUser 훅에 enable 파라미터가 추가되어 조건부 데이터 페칭이 가능해졌습니다.
• src/pages/invite/index.tsx
  • useInviteTeamRoomInfo, useCurrentUser, useAuthStore 훅이 임포트되었습니다.
  • accessToken을 기반으로 현재 사용자 정보를 조건부로 가져오고, 초대 토큰으로 팀룸 정보를 가져오도록 로직이 추가되었습니다.
  • UI가 업데이트되어 사용자 프로필 이미지(로그인 시) 또는 기본 아이콘(비로그인 시), 사용자 이름, 팀룸 제목을 표시합니다.
  • 페이지 레이아웃과 버튼 스타일이 변경되었습니다.
• src/shared/api/auth/use-auth-bootstrap.ts
  • /invite 경로일 경우 authReady를 즉시 true로 설정하는 로직이 추가되었습니다.
  • 인증 실패 시 /invite 경로에서는 로그인 페이지로 리디렉션되지 않도록 조건이 추가되었습니다.
• src/shared/styles/globals.css
  • 전역 노이즈 배경 효과를 위한 .noise-overlay CSS 클래스가 추가되었습니다.
• src/widgets/auth/login/index.tsx
  • LoginWidget 컴포넌트가 export function에서 export default function으로 변경되었습니다.
  • 로그인 페이지의 div 요소에 h-dvh와 clamp를 사용한 반응형 패딩 및 마진이 적용되었습니다.
• src/widgets/auth/login/ui/onboarding/OnboardingCarousel.tsx
  • OnboardingCarousel 컴포넌트가 export function에서 export default function으로 변경되었습니다.
  • 캐러셀 인디케이터의 상단 마진에 clamp를 사용하여 반응형 스타일이 적용되었습니다.

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

[gemini-code-assist]

Code Review

팀룸 초대 페이지의 사용자 경험을 개선하고 인증 로직을 보완하는 좋은 변경 사항입니다. 특히 초대 페이지에서 사용자 및 팀룸 정보를 보여주어 사용자가 어떤 팀에 초대되었는지 명확히 알 수 있게 한 점이 인상적입니다. 또한, 로그인 페이지의 반응형 디자인을 개선한 부분도 훌륭합니다.

코드 리뷰 중 몇 가지 개선점을 발견하여 코멘트를 남겼습니다. invite 페이지에서 token이 없을 경우 발생할 수 있는 런타임 에러를 방지하는 것과, 페이지 제목의 시맨틱 HTML 구조를 개선하는 내용입니다. 확인 부탁드립니다.