Skip to content

special card for PM #88

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jun 26, 2025
Merged

special card for PM #88

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 100 additions & 16 deletions src/app/makers/components/MakerCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 5 additions & 7 deletions src/app/makers/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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>
Expand All @@ -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
Expand Down
13 changes: 10 additions & 3 deletions tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Loading