Policy tab layout

[haeni82]

이슈

• closed feat: 구성원 별 정책 페이지 차단/제한 탭 UI 구현 #33

✔️ 체크리스트

• : Merge할 브랜치를 확인해 주세요.

🔍 작업 내용

기능

• 토스트 알림
• 관리자 롤에 따른 컴포넌트 조건부 렌더링
• 권한 양도
• 계정 전환
• 권한 적용 버튼 후 모달

수정 사항

• 커스텀 헤더 통일
• 개인 임계치 설정 위치 옮기기
• 달력 위치 옮기기
• 프로필 통일
• 앱별 제한 토글 껏다 킬때 디자인 깨지는거 고치기

디자인

• 공통 컴포넌트 분리(구성원별 상세 페이지 빼고는 완료)
• 그라데이션 버튼 적용
• 토글 수정
• 글래스 카드로 통일

⚠️ 주의 사항 / 기타

• 앱별 정책 적용 부분 검색/필터바 부분 수정 안함

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 토스트 알림 시스템 추가 - 성공, 오류, 정보 메시지 자동 표시
  • 권한 양도 모달 추가 - 정책 관리 페이지에서 소유권 이전 기능
  • 계정 전환 기능 - 사용자 정보에서 보유 회선 간 빠른 전환
  • 이중 임계치 설정 - 가족 및 개인별 데이터 임계치 독립 관리
  • 아바타 컴포넌트 - 프로필 이미지 일관된 표시

• 개선 사항

  • 그라디언트 버튼 커스터마이징 옵션 확대
  • 데이터 시각화 카드 UI 업그레이드
  • 정책 상세 페이지 레이아웃 간소화
  • 공유 데이터 페이지 헤더 정리

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 9328b532-0374-47fe-a37b-ba3310668b13

📥 Commits

Reviewing files that changed from the base of the PR and between edfab9f and 120ca73.

⛔ Files ignored due to path filters (8)

