[S15P11A705-437] 검색 결과 갤러리 및 이미지 업로드 영역 개선

[TrossYou]

변경 사항

• 홈 검색 결과 영역을 가용 폭 기준 3열 레이아웃으로 변경
• 첫 화면에 결과 카드 3개가 잘림 없이 노출되도록 바깥 여백과 카드 폭 조정
• 3개 단위 scroll snap과 PinLog 민트/종이 색상의 가로 스크롤바 적용
• 검색 결과 영역의 키보드 포커스와 접근 가능한 이름 추가
• 장소 추가 모달의 이미지 업로드 영역을 남는 세로 공간과 전체 가로폭에 맞게 확대
• 업로드 이미지 미리보기가 확대된 영역을 채우도록 조정

원인

검색 결과 컨테이너가 넓은 화면에서 좌우 각각 최소 360px을 예약하면서 1280px PC 기준 실제 카드 영역이 약 560px만 남았습니다. 카드 폭은 288px 고정이어서 세 번째 카드가 컨테이너 밖으로 잘렸습니다.

이미지 업로드 영역은 최대 폭 320px과 최소 높이 120px으로 고정되어, 모달 밀도 조정 이후에도 남는 공간을 활용하지 못했습니다.

사용자 영향

• PC 화면에서 첫 검색 결과 3개를 한 번에 온전히 확인할 수 있습니다.
• 결과가 더 많으면 브랜드 스크롤바와 스냅으로 순서대로 탐색할 수 있습니다.
• 장소 추가 시 이미지 드래그·클릭 대상이 더 넓어지고 미리보기도 크게 표시됩니다.
• 1280×720에서도 모달 전체 스크롤 없이 주요 조작 요소가 노출됩니다.

검증

• 관련 Vitest: 3 files, 5 tests 통과
• TypeScript typecheck 통과
• ESLint 통과
• Prettier 및 git diff --check 통과
• Vite production build 통과
• 브라우저 실측
  • 1280×720: 업로드 영역 약 520×170px, 전체 스크롤 없음
  • 1920×1080: 업로드 영역 약 520×282px, 전체 스크롤 없음

Jira

• S15P11A705-437