반응형

src/components/Header.tsx

@@ -31,10 +31,10 @@ const Header = () => {
           setMobileActiveIndex(null);
           scrollToTop();
         }}
-        className="absolute left-4 sm:left-[40px] top-1/2 transform -translate-y-1/2 flex items-center gap-1 w-32"
+        className="absolute left-4 sm:left-[40px] top-1/2 transform -translate-y-1/2 flex items-center gap-1 w-36"
       >
-        <img className="w-10 h-7" src={`${IMAGE_PREFIX}/logo.png`} alt="logo"/>
-        <div className="text-gray-600 text-xl font-bold font-['Noto_Sans_KR']">반도산전</div>
+        <img className="w-12 h-8" src={`${IMAGE_PREFIX}/logo.png`} alt="logo"/>
+        <div className="text-gray-600 text-2xl font-bold font-['Noto_Sans_KR']">반도산전</div>
       </Link>
 
       <nav 

src/data/menuItems.ts

@@ -40,11 +40,11 @@ const menuItems: MenuItem[] = [
         ]
     },
     {
-        label: "지속가능경영",
+        label: "지속가능경영(ESG/SH)",
         href: "/performance",
         children: [
-            { label: "준법경영", href: "ceo" },
-            { label: "ESG 보고서", href: "history" }
+            { label: "ESG", href: "esg" },
+            { label: "SH", href: "sh" }
         ]
     },
     {

src/pages/score/Certification.tsx

@@ -48,42 +48,52 @@ const Certification: React.FC = () => {
       : certificates.filter((cert) => cert.category === activeTab);
 
   return (
-    <div className="max-w-7xl mx-auto px-4 py-10">
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 py-8 sm:py-10">
       {/* 탭 */}
-      <div className="flex w-full mb-8 border border-gray-200 rounded overflow-hidden">
-        {categories.map((category) => (
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-1 mb-6 sm:mb-8 border border-gray-200 rounded overflow-hidden">
+        {categories.map((category, index) => (
           <div
             key={category.id}
             onClick={() => setActiveTab(category.id)}
-            className={`w-1/6 h-11 flex items-center justify-center cursor-pointer transition-colors ${
+            className={`h-10 sm:h-11 flex items-center justify-center cursor-pointer transition-colors px-2 ${
               activeTab === category.id
-                ? "bg-blue-900 text-white font-bold text-base"
-                : "border-l border-zinc-300/75 text-black/70 text-xs font-thin"
-            }`}
+                ? "bg-blue-900 text-white font-semibold text-xs sm:text-sm"
+                : "border-l border-zinc-300/75 text-black/70 text-xs font-medium hover:bg-gray-50"
+            } ${index === 0 ? 'border-l-0' : ''}`}
           >
-            {category.label}
+            <span className="text-center leading-tight">{category.label}</span>
           </div>
         ))}
       </div>
 
       {/* 인증서 그리드 */}
-      <div className="grid grid-cols-4 gap-6">
-        {filteredCerts.map((cert) => (
-          <div
-            key={cert.id}
-            className="flex flex-col items-center w-72 h-96 cursor-pointer"
-            onClick={() => setSelectedCert(cert)}
-          >
-            <img
-              src={cert.imageUrl}
-              alt={cert.title}
-              className="w-60 h-80 rounded-[5px] object-cover"
-            />
-            <div className="w-80 text-center mt-2 text-black text-base font-light font-['Noto_Sans_KR'] leading-tight">
-              {cert.title}
+      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-3 sm:gap-4">
+        {filteredCerts.length > 0 ? (
+          filteredCerts.map((cert) => (
+            <div
+              key={cert.id}
+              className="flex flex-col items-center cursor-pointer hover:transform hover:scale-105 transition-transform duration-200"
+              onClick={() => setSelectedCert(cert)}
+            >
+              <div className="w-full max-w-[200px] aspect-[3/4] bg-gray-100 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-200">
+                <img
+                  src={cert.imageUrl}
+                  alt={cert.title}
+                  className="w-full h-full object-cover"
+                />
+              </div>
+              <div className="w-full text-center mt-2 px-2 text-black text-xs sm:text-sm font-medium font-['Noto_Sans_KR'] leading-tight">
+                {cert.title}
+              </div>
+            </div>
+          ))
+        ) : (
+          <div className="col-span-full text-center py-12">
+            <div className="text-gray-500 text-lg font-medium font-['Noto_Sans_KR']">
+              해당 카테고리에 인증서가 없습니다.
             </div>
           </div>
-        ))}
+        )}
       </div>
 
       {/* 모달 */}