https://unsplash.com/documentation#get-a-photo

• API 호출 설정: getPhotoById 함수 추가.
• Modal 컴포넌트: 모달이 열릴 때 API를 호출해 데이터를 받아 UI를 구성.
• UI 스타일링: Unsplash 모달과 유사하게 정보(작성자, 다운로드 수, 조회수 등)를 표시.
• 전체 화면 모드: 이미지 클릭 시 화면을 꽉 채우는 기능 추가.

모달 컴포넌트 구현 상세

• 컴포넌트 구조: React와 styled-components를 사용하여 모달 구현
• 데이터 fetching: react-query의 useQuery 훅을 사용하여 이미지 데이터 가져오기
• UI 요소:
  • 헤더: 사용자 정보, 좋아요, 컬렉션 추가, 다운로드 버튼
  • 이미지 컨테이너: 줌 버튼, 이미지 표시
  • 푸터: 조회수, 다운로드 수, 공유/정보/더보기 버튼
• 기능:
  • 전체 화면 모드 전환
  • 이전/다음 이미지 네비게이션
  • ESC 키로 모달 닫기
• 스타일링: styled-components를 사용하여 각 UI 요소에 대한 스타일 정의
• 반응형 디자인: 다양한 화면 크기에 대응하는 레이아웃

이 구현은 Unsplash의 모달 디자인을 충실히 따르면서도, React의 최신 기능과 라이브러리를 활용하여 효율적이고 유지보수가 용이한 구조를 갖추고 있습니다.

모달 컴포넌트 구현 과정 및 코드 예시 상세 설명

이 섹션에서는 Unsplash 스타일의 이미지 모달 구현 과정을 상세히 설명하겠습니다. 이 구현은 React와 styled-components를 사용하여 만들어졌으며, 효율적이고 유지보수가 용이한 구조를 갖추고 있습니다.

1. 컴포넌트 구조 설계