[FEAT/#95] 내가 작성한 리뷰 페이지 구현

[chunjaemin]

📝 요약

• 학생 프로필에서 진입 가능한 "내가 작성한 리뷰" 페이지를 구현했습니다.

⚙️ 작업 내용

• pages/student/my-reviews — 리뷰 목록 페이지 구현 (최신순/오래된순 정렬, 빈 상태 UI)
• pages/student/profile — "내가 작성한 리뷰" 메뉴 항목에 라우팅 연결
• shared/ui/app-top-bar — titleAlign prop 추가 ("left" | "center", 기본값 "center")
• shared/lib/hooks/useSortedByDate — 날짜 기반 정렬 공용 훅 추출

🔗 관련 이슈

• Closes [FEAT/#95] 내가 작성한 리뷰 페이지 UI 구현  #95

💬 리뷰어에게

• useSortedByDate는 PartnerReviewPage에도 동일 로직이 있어 추후 교체 가능합니다.

[github-actions]

Thanks for the contribution!
I have applied any labels matching special text in your title and description.

Please review the labels and make any necessary changes.

[gemini-code-assist]

Code Review

This pull request implements the partnership contract management system, including contract detail views, QR code generation for posters, and a refactored proposal submission flow using react-hook-form and Zod. Key improvements include the addition of a student review management page and enhanced date range validation. Feedback identifies opportunities to improve layout responsiveness on small devices, correct positioning of empty state components, and restore missing input field styles to maintain design consistency.

[gemini-code-assist]

w-[345px]와 같이 고정된 너비를 사용하면 화면 크기가 작은 기기(예: iPhone SE)에서 버튼이 화면을 벗어나거나 레이아웃이 깨질 위험이 있습니다. Figma 디자인 사양을 확인하여 고정 너비가 의도된 것인지 확인해 주세요. 디자인 사양에 별도의 지시가 없다면 w-full을 사용하고 부모 컨테이너에서 좌우 여백을 조절하는 것이 좋습니다.

Suggested change

	className="w-[345px] px-[1rem] py-[1.12rem] justify-center items-center gap-[0.625rem] rounded-[0.75rem] bg-primary"
	className="w-full px-[1rem] py-[1.12rem] justify-center items-center gap-[0.625rem] rounded-[0.75rem] bg-primary"

References

1. UI 컴포넌트 값은 코드상의 일관성보다 Figma 디자인 사양을 최우선 소스로 삼아야 하며, 반응형 대응 시에도 이를 고려해야 합니다.

[gemini-code-assist]

빈 상태(Empty State) UI에 absolute inset-0을 사용하면 AppTopBar를 포함한 전체 화면 중앙에 배치되어 헤더와 겹치거나 시각적으로 어색할 수 있습니다. flex-1 items-center justify-center를 사용하여 헤더 아래의 가용 영역 내에서 중앙에 위치하도록 수정하는 것을 권장합니다.

Suggested change

	<View className="absolute inset-0 items-center justify-center gap-7">
	<View className="flex-1 items-center justify-center gap-7">

[gemini-code-assist]

amount 및 minCount 입력 필드에 하단 테두리 색상을 적용하기 위해 useFocusBorder에서 borderColor를 가져와야 합니다.

Suggested change

	const { onFocus, onBlur } = useFocusBorder();
	const { borderColor, onFocus, onBlur } = useFocusBorder();

[gemini-code-assist]

입력 필드에 하단 테두리 스타일(borderBottomWidth, borderBottomColor)이 누락되어 다른 입력 필드들과 디자인 일관성이 깨집니다. useFocusBorder의 borderColor를 사용하여 포커스 상태에 따른 테두리 색상을 적용해 주세요. 또한, 이와 같이 반복되는 입력 필드 구조는 재사용 가능한 wrapper 컴포넌트로 분리하는 것을 고려해 보세요.

								className="flex-1 text-[15px] text-content-primary px-[4px]"
								style={{ 
									height: 36, 
									borderBottomWidth: 0.5, 
									borderBottomColor: borderColor("amount") 
								}}

References

1. 반복되는 UI 구조의 경우 재사용 가능한 wrapper 컴포넌트를 생성하여 선언적인 코드를 작성하고 유지보수성을 높이는 것이 좋습니다.

[gemini-code-assist]

minCount 입력 필드에도 하단 테두리 스타일을 추가하여 디자인 일관성을 유지해 주세요. 반복되는 스타일 구조는 공통 컴포넌트로 추출하여 관리하는 것이 효율적입니다.

								className="flex-1 text-[15px] text-content-primary px-[4px]"
								style={{ 
									height: 36, 
									borderBottomWidth: 0.5, 
									borderBottomColor: borderColor("minCount") 
								}}

References

1. 반복되는 UI 구조의 경우 재사용 가능한 wrapper 컴포넌트를 생성하여 선언적인 코드를 작성하고 유지보수성을 높이는 것이 좋습니다.