Skip to content

[Feature] 홈/질문/마이페이지 UI 전면 개선 및 API 연동 #21

@wngktjd13

Description

@wngktjd13

🎯 Purpose

  • 홈 화면 오늘의 질문 중심 UX 개선 및 Top 5 섹션 추가
  • 질문 없는 경우 빈 상태 UI 개선
  • 마이페이지 Instagram 스타일 레이아웃 리디자인
  • 투표 성향 시스템 구현 및 프로필 API 연동
  • 투표 API 연동 및 실시간 결과 반영
  • 불필요한 페이지 타이틀 제거로 UI 간결화
  • 설정 페이지 회원탈퇴 모달 및 색상 통일

🧩 Tasks

홈 화면 개선

  • 오늘의 질문 중앙 배치
  • 오늘의 질문 타이틀 중앙 정렬
  • 참여 유도 문구 추가
    • "지금 이 순간에도 누군가 선택하고 있어요"
    • "나와 같은 생각을 가진 사람은 몇 %일까요?"
  • Top 5 질문 섹션 추가
    • TopQuestionsResponse 타입 추가
    • getTopQuestions() API 함수 추가
    • 카드 형식으로 표시
  • 질문 없는 경우 빈 상태 UI 개선

투표 API 연동

  • vote() API 함수 연동
    • PUT /api/v1/questions/{id}/votes
  • 투표 후 실시간 결과 반영
    • participants
    • voteStats
  • toQuestion() 헬퍼 함수로 API 응답 변환
  • 낙관적 UI 업데이트 적용

질문 페이지 개선

  • "질문" 타이틀 제거 (하단 네비게이션으로 대체)
  • 질문 없는 경우 빈 상태 UI 개선

질문 상세 페이지

  • "질문 상세" 타이틀 제거
  • 뒤로가기 버튼 간격 조정

마이페이지 리디자인

  • Instagram 스타일 중앙 정렬 레이아웃
  • 프로필 아바타를 투표 성향 아이콘으로 변경
  • Stats 인라인 표시 (카드 테두리 제거)
  • Stats 숫자 폰트 조정
  • "나의 투표 성향" 섹션 추가
    • 다수 선택 일치율 표시
    • 프로그레스 바 적용
  • "최근 7일" 활동 섹션 유지

투표 성향 시스템

  • 세 가지 성향 타입 정의
    • 대세파 (71–100%)
      • UserGroupIcon
      • "대중과 통하는 공감자"
    • 균형파 (31–70%)
      • ScaleIcon
      • "균형 잡힌 중재자"
    • 소신파 (0–30%)
      • RocketLaunchIcon
      • "흔들리지 않는 개척자"
  • majorityRate 필드 타입 추가
  • useUserProfile 훅에서 API 데이터 매핑
  • 프로필 페이지에서 동적 아이콘/이름 표시

설정 페이지 개선

  • "설정" 타이틀 제거
  • 뒤로가기 버튼 간격 조정
  • 회원탈퇴 확인 모달 추가
    • ArrowRightOnRectangleIcon
    • 문구
      • "잠깐, 정말 떠나시나요?"
      • "지금까지의 투표 기록과 댓글이 모두 사라져요"
    • 버튼
      • "계속 함께하기"
      • "그래도 탈퇴할게요"
  • Switch 토글 색상 통일
  • 버튼 색상 서비스 톤에 맞게 통일

🔍 Reference

  • GET /api/v1/users/me
    • 내 정보 조회 (stats.majorityRate)
  • GET /api/v1/questions/top
    • Top 5 질문 조회
  • PUT /api/v1/questions/{id}/votes
    • 투표하기

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions