[4차] 모바일에서 카드 이미지가 계속 흑백이던 문제 고치기

작업 전 상태

프로젝트와 로그 이미지는 기본적으로 흑백이었고 마우스를 올렸을 때만 컬러로 바뀌었습니다. 스마트폰과 태블릿에는 마우스 Hover가 없기 때문에 이미지를 컬러로 볼 수 없었습니다.

요청한 내용

터치 기기에서도 사이트의 컬러 이미지를 볼 수 있게 만들고, 360~430px 화면에서 Hero 제목과 전체 페이지가 깨지지 않는지 다시 확인했습니다.

문제 원인

흑백 필터가 모든 기기의 기본 CSS였고 컬러로 되돌리는 조건이 :hover 하나뿐이었습니다. Hero 제목도 최소 54px이라 좁은 화면에서는 문장이 추가로 나뉠 수 있었습니다.

변경한 내용

추가

• 마우스 환경만 구분하는 (hover: hover) and (pointer: fine) 조건
• 480px 이하 Hero 글자 크기와 줄 간격
• 모바일 내비게이션·필터·검색의 최소 터치 높이
• 누적 개발 로그와 단일 요청 관리 문서

수정

• 모든 기기의 이미지 기본값을 컬러로 변경
• 마우스 기기에서만 흑백→컬러 Hover 적용
• 학습 가이드의 Hover 설명 갱신

삭제

• 모든 기기에 무조건 적용되던 기본 흑백 필터

왜 이렇게 변경했나

이미지를 탭할 때마다 색을 바꾸는 JavaScript 방식은 카드 링크 동작과 충돌할 수 있습니다. 컬러를 기본값으로 두고 마우스가 있을 때만 효과를 추가하면 상태 관리가 필요 없고 모든 기기에서 내용을 볼 수 있습니다.

초보자가 알아둘 점

미디어 쿼리는 화면 너비뿐 아니라 입력 장치도 확인합니다. hover: hover는 마우스를 올릴 수 있다는 뜻이고 pointer: fine은 마우스처럼 위치를 정밀하게 선택할 수 있다는 뜻입니다.

확인한 내용

자동 검사

• npm run lint
• npm run type-check
• npm run format:check
• npm run build

직접 확인

• 360·390·430px의 주요 10개 경로 확인
• Hero 제목이 모두 2줄인지 확인
• 모바일 가로 스크롤과 깨진 이미지가 없는지 확인
• 데스크톱 Hover와 카드 배경 반전 유지 확인
• 브라우저 콘솔 오류 확인

관련 파일

• src/styles/globals.css
• docs/guides/LEARNING_GUIDE.md
• docs/development/DEVELOPMENT_LOG.md
• docs/development/DEVELOPMENT_REQUEST.md

남아 있는 점

현재 작업 범위에서는 없습니다. 실제 모바일 기기별 차이는 배포 후 실기기에서도 한 번 더 확인하는 것이 좋습니다.

다음에 할 일

배포 준비 작업은 별도 요청에서 진행합니다.