[2차] 필터 버그와 누락 기능을 고치고 SEO 보완하기

작업 전 상태

카테고리를 선택한 뒤 검색하면 카테고리가 사라졌고, 데이터에는 존재하지만 화면에서 사용할 수 없는 태그와 데모 기능이 있었습니다. About과 Contact도 내용이 부족했습니다.

요청한 내용

교차 점검에서 발견된 기능 누락과 유지보수 문제를 고치고, 검색·공유·키보드 사용·반응형 화면까지 기본 품질을 높였습니다.

문제 원인

검색할 때 새 URL을 만들면서 기존 쿼리스트링을 복사하지 않았습니다. 일부 타입과 데이터 함수는 먼저 만들어졌지만 이를 사용하는 화면이 아직 연결되지 않았습니다.

변경한 내용

추가

• Log 태그 필터
• embed, link, download 프로젝트 데모 UI
• 프로젝트와 로그 썸네일
• Contact Form UI와 About 전체 섹션
• Open Graph, Twitter metadata, sitemap, robots, 404
• 키보드 포커스와 본문 바로가기 링크
• Prettier와 초보자 학습 가이드

수정

• 검색할 때 기존 카테고리와 태그 조건을 유지
• 태블릿 2열, 모바일 1열 반응형 레이아웃
• 읽기 어려웠던 압축 코드 포맷

삭제

• 실제 기능 없이 남아 있던 정적 Contact 안내만의 구성

왜 이렇게 변경했나

필터 상태를 URL에 모두 남기면 새로고침과 링크 공유 뒤에도 같은 결과를 볼 수 있습니다. 공통 데이터 구조는 유지하면서 화면이 빠진 부분만 연결해 불필요한 구조 변경을 피했습니다.

초보자가 알아둘 점

URL의 ?category=web&q=Next.js 부분을 쿼리스트링이라고 합니다. 검색어를 추가할 때 기존 값을 복사한 뒤 필요한 값만 바꿔야 여러 필터가 함께 동작합니다.

확인한 내용

자동 검사

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

직접 확인

• 카테고리·태그·검색어 조합 확인
• embed·link·download 상세 화면 확인
• 모바일·태블릿·데스크톱 화면 확인

관련 파일

• src/components/search/SearchInput.tsx
• src/components/project/
• src/components/log/
• src/app/projects/
• src/app/log/
• src/app/contact/
• src/app/about/

남아 있는 점

Contact는 화면과 입력 검증만 있으며 실제 이메일 전송은 아직 연결하지 않았습니다.

다음에 할 일

폰트와 디자인 값을 통일하고 다양한 예시 콘텐츠로 모든 UI 분기를 확인합니다.