[PR] 마이페이지(MyPage)와 상세 페이지(ProjectDetailPage) 모바일 반응형 UI 설정 추가

[TTOCHIwas]

📝 요약 (Summary)

• 마이페이지와 과제 상세 페이지가 모바일 화면에서도 자연스럽게 보이도록 정리했습니다.
• 작은 화면에서도 사용자 안내 영역, 프로젝트 목록, 과제 상세 카드 ui에 반응형 UI 설정을 추가했습니다.

✅ 주요 변경 사항 (Key Changes)

• 마이페이지의 상단 여백과 사용자 안내 영역을 모바일 화면에 맞게 조정했습니다.
• 프로젝트 목록 헤더, 필터 탭, 리스트 카드, 추가 버튼, 페이지네이션을 모바일 기준으로 정리했습니다.
• 과제 상세 페이지의 상단 여백과 제목 영역, 본문 카드 간격을 모바일에서도 보기 좋게 조정했습니다.

💻 상세 구현 내용 (Implementation Details)

1. 마이페이지 상단 레이아웃 정리

• 마이페이지 바깥 패딩을 화면 크기에 따라 다르게 보이도록 수정했습니다.
• 사용자 이름과 안내 문구의 글자 크기, 간격, 아래 여백을 모바일 기준으로 조정했습니다.

2. 프로젝트 목록 헤더 및 필터 영역 반응형 적용

• 프로젝트 목록 헤더를 모바일에서는 위아래 배치, 큰 화면에서는 기존 가로 배치로 정리했습니다.
• 필터 탭 간격을 모바일 기준으로 줄였습니다.

3. 프로젝트 목록 카드 및 하단 영역 개선

• 프로젝트 목록 카드의 padding, gap, 아이콘 크기, 제목/날짜 글자 크기를 모바일 기준으로 조정했습니다.
• 하단 프로젝트 추가 버튼의 높이와 아이콘 크기를 줄였습니다.
• 페이지네이션 버튼 크기, 숫자 폰트, 화살표 크기도 모바일 기준으로 정리했습니다.

4. 과제 상세 페이지 상단 반응형 적용

• 과제 상세 페이지 바깥 패딩과 간격을 모바일 기준으로 조정했습니다.
• 뒤로가기 버튼, 과제 유형 배지, 프로젝트 제목 크기도 함께 정리했습니다.

5. 과제 상세 페이지 본문 카드 정리

• 본문 카드의 padding, gap, borderRadius를 모바일 기준으로 줄였습니다.
• 각 step 제목 구간의 간격과 제목 글자 크기도 모바일 화면에 맞게 조정했습니다.
• 내부 PromptCard는 기존 반응형 구조를 그대로 사용하도록 유지했습니다.

🚀 트러블 슈팅 (Trouble Shooting)

• 해당 없음

⚠️ 알려진 이슈 및 참고 사항 (Known Issues & Notes)

• 해당 없음

📸 스크린샷 (Screenshots)

#️⃣ 관련 이슈 (Related Issues)

• 마이페이지(MyPage)와 상세 페이지(ProjectDetailPage) 모바일 반응형 UI 설정 추가 #79

[gemini-code-assist]

Code Review

This pull request introduces responsive design updates across various UI components, including project lists, user sections, and pagination, by utilizing responsive object syntax for spacing, typography, and layout properties. The review feedback suggests enhancing UI resilience against long text by applying flex-shrink to action areas and line-clamping project names, while also recommending the use of theme tokens over hardcoded pixel values for better design system alignment.