design: 약속 회고 결과 페이지 모바일 반응형 스타일 적용 (#197)

[mgYang53]

📋 작업 내용

약속 회고 결과/수정 페이지(MeetingRetrospectiveResultPage)의 콘텐츠 영역을 모바일(1024px 미만) 시안에 맞춰 반응형 처리했습니다.

모바일 헤더/하단 CTA(MobileLayoutFrame)와 페이지 좌우 여백은 #165 에서 이미 적용돼 있어, 이번 PR은 콘텐츠 내부(토픽 카드, 스켈레톤, 빈/에러 상태)만 다룹니다.

시안상 가장 큰 변화는 모바일에서 토픽을 감싸는 Card(그림자 + 패딩 24)가 사라지고 흰 배경 위에 텍스트가 바로 올라가는 구조입니다.

🔧 변경 사항

TopicSummaryCard

• 모바일에서 Card 래퍼 제거: max-lg:p-0, max-lg:shadow-none
• 타이포 오버라이드
  • 토픽 제목 max-lg:typo-subtitle2 (16/SB)
  • 토픽 설명 max-lg:typo-caption2 (12/Md)
  • 섹션 라벨 max-lg:typo-subtitle5 (15/Md)
  • 핵심 요약 본문 / 포인트 제목 / 포인트 상세 max-lg:typo-m-body4 (14/Rg)
  • 추가 버튼 문구 max-lg:typo-m-caption1 (13/Md)
• 간격: 제목↔설명 max-lg:gap-xtiny, 핵심 요약↔주요 포인트 max-lg:gap-base, 라벨↔내용 max-lg:gap-tiny
• 핵심 요약 Textarea 모바일 높이 192px (데스크톱 80px 유지)
• 주요 포인트 수정 박스 패딩 max-lg:px-base max-lg:py-small
• 아이콘 크기를 size prop → className으로 전환: X size-3.5 max-lg:size-4, Plus size-3 max-lg:size-3.5
• 섹션 라벨 문구를 핵심 요약 / 주요 포인트로 변경 (데스크톱 포함, 약속 회고 상세 페이지와 표기 통일)

RetrospectiveSummarySkeleton

• 모바일에서 카드 제거 (max-lg:border-0 max-lg:p-0)

MeetingRetrospectiveResultPage

• 빈 상태 / 에러 상태 문구 max-lg:typo-m-body4

📸 스크린샷 (선택 사항)

Closes #197

Summary by CodeRabbit

• 스타일

  • 회고 결과 화면이 모바일 및 소형 화면에 맞게 최적화되었습니다.
  • 요약 카드의 테두리와 여백이 화면 크기에 따라 조정됩니다.
  • 핵심 요약, 주요 포인트, 상세 항목, 버튼 및 아이콘의 크기와 간격이 반응형으로 개선되었습니다.
  • 포인트가 있을 때만 관련 버튼에 상단 여백이 적용됩니다.

• 버그 수정

  • 요약 정보 로딩 실패 및 요약 미생성 상태의 안내 문구가 모바일 화면에서 더 적절한 크기로 표시됩니다.

[coderabbitai]

Walkthrough

회고 결과 및 수정 화면의 토픽 카드, 스켈레톤, 편집 컨트롤, 읽기 모드 텍스트와 빈 상태·오류 안내 문구에 max-lg 기반 모바일 반응형 스타일을 추가했습니다.

Changes

회고 결과 모바일 반응형

Layer / File(s)	Summary
토픽 요약 카드 및 컨트롤 스타일 src/features/retrospectives/meeting/components/RetrospectiveSummarySkeleton.tsx, src/features/retrospectives/meeting/components/TopicSummaryCard.tsx	모바일에서 카드 테두리·패딩·그림자를 조정하고, 토픽 텍스트·입력 필드·불릿·삭제/추가 아이콘에 반응형 스타일을 적용했습니다.
결과 상태 안내 문구 스타일 src/pages/Retrospectives/meeting/MeetingRetrospectiveResultPage.tsx	요약 정보 로딩 실패 및 미생성 상태 안내 문구에 max-lg:typo-m-body4를 추가했습니다.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• fc-de/dokdok-client#167: 동일 페이지의 MobileLayoutFrame 기반 모바일 레이아웃 변경과 연결됩니다.
• fc-de/dokdok-client#180: 회고 UI의 Card 반응형 스타일 변경과 관련됩니다.

Suggested labels: design, feat

Suggested reviewers: haruyam15

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	TopicSummaryCard, 스켈레톤, 빈/에러 상태 문구의 모바일 스타일 조정이 요구사항과 일치합니다.
Out of Scope Changes check	✅ Passed	변경은 회고 결과 페이지 내부 반응형 스타일 조정에 한정되어 있어 범위를 벗어난 수정이 보이지 않습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	모바일 반응형 스타일 적용이라는 핵심 변경과 회고 결과 페이지가 정확히 일치합니다.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/mobile-retrospective-result-197

---

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