feat: refine toast position, fix scroll bug, improve login stability,…#33
Conversation
… and visual tweaks
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello, I'm Gemini Code Assist1! 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/UX 개선 및 버그 수정을 포함합니다. 운영팀 페이지의 정보 표시와 정렬 기능을 개선하고, 전역적인 라이트 모드를 강제 적용하여 일관된 디자인을 제공합니다. 또한, 토스트 알림 시스템을 중앙 집중화하고 위치를 조정하여 사용자 피드백을 명확히 하며, 로그인 모달의 안정성과 모바일 반응성을 강화했습니다. 여러 시각적 및 상호작용 버그를 해결하여 애플리케이션의 전반적인 완성도를 높였습니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이번 PR은 UI 개선, 버그 수정, 기능 향상 등 광범위한 개선 사항을 포함하고 있습니다. 주요 변경 사항으로는 라이트 테마 강제 적용, 로그인 프로세스 안정성 향상, 스크롤 및 렌더링 버그 수정, 정렬 기능이 추가된 팀원 목록 개선 등이 있습니다. 코드는 전반적으로 잘 구성되어 있습니다. 다만, 실수로 추가된 git 파일 제거, 중복 인라인 스타일 방지, 중복 코드 리팩토링 등 몇 가지 개선점을 발견했습니다. 자세한 내용은 아래의 개별 코멘트를 참고해 주세요.
| dev | ||
| feat/comment-anon-and-delete-modal-dev | ||
| feature-login-signup | ||
| feature/admin-team-profile | ||
| feature/frontend-ui-redesign | ||
| * feature/frontend-ui-updates | ||
| feature/ui-improvement | ||
| feature/ui-save-card-improve | ||
| feature/濡쒓렇???뚯썝媛???섏씠吏 | ||
| fix/sidebar-layout-text-fix | ||
| main | ||
| remotes/origin/CI/CD | ||
| remotes/origin/HEAD -> origin/main | ||
| remotes/origin/backend | ||
| remotes/origin/dev | ||
| remotes/origin/feat/application-form-migration | ||
| remotes/origin/feat/comment-anon-and-delete-modal-dev | ||
| remotes/origin/feat/dev-deployment | ||
| remotes/origin/feat/pagination-infinite-sync | ||
| remotes/origin/feature/admin-team-profile | ||
| remotes/origin/feature/frontend-ui-redesign | ||
| remotes/origin/feature/frontend-ui-updates | ||
| remotes/origin/feature/full-page-capture | ||
| remotes/origin/feature/ui-improvement | ||
| remotes/origin/feature/ui-save-card-improve | ||
| remotes/origin/feature/?볤? | ||
| remotes/origin/feature/濡쒓렇???뚯썝媛???섏씠吏 | ||
| remotes/origin/fix/deployment-config | ||
| remotes/origin/fix/sidebar-layout-text-fix | ||
| remotes/origin/fix/濡쒓렇??id-pw-?섏젙-#17 | ||
| remotes/origin/kakao-login-with-backend | ||
| remotes/origin/login-only-comment | ||
| remotes/origin/main | ||
| remotes/origin/sync/dev-into-feature-ui-improvement | ||
| remotes/origin/work/frontend-feature-gap |
There was a problem hiding this comment.
이 파일과 git_status_utf8.txt 파일은 Git 상태를 나타내는 임시 파일로 보입니다. 버전 관리에 포함될 필요가 없으므로, 커밋에서 제거하는 것이 좋습니다. .gitignore 파일에 git_*.txt 와 같은 패턴을 추가하여 앞으로 이런 파일들이 커밋되지 않도록 방지할 수 있습니다.
| @@ -1,5 +1,5 @@ | |||
| <!doctype html> | |||
| <html lang="ko"> | |||
| <html lang="ko" style="color-scheme: light;"> | |||
There was a problem hiding this comment.
<html> 태그에 인라인 스타일로 color-scheme: light;를 설정하셨습니다. 이 속성은 이미 app.css 파일의 :root 선택자에 정의되어 있으므로 중복됩니다. 코드 유지보수성을 높이기 위해 인라인 스타일 사용을 지양하고 CSS 파일에서 스타일을 관리하는 것이 좋습니다. 이 인라인 스타일을 제거해도 기능에 영향이 없을 것입니다.
| <html lang="ko" style="color-scheme: light;"> | |
| <html lang="ko"> |
| const members = await getTeamMembers(); | ||
| const rolePriority: Record<string, number> = { | ||
| 인사팀원: 1, | ||
| 행사팀원: 2, | ||
| 홍보팀원: 3, | ||
| 인사팀장: 4, | ||
| 행사팀장: 5, | ||
| 홍보팀장: 6, | ||
| 회장: 7, | ||
| }; | ||
| teamMessages = members.sort( | ||
| (a, b) => | ||
| (rolePriority[a.role] || 99) - | ||
| (rolePriority[b.role] || 99), | ||
| ); |
There was a problem hiding this comment.
운영팀 멤버를 정렬하는 로직이 loadData 함수 내 두 곳(현재 블록과 109-123행)에서 중복되고 있습니다. 이 로직을 별도의 헬퍼 함수로 추출하면 코드 중복을 줄이고 유지보수성을 향상시킬 수 있습니다. 예를 들어, sortTeamMembers(members)와 같은 함수를 만들어 사용할 수 있습니다.
1 participant
운영팀 페이지 UI 및 정렬 기능 고도화 완료
운영팀 목록 페이지(member/admin-team)의 데이터를 보강하고, UI 구조 변경 및 정렬 로직을 적용했습니다.
주요 변경 사항
team_repo.py
&
system.py
: 운영팀 목록 조회 시 각 멤버의 '한마디 제목(title)' 정보를 포함하도록 수정했습니다. (성능을 위해 joinedload 적용)
api.ts
)
백엔드에서 전달되는 message.title 데이터를 프런트엔드 모델에 정확히 매핑하도록 수정했습니다.
TeamMessageListItem.svelte
)
변경 전: 사진 / 이름 / 직책
변경 후:
상단: 멤버의 한마디 제목 (item.title)
하단: 이름 직책 (item.name item.role) 형식으로 통합
+page.svelte
)
요청하신 가중치에 따라 목록이 정렬되도록 로직을 추가했습니다.
순환 순서: 인사팀원 → 행사팀원 → 홍보팀원 → 인사팀장 → 행사팀장 → 홍보팀장 → 회장
app.html
과
app.css
수정을 통해 브라우저 및 시스템 설정에 관계없이 **라이트 모드(밝은 배경, 어두운 글자)**가 고정되도록 설정했습니다.
color-scheme: light 속성을 강제 적용하여 자동 다크 모드 전환을 원천 차단했습니다.
로그인/로그아웃 시 명확한 피드백을 위해 로그인 되었습니다., 로그아웃 되었습니다. 토스트 메시지를 추가했습니다.
기존의 분산된 토스트 및 에러 메시지 로직을 전역 toast 스토어로 통합했습니다.
토스트의 위치를 기존 에러 메시지 위치인 **화면 하단(bottom-40)**으로 조정하고 디자인을 통일했습니다.
로그인 모달 내의 메시지(성공/에러)를 "메생결산 톡 입장" 버튼의 상단 16px 지점에 고정되도록 수정했습니다.
버튼의 부모 컨테이너를 기준으로 absolute 좌표를 사용하여, 모달의 크기 변화에 관계없이 항상 버튼 중앙 상단에 위치하도록 구현했습니다.
전역 토스트(
Toast.svelte
)와 별개로 모달 내부 전용 메시지 로직을 도입하여 정밀한 레이아웃 제어를 확보했습니다.
상세 페이지의 메생결산 목록(카드) 영역에서 터치 시 스크롤이 되지 않던 버그를 수정했습니다.
SettlementListItem.svelte
컴포넌트의 루트 요소에서 브라우저 기본 스크롤 동작을 방해하던 touch-none 클래스를 제거하여 모든 영역에서 부드러운 스크롤이 가능하도록 개선했습니다.
캐릭터 카드 이미지 저장 시 '단풍바람 13기' 배지의 백드롭 블러 효과가 둥근 모서리 밖으로 사각형 형태로 삐져나오던 현상을 수정했습니다.
배지 컨테이너에 overflow-hidden 속성을 추가하여, 이미지 렌더링 시에도 블러 효과가 라운딩 영역 안쪽으로만 제한되도록 개선했습니다.
클릭이나 터치 시 버튼을 두 번 눌러야 로그인이 진행되던 현상을 수정했습니다.
원인 해결: 버튼을 누를 때 내부 구조가 바뀌어 브라우저가 클릭을 취소하지 않도록 Button 컴포넌트의 DOM 구조를 안정화했습니다.
안정성 강화: 로그인 폼을 표준 구조로 개편하여 터치 및 클릭 이벤트가 유실 없이 백엔드로 전달되도록 개선했습니다.
모바일 환경에서 입력창 포커스 시 키보드가 올라오더라도 입력란이 가려지지 않도록 모달의 높이를 동적으로 조정하는 기능을 추가했습니다.
동작 방식: '이름' 또는 '학번' 입력창에 포커스가 생기면 모달 전체 높이가 기존 72vh에서 88vh로 부드럽게 확장됩니다. 포커스가 해제되면 다시 원래 높이로 복구됩니다.
이를 통해 키패드가 활성화된 상태에서도 로그인 버튼과 입력 필드를 쾌적하게 조작할 수 있습니다.
작업 결과 확인 방법
운영팀 목록 페이지에 접속하여 제목 / 이름 직책 형식을 확인합니다.
리스트 정렬 순서를 확인합니다.
OS나 브라우저를 다크 모드로 변경한 뒤에도 웹사이트가 밝은 배경을 유지하는지 확인합니다.
로그인 후 사이드바를 열어 상단 영역의 간격과 테두리 제거 여부를 확인합니다.
메생결산 톡 페이지 혹은 사이드바에서 '로그아웃' 버튼을 클릭했을 때, 페이지가 이동하지 않고 현재 위치를 유지하며 "로그아웃 되었습니다." 토스트가 뜨는지 확인합니다.
로그인 성공 혹은 실패 시 화면 하단에 일관된 스타일의 토스트 메시지가 나타나는지 확인합니다.