feat 이메일 기능 구현

[tkyoun0421]

개요

프로젝트 상세 페이지에서 이메일 전송 기능 개선, 로그인 리다이렉트 기능 구현 및 UI/UX 개선 작업을 진행했습니다.

변경 사항

• 새로운 기능 추가
• 버그 수정
• 리팩토링
• UI/UX 개선

구현 내용

🔐 로그인 리다이렉트 개선

• ProjectLeader.tsx: 로그인되지 않은 사용자가 "연락하기" 버튼 클릭 시 현재 페이지 경로를 redirect 파라미터로 전달하여 로그인 후 원래 페이지로 돌아오도록 구현
• useSocialLogin.ts: 기존 리다이렉트 패턴과 일관성 유지

📧 이메일 전송 기능 개선

• useSendEmail.ts: React Query mutation 훅으로 새로 구현하여 타입 안전성과 에러 처리 개선
• useEmailForm.ts: API 호출 로직을 분리하고 훅 관심사 분리
• EmailModal.tsx: 모달 크기 조정 및 사용자 경험 개선 (styled 컴포넌트 적용)

📱 모바일 반응형 개선

• SearchInputHistory.tsx:
  • 1rem = 10px 기준으로 모바일 폰트 크기 최적화
  • 검색 히스토리 항목: 1.4rem (14px)
  • 헤더 및 메시지 텍스트: 1.3rem (13px)
  • 모든 sx prop을 styled 컴포넌트로 리팩토링하여 프로젝트 일관성 유지

💖 프로젝트 카드 좋아요 UI 개선

• ProjectCard.tsx:
  • 사용자가 좋아요한 프로젝트: 채워진 하트 아이콘 (FavoriteIcon)
  • 좋아요하지 않은 프로젝트: 빈 하트 아이콘 (FavoriteBorderIcon)
  • useGetMyLikedProjectsIds 훅을 활용한 실시간 좋아요 상태 반영

기술적 개선사항

• 코드 품질: 모든 sx prop을 styled 컴포넌트로 통일하여 프로젝트 스타일링 일관성 확보
• 타입 안전성: React Query와 TypeScript를 활용한 안전한 API 호출 구현
• 성능 최적화: 불필요한 import 및 변수 제거로 번들 크기 최적화
• 사용자 경험: 직관적인 UI 피드백과 모바일 환경 최적화

개발 후기 및 개선사항

다음에 개선하고 싶은 점

• 이메일 전송 상태에 대한 더 세밀한 UI 피드백 (진행률 표시 등)
• 이메일 템플릿 유효성 검사 강화
• 좋아요 버튼에 애니메이션 효과 추가로 사용자 피드백 개선

팀원들과 공유하고 싶은 팁

• React Query mutation: onSuccess, onError 콜백을 활용하면 일관된 에러 처리와 사용자 피드백 구현 가능
• 리다이렉트 패턴: useLocation 훅을 활용한 redirect 파라미터 구현은 다른 인증 기능에도 재사용 가능
• styled 컴포넌트: sx prop 대신 styled 컴포넌트 사용으로 더 나은 성능과 일관성 확보
• 모바일 폰트 크기: 1rem = 10px 환경에서는 최소 1.3rem 이상 사용해야 가독성 확보

[namee-h]

호 이메일보내기라닛! 기대가 되는군욥! 👏🏻