Skip to content

Comments

Feature/admin team profile#20

Open
Hyunseong0303 wants to merge 7 commits intodevfrom
feature/admin-team-profile
Open

Feature/admin team profile#20
Hyunseong0303 wants to merge 7 commits intodevfrom
feature/admin-team-profile

Conversation

@Hyunseong0303
Copy link
Collaborator

@Hyunseong0303 Hyunseong0303 commented Feb 22, 2026

📋 작업 내용

  • 댓글 작성자 식별 기준 변경 (이름 👉 고유 식별자 회원 번호)
    • 동명이인으로 인한 본인 확인 권한 꼬임 및 타인 댓글에 삭제 버튼이 노출되는 현상을 해결하기 위해 userId 검증 체계로 변경
  • 단풍바람 톡 페이지 UI/UX 레이아웃 개선
    • 공통: 기존 톡 우측의 '작성 시간' 표시를 댓글 본문 하단 좌측 정렬로 이동
    • 본인 댓글: 로그인한 자신의 댓글(user.id === comment.userId)인 경우, 기존 날짜 위치(우측 상단)에 삭제 버튼 노출 및 컨펌 구현
    • 비로그인: 톡 하단에 입력 폼 대신 로그인 버튼과 유도 메시지 노출하여 UX 개선
  • 단풍바람 운영팀 (운영진 롤링페이퍼) 예외 프로필 전용 기능 로직 추가
    • 캐릭터 상세(member/[id]) 및 결산 내역(msg/[id]) 페이지에서 단풍바람 운영팀이라는 특정 이름을 감지(isAdminTeam)하여 UI 속성(13기, 가천대학교, 운영팀 등)을 동적 치환.

🎯 관련 이슈

Closes #(이슈번호를 입력해주세요)

🤖 사용한 Prompt

  • 동명이인이 작성한 댓글일 경우, 로그인한 사람 이름과 똑같아서 다른 사람 댓글에도 '삭제' 버튼이 뜨는 문제가 있어. 작성자를 구분할 때 이름(name) 말고 백엔드의 고유 회원번호로 구분하게 바꿔.
  • 메생결산 톡 페이지의 삭제 버튼과 작성 시간 위치를 변경해: 작성 시간은 하단에, 삭제 버튼은 내가 쓴 댓글의 우측에 노출되도록.
  • 비로그인 사용자는 댓글 입력창을 감추고 "로그인하기" 안내만 뜨도록 UI를 개선해.
  • 멤버 중 예외적인 프로필로 "단풍바람 운영팀"을 만들고: 캐릭터사진>단바로고 / 레벨>13기 / 서버>가천대학교 / 직업>운영팀 으로 대체.
  • 결산 내역 대신 "홍길동 홍보팀장" 같은 직책 목록을 띄우고 "획득 일자" 글자 대신 "직책"으로 오버라이딩해라.

✅ 체크리스트

  • 로컬에서 테스트 완료
  • 타입 에러 없음 (npm run check)
  • Linter 통과
  • 모바일 반응형 확인
  • 코드 리뷰 요청 완료

📸 스크린샷 (선택)

💬 특이사항

  • Backend의 seed_admin_team.py 및 settlement_service.py (직책 기반 정렬 기능) 적용 및 DB 초기화 작업이 병행되어야 운영팀 기능의 모든 항목이 정상적으로 확인 가능합니다.
  • 토큰 및 로그인 유저 반환 API 필드 구격이 변경되었으니, 프론트/백엔드 모두 최신 dev 브랜치를 기준으로 실행해야 합니다.

리뷰어를 위한 가이드

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

@coderabbitai
Copy link

coderabbitai bot commented Feb 22, 2026

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/admin-team-profile

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

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

@gemini-code-assist
Copy link
Contributor

Summary of Changes

Hello @Hyunseong0303, 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 컴포넌트의 구조를 개선하고, membermsg 상세 페이지의 레이아웃과 기능을 업데이트합니다. 특히, 톡(댓글) 기능에 삭제 로직을 추가하고 로그인 흐름을 개선하여 상호작용성을 높였습니다. 또한, 관리자팀 프로필을 위한 특별한 표시 로직을 도입하여 콘텐츠의 유연성을 확보했습니다.

