Feature/frontend UI updates

[Hyunseong0303]

📋 작업 내용

• 운영팀 한마디 상세 UI 동기화: team-message 상세 페이지 레이아웃을 기존 결산 상세(msg) 페이지와 완벽히 통일 (흰색 컨테이너 배경 분리, 하단부 각 섹션별 가로 구분선 추가, 패딩 및 여백 수치 일치)
• 사이드바 푸터 디자인 개편: 기존 "메생결산 기록" 타이틀 텍스트를 제거하고, 하단에 별 모양 아이콘(Simbol Logo)과 전체 기록 기간 텍스트만 병렬 배치하여 심플하게 개선
• 로그인 팝업 UI 개선: 이름 입력 폼 내 불필요한 맞춤법 검사(빨간 줄) 및 웹 브라우저 자동완성을 방지하기 위해 단풍바람 InputBox 컴포넌트에 spellcheck="false", autocomplete="off" 일괄 적용
• 운영팀 전용 라벨링 필터링: member 캐릭터 상세 페이지에서 캐릭터가 '운영팀'일 경우 기존의 "레벨/서버/직업" 자리가 아닌 **"13기 / 가천대학교 / 운영팀"**으로 강제 표시되도록 분기 처리 개선
• 메생결산 톡 디자인 개선: 톡 하단의 전송 버튼 화살표 아이콘을 흰색 투명 버전(Send, Color=White copy.svg) 레이아웃으로 교체하여 배경 톤오버 방지 및 시인성 확보
• 메인 캐릭터 카드 비율 완벽 복구: 이전 병합 및 구조 변경 과정에서 훼손됐던 원래 캐릭터 서탠딩 이미지 CSS 비율 속성(h-40 w-3/4 aspect-[5/6] object-cover)들을 원래 커밋대로 되돌리고, 가장자리가 선명하게 렌더링되도록 image-rendering: pixelated만 함께 적용

🎯 관련 이슈

• 없음

🤖 사용한 Prompt

• "team-message/[id] 페이지의 UI를 기준이 되는 msg/[id] 페이지의 디자인 요소와 완벽하게 통일하도록 수정해라. 컨테이너 흰배경 나누기, hr 구분선 여백 등"
• "메인 화면 캐릭터 이미지들의 크기가 작아지고 배치가 어긋나는 문제가 발생했다. 원본 코드 구조 레이아웃으로 완벽히 통일시키고 픽셀화 유지해"
• "운영팀 한마디를 필터링 해서 '레벨/서버/직업' 자리에 '13기/가천대학교/운영팀'으로 표시되게 해줘."
• "사이드바 하단 '메생결산 기록' 텍스트 제거하고 심볼 로고 svg랑 날짜 기간 배치해 줘"
• "로그인 팝업의 이름 입력 칸에 텍스트 입력하면 빨간 줄 쳐지는 거 없앨 수 있어? autocomplete 꺼 줘"
• "메생결산 톡의 전송 버튼 아이콘 컬러 화이트 사본 스니펫으로 변경해 줘"

✅ 체크리스트

• 로컬에서 개발환경 작동 테스트 완료 (npm run dev)
• 타입 및 충돌 에러 없음 (npm run check, FastAPI 백엔드 린터 통과)
• UI/UX 렌더링 확인 (Pixelated, Overflow 등)
• 코드 리뷰 요청 및 dev 브랜치 병합

📸 스크린샷 (선택)

리뷰어를 위한 가이드

• 요구사항을 모두 충족하는가?
• 코드 품질이 적절한가?
• 성능 이슈는 없는가?
• 문서화가 필요한가?

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feature/frontend-ui-updates

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello, 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) 및 사용자 경험(UX)을 전반적으로 개선하기 위한 다양한 프론트엔드 업데이트를 포함합니다. 특정 페이지의 레이아웃을 표준화하고, 사이드바와 로그인 팝업의 디자인을 개선하며, 캐릭터 정보 표시 로직을 강화하고, 이미지 렌더링 품질을 복구하는 등 시각적 일관성과 기능적 편의성을 향상시키는 데 중점을 두었습니다.

Highlights

• 운영팀 한마디 상세 UI 동기화: team-message 상세 페이지 레이아웃을 기존 결산 상세(msg) 페이지와 완벽히 통일했습니다. 흰색 컨테이너 배경 분리, 하단부 각 섹션별 가로 구분선 추가, 패딩 및 여백 수치 일치 등의 변경이 포함됩니다.
• 사이드바 푸터 디자인 개편: 기존 '메생결산 기록' 타이틀 텍스트를 제거하고, 하단에 별 모양 아이콘(Simbol Logo)과 전체 기록 기간 텍스트만 병렬 배치하여 심플하게 개선했습니다.
• 로그인 팝업 UI 개선: 이름 입력 폼 내 불필요한 맞춤법 검사(빨간 줄) 및 웹 브라우저 자동완성을 방지하기 위해 InputBox 컴포넌트에 spellcheck="false", autocomplete="off" 속성을 일괄 적용했습니다.
• 운영팀 전용 라벨링 필터링: member 캐릭터 상세 페이지에서 캐릭터가 '운영팀'일 경우 기존의 '레벨/서버/직업' 자리가 아닌 '13기 / 가천대학교 / 운영팀'으로 강제 표시되도록 분기 처리 로직을 개선했습니다.
• 메생결산 톡 디자인 개선: 톡 하단의 전송 버튼 화살표 아이콘을 흰색 투명 버전(Send, Color=White copy.svg) 레이아웃으로 교체하여 배경 톤오버 방지 및 시인성을 확보했습니다.
• 메인 캐릭터 카드 비율 완벽 복구: 이전 병합 및 구조 변경 과정에서 훼손됐던 원래 캐릭터 서탠딩 이미지 CSS 비율 속성(h-40 w-3/4 aspect-[5/6] object-cover)들을 원래 커밋대로 되돌리고, 가장자리가 선명하게 렌더링되도록 image-rendering: pixelated만 함께 적용했습니다.

🧠 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

• .github/PULL_REQUEST_TEMPLATE.md
  • PR 템플릿의 '작업 내용', '사용한 Prompt', '체크리스트' 및 '특이사항' 섹션이 최신 변경사항에 맞춰 업데이트되었습니다.
• dpbr_front/app/src/lib/components/BottomSheetLogin.svelte
  • 로그인 에러 메시지를 표시하고 일정 시간 후 자동으로 사라지게 하는 errorMessage 상태와 로직이 추가되었습니다.
  • 바텀 시트의 높이(h-[72vh])와 너비(shrink-0) 관련 스타일이 조정되었습니다.
  • 로그인 버튼 위에 에러 메시지를 시각적으로 표시하는 UI가 추가되었습니다.
• dpbr_front/app/src/lib/components/InputBox.svelte
  • 입력 필드에 spellcheck="false" 및 autocomplete="off" 속성이 추가되어 맞춤법 검사 및 자동 완성 기능이 비활성화되었습니다.
• dpbr_front/app/src/lib/components/Sidebar.svelte
  • 사이드바 푸터의 텍스트 내용이 '메생결산 기록'에서 '25년 8월 25일 ~ '26년 2월 22일의 기록'으로 변경되었고, 텍스트 스타일(text-xs, text-text-secondary)이 조정되었습니다.
• dpbr_front/app/src/routes/login/+page.svelte
  • 개발용 임시 로그인 정보(김단바, 000000000)가 name과 studentId 상태에 초기값으로 설정되었습니다.
  • 로그인 에러 메시지를 표시하고 일정 시간 후 자동으로 사라지게 하는 errorMessage 상태와 로직이 추가되었습니다.
  • 로그인 버튼 위에 에러 메시지를 시각적으로 표시하는 UI가 추가되었습니다.
• dpbr_front/app/src/routes/member/[id]/+page.svelte
  • isAdminTeam 파생 상태의 조건식이 가독성 좋게 여러 줄로 분리되었습니다.
  • getCharacterById 호출 시 adminCharacter.id를 toString()으로 변환하는 로직이 추가되었습니다.
  • settlementsHasMore 계산 로직이 가독성을 위해 여러 줄로 분리되었습니다.
  • 캐릭터 이미지에 image-rendering:pixelated 스타일이 추가되어 픽셀화된 렌더링을 유지하도록 했습니다.
  • 운영팀 캐릭터의 '레벨/서버/직업' 정보가 '13기 / 가천대학교 / 운영팀'으로 표시되도록 조건부 렌더링 로직이 수정되었습니다.
• dpbr_front/app/src/routes/talk/+page.svelte
  • 로그아웃 버튼의 스타일이 text-sm font-light에서 text-[12px] font-light underline hover:opacity-80 transition-opacity로 변경되었습니다.
  • 채팅 전송 버튼 아이콘이 name=Send, Color=White.svg에서 name=Send, Color=White copy.svg로 변경되었습니다.
• dpbr_front/app/src/routes/team-message/[id]/+page.svelte
  • 팀 메시지 상세 페이지의 '직책' 및 '상세 내용' 섹션에 고정 너비(w-[72px])와 whitespace-nowrap 스타일이 추가되었습니다.
  • 각 섹션 사이에 가로 구분선(hr class="border-bg-light mx-6")이 추가되었습니다.
  • 페이지 하단에 로고(logo-text-mono.svg)가 포함된 새로운 섹션이 추가되어 디자인 일관성을 높였습니다.
• dpbr_front/app/static/images/icons/name=Send, Color=White copy.svg
  • 새로운 전송 버튼 아이콘 SVG 파일이 추가되었습니다.
• dpbr_front/app/static/images/icons/name=Simbol Logo, color=Color.svg
  • 새로운 심볼 로고 SVG 파일이 추가되었습니다.

Activity

• 로컬 개발 환경 작동 테스트가 완료되었습니다.
• 타입 및 충돌 에러가 없음을 확인했습니다 (npm run check, FastAPI 백엔드 린터 통과).
• UI/UX 렌더링 (Pixelated, Overflow 등) 확인이 완료되었습니다.
• 코드 리뷰 요청 및 dev 브랜치 병합이 예정되어 있습니다.

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

This PR introduces various UI improvements and bug fixes. However, a critical security vulnerability has been identified in dpbr_front/app/src/routes/login/+page.svelte due to hardcoded credentials for a temporary development account. This poses a serious security risk and must be addressed immediately before merging. Additionally, some hardcoded strings and inconsistent filenames were found, which could impact maintainability.