Update 33rd archive content

package.json

@@ -15,7 +15,7 @@
   "dependencies": {
     "@kusitms.com/icons": "^0.1.0",
     "@kusitms.com/tokens": "^0.2.0",
-    "@kusitms.com/ui": "^0.2.0",
+    "@kusitms.com/ui": "0.2.2",
     "@next/third-parties": "^16.0.1",
     "@radix-ui/react-slot": "^1.2.2",
     "@vercel/speed-insights": "^1.2.0",

src/app/globals.css

@@ -208,9 +208,9 @@ body {
   width: 100% !important;
 }
 
-/* @kusitms.com/ui Modal: mobile에서 items-start → items-center 오버라이드 */
-[aria-modal="true"] > div {
-  align-items: center;
+/* @kusitms.com/ui Modal: mobile에서도 dialog를 화면 중앙에 배치 */
+[aria-modal="true"] > div:nth-of-type(2) {
+  align-items: center !important;
 }
 
 .display-gradient {

src/components/archive/Banner.tsx

@@ -2,6 +2,8 @@
 import Image from "next/image";
 import { useBreakpoint } from "@/hooks";
 
+const ARCHIVE_BANNER_SRC = "/projects/archive/KusitmsExhibitionBanner.webp";
+
 export default function Banner() {
   const { isDesktop } = useBreakpoint();
 
@@ -15,30 +17,14 @@ export default function Banner() {
           <div className="w-full mx-auto relative h-[400px]">
             <div className="relative h-[400px] w-full">
               <Image
-                src={"/projects/Banner.svg"}
-                alt={"Projects banner"}
+                src={ARCHIVE_BANNER_SRC}
+                alt={"KUSITMS exhibition banner"}
                 priority
                 fill
                 sizes="(max-width: 1200px) 1200px, 3840px"
                 className="object-cover object-center"
               />
             </div>
-            <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-              <div className="flex flex-col w-full max-w-[1024px] px-[48px] h-full justify-between py-[48px]">
-                <Image
-                  src={"/projects/BannerDate.svg"}
-                  alt={"Banner date"}
-                  width={425}
-                  height={61}
-                />
-                <Image
-                  src={"/projects/BannerText.svg"}
-                  alt={"Banner text"}
-                  width={582}
-                  height={154}
-                />
-              </div>
-            </div>
           </div>
         </section>
       )}
@@ -48,28 +34,12 @@ export default function Banner() {
           <div className="w-full mx-auto relative h-[297px]">
             <div className="h-[297px] w-full relative">
               <Image
-                src={"/projects/Banner.svg"}
-                alt={"Projects banner"}
+                src={ARCHIVE_BANNER_SRC}
+                alt={"KUSITMS exhibition banner"}
                 priority
                 fill
                 sizes="100vw"
-                style={{ objectFit: "none", objectPosition: "center top" }}
-              />
-            </div>
-            <div className="absolute inset-0 flex-col flex py-[36px] justify-between pointer-events-none">
-              <Image
-                src={"/projects/BannerDate.svg"}
-                alt={"Banner date"}
-                width={268}
-                height={42}
-                className="ml-[27px]"
-              />
-              <Image
-                src={"/projects/BannerText.svg"}
-                alt={"Banner text"}
-                width={281}
-                height={76}
-                className="ml-[20px]"
+                className="object-cover object-center"
               />
             </div>
           </div>

src/components/archive/interaction/TimelineHeader.tsx

@@ -38,7 +38,7 @@ export default function TimelineHeader() {
           className="text-dark-blue-500 desktop:text-title-5 text-title-7 font-bold"
           variants={itemVariants}
         >
-          32nd KUSITMS
+          33rd KUSITMS
         </motion.p>
       </div>
     </motion.div>

src/components/main/GuestIntroSection.tsx

@@ -37,13 +37,7 @@ export default function GuestIntroSection() {
         >
           <div className="grid grid-cols-1 tablet:grid-cols-3 desktop:grid-cols-4 gap-x-6 gap-y-8 place-items-center">
             {GUEST_DATA.map((guest, idx) => (
-              <div
-                key={idx}
-                className={
-                  `flex flex-col items-center ` +
-                  (idx === 4 ? "desktop:col-start-2" : idx === 5 ? "desktop:col-start-3" : "")
-                }
-              >
+              <div key={idx} className="flex flex-col items-center">
                 <motion.div
                   initial={{ opacity: 0, y: 40 }}
                   whileInView={{ opacity: 1, y: 0 }}

src/components/main/MeetupProjectCarousel.tsx

@@ -117,7 +117,7 @@ export default function MeetupProjectCarousel({
       {archiveMode && (
         <div className="desktop:mt-[160px] mt-[80px] items-center flex flex-col w-full gap-4">
           <p className="text-title-7 desktop:text-title-5 text-gray-900 font-bold">
-            32기 큐시즘 전시회
+            33기 큐시즘 전시회
           </p>
           <p className="text-body-8 desktop:text-body-4 text-gray-500 text-center">
             큐밀리들의 두 달간의 여정,&nbsp;

src/components/main/StatsSection.tsx

@@ -10,13 +10,13 @@ import { useBreakpoint } from "@/hooks";
 export default function StatsSection() {
   const statData = [
     {
-      end: 1409,
+      end: 1464,
       suffix: "명",
       label: "누적 회원 수",
       delay: 0,
     },
     {
-      end: 230,
+      end: 244,
       suffix: "개",
       label: "프로젝트 결과물",
       delay: 0.3,

src/components/projects/CorporateProjectContainer.tsx

@@ -26,7 +26,7 @@ export default function CorporateProjectContainer({
         onChange={handleFilterChange}
         projectList={corporateProjectsList.corporateList}
       />
-      <div className="grid grid-cols-1 tablet:grid-cols-3 gap-5 gap-x-[22px]">
+      <div className="grid grid-cols-1 tablet:grid-cols-3 gap-5 gap-x-[22px] [&_.project-card>div]:!w-full [&_.project-card>div]:!max-w-full">
         {projects.corporateList.map((project) => (
           <div key={project.corporate_id} className="project-card cursor-pointer">
             <ShowcaseCard

src/components/projects/MeetupProjectContainer.tsx

@@ -28,7 +28,7 @@ export default function ProjectContainer({ data: meetupProjectList }: ProjectCon
         onChange={handleFilterChange}
         projectList={meetupProjectList.meetup_list}
       />
-      <div className="grid grid-cols-1 tablet:grid-cols-3 gap-5 gap-x-[22px]">
+      <div className="grid grid-cols-1 tablet:grid-cols-3 gap-5 gap-x-[22px] [&_.project-card>div]:!w-full [&_.project-card>div]:!max-w-full">
         {projects.meetup_list.map((project) => (
           <Link
             href={`/projects/meetup/${project.meetup_id}`}

src/components/review/story/Stories.tsx

@@ -86,11 +86,13 @@ export default function Stories({ initialData }: StoriesContainerProps) {
           )}
         </div>
         {storiesData.totalPages > 0 && (
-          <Pagination
-            currentPage={currentPage + 1}
-            totalPages={storiesData.totalPages}
-            onPageChange={handlePageChange}
-          />
+          <div className="flex justify-center">
+            <Pagination
+              currentPage={currentPage + 1}
+              totalPages={storiesData.totalPages}
+              onPageChange={handlePageChange}
+            />
+          </div>
         )}
       </div>
     </>

src/components/shared/Footer.tsx

@@ -1,5 +1,5 @@
+import { Footer as FooterUI } from "@kusitms.com/ui";
 import Image from "next/image";
-import Link from "next/link";
 import { IconLink } from "./LinkCircle";
 import TopScrollButton from "./TopScrollButton";
 
@@ -36,42 +36,27 @@ const SNSGROUPS = [
 ];
 
 export const Footer = () => {
+  const logo = (
+    <Image
+      src="/footerLogo.svg"
+      alt="큐시즘 로고"
+      width={132}
+      height={35}
+      priority
+      className="h-[24px] w-[91px] desktop:h-[35px] desktop:w-[132px]"
+    />
+  );
+
+  const contactIcons = SNSGROUPS.map((social) => (
+    <IconLink key={social.link} img={social.img} link={social.link} size={social.size} />
+  ));
+
   return (
-    <footer className="w-full py-[60px]">
-      <div className="max-w-[1180px] w-full mx-auto flex desktop:flex-row flex-col justify-between px-10">
-        <div className="flex flex-col mt-1">
-          <div className="flex items-center justify-between">
-            <Image
-              src="/footerLogo.svg"
-              alt="큐시즘 로고"
-              width={132}
-              height={35}
-              priority
-              className="w-[91px] h-[24px] desktop:w-[132px] desktop:h-[35px]"
-            />
-          </div>
-          <Link
-            href="https://kusitms-bucket.s3.ap-northeast-2.amazonaws.com/policy/kusitms_31st_policy.pdf"
-            target="_blank"
-            className="desktop:text-body-6 text-body-8 text-gray-800 underline desktop:mt-10 mt-4"
-          >
-            학회정관
-          </Link>
-          <p className="desktop:text-body-6 text-body-8 text-gray-800 mt-3">
-            KUSITMS (큐시즘, 한국대학생IT경영학회)
-            <br />ⓒ 2023. KUSITMS. All rights reserved.
-          </p>
-        </div>
-        <div className="flex-col desktop:pt-0 pt-7 desktop:self-end">
-          <h4 className="text-body-5 text-gray-800 desktop:mb-5 mb-2">Contact</h4>
-          <div className="flex desktop:gap-5 gap-[14px]">
-            {SNSGROUPS.map((social, index) => (
-              <IconLink key={index} img={social.img} link={social.link} size={social.size} />
-            ))}
-          </div>
-        </div>
-      </div>
-      <TopScrollButton />
-    </footer>
+    <FooterUI
+      logo={logo}
+      contactIcons={contactIcons}
+      bylawsHref="https://kusitms-bucket.s3.ap-northeast-2.amazonaws.com/policy/kusitms_31st_policy.pdf"
+      scrollTopButton={<TopScrollButton />}
+    />
   );
 };

src/components/shared/Header.tsx

@@ -1,29 +1,71 @@
 "use client";
 
+import { HeaderNavigation, Header as HeaderUI } from "@kusitms.com/ui";
 import Image from "next/image";
 import Link from "next/link";
-import MobilePageNav from "./MobilePageNav";
-import { PageNav } from "./PageNav";
+import { usePathname } from "next/navigation";
+
+const navLinks = [
+  { href: "/", label: "학회소개", matchPath: "/" },
+  { href: "/projects/meetup", label: "프로젝트", matchPath: "/projects" },
+  { href: "/reviews/activity", label: "후기", matchPath: "/reviews" },
+  { href: "/archive", label: "33기 아카이브", matchPath: "/archive" },
+  { href: "/recruit", label: "리크루팅", matchPath: "/recruit" },
+];
 
 export const Header = () => {
+  const pathname = usePathname();
+  const currentPath = pathname ?? "";
+
+  const logo = (
+    <h1>
+      <Link href="/">
+        <Image
+          src="/headerLogo.svg"
+          alt="큐시즘"
+          width={142}
+          height={26}
+          className="h-[21px] w-[120px] desktop:h-[26px] desktop:w-[142px]"
+          priority
+        />
+      </Link>
+    </h1>
+  );
+
   return (
-    <header className="w-full desktop:px-12 px-4 py-6 desktop:fixed top-0 left-0 z-50 bg-white ">
-      <div className="max-w-[2000px] w-full mx-auto flex items-center justify-between">
-        <h1>
-          <Link href="/">
-            <Image
-              src="/headerLogo.svg"
-              alt="큐시즘"
-              width={142}
-              height={26}
-              className="w-[120px] h-[21px] desktop:w-[142px] desktop:h-[26px]"
-              priority
-            />
-          </Link>
-        </h1>
-        <PageNav />
-        <MobilePageNav />
-      </div>
-    </header>
+    <HeaderUI
+      key={currentPath}
+      logo={logo}
+      mobileLogo={logo}
+      menuIcon={
+        <Image
+          src="/projects/icons/menu.svg"
+          alt="메뉴"
+          width={24}
+          height={24}
+          className="h-6 w-6"
+        />
+      }
+      closeIcon={
+        <Image
+          src="/projects/icons/CloseIcon.svg"
+          alt="닫기"
+          width={24}
+          height={24}
+          className="h-6 w-6"
+        />
+      }
+    >
+      {navLinks.map(({ href, label, matchPath }) => {
+        const isActive =
+          matchPath === "/" ? currentPath === matchPath : currentPath.startsWith(matchPath);
+
+        return (
+          <HeaderNavigation key={href} href={href} state={isActive ? "pressed" : "default"}>
+            {label}
+          </HeaderNavigation>
+        );
+      })}
+    </HeaderUI>
   );
 };