[v0.6.5] - 폴더 아이콘 크기 및 색상 수정 & 카테고리 레이아웃 반응형 수정

src/app/(layout)/(shell)/(category)/[category]/_components/CategoryHeader.tsx

@@ -5,7 +5,7 @@ interface CategoryHeaderProps {
 
 export default function CategoryHeader({ title, description }: CategoryHeaderProps) {
   return (
-    <header className="flex flex-col md:flex-row gap-2 items-baseline">
+    <header className="flex flex-col gap-2 items-baseline">
       <h1 className="text-3xl font-extrabold tracking-tight md:text-4xl">
         {title}
       </h1>

src/app/(layout)/(shell)/(category)/[category]/_components/CategorySeries.tsx

@@ -51,7 +51,7 @@ export default function CategorySeries({
 
   return (
     <section className="max-w-full mt-4">
-      <div className="hidden md:block w-full">
+      <div className="hidden lg:block w-full">
         {seriesItems.length > 0 && (
           <CategorySeriesCarousel
             items={seriesItems}

src/app/(layout)/(shell)/(category)/[category]/_components/series/SeriesFolder.tsx

@@ -24,7 +24,7 @@ export default function SeriesFolder({ visible, activeId, onSelect }: Props) {
 
   return (
     <section>
-      <div className={`-ml-4 flex ${justifyClass}`}>
+      <div className={`-ml-3 flex ${justifyClass}`}>
         {visible.map((series) => {
           const isActive = series.id === activeId;
 

src/app/(layout)/(shell)/(category)/[category]/_components/series/SeriesFolderItem.tsx

@@ -27,25 +27,27 @@ export default function SeriesFolderItem({
     >
       <div
         className="
-      relative
-      w-[150px] h-40      
-      sm:w-[170px] sm:h-[185px] 
-      md:w-[190px] md:h-[205px] 
-      lg:w-[200px] lg:h-[210px]
-    "
+          relative
+          w-[clamp(175px,13.8vw,230px)]
+          aspect-300/250
+        "
       >
         <FolderIcon
           tone={tone}
-          size={210}
-          className="transition-transform duration-300"
+          className="
+            w-full h-full
+            transition-transform duration-300
+            group-hover:scale-[1.02]
+            group-active:scale-[0.98]
+          "
         />
 
-        <div className="pointer-events-none absolute bottom-6 left-5 flex flex-col px-5 py-5">
-          <p className="text-lg font-semibold text-white tracking-wider ">
+        <div className="pointer-events-none absolute bottom-[12%] left-[10%] flex flex-col px-[10%] py-[10%]">
+          <p className="text-[clamp(14px,1.2vw,18px)] font-semibold text-white tracking-wider">
             {name}
           </p>
 
-          <div className="flex gap-10 items-baseline text-[10px] xl:text-xs text-white/60 ">
+          <div className="mt-1 flex items-baseline gap-3 text-[clamp(10px,0.9vw,12px)] text-white/60">
             <span>총 {postCount}개의 포스트</span>
           </div>
         </div>

src/app/(layout)/(shell)/(category)/[category]/_components/series/SeriesHeader.tsx

@@ -15,7 +15,7 @@ export default function SeriesHeader({
 }: Props) {
   return (
     <header className="mb-4 flex items-center justify-between">
-      <h2 className="text-2xl font-semibold">SERIES</h2>
+      <h2 className="text-2xl font-semibold text-foreground/50">SERIES</h2>
       <div className="flex items-center gap-2">
         <button
           type="button"

src/app/(layout)/(shell)/(category)/[category]/layout.tsx

@@ -4,7 +4,7 @@ export default function SiteLayout({
   children: React.ReactNode;
 }) {
   return (
-    <main className="flex-1 -mt-5 pt-16 px-5 md:px-20 lg:px-70 max-w-[1560px] w-full">
+    <main className="flex-1 -mt-5 pt-16 px-5 md:px-20 lg:px-40 xl:px-70 xl2:px-80  max-w-[1560px] w-full">
       {children}
     </main>
   );

src/components/common/icons/FolderIcon.tsx

@@ -3,35 +3,34 @@ import FolderSvg from "@/assets/svg/Folder-series.svg";
 import clsx from "clsx";
 import { CSSProperties } from "react";
 
-export type FolderTone = "gray" | "blue" | "pink" | "purple" | "orange";
+export type FolderTone = "gray" | "blue" | "pink" | "purple" | "orange" | "darkblue";
 
 const TONE_COLOR: Record<FolderTone, string> = {
-  gray: "#AEB4C5",
+  gray: "#9c9fa9",
   blue: "#0ea5e9",
+  darkblue: "#357fff",
   pink: "#ff66b2",
-  purple: "#6da0ff",
-  orange: "#FB923C",
+  purple: "#8679ec",
+  orange: "#f1842a",
 };
+
 interface FolderIconProps {
   className?: string;
-  size?: number;
   tone?: FolderTone;
 }
 
 export default function FolderIcon({
   className,
-  size = 96,
   tone = "blue",
 }: FolderIconProps) {
   const style: CSSProperties = {
-    width: size,
-    height: size,
     color: TONE_COLOR[tone],
   };
   return (
     <div
       className={clsx(
         "folder-root",
+        "w-full h-full",
         "inline-flex items-center justify-center cursor-pointer",
         className
       )}

src/lib/posts/registry/series.registry.ts

@@ -52,7 +52,7 @@ export const SERIES_META_BY_CATEGORY: Record<CategoryKey, SeriesMeta[]> = {
       description:
         "Next.js 기반 애플리케이션 구조, 렌더링 방식, 데이터 흐름을 고민하며 정리한 인사이트 모음",
       category: "Insight",
-      tone: "gray",
+      tone: "darkblue",
     },
     {
       id: "r3f-issues",

tailwind.config.ts

@@ -1,12 +1,19 @@
 import type { Config } from "tailwindcss";
 
 const config: Config = {
-  darkMode: "class",  
+  darkMode: "class",
   content: [
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/**/*.{js,ts,jsx,tsx,mdx}",
   ],
+  theme: {
+    extend: {
+      screens: {
+        xl2: "1410px",
+      },
+    },
+  },
 };
 
-export default config;
+export default config;