refactor : 카테고리, 태그 목록 페이지 썸네일 이미지 관련 수정

- 모든 포스트 페이지와 동일한 스타일 적용

Author: pjj186

src/templates/category.tsx

@@ -97,13 +97,13 @@ const CategoryTemplate: React.FC<CategoryTemplateProps> = ({
                     {/* 썸네일 이미지 - 클릭 가능 */}
                     <Link
                       to={post.fields.slug}
-                      className="md:w-80 w-full h-48 md:h-auto flex-shrink-0 overflow-hidden block"
+                      className="md:w-96 w-full aspect-video flex-shrink-0 overflow-hidden block rounded-lg"
                     >
                       {thumbnail ? (
                         <GatsbyImage
                           image={thumbnail}
                           alt={title}
-                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                          className="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-200"
                         />
                       ) : (
                         <div className="w-full h-full bg-muted flex items-center justify-center">
@@ -225,12 +225,7 @@ export const pageQuery = graphql`
           tags
           thumbnail {
             childImageSharp {
-              gatsbyImageData(
-                width: 300
-                height: 200
-                placeholder: BLURRED
-                formats: [AUTO, WEBP, AVIF]
-              )
+              gatsbyImageData(placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
             }
           }
         }

src/templates/tag.tsx

@@ -95,13 +95,13 @@ const TagTemplate: React.FC<TagTemplateProps> = ({
                     {/* 썸네일 이미지 - 클릭 가능 */}
                     <Link
                       to={post.fields.slug}
-                      className="md:w-80 w-full h-48 md:h-auto flex-shrink-0 overflow-hidden block"
+                      className="md:w-96 w-full aspect-video flex-shrink-0 overflow-hidden block rounded-lg"
                     >
                       {thumbnail ? (
                         <GatsbyImage
                           image={thumbnail}
                           alt={title}
-                          className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
+                          className="w-full h-full object-cover object-center group-hover:scale-105 transition-transform duration-200"
                         />
                       ) : (
                         <div className="w-full h-full bg-muted flex items-center justify-center">
@@ -226,12 +226,7 @@ export const pageQuery = graphql`
           tags
           thumbnail {
             childImageSharp {
-              gatsbyImageData(
-                width: 300
-                height: 200
-                placeholder: BLURRED
-                formats: [AUTO, WEBP, AVIF]
-              )
+              gatsbyImageData(placeholder: BLURRED, formats: [AUTO, WEBP, AVIF])
             }
           }
         }