Merge pull request #88 from sparcs-kaist/feat/MainPage

special card for PM

Author: Killerwhale-Park

src/app/makers/components/MakerCard.tsx

@@ -20,60 +20,144 @@ const MakerCard: React.FC<MakerCardProps> = ({
   isProject = false,
   onClick
 }) => {
+  // PM인지 확인
+  const isPM = position?.includes('Project Manager');
+
   if (isProject) {
     return (
       <div 
         className={`
-          w-[220px] h-[80px] rounded-[10px] bg-white flex flex-col items-center justify-center
+          w-full max-w-[200px] h-[100px] rounded-[10px] bg-white flex flex-col items-center justify-center
           relative hover:shadow-lg transition-shadow duration-300 ease-in-out
           ${active ? 'shadow-md' : 'shadow-sm'}
           cursor-pointer
-          sm:w-[110px]
+          sm:w-full sm:max-w-none
         `}
         onClick={onClick}
       >
-        <span className="text-[15px] font-bold leading-[1.47] sm:text-[12px] sm:text-center">
+        <span className="text-[16px] font-bold leading-[1.47] sm:text-[14px] sm:text-center px-2">
           {title}
         </span>
-        <span className="mt-[12px] text-[9px] font-medium leading-[1.44] text-gray-400">
+        <span className="mt-[12px] text-[10px] font-medium leading-[1.44] text-gray-400">
           {subtitle}
         </span>
         {launched && (
-          <span className="text-[9px] font-medium leading-[1.44] text-gray-400">
+          <span className="text-[10px] font-medium leading-[1.44] text-gray-400">
             launched at {launched}
           </span>
         )}
       </div>
     );
   }
 
+  // PM 카드 레이아웃
+  if (isPM) {
+    return (
+      <div className={`
+        w-full max-w-[220px] h-[140px] py-0 px-[30px] rounded-[10px] 
+        bg-gradient-to-br from-[#fff3d1] to-white
+        shadow-sm
+        flex flex-row items-center justify-between
+        hover:shadow-md transition-all duration-1000 ease-in-out
+        relative overflow-visible
+        sm:w-full sm:max-w-none
+      `}>
+        <div className="absolute inset-0 z-[1] pointer-events-none overflow-hidden rounded-[10px]">
+          <div 
+            style={{
+              position: 'absolute',
+              top: '0',
+              width: '80%',
+              height: '200%',
+              background: 'linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.95), rgba(255,255,255,0))',
+              opacity: '0.7',
+              transform: 'skewX(45deg)',
+              animation: 'pmShine 1.5s ease-in-out infinite',
+              boxShadow: '0 0 30px 10px rgba(255,255,255,0.5)',
+            }}
+          />
+        </div>
+        <div className="flex flex-col items-start z-[2] max-w-[55%]">
+          <span className="text-[20px] font-bold leading-[1.3] text-[#333] truncate w-full">
+            {title}
+          </span>
+          <div className="mt-[4px] flex flex-row items-center">
+            <div className="w-[13px] h-[20px] overflow-hidden mr-1 flex-shrink-0">
+              <Image 
+                src="/SparcsLogo.svg" 
+                alt="Sparcs Logo" 
+                width={70} 
+                height={20}
+                className="w-[70px] max-w-none [filter:invert(74%)_sepia(56%)_saturate(1094%)_hue-rotate(347deg)_brightness(97%)_contrast(92%)]"
+              />
+            </div>
+            <span className="text-[14px] font-extrabold leading-[1.5] font-['Raleway'] text-[#eba12a] truncate">
+              {subtitle}
+            </span>
+          </div>
+        </div>
+        
+        <div className="z-[2] self-center flex-shrink-0 flex flex-col items-end">
+          <span className="text-[12px] font-semibold leading-[1.4] text-[#eba12a] mb-1">
+            {position?.match(/\d{4}/)?.[0] || ''}
+          </span>
+          <span className="text-[12px] font-bold leading-[1.4] text-[#eba12a] text-right">
+            Project Manager
+          </span>
+        </div>
+
+        <style dangerouslySetInnerHTML={{
+          __html: `
+            @keyframes pmShine {
+              0% {
+                left: -150%;
+              }
+              100% {
+                left: 150%;
+              }
+            }
+            
+            @keyframes borderRotate {
+              0% {
+                transform: rotate(0deg);
+              }
+              100% {
+                transform: rotate(360deg);
+              }
+            }
+          `
+        }} />
+      </div>
+    );
+  }
+
   return (
     <div className={`
-      w-[280px] h-[120px] py-0 px-[36px] rounded-[10px] shadow-md bg-white
+      w-full max-w-[220px] h-[140px] py-0 px-[30px] rounded-[10px] shadow-sm bg-white
       flex flex-row items-center justify-between
-      hover:shadow-lg transition-shadow duration-300 ease-in-out
-      sm:w-[120px] sm:flex-col sm:justify-center
+      hover:shadow-md transition-shadow duration-300 ease-in-out
+      sm:w-full sm:max-w-none
     `}>
-      <div className="flex flex-col items-start sm:items-center">
-        <span className="text-[20px] font-bold leading-[1.5] sm:text-[14px] sm:text-center">
+      <div className="flex flex-col items-start max-w-[65%]">
+        <span className="text-[18px] font-bold leading-[1.5] truncate w-full">
           {title}
         </span>
-        <div className="mt-[4px] flex flex-row items-start">
-          <div className="w-[13px] h-[20px] overflow-hidden">
+        <div className="mt-[4px] flex flex-row items-center">
+          <div className="w-[13px] h-[20px] overflow-hidden mr-1 flex-shrink-0">
             <Image 
-              src="SparcsLogo.svg" 
+              src="/SparcsLogo.svg" 
               alt="Sparcs Logo" 
               width={70} 
               height={20}
-              className="w-[70px] max-w-none filter-[invert(63%)_sepia(71%)_saturate(514%)_hue-rotate(352deg)_brightness(97%)_contrast(91%)]"
+              className="w-[70px] max-w-none [filter:invert(74%)_sepia(56%)_saturate(1094%)_hue-rotate(347deg)_brightness(97%)_contrast(92%)]"
             />
           </div>
-          <span className="text-[13px] font-extrabold leading-[1.5] font-['Raleway'] text-[#eba12a]">
+          <span className="text-[13px] font-extrabold leading-[1.5] font-['Raleway'] text-[#eba12a] truncate">
             {subtitle}
           </span>
         </div>
       </div>
-      <span className="text-[10px] font-medium leading-[1.5] text-gray-400 sm:mt-[5px] sm:text-center">
+      <span className="text-[10px] font-medium leading-[1.5] text-gray-400 text-right flex-shrink-0">
         {position}
       </span>
     </div>

src/app/makers/page.tsx

@@ -219,12 +219,12 @@ export default function Makers() {
   };
 
   return (
-    <div className="max-w-[1280px] mx-auto px-4 py-8 bg-[#fafafa]">
+    <div className="max-w-[1280px] w-[80%] mx-auto px-4 py-8 bg-[#fafafa]">
       <h1 className="text-[20px] font-bold leading-[1.45] mb-[18px] mx-[90px] md:mx-0 sm:mx-[50px] xs:mx-[20px]">
         Project
       </h1>
 
-      <div className="grid gap-[10px] justify-center mb-[48px] grid-cols-[repeat(auto-fit,minmax(220px,max-content))] sm:grid-cols-[repeat(auto-fit,minmax(110px,max-content))]">
+      <div className="grid gap-[15px] justify-center mb-[48px] grid-cols-6 lg:grid-cols-5 md:grid-cols-4 sm:grid-cols-2 xs:grid-cols-1">
         {projects.map((project, index) => (
           <MakerCard
             key={project.name}
@@ -237,14 +237,13 @@ export default function Makers() {
           />
         ))}
       </div>
-
       {projects[selected]?.description && (
         <div className="flex w-full flex-col justify-center my-[48px]">
           <h2 className="text-[20px] font-bold leading-[1.45] mb-[18px] mx-[90px] md:mx-0 sm:mx-[50px] xs:mx-[20px]">
             Description
           </h2>
-          <div className="rounded-[10px] shadow-md bg-white p-[22px_64px] mt-[30px] mx-[90px] md:mx-0 sm:mx-[50px] sm:p-[22px_22px] xs:mx-[20px]">
-            <p className="text-[15px] font-medium leading-[1.47] text-left sm:text-[12px]">
+          <div className="rounded-[10px] shadow-sm bg-white p-[22px_64px] mt-[30px] mx-[90px] md:mx-0 sm:mx-[50px] sm:p-[22px_22px] xs:mx-[20px]">
+            <p className="text-[16px] font-normal leading-[1.47] text-left">
               {projects[selected].description}
             </p>
           </div>
@@ -254,8 +253,7 @@ export default function Makers() {
       <h2 className="text-[20px] font-bold leading-[1.45] mb-[18px] mx-[90px] md:mx-0 sm:mx-[50px] xs:mx-[20px]">
         Member
       </h2>
-      
-      <div className="grid gap-[10px] justify-center mt-[48px] mb-[10px] grid-cols-[repeat(auto-fit,minmax(280px,max-content))] sm:grid-cols-[repeat(auto-fit,minmax(120px,max-content))]">
+      <div className="grid gap-[15px] justify-center mt-[48px] mb-[10px] grid-cols-5 lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 xs:grid-cols-1">
         {positions.map(position => 
           projects[selected].members[position as keyof typeof projects[typeof selected]['members']]?.map((member: any) => (
             <MakerCard

tailwind.config.ts

@@ -19,9 +19,16 @@ export default {
         ara_event_yellow_bright: "#FFEDD2",
         ara_event_green_bright: "#F8FFCC",
       },
+      keyframes: {
+        shine: {
+          "0%": { transform: "translateX(-100%) rotate(45deg)" },
+          "100%": { transform: "translateX(200%) rotate(45deg)" },
+        },
+      },
+      animation: {
+        shine: "shine 3s ease-in-out infinite",
+      },
     },
   },
-  plugins: [
-    require("@tailwindcss/typography"),
-  ],
+  plugins: [require("@tailwindcss/typography")],
 } satisfies Config;