Highlights

  • 주요 컴포넌트 구조 개선: Header 컴포넌트에서 페이지 저장 기능을 제거하고, 메인 페이지의 배경을 그라데이션으로 변경하는 등 UI/UX를 개선했습니다.
  • 댓글 기능 강화 및 UI 개선: 톡(댓글) 페이지에 댓글 삭제 기능을 추가하고, 로그인 상태에 따라 댓글 입력 UI를 다르게 표시하도록 변경했습니다. 또한, 댓글 작성 시 로그인 유도 팝업 대신 BottomSheetLogin 컴포넌트를 사용하도록 개선했습니다.
  • 관리자팀 프로필 페이지 기능 추가: 운영팀 프로필 페이지를 위한 특수 로직을 추가하여, 일반 캐릭터와 다른 정보(예: 레벨 대신 '기', 획득 일자 대신 '직책')를 표시하고, 이미지 및 저장 버튼 표시를 조건부로 처리했습니다.
  • API 및 타입 정의 업데이트: 댓글에 작성자 ID를 추가하고, 임시 로그인 로직 및 댓글 삭제 스켈레톤 함수를 api.ts에 구현했습니다. 사용자 관련 타입 정의에도 ID 필드를 추가하여 백엔드 연동을 준비했습니다.

🧠 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
  • dpbr_front/app/package.json
    • 개발 서버 실행 스크립트에 --host 옵션을 추가했습니다.
  • dpbr_front/app/src/lib/api.ts
    • API 호출 함수들에서 불필요한 빈 줄을 제거하여 가독성을 높였습니다.
    • 댓글 조회 시 userId를 맵핑하도록 getComments 함수를 수정했습니다.
    • 임시 로그인 토큰(test-token-123)을 사용하는 경우 댓글 생성을 시뮬레이션하는 로직을 createComment 함수에 추가했습니다.
    • 댓글 삭제를 위한 스켈레톤 함수 deleteComment를 추가했습니다.
  • dpbr_front/app/src/lib/components/CommentItem.svelte
    • 댓글 삭제 기능을 위한 UI와 로직을 추가했습니다.
    • 댓글 작성자만 삭제 버튼을 볼 수 있도록 조건부 렌더링을 적용했습니다.
    • 삭제 확인을 위한 ConfirmPopup 컴포넌트를 통합했습니다.
  • dpbr_front/app/src/lib/components/Header.svelte
    • 페이지 저장 관련 기능(Download 아이콘, isSaving, onSaveClick prop, 저장 버튼)을 제거했습니다.
    • 메인 헤더의 배경색을 bg-primary에서 bg-transparent로 변경했습니다.
  • dpbr_front/app/src/lib/components/SettlementListItem.svelte
    • isAdminTeam prop을 추가하여 관리자팀 항목에 대한 조건부 렌더링을 구현했습니다.
    • 관리자팀 항목의 이미지 소스와 스타일, 그리고 텍스트 표시 방식(예: 획득 일자 대신 직책)을 변경했습니다.
  • dpbr_front/app/src/lib/data.ts
    • 목업 talkComments 데이터에 userId 필드를 추가했습니다.
  • dpbr_front/app/src/lib/types.ts
    • TalkComment 인터페이스에 userId 필드를 추가했습니다.
    • User 인터페이스에 id 필드를 추가했습니다.
  • dpbr_front/app/src/lib/utils/api.ts
    • LoginResponse, VerifyResponse, SignupResponse 인터페이스의 user 객체에 id 필드를 추가했습니다.
    • toUserFromToken 함수가 JWT 페이로드에서 사용자 ID를 추출하도록 로직을 업데이트했습니다.
    • verifyAuth 함수에서 사용자 ID를 맵핑하도록 수정했습니다.
  • dpbr_front/app/src/routes/+page.svelte
    • 메인 페이지의 배경에 그라데이션 스타일을 적용했습니다.
    • 캐릭터 그리드 영역의 배경색 설정을 제거했습니다.
  • dpbr_front/app/src/routes/member/[id]/+page.svelte
    • 페이지 캡쳐 관련 기능 및 상태 변수를 제거했습니다.
    • 관리자팀 프로필에 대한 조건부 UI 로직을 추가하여, 헤더 제목, 이미지, 레벨 표시, 저장 버튼 등을 다르게 처리했습니다.
    • 메생결산 목록 제목을 관리자팀 여부에 따라 변경했습니다.
  • dpbr_front/app/src/routes/msg/[id]/+page.svelte
    • 메시지 상세 페이지에서 캐릭터 정보를 추가로 불러오도록 로직을 업데이트했습니다.
    • 관리자팀 메시지에 대한 조건부 UI 로직을 추가하여, 헤더 제목, 이미지, 정보 섹션의 레이블 및 값 표시를 변경했습니다.
  • dpbr_front/app/src/routes/talk/+page.svelte
    • 댓글 입력 시 로그인 유도를 BottomSheetLogin 컴포넌트로 대체했습니다.
    • 로그인 상태에 따라 댓글 입력 영역의 UI를 조건부로 렌더링하도록 변경했습니다.
    • 댓글 전송 버튼의 스타일을 업데이트했습니다.
    • 댓글 목록에 onDelete 핸들러를 추가하여 댓글 삭제 시 UI를 즉시 업데이트하도록 했습니다.
Activity
  • 작업 내용에 따라 주요 컴포넌트 구조 개선 및 추가 UI 인터랙션이 구현되었습니다.
  • member, msg 상세 페이지의 레이아웃과 기능이 개선되었습니다.
  • 패키지 관련 파일(package.json, package-lock.json)이 신규 추가/수정되었습니다.
  • 작성자는 로컬 테스트, 타입 에러 확인, Linter 통과, 모바일 반응형 확인을 완료했습니다.
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.

Copy link
Contributor

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This PR introduces an operations team profile feature, improves the overall UI structure (header, sidebar), and implements a responsive layout, including the removal of an unnecessary save button and comment deletion functionality. However, a medium-severity vulnerability related to hardcoded secrets and authentication bypass logic has been identified. Additionally, the PR includes temporary test code that needs to be removed and some logic could benefit from improved exception handling.

@ark1st
Copy link
Collaborator

ark1st commented Feb 22, 2026

단풍바람 운영팀 (운영진 롤링페이퍼) 예외 프로필 전용 기능 로직 추가
캐릭터 상세(member/[id]) 및 결산 내역(msg/[id]) 페이지에서 단풍바람 운영팀이라는 특정 이름을 감지(isAdminTeam)하여 UI 속성(13기, 가천대학교, 운영팀 등)을 동적 치환.

요거는 나중에 백엔드 API 보고 그에 맞게 수정하면 될 것 같아요.
https://github.com/GC-MapleWind/MSGS_13_B/pull/30/changes <<< 여기서 PR 진행중

테이블이랑 쏘는 API가 완전히 다름

원래는 backend 완성되고 나서 API 문서 보고 Frontend 작업하는 순서로들 하는데, Front 속도가 훨 빨라서 그렇게 된 거니 양해 부탁