• package-lock.json is excluded by !**/package-lock.json
• src/assets/icon/assignment.svg is excluded by !**/*.svg
• src/assets/icon/clock2.svg is excluded by !**/*.svg
• src/assets/icon/person.svg is excluded by !**/*.svg
• src/assets/icon/right.svg is excluded by !**/*.svg
• src/assets/icon/send.svg is excluded by !**/*.svg
• src/assets/icon/setting.svg is excluded by !**/*.svg
• src/assets/icon/share.svg is excluded by !**/*.svg

📒 Files selected for processing (34)

• src/components/Header.tsx
• src/components/common/Avatar.tsx
• src/components/common/ConfirmModal.tsx
• src/components/common/GlassCard.tsx
• src/components/common/GradientButton.tsx
• src/components/common/PolicyScroll.tsx
• src/components/common/Toast.tsx
• src/components/common/Toggle.tsx
• src/layout/Layout.tsx
• src/page/Detail.tsx
• src/page/Log/LogPage.tsx
• src/page/Login/LoginPage.tsx
• src/page/Main/MainPage.tsx
• src/page/Main/components/DataBar.tsx
• src/page/Main/components/FamilyMemberList.tsx
• src/page/Main/components/GradientBadge.tsx
• src/page/Main/components/MemberCard.tsx
• src/page/Main/components/PieChart.tsx
• src/page/Main/components/SharedPoolUsage.tsx
• src/page/Policy/Policy.tsx
• src/page/Policy/components/DataRemainingCard.tsx
• src/page/Policy/components/DataThresholdSlider.tsx
• src/page/Policy/components/Permisssion.tsx
• src/page/Policy/components/UserInfo.tsx
• src/page/PolicyDetail/PolicyDetail.tsx
• src/page/PolicyDetail/components/ApplicationTab.tsx
• src/page/PolicyDetail/components/Blockpolicymanager.tsx
• src/page/PolicyDetail/components/Immediateblockpolicy.tsx
• src/page/PolicyDetail/components/LimitTab.tsx
• src/page/SharedData/SharedData.tsx
• src/page/SharedData/components/DataTransferCard.tsx
• src/page/SharedData/components/SharedPoolCard.tsx
• src/store/toastStore.ts
• src/types/FamilyMember.ts

---

📝 Walkthrough

Walkthrough

공통 컴포넌트 라이브러리를 확장하고 페이지 전반에 걸쳐 컴포넌트 재구성을 수행합니다. 새로운 Avatar, Toast 컴포넌트를 추가하고, 기존 컴포넌트를 재명명/재구성합니다(DataBlockBanner→GlassCard, CircleProgress→PieChart). 정책 전환 모달, 이중 임계값 설정, 가족 구성원 카드 렌더링을 새로 도입하고 컴포넌트 임포트 경로를 통합합니다.

Changes

Cohort / File(s)	Summary
공통 컴포넌트 - 신규 src/components/common/Avatar.tsx, src/components/common/Toast.tsx	새로운 Avatar 컴포넌트(사이즈, 색상 인덱스, 왕관 표시 지원) 및 토스트 알림 시스템 추가. Toast는 toastStore 구독하여 타입별 스타일링 렌더링.
공통 컴포넌트 - 업데이트 src/components/common/GlassCard.tsx, src/components/common/GradientButton.tsx, src/components/common/Toggle.tsx, src/components/common/ConfirmModal.tsx, src/components/common/PolicyScroll.tsx	GlassCard로 재명명(DataBlockBanner), textColor 속성 추가. GradientButton에 borderRadius/fontSize 속성 추가. Toggle에 그래디언트 스타일 및 인라인 스타일 기반 상태 표현 추가. ConfirmModal z-index 변경. PolicyScroll에 드래그 추적 상태 및 스타일 개선.
헤더 및 레이아웃 src/components/Header.tsx, src/layout/Layout.tsx	Header에 /policy-detail, /shared-data 라우트 타이틀 매핑 추가. Layout에 Toast 컴포넌트 렌더링 추가.
상태 관리 및 타입 src/store/toastStore.ts, src/types/FamilyMember.ts	Zustand 기반 Toast 스토어 신규 작성. FamilyMember 및 FamilyApiResponse 타입 정의.
메인 페이지 리팩토링 src/page/Main/MainPage.tsx, src/page/Main/components/PieChart.tsx, src/page/Main/components/FamilyMemberList.tsx, src/page/Main/components/MemberCard.tsx, src/page/Main/components/DataBar.tsx, src/page/Main/components/GradientBadge.tsx	CircleProgress→PieChart 재명명 및 props 재구조화(sharedPool... 필드 사용). FamilyMemberList 리팩토링: 내부 컴포넌트 제거, 외부 MemberCard 사용. 신규 DataBar, GradientBadge, MemberCard 컴포넌트 추가.
상세 및 정책 상세 페이지 src/page/Detail.tsx, src/page/PolicyDetail/PolicyDetail.tsx, src/page/PolicyDetail/components/ApplicationTab.tsx, src/page/PolicyDetail/components/LimitTab.tsx, src/page/PolicyDetail/components/Blockpolicymanager.tsx, src/page/PolicyDetail/components/Immediateblockpolicy.tsx	Detail에서 GlassCard로 데이터 블록 래핑. PolicyDetail에서 Avatar 사용, 기본 탭 변경, 헤더 UI 제거. ApplicationTab에서 GlassCard 래핑 및 앱 아이콘 매핑 확장. 정책 상세 컴포넌트들 GlassCard 임포트 경로 통합.
정책 페이지 src/page/Policy/Policy.tsx, src/page/Policy/components/UserInfo.tsx, src/page/Policy/components/DataThresholdSlider.tsx, src/page/Policy/components/Permisssion.tsx, src/page/Policy/components/DataRemainingCard.tsx, src/page/Policy/components/SharedPoolUsage.tsx	Policy에서 정책 양도 모달 플로우 추가(상태, 핸들러, 포탈 렌더링). UserInfo: 프로필 이미지/핸들러 제거, lineId 추가, 계정 전환 바텀시트 추가. DataThresholdSlider: 이중 임계값(가족/개인) 관리로 재구성. DataRemainingCard 신규 추가. GlassCard 임포트 경로 통합.
공유 데이터 페이지 src/page/SharedData/SharedData.tsx, src/page/SharedData/components/DataTransferCard.tsx, src/page/SharedData/components/SharedPoolCard.tsx	SharedData에서 헤더 UI 제거. DataTransferCard에서 GradientButton 및 SendIcon 사용. SharedPoolCard에서 GradientButton 및 ClockIcon 사용.
임포트 경로 통합 src/page/Log/LogPage.tsx, src/page/Login/LoginPage.tsx	GlassCard, GradientButton 임포트 경로를 공통 컴포넌트 위치로 업데이트.

Sequence Diagram

sequenceDiagram
    participant User as 사용자
    participant PolicyUI as 정책 UI
    participant Modal as 양도 모달
    participant API as API
    participant Page as 페이지
    
    User->>PolicyUI: 권한 양도 버튼 클릭
    PolicyUI->>Modal: 모달 열기
    User->>Modal: 구성원 선택
    Modal->>Modal: 확인 텍스트 입력 검증
    User->>Modal: 양도하기 클릭
    Modal->>API: PATCH 요청 (선택된 사용자)
    API-->>Modal: 응답
    Modal->>Page: 페이지 리로드
    Page-->>User: 업데이트된 페이지 표시

Loading

sequenceDiagram
    participant Component as 컴포넌트
    participant Store as toastStore
    participant Toast as Toast 컴포넌트
    participant UI as 화면
    
    Component->>Store: show(message, type)
    Store->>Store: 토스트 생성 (id auto-increment)
    Store->>Store: 3초 후 자동 제거 (setTimeout)
    Store->>Toast: 토스트 데이터 구독
    Toast->>UI: 토스트 렌더링 (타입별 스타일)
    UI->>Toast: 토스트 클릭
    Toast->>Store: hide(id)
    Store->>UI: 토스트 제거

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Possibly related PRs

• Feature/api integration #35: Header.tsx 및 라우트 기반 페이지 타이틀/뒤로가기 버튼 로직 중복 수정 — 동일 파일의 헤더 동작 편집
• feat: 구성원 별 정책 페이지 차단/제한 탭 UI 구현 #33: PolicyDetail, Policy 컴포넌트(BlockPolicyManager, ImmediateBlockPolicy, LimitTab, UserInfo) 동일 파일 수정 및 정책 제어 UI 구현 동일 범위
• 1차 병합 #16: Main 페이지의 원형 진행률 컴포넌트 변경 — PieChart로의 재명명 및 props 재구조화와 직결된 변경

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch policyTab-layout

---

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