[PR] 과제 업로드 로딩 페이지(UploadLoadingPage) 및 단계 페이지(UploadStepPage) 모바일 반응형 UI 설정

[TTOCHIwas]

📝 요약 (Summary)

• 업로드 로딩 페이지와 업로드 단계 페이지가 모바일 화면에서도 자연스럽게 보이도록 정리했습니다.
• 작은 화면에서도 로딩 문구, 단계 헤더, 인디케이터, 입력 영역이 답답하지 않게 보이도록 반응형 UI를 적용했습니다.
• 공용으로 쓰는 PromptCard도 함께 정리해 다른 화면에서도 같은 개선이 적용되도록 했습니다.

✅ 주요 변경 사항 (Key Changes)

• 업로드 로딩 페이지의 글자 크기와 여백을 모바일 화면에 맞게 조정했습니다.
• 업로드 단계 페이지의 상단 여백과 헤더 영역을 모바일 기준으로 정리했습니다.
• 단계 인디케이터를 모바일에서 가로 스크롤로 볼 수 있게 변경했습니다.
• 본문 입력 영역과 공용 PromptCard를 모바일에서도 보기 좋게 정리했습니다.

💻 상세 구현 내용 (Implementation Details)

1. 업로드 로딩 페이지 반응형 적용

• 로딩 화면의 제목, 설명, 진행 문구 글자 크기를 모바일에서 더 자연스럽게 보이도록 조정했습니다.
• 로딩 화면 내부 gap과 padding을 줄여 작은 화면에서도 답답하지 않게 정리했습니다.
• 제목 줄간격도 모바일 기준으로 조정해 문장이 더 안정적으로 보이도록 했습니다.

2. 업로드 단계 페이지 상단 레이아웃 정리

• 페이지 바깥 여백과 상단 여백을 화면 크기에 따라 다르게 보이도록 수정했습니다.
• 헤더 영역의 제목 크기와 배지 패딩을 조정해 모바일에서도 덜 무겁게 보이도록 했습니다.

3. 단계 인디케이터 모바일 대응

• 모바일에서는 단계 인디케이터를 가로로 스크롤해서 볼 수 있도록 변경했습니다.
• 단계 번호와 단계 이름 크기를 모바일 기준으로 줄였습니다.

4. 본문 입력 영역 반응형 적용

• 단계 본문 카드의 padding, gap, 제목/설명 글자 크기를 모바일 기준으로 줄였습니다.
• 결과 입력 textarea의 높이와 내부 여백을 모바일에 맞게 조정했습니다.
• 하단 CTA 버튼은 모바일에서 전체 너비로 보이도록 변경했습니다.
• 모바일에서는 Ctrl + V 대신 더 자연스러운 붙여넣기 안내 문구가 보이도록 처리했습니다.

5. 공용 PromptCard 반응형 적용

• PromptCard 헤더를 모바일에서 더 자연스럽게 보이도록 정리했습니다.
• 복사 버튼 크기와 카드 내부 padding을 모바일에 맞게 줄였습니다.
• 본문 텍스트와 프롬프트 텍스트 크기를 모바일 기준으로 조정했습니다.
• 이 변경은 업로드 단계 페이지와 프로젝트 상세 페이지에 함께 반영됩니다.

🚀 트러블 슈팅 (Trouble Shooting)

• 해당 없음

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

• 다음 이슈에서 과제 업로드 완료 페이지 반응형 ui 설정 추가하도록 하겠습니다.

📸 스크린샷 (Screenshots)

#️⃣ 관련 이슈 (Related Issues)

• 과제 업로드 로딩 페이지(UploadLoadingPage) 및 단계 페이지(UploadStepPage) 모바일 반응형 UI 설정 #75

[gemini-code-assist]

Code Review

This pull request implements responsive design across the upload flow components, including the prompt card, step indicator, and result input, by applying breakpoint-specific styles for typography, spacing, and layout. Feedback was provided to improve the alignment of the step indicator on desktop and to ensure consistent use of theme tokens for component dimensions.