LearningCollector: 블로그 태그 필터링 및 라이트 테마 UI 개선

요약

이번 커밋의 주요 변경사항은 태그 필터링 기능과 UI 변경입니다. 이제 사용자는 태그를 기준으로 게시글을 필터링할 수 있으며, 태그 목록은 블로그 목록 페이지의 왼쪽 사이드바에 표시됩니다. 추가적으로, 라이트 테마를 적용하여 사이트의 외観을 크게 개선했습니다.

배경 및 목적

이 작업은 사용자들이 게시글을 더 쉽게 찾고, 태그를 기준으로 게시글을 분류할 수 있도록 하기 위해 필요했습니다. 기존의 블로그 목록 페이지는 기능이 부족하여 사용자 경험을 개선하는 것이 중요했습니다.

구현 내용

이번 커밋에서 변경된 주요 파일들은 backend/controllers/postController.js, backend/routes/postRoutes.js, backend/services/postService.js, frontend/src/components/BlogCard.astro, frontend/src/layouts/Layout.astro, frontend/src/pages/blog.astro, frontend/src/styles/global.css 등입니다. 변경된 파일은 총 10개입니다. 추가된 코드 라인은 374줄, 삭제된 코드 라인은 176줄입니다.

주요 변경사항은 다음과 같습니다:

• postService.js에서 getPostsPaginated 함수를 수정하여 태그 필터링을 지원합니다.
• postController.js에서 태그 목록을 가져오는 getTags 함수를 추가했습니다.
• postRoutes.js에서 /tags 를 추가했습니다.
• global.css에서 라이트 테마로 전환하고, 필요한 스타일을 수정했습니다.

기술적 의사결정

이번 커밋에서 기술적인 결정은 주로 UI와 관련하여 이루어졌습니다. 크림색 기반의 라이트 테마를 선택한 이유는 사이트의 가독성과 사용자경험을 개선하기 위함입니다. 이전 디자인에서는 너무 화면이 어두워 시인성이 좋지 않다고 판단했습니다. 또한, 블로그에 다양한 주제의 글들이 포스팅됨에 따라서 태그 필터링을 위한 API를 추가합니다. 기존의 데이터베이스 쿼리를 최소한으로 변경하고, 퍼포먼스를 저하하지 않도록 설계했습니다.

배운 점 및 개선점

이번 작업을 통해 다음 사항을 배웠습니다:

• 태그 필터링을 위한 데이터베이스 쿼리를 디자인하는 방법
• 사용자 경험을 개선하는 라이트 테마 디자인

추후의 개선점은 다음과 같습니다:

• 사용자별 태그 필터링 기능 추가
• 블로그의 검색 기능을 더욱 강화하기

참고 자료

없음