백엔드 운영팀 API(PR #30)와 프론트엔드 운영팀 예외 UI를 완전히 연동합니다.

- api.ts: getTeamMembers(), getTeamMemberDetail() 추가
  - TeamMemberResponse / TeamMemberDetailResponse 인터페이스 정의
  - 반환값을 SettlementItem 형태로 매핑 (id: 'team-{memberId}')
- member/[id]: isAdminTeam일 때 /system/team에서 팀원 목록 조회
  - SettlementListItem에 isAdminTeam prop 전달
  - 빈 상태 메시지 조건부 처리
- msg/[id]: 'team-' 접두사 ID 감지 시 /system/team/{id} 상세 조회
  - isTeamMember 상태 추가 → isAdminTeam 파생값에 반영

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@ark1st
Copy link
Collaborator

ark1st commented Feb 23, 2026

🔗 통합 작업 추가 커밋 (4cced93)

Backend PR #30 (MSGS_13_B hanmadi)과의 통합 갭을 보완했습니다.


변경 1: src/lib/api.ts — 운영팀 API 함수 추가

기존 코드에서 isAdminTeam UI 분기는 있었으나, 백엔드의 새 API를 실제로 호출하는 코드가 없었습니다.

추가된 내용:

// GET /api/v1/system/team → 팀원 목록
export async function getTeamMembers(): Promise<SettlementItem[]>

// GET /api/v1/system/team/{memberId} → 팀원 상세 + 한마디
export async function getTeamMemberDetail(memberId: number): Promise<SettlementItem | null>
  • 반환값을 기존 SettlementItem 타입으로 매핑하여 UI 재사용
  • 팀원 id는 'team-{memberId}' 형태로 일반 결산과 구분

변경 2: routes/member/[id]/+page.svelte

isAdminTeam일 때 getSettlementsByCharacterId() 대신 getTeamMembers() 호출하도록 변경.

// Before: 운영팀도 settlement API 사용
const [charData, settlementsData] = await Promise.all([
  getCharacterById(characterId),
  getSettlementsByCharacterId(characterId),
]);

// After: 운영팀이면 team API 사용
const charData = await getCharacterById(characterId);
if (charData?.name === "단풍바람 운영팀") {
  settlements = await getTeamMembers();
} else {
  settlements = await getSettlementsByCharacterId(characterId);
}
  • SettlementListItem{isAdminTeam} prop 전달 추가
  • 빈 상태 메시지: "운영팀 정보가 없습니다." / "메생결산이 없습니다." 조건부 처리

변경 3: routes/msg/[id]/+page.svelte

/msg/team-1 같은 팀원 상세 URL 진입 시 getTeamMemberDetail() 호출하도록 분기 추가.

// 'team-' 접두사로 팀원/결산 구분
if (msgId.startsWith("team-")) {
  isTeamMember = true;
  const memberId = parseInt(msgId.slice(5), 10);
  settlement = await getTeamMemberDetail(memberId);
} else {
  settlement = await getSettlementById(msgId);
  if (settlement) character = await getCharacterById(settlement.characterId);
}
  • isTeamMember 상태 추가 → isAdminTeam 파생값에 반영 (|| isTeamMember)
  • 기존 결산 페이지 동작은 그대로 유지

dev merge 전 체크리스트

  • Backend PR #30이 먼저 dev에 merge되어야 함
  • 백엔드 DB 마이그레이션 + seed_admin_team.py 실행 완료 후 테스트
  • "단풍바람 운영팀" 캐릭터 클릭 → 팀원 목록 표시 확인
  • 팀원 클릭 → /msg/team-{id} → 한마디 상세 표시 확인

- +page.svelte: 단풍바람 운영팀을 메인 캐릭터 그리드에서 제외하고
  adminTeamId를 Sidebar에 전달
- Sidebar.svelte: 운영팀 한마디 링크를 /member/{adminTeamId}로 연결
  (adminTeamId가 없으면 메뉴 항목 미표시)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…ter API

- Remove client-side filtering of admin team from character list
- Remove adminTeamId prop from Sidebar (self-fetches via getAdminCharacter)
- Add getAdminCharacter() API call in Sidebar.onMount for sidebar link

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@ark1st
Copy link
Collaborator

ark1st commented Feb 23, 2026

추가 변경사항 (통합 작업)

src/lib/api.ts

  • getAdminCharacter() 함수 추가
    • GET /system/admin-character 호출 → { id: number | null } 반환
    • 에러 시 { id: null } 폴백

src/lib/components/Sidebar.svelte

  • adminTeamId prop 제거 → 컴포넌트 내부에서 직접 fetch로 변경
  • onMount에서 getAdminCharacter() 호출, adminTeamId 상태 자체 관리
  • "운영팀 한마디" 링크: {#if adminTeamId} 조건부 렌더링 유지

src/routes/+page.svelte

  • 클라이언트 사이드 운영팀 필터링 제거 (find + filter 로직 삭제)
  • 백엔드 GET /characters가 이미 운영팀을 제외해서 반환하므로 프론트에서 중복 처리 불필요
  • SidebaradminTeamId prop 전달 제거

배경

GET /characters에서 운영팀을 제외하는 필터링을 백엔드로 이관함에 따라, 프론트는 단순히 응답을 그대로 사용. 사이드바는 별도 API(/system/admin-character)로 운영팀 ID를 직접 조회.

@ark1st
Copy link
Collaborator

ark1st commented Feb 23, 2026

@현성

운영팀 필터링 같은건, (isAdmin?) 되도록이면 프론트가 아니라 백엔드 쪽에서 하는게 좋아유

우리 크롬 F12누르면 개발자 도구 나오는데 거기서 데이터를 까 볼수가 있으니까 가려진게 가려진게 아님(클라이언트를 믿지 마라)

그래서 이런 핵심 비즈니스 로직은 프론트가 아니라 백엔드에 해달라고 하는게 표준이랍니다

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants