From eef94d23988c920719b24090e34917436d98e4b1 Mon Sep 17 00:00:00 2001
From: KYBee <kyb3634@naver.com>
Date: Fri, 24 Jul 2026 16:55:18 +0900
Subject: [PATCH 1/7] refactor: migrate shared responsive Flex layouts

---
 .../global/Footer/index.module.scss           |   8 -
 src/components/global/Footer/index.test.tsx   |  42 ++++++
 src/components/global/Footer/index.tsx        |  10 +-
 .../global/Navigation/index.module.scss       |   5 -
 .../global/Navigation/index.test.tsx          | 141 ++++++++++++++++++
 src/components/global/Navigation/index.tsx    |   3 +
 .../molecules/Card/index.module.scss          |   5 -
 src/components/molecules/Card/index.tsx       |   5 +-
 .../molecules/Table/index.module.scss         |   6 -
 src/components/molecules/Table/index.test.tsx |  66 ++++++++
 src/components/molecules/Table/index.tsx      |   6 +-
 .../organisms/Faq/index.module.scss           |   4 -
 src/components/organisms/Faq/index.test.tsx   |  53 +++++++
 src/components/organisms/Faq/index.tsx        |   7 +-
 14 files changed, 324 insertions(+), 37 deletions(-)
 create mode 100644 src/components/global/Footer/index.test.tsx
 create mode 100644 src/components/global/Navigation/index.test.tsx
 create mode 100644 src/components/molecules/Table/index.test.tsx
 create mode 100644 src/components/organisms/Faq/index.test.tsx

diff --git a/src/components/global/Footer/index.module.scss b/src/components/global/Footer/index.module.scss
index a34c698..e9cc03e 100644
--- a/src/components/global/Footer/index.module.scss
+++ b/src/components/global/Footer/index.module.scss
@@ -6,16 +6,8 @@
 .group {
   width: 100%;
   height: 113px;
-  display: flex;
-  flex-direction: column-reverse;
-  align-items: center;
-  justify-content: center;
-  gap: 16px;
 
   @include desktop {
     height: 100px;
-    flex-direction: row;
-    justify-content: space-between;
-    gap: 0;
   }
 }
diff --git a/src/components/global/Footer/index.test.tsx b/src/components/global/Footer/index.test.tsx
new file mode 100644
index 0000000..0389b80
--- /dev/null
+++ b/src/components/global/Footer/index.test.tsx
@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import Footer from './index';
+
+vi.mock('@/components/atoms/Layout', () => ({
+  default: ({ children }: { children: ReactNode }) => (
+    <div data-testid="layout">{children}</div>
+  ),
+}));
+
+vi.mock('@/components/molecules/SocialIconLink', () => ({
+  default: ({ type, url }: { type: string; url: string }) => (
+    <a href={url}>{type}</a>
+  ),
+}));
+
+describe('Footer', () => {
+  it('renders the footer copyright and social links', () => {
+    render(<Footer />);
+
+    expect(screen.getByRole('contentinfo')).toBeInTheDocument();
+    expect(screen.getByText('All rights reserved ⓒ SIPE')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'INSTAGRAM' })).toHaveAttribute(
+      'href',
+      'https://www.instagram.com/sipe_team',
+    );
+    expect(screen.getByRole('link', { name: 'GITHUB' })).toHaveAttribute(
+      'href',
+      'https://github.com/sipe-team',
+    );
+    expect(screen.getByRole('link', { name: 'YOUTUBE' })).toHaveAttribute(
+      'href',
+      'https://www.youtube.com/@sipe_team',
+    );
+    expect(screen.getByRole('link', { name: 'LINKEDIN' })).toHaveAttribute(
+      'href',
+      'https://www.linkedin.com/company/sipe.team',
+    );
+  });
+});
diff --git a/src/components/global/Footer/index.tsx b/src/components/global/Footer/index.tsx
index 541f7e7..6b9b12b 100644
--- a/src/components/global/Footer/index.tsx
+++ b/src/components/global/Footer/index.tsx
@@ -10,7 +10,13 @@ function Footer() {
     <Flex asChild className={styles.wrapper} direction="row" justify="center">
       <footer>
         <Layout>
-          <div className={styles.group}>
+          <Flex
+            align="center"
+            className={styles.group}
+            direction={{ sm: 'column-reverse', lg: 'row' }}
+            gap={{ sm: '16px', lg: 0 }}
+            justify={{ sm: 'center', lg: 'space-between' }}
+          >
             <Typography color={color.white} size={12} weight="medium">
               All rights reserved ⓒ SIPE
             </Typography>
@@ -32,7 +38,7 @@ function Footer() {
                 url="https://www.linkedin.com/company/sipe.team"
               />
             </Flex>
-          </div>
+          </Flex>
         </Layout>
       </footer>
     </Flex>
diff --git a/src/components/global/Navigation/index.module.scss b/src/components/global/Navigation/index.module.scss
index 9014d9d..a485b64 100644
--- a/src/components/global/Navigation/index.module.scss
+++ b/src/components/global/Navigation/index.module.scss
@@ -43,8 +43,6 @@
 
       .menuList {
         width: 100%;
-        flex-direction: column;
-        align-items: center;
         padding-bottom: 20px;
 
         @include mobile-and-tablet {
@@ -60,9 +58,6 @@
         }
 
         @include desktop {
-          flex-direction: row;
-          justify-content: center;
-          align-items: center;
           padding: 0;
         }
       }
diff --git a/src/components/global/Navigation/index.test.tsx b/src/components/global/Navigation/index.test.tsx
new file mode 100644
index 0000000..e018f9c
--- /dev/null
+++ b/src/components/global/Navigation/index.test.tsx
@@ -0,0 +1,141 @@
+import type { ReactNode } from 'react';
+
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import Navigation from './index';
+
+const { sendGAEvent } = vi.hoisted(() => ({
+  sendGAEvent: vi.fn(),
+}));
+
+vi.mock('next/link', () => ({
+  default: ({ children, href }: { children: ReactNode; href: string }) => (
+    <a href={href}>{children}</a>
+  ),
+}));
+
+vi.mock('next/navigation', () => ({
+  usePathname: () => '/about',
+}));
+
+vi.mock('@next/third-parties/google', () => ({
+  sendGAEvent,
+}));
+
+vi.mock('@/components/atoms/Layout', () => ({
+  default: ({
+    children,
+    className,
+  }: {
+    children: ReactNode;
+    className?: string;
+  }) => <div className={className}>{children}</div>,
+}));
+
+vi.mock('@/components/global/HamburgerButton', () => ({
+  default: ({
+    isOpened,
+    onClick,
+  }: {
+    isOpened: boolean;
+    onClick: () => void;
+  }) => (
+    <button aria-expanded={isOpened} aria-label="메뉴" onClick={onClick}>
+      메뉴
+    </button>
+  ),
+}));
+
+vi.mock('@/components/molecules/Button', () => ({
+  default: ({
+    active,
+    children,
+    disabled,
+    href,
+    onClick,
+  }: {
+    active?: boolean;
+    children: ReactNode;
+    disabled?: boolean;
+    href?: string;
+    onClick?: () => void;
+  }) => (
+    <a
+      aria-current={active ? 'page' : undefined}
+      aria-disabled={disabled}
+      href={href}
+      onClick={(event) => {
+        event.preventDefault();
+        onClick?.();
+      }}
+    >
+      {children}
+    </a>
+  ),
+}));
+
+vi.mock('@/libs/assets/logos', () => ({
+  SipeLogo: () => <svg aria-label="사이프 로고" />,
+}));
+
+vi.mock('@/libs/utils/recruit', () => ({
+  displayApplication: {
+    ongoing: {
+      buttonText: '지원하기',
+      formUrl: 'https://example.com/apply',
+    },
+  },
+  getCurrentStatus: () => 'ongoing',
+}));
+
+describe('Navigation', () => {
+  beforeEach(() => {
+    sendGAEvent.mockClear();
+  });
+
+  it('renders the current menu, navigation links, and application link', () => {
+    render(<Navigation />);
+
+    expect(screen.getByRole('banner')).toBeInTheDocument();
+    expect(screen.getByRole('navigation')).toBeInTheDocument();
+    expect(screen.getByLabelText('사이프 로고').closest('a')).toHaveAttribute(
+      'href',
+      '/',
+    );
+    expect(screen.getByRole('link', { name: 'About' })).toHaveAttribute(
+      'aria-current',
+      'page',
+    );
+    expect(screen.getByRole('link', { name: 'Recruit' })).toHaveAttribute(
+      'href',
+      '/recruit',
+    );
+    expect(screen.getByRole('link', { name: 'People' })).toHaveAttribute(
+      'href',
+      '/people',
+    );
+    expect(screen.getByRole('link', { name: 'Activity' })).toHaveAttribute(
+      'href',
+      '/activity',
+    );
+    expect(screen.getByRole('link', { name: 'Join Us' })).toHaveAttribute(
+      'href',
+      'https://example.com/apply',
+    );
+  });
+
+  it('toggles the mobile menu and reports application clicks', () => {
+    render(<Navigation />);
+
+    const menuButton = screen.getByRole('button', { name: '메뉴' });
+    expect(menuButton).toHaveAttribute('aria-expanded', 'false');
+
+    fireEvent.click(menuButton);
+    expect(menuButton).toHaveAttribute('aria-expanded', 'true');
+
+    fireEvent.click(screen.getByRole('link', { name: 'Join Us' }));
+    expect(sendGAEvent).toHaveBeenCalledWith('event', 'cilck_join_us_button', {
+      screen_name: 'menu',
+    });
+  });
+});
diff --git a/src/components/global/Navigation/index.tsx b/src/components/global/Navigation/index.tsx
index 7d12444..36e1dc3 100644
--- a/src/components/global/Navigation/index.tsx
+++ b/src/components/global/Navigation/index.tsx
@@ -72,11 +72,14 @@ function Navigation() {
           >
             <nav>
               <Flex
+                align="center"
                 className={clsx(
                   styles.menuList,
                   isMobileMenuOpen ? styles.open : styles.close,
                 )}
+                direction={{ sm: 'column', lg: 'row' }}
                 gap="12px"
+                justify={{ lg: 'center' }}
               >
                 {menus.map((menu) => (
                   <Button
diff --git a/src/components/molecules/Card/index.module.scss b/src/components/molecules/Card/index.module.scss
index b733145..4a4fd94 100644
--- a/src/components/molecules/Card/index.module.scss
+++ b/src/components/molecules/Card/index.module.scss
@@ -7,11 +7,6 @@
   }
 
   @include desktop {
-    &.reverse {
-      flex-direction: row-reverse;
-    }
-
-    flex-direction: row;
     margin-bottom: 120px;
   }
 }
diff --git a/src/components/molecules/Card/index.tsx b/src/components/molecules/Card/index.tsx
index 05ca96a..61e4646 100644
--- a/src/components/molecules/Card/index.tsx
+++ b/src/components/molecules/Card/index.tsx
@@ -1,5 +1,4 @@
 import { Flex } from '@sipe-team/side';
-import clsx from 'clsx';
 
 import Badge from '@/components/atoms/Badge';
 import Image from '@/components/molecules/Image';
@@ -18,8 +17,8 @@ function Card({ src, badgeText, title, subTitle, reverse }: CardProps) {
   return (
     <Flex
       align="flex-start"
-      className={clsx(styles.section, reverse && styles.reverse)}
-      direction="column"
+      className={styles.section}
+      direction={{ sm: 'column', lg: reverse ? 'row-reverse' : 'row' }}
       gap="24px"
       grow={1}
       justify="flex-start"
diff --git a/src/components/molecules/Table/index.module.scss b/src/components/molecules/Table/index.module.scss
index 5fbbfb3..3b0c8d2 100644
--- a/src/components/molecules/Table/index.module.scss
+++ b/src/components/molecules/Table/index.module.scss
@@ -3,8 +3,6 @@
   padding: 0;
 
   @include mobile {
-    gap: 16px;
-
     > * {
       width: 100%;
     }
@@ -26,16 +24,12 @@
 
     @include mobile {
       height: auto;
-      flex-direction: row;
-      align-items: center;
     }
   }
 
   @include mobile {
     width: 100%;
     height: auto;
-    align-items: start;
-    flex-direction: column;
   }
 }
 
diff --git a/src/components/molecules/Table/index.test.tsx b/src/components/molecules/Table/index.test.tsx
new file mode 100644
index 0000000..1c55cda
--- /dev/null
+++ b/src/components/molecules/Table/index.test.tsx
@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+
+import Table from './index';
+
+vi.mock('@/components/atoms/Badge', () => ({
+  default: ({ text }: { text: string }) => <span>{text}</span>,
+}));
+
+vi.mock('@/components/molecules/GlowArea', () => ({
+  default: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="glow-area">{children}</div>
+  ),
+}));
+
+vi.mock('@/libs/assets/icons', () => ({
+  CheckCircleIcon: () => <svg aria-label="지원 조건 충족" />,
+}));
+
+describe('Table', () => {
+  it('renders recurring dates, descriptions, and badges for schedule rows', () => {
+    render(
+      <Table
+        isApplicant={false}
+        dataList={[
+          {
+            recurring_date: '매주 목요일',
+            text: '정기 세션 참여',
+            badge: '필수',
+          },
+          {
+            recurring_date: '격주 토요일',
+            text: '네트워킹 참여',
+            highlight: true,
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText('매주 목요일')).toBeInTheDocument();
+    expect(screen.getByText('정기 세션 참여')).toBeInTheDocument();
+    expect(screen.getByText('필수')).toBeInTheDocument();
+    expect(screen.getByText('격주 토요일')).toBeInTheDocument();
+    expect(screen.getByText('네트워킹 참여')).toBeInTheDocument();
+    expect(screen.getByTestId('glow-area')).toHaveTextContent('네트워킹 참여');
+  });
+
+  it('renders applicant rows with check icons and without schedule metadata', () => {
+    render(
+      <Table
+        isApplicant
+        dataList={[
+          {
+            recurring_date: '표시되지 않는 날짜',
+            text: '개발 경험이 있는 분',
+            badge: '표시되지 않는 배지',
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getByLabelText('지원 조건 충족')).toBeInTheDocument();
+    expect(screen.getByText('개발 경험이 있는 분')).toBeInTheDocument();
+    expect(screen.queryByText('표시되지 않는 날짜')).not.toBeInTheDocument();
+    expect(screen.queryByText('표시되지 않는 배지')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/molecules/Table/index.tsx b/src/components/molecules/Table/index.tsx
index 8046d9d..f43af14 100644
--- a/src/components/molecules/Table/index.tsx
+++ b/src/components/molecules/Table/index.tsx
@@ -31,7 +31,7 @@ function Table({ dataList, isApplicant }: TableProps) {
       className={styles.wrapper}
       direction="column"
       inline={true}
-      gap="32px"
+      gap={{ sm: '16px', md: '32px' }}
       justify="center"
     >
       {dataList.map((data, index) =>
@@ -50,9 +50,9 @@ function Table({ dataList, isApplicant }: TableProps) {
 function TableData({ data, isApplicant }: TableDataProps) {
   return (
     <Flex
-      align="center"
+      align={isApplicant ? 'center' : { sm: 'flex-start', md: 'center' }}
       className={clsx(styles.table, { [styles.isApplicant]: isApplicant })}
-      direction="row"
+      direction={isApplicant ? 'row' : { sm: 'column', md: 'row' }}
       gap="20px"
       inline={true}
       justify="space-between"
diff --git a/src/components/organisms/Faq/index.module.scss b/src/components/organisms/Faq/index.module.scss
index fe231b4..a39b153 100644
--- a/src/components/organisms/Faq/index.module.scss
+++ b/src/components/organisms/Faq/index.module.scss
@@ -1,7 +1,3 @@
 .faqs {
   width: 100%;
-
-  @include mobile {
-    gap: 16px;
-  }
 }
diff --git a/src/components/organisms/Faq/index.test.tsx b/src/components/organisms/Faq/index.test.tsx
new file mode 100644
index 0000000..afafdac
--- /dev/null
+++ b/src/components/organisms/Faq/index.test.tsx
@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import Faq from './index';
+
+vi.mock('@/components/atoms/ContentWithTitle', () => ({
+  default: ({ children, title }: { children: ReactNode; title: string }) => (
+    <section>
+      <h1>{title}</h1>
+      {children}
+    </section>
+  ),
+}));
+
+vi.mock('@/components/molecules/accordion', () => ({
+  Accordion: ({ children }: { children: ReactNode }) => <div>{children}</div>,
+  AccordionItem: ({ title, value }: { title: string; value: string }) => (
+    <article>
+      <h2>{title}</h2>
+      <p>{value}</p>
+    </article>
+  ),
+}));
+
+describe('Faq', () => {
+  it('renders every question and answer', () => {
+    render(
+      <Faq
+        faqs={[
+          {
+            key: 'schedule',
+            question: '정기 모임은 언제인가요?',
+            answer: '매주 목요일에 진행합니다.',
+          },
+          {
+            key: 'location',
+            question: '모임 장소는 어디인가요?',
+            answer: '서울에서 오프라인으로 진행합니다.',
+          },
+        ]}
+      />,
+    );
+
+    expect(screen.getByText('자주 묻는 질문')).toBeInTheDocument();
+    expect(screen.getByText('정기 모임은 언제인가요?')).toBeInTheDocument();
+    expect(screen.getByText('매주 목요일에 진행합니다.')).toBeInTheDocument();
+    expect(screen.getByText('모임 장소는 어디인가요?')).toBeInTheDocument();
+    expect(
+      screen.getByText('서울에서 오프라인으로 진행합니다.'),
+    ).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/Faq/index.tsx b/src/components/organisms/Faq/index.tsx
index 55dd523..a95c575 100644
--- a/src/components/organisms/Faq/index.tsx
+++ b/src/components/organisms/Faq/index.tsx
@@ -13,7 +13,12 @@ type FaqProps = {
 function Faq({ faqs }: FaqProps) {
   return (
     <ContentWithTitle title="자주 묻는 질문">
-      <Flex align="stretch" asChild={true} direction="column" gap="32px">
+      <Flex
+        align="stretch"
+        asChild={true}
+        direction="column"
+        gap={{ sm: '16px', md: '32px' }}
+      >
         <Accordion className={styles.faqs}>
           {faqs.map((faq) => (
             <AccordionItem

From f56bf9ad44ed61dc1a26773406ebdca3e1cb9d5e Mon Sep 17 00:00:00 2001
From: KYBee <kyb3634@naver.com>
Date: Fri, 24 Jul 2026 16:55:33 +0900
Subject: [PATCH 2/7] refactor: migrate About responsive Flex layouts

---
 .../organisms/about/ActivitiesSection/index.module.scss  | 7 -------
 .../organisms/about/ActivitiesSection/index.tsx          | 6 +++++-
 .../organisms/about/ContactSection/index.module.scss     | 9 ---------
 src/components/organisms/about/ContactSection/index.tsx  | 4 ++--
 4 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/src/components/organisms/about/ActivitiesSection/index.module.scss b/src/components/organisms/about/ActivitiesSection/index.module.scss
index c258bcf..cc2ee93 100644
--- a/src/components/organisms/about/ActivitiesSection/index.module.scss
+++ b/src/components/organisms/about/ActivitiesSection/index.module.scss
@@ -51,16 +51,9 @@
 }
 
 .menus {
-  justify-content: center;
-  gap: 16px;
   margin-bottom: 40px;
   overflow: scroll;
   width: 100%;
-
-  @include mobile {
-    gap: 8px;
-    justify-content: start;
-  }
 }
 
 .activityButton {
diff --git a/src/components/organisms/about/ActivitiesSection/index.tsx b/src/components/organisms/about/ActivitiesSection/index.tsx
index 0bad60e..4ac4f04 100644
--- a/src/components/organisms/about/ActivitiesSection/index.tsx
+++ b/src/components/organisms/about/ActivitiesSection/index.tsx
@@ -27,7 +27,11 @@ function ActivitiesSection() {
 
   return (
     <ContentWithTitle title="주요 활동">
-      <Flex className={styles.menus}>
+      <Flex
+        className={styles.menus}
+        gap={{ sm: '8px', md: '16px' }}
+        justify={{ sm: 'flex-start', md: 'center' }}
+      >
         {activities.map(([key, activity]) => (
           <Button
             className={styles.activityButton}
diff --git a/src/components/organisms/about/ContactSection/index.module.scss b/src/components/organisms/about/ContactSection/index.module.scss
index c6932a3..e6789b6 100644
--- a/src/components/organisms/about/ContactSection/index.module.scss
+++ b/src/components/organisms/about/ContactSection/index.module.scss
@@ -6,15 +6,6 @@
   @include text('h5/medium', 'white');
 }
 
-.content {
-  display: flex;
-  gap: 20px;
-
-  @include mobile {
-    flex-direction: column;
-  }
-}
-
 .contentBox {
   width: 240px;
   height: 53px;
diff --git a/src/components/organisms/about/ContactSection/index.tsx b/src/components/organisms/about/ContactSection/index.tsx
index d5c0c13..0d724c6 100644
--- a/src/components/organisms/about/ContactSection/index.tsx
+++ b/src/components/organisms/about/ContactSection/index.tsx
@@ -20,7 +20,7 @@ function ContactSection() {
         <div className={styles.title}>
           더 궁금한 질문이 있거나 후원을 원하신다면 언제든 연락해 주세요!
         </div>
-        <div className={styles.content}>
+        <Flex direction={{ sm: 'column', md: 'row' }} gap="20px">
           <Flex align="center" asChild className={styles.contentBox} gap="12px">
             <ExternalLink
               href="mailto:sipe.team@gmail.com"
@@ -38,7 +38,7 @@ function ContactSection() {
             <KakaoLogo width={24} height={24} />
             <span>@sipe</span>
           </ExternalLink> */}
-        </div>
+        </Flex>
       </Flex>
     </ContentWithTitle>
   );

From ea030ad3b741e996831a4006a990130f49bc3232 Mon Sep 17 00:00:00 2001
From: KYBee <kyb3634@naver.com>
Date: Fri, 24 Jul 2026 16:55:47 +0900
Subject: [PATCH 3/7] refactor: migrate Activity responsive Flex layouts

---
 .../activity/ActiveCard/index.module.scss     |   3 -
 .../organisms/activity/ActiveCard/index.tsx   | 134 +++++++++---------
 .../pages/Activity/index.module.scss          |  11 --
 src/components/pages/Activity/index.tsx       |   8 +-
 4 files changed, 74 insertions(+), 82 deletions(-)

diff --git a/src/components/organisms/activity/ActiveCard/index.module.scss b/src/components/organisms/activity/ActiveCard/index.module.scss
index a5c0f01..0780532 100644
--- a/src/components/organisms/activity/ActiveCard/index.module.scss
+++ b/src/components/organisms/activity/ActiveCard/index.module.scss
@@ -1,6 +1,4 @@
 .activeCardWrapper {
-  display: flex;
-  flex-direction: row;
   cursor: pointer;
   min-height: 252px;
   padding: 16px;
@@ -10,7 +8,6 @@
 
   @include mobile {
     min-height: 333px;
-    flex-direction: column;
   }
 }
 
diff --git a/src/components/organisms/activity/ActiveCard/index.tsx b/src/components/organisms/activity/ActiveCard/index.tsx
index 754a9ea..24f9665 100644
--- a/src/components/organisms/activity/ActiveCard/index.tsx
+++ b/src/components/organisms/activity/ActiveCard/index.tsx
@@ -26,77 +26,79 @@ function ActiveCard({
   link,
 }: ActiveCardProps) {
   return (
-    <ExternalLink
-      href={link}
-      withTextUnderline={false}
-      className={styles.activeCardWrapper}
-    >
-      <Image
-        className={styles.thumbnail}
-        src={thumbnail}
-        fill
-        height={220}
-        objectFit="cover"
-        alt="thumbnail"
-        sizes="(max-width: 1060px) 50vw, 33vw"
-      />
-      <Flex
-        asChild
-        className={styles.contentsWrapper}
-        direction="column"
-        justify="space-between"
+    <Flex asChild direction={{ sm: 'column', md: 'row' }}>
+      <ExternalLink
+        href={link}
+        withTextUnderline={false}
+        className={styles.activeCardWrapper}
       >
-        <article>
-          <section className={styles.contents}>
-            <Typography
-              color={color.white}
-              className={styles.title}
-              size={20}
-              weight="bold"
-            >
-              {contentTitle}
-            </Typography>
-            <Typography className={styles.body} size={14}>
-              {contentBody}
-            </Typography>
-          </section>
-          <Flex
-            asChild
-            align="center"
-            className={styles.posterUserInfo}
-            justify="space-between"
-          >
-            <section>
-              <Flex asChild align="center" gap="12px" justify="center">
-                <div className={styles.userWrapper}>
-                  {profile ? (
-                    <Image
-                      src={profile}
-                      alt="user profile"
-                      width={32}
-                      height={32}
-                      className={styles.userIcon}
-                    />
-                  ) : (
-                    <UserIcon className={styles.userIcon} />
-                  )}
-                  <Typography color={color.white} size={14}>
-                    {userName}
-                  </Typography>
-                </div>
-              </Flex>
+        <Image
+          className={styles.thumbnail}
+          src={thumbnail}
+          fill
+          height={220}
+          objectFit="cover"
+          alt="thumbnail"
+          sizes="(max-width: 1060px) 50vw, 33vw"
+        />
+        <Flex
+          asChild
+          className={styles.contentsWrapper}
+          direction="column"
+          justify="space-between"
+        >
+          <article>
+            <section className={styles.contents}>
               <Typography
-                className={styles.createDate}
-                size={12}
-                weight="semiBold"
+                color={color.white}
+                className={styles.title}
+                size={20}
+                weight="bold"
               >
-                {createDate}
+                {contentTitle}
+              </Typography>
+              <Typography className={styles.body} size={14}>
+                {contentBody}
               </Typography>
             </section>
-          </Flex>
-        </article>
-      </Flex>
-    </ExternalLink>
+            <Flex
+              asChild
+              align="center"
+              className={styles.posterUserInfo}
+              justify="space-between"
+            >
+              <section>
+                <Flex asChild align="center" gap="12px" justify="center">
+                  <div className={styles.userWrapper}>
+                    {profile ? (
+                      <Image
+                        src={profile}
+                        alt="user profile"
+                        width={32}
+                        height={32}
+                        className={styles.userIcon}
+                      />
+                    ) : (
+                      <UserIcon className={styles.userIcon} />
+                    )}
+                    <Typography color={color.white} size={14}>
+                      {userName}
+                    </Typography>
+                  </div>
+                </Flex>
+                <Typography
+                  className={styles.createDate}
+                  size={12}
+                  weight="semiBold"
+                >
+                  {createDate}
+                </Typography>
+              </section>
+            </Flex>
+          </article>
+        </Flex>
+      </ExternalLink>
+    </Flex>
   );
 }
 
diff --git a/src/components/pages/Activity/index.module.scss b/src/components/pages/Activity/index.module.scss
index 09aba96..6b805ab 100644
--- a/src/components/pages/Activity/index.module.scss
+++ b/src/components/pages/Activity/index.module.scss
@@ -2,17 +2,11 @@
   width: 100%;
 
   .cards {
-    gap: 32px;
-
     .card {
       &:hover {
         cursor: pointer;
       }
     }
-
-    @include mobile {
-      gap: 16px;
-    }
   }
 
   .videoCards {
@@ -28,13 +22,8 @@
 
 .typeWrapper {
   margin-bottom: 40px;
-  gap: 16px;
 
   .periodButton {
     height: 40px;
   }
-
-  @include mobile {
-    gap: 8px;
-  }
 }
diff --git a/src/components/pages/Activity/index.tsx b/src/components/pages/Activity/index.tsx
index 2a43ace..4be5dd0 100644
--- a/src/components/pages/Activity/index.tsx
+++ b/src/components/pages/Activity/index.tsx
@@ -22,7 +22,7 @@ function Activity({ activityData, currentTab }: Props) {
   return (
     <Layout>
       <ContentWithTitle title="사이퍼 활동">
-        <Flex className={styles.typeWrapper}>
+        <Flex className={styles.typeWrapper} gap={{ sm: '8px', md: '16px' }}>
           <Button
             className={styles.periodButton}
             buttonType="chip"
@@ -42,7 +42,11 @@ function Activity({ activityData, currentTab }: Props) {
         </Flex>
         <div className={styles.wrapper}>
           {currentTab === 'post' ? (
-            <Flex className={styles.cards} direction="column">
+            <Flex
+              className={styles.cards}
+              direction="column"
+              gap={{ sm: '16px', md: '32px' }}
+            >
               {activityData.map((activity) => (
                 <ActiveCard
                   key={activity.link}

From b32e12bd91306a17d078f33ba9a8c8596e99c69e Mon Sep 17 00:00:00 2001
From: KYBee <kyb3634@naver.com>
Date: Fri, 24 Jul 2026 16:56:00 +0900
Subject: [PATCH 4/7] refactor: migrate Home and People responsive Flex layouts

---
 .../index.module.scss                         |  8 --
 .../RecruitmentStatusSection/index.test.tsx   | 91 +++++++++++++++++++
 .../home/RecruitmentStatusSection/index.tsx   |  7 +-
 .../home/SummaryCards/index.module.scss       |  5 -
 .../home/SummaryCards/index.test.tsx          | 16 ++++
 .../organisms/home/SummaryCards/index.tsx     |  8 +-
 src/components/pages/Home/index.module.scss   |  4 -
 src/components/pages/Home/index.test.tsx      | 39 ++++++++
 src/components/pages/Home/index.tsx           |  2 +-
 src/components/pages/People/index.module.scss |  5 -
 src/components/pages/People/index.tsx         |  2 +-
 11 files changed, 160 insertions(+), 27 deletions(-)
 create mode 100644 src/components/organisms/home/RecruitmentStatusSection/index.test.tsx
 create mode 100644 src/components/organisms/home/SummaryCards/index.test.tsx
 create mode 100644 src/components/pages/Home/index.test.tsx

diff --git a/src/components/organisms/home/RecruitmentStatusSection/index.module.scss b/src/components/organisms/home/RecruitmentStatusSection/index.module.scss
index 8f6e077..e77c6ce 100644
--- a/src/components/organisms/home/RecruitmentStatusSection/index.module.scss
+++ b/src/components/organisms/home/RecruitmentStatusSection/index.module.scss
@@ -3,20 +3,12 @@
   z-index: 1;
 
   @include mobile {
-    display: flex;
-    justify-content: center;
     margin-top: 40px;
     margin-bottom: 24px;
     width: 100%;
     overflow-x: scroll;
     padding: 0 20px;
   }
-
-  .buttonWrapper {
-    @include mobile {
-      gap: 12px;
-    }
-  }
 }
 
 .homeButton {
diff --git a/src/components/organisms/home/RecruitmentStatusSection/index.test.tsx b/src/components/organisms/home/RecruitmentStatusSection/index.test.tsx
new file mode 100644
index 0000000..617a5f6
--- /dev/null
+++ b/src/components/organisms/home/RecruitmentStatusSection/index.test.tsx
@@ -0,0 +1,91 @@
+import { sendGAEvent } from '@next/third-parties/google';
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import RecruitmentStatusSection from './index';
+
+const { copyToClipboard } = vi.hoisted(() => ({
+  copyToClipboard: vi.fn().mockResolvedValue(undefined),
+}));
+
+vi.mock('next/dynamic', () => ({
+  default: () =>
+    function RecruitmentSummary({ currentStatus }: { currentStatus: string }) {
+      return <div data-testid="recruitment-summary">{currentStatus}</div>;
+    },
+}));
+
+vi.mock('@next/third-parties/google', () => ({
+  sendGAEvent: vi.fn(),
+}));
+
+vi.mock('@/hook/useCopyToClipboard', () => ({
+  default: () => ({ copyToClipboard }),
+}));
+
+vi.mock('@/libs/utils/recruit', () => ({
+  displayApplication: {
+    ongoing: {
+      buttonText: '지원하기',
+      formUrl: 'https://example.com/apply',
+    },
+  },
+  getCurrentStatus: () => 'ongoing',
+}));
+
+describe('RecruitmentStatusSection', () => {
+  beforeEach(() => {
+    copyToClipboard.mockClear();
+    vi.mocked(sendGAEvent).mockClear();
+    vi.spyOn(window, 'open').mockImplementation(() => null);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it('renders the current recruitment summary and actions', () => {
+    render(<RecruitmentStatusSection />);
+
+    expect(screen.getByTestId('recruitment-summary')).toHaveTextContent(
+      'ongoing',
+    );
+    expect(
+      screen.getByRole('button', { name: '지원하기' }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('button', { name: '링크 공유하기' }),
+    ).toBeInTheDocument();
+  });
+
+  it('keeps application and share button behavior', async () => {
+    render(<RecruitmentStatusSection />);
+
+    fireEvent.click(screen.getByRole('button', { name: '지원하기' }));
+
+    expect(window.open).toHaveBeenCalledWith(
+      'https://example.com/apply',
+      '_blank',
+      'noopener,noreferrer',
+    );
+    expect(sendGAEvent).toHaveBeenCalledWith(
+      'event',
+      'cilck_application_button',
+      {
+        screen_name: '/',
+      },
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: '링크 공유하기' }));
+
+    await waitFor(() => {
+      expect(copyToClipboard).toHaveBeenCalledWith('https://sipe.team');
+    });
+    expect(sendGAEvent).toHaveBeenCalledWith(
+      'event',
+      'cilck_share_link_button',
+      {
+        screen_name: '/',
+      },
+    );
+  });
+});
diff --git a/src/components/organisms/home/RecruitmentStatusSection/index.tsx b/src/components/organisms/home/RecruitmentStatusSection/index.tsx
index 546dd75..97cb5f9 100644
--- a/src/components/organisms/home/RecruitmentStatusSection/index.tsx
+++ b/src/components/organisms/home/RecruitmentStatusSection/index.tsx
@@ -53,9 +53,14 @@ function RecruitmentStatusSection() {
       className={styles.content}
       direction="column"
       gap="40px"
+      justify={{ sm: 'center', md: 'normal' }}
     >
       <RecruitmentSummary currentStatus={currentStatus} />
-      <Flex className={styles.buttonWrapper} direction="row" gap="24px">
+      <Flex
+        className={styles.buttonWrapper}
+        direction="row"
+        gap={{ sm: '12px', md: '24px' }}
+      >
         <Button
           className={clsx(styles.homeButton, styles.primary)}
           type="button"
diff --git a/src/components/organisms/home/SummaryCards/index.module.scss b/src/components/organisms/home/SummaryCards/index.module.scss
index f881e26..ec533cf 100644
--- a/src/components/organisms/home/SummaryCards/index.module.scss
+++ b/src/components/organisms/home/SummaryCards/index.module.scss
@@ -1,8 +1,4 @@
 .summaryCardWrapper {
-  @include mobile {
-    gap: 12px;
-  }
-
   .card {
     width: 230px;
     height: 133px;
@@ -13,7 +9,6 @@
     @include mobile {
       width: 110px;
       height: 80px;
-      gap: 6px;
 
       .title {
         font-size: 12px;
diff --git a/src/components/organisms/home/SummaryCards/index.test.tsx b/src/components/organisms/home/SummaryCards/index.test.tsx
new file mode 100644
index 0000000..266fe4d
--- /dev/null
+++ b/src/components/organisms/home/SummaryCards/index.test.tsx
@@ -0,0 +1,16 @@
+import { render, screen } from '@testing-library/react';
+
+import SummaryCards from './index';
+
+describe('SummaryCards', () => {
+  it('renders all summary labels and values', () => {
+    render(<SummaryCards />);
+
+    expect(screen.getByText('누적 지원자 수')).toBeInTheDocument();
+    expect(screen.getByText('400+')).toBeInTheDocument();
+    expect(screen.getByText('총 참여자 수')).toBeInTheDocument();
+    expect(screen.getByText('140')).toBeInTheDocument();
+    expect(screen.getByText('누적 미션 수')).toBeInTheDocument();
+    expect(screen.getByText('51')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/home/SummaryCards/index.tsx b/src/components/organisms/home/SummaryCards/index.tsx
index b8c557f..ce7f66f 100644
--- a/src/components/organisms/home/SummaryCards/index.tsx
+++ b/src/components/organisms/home/SummaryCards/index.tsx
@@ -10,14 +10,18 @@ const summaryData = [
 
 function SummaryCards() {
   return (
-    <Flex className={styles.summaryCardWrapper} direction="row" gap="24px">
+    <Flex
+      className={styles.summaryCardWrapper}
+      direction="row"
+      gap={{ sm: '12px', md: '24px' }}
+    >
       {summaryData.map(({ title, value }) => (
         <Flex
           align="center"
           key={title}
           className={styles.card}
           direction="column"
-          gap="12px"
+          gap={{ sm: '6px', md: '12px' }}
           justify="center"
         >
           <Typography
diff --git a/src/components/pages/Home/index.module.scss b/src/components/pages/Home/index.module.scss
index 2f1f0fd..b8449fd 100644
--- a/src/components/pages/Home/index.module.scss
+++ b/src/components/pages/Home/index.module.scss
@@ -15,10 +15,6 @@
     object-fit: cover;
     pointer-events: none;
   }
-
-  @include mobile {
-    gap: 0;
-  }
 }
 
 .titleWrapper {
diff --git a/src/components/pages/Home/index.test.tsx b/src/components/pages/Home/index.test.tsx
new file mode 100644
index 0000000..50f73f9
--- /dev/null
+++ b/src/components/pages/Home/index.test.tsx
@@ -0,0 +1,39 @@
+import { render, screen } from '@testing-library/react';
+
+import Home from './index';
+
+vi.mock('next/image', () => ({
+  default: ({ alt, src }: { alt: string; src: string }) => (
+    // Tests only need an element with image semantics.
+    // eslint-disable-next-line @next/next/no-img-element
+    <img alt={alt} src={src} />
+  ),
+}));
+
+vi.mock('@/components/organisms/home/RecruitmentStatusSection', () => ({
+  default: () => <section>모집 상태와 지원 버튼</section>,
+}));
+
+describe('Home', () => {
+  it('renders the hero copy, background image, and recruitment content', () => {
+    render(<Home />);
+
+    expect(
+      screen.getByRole('heading', {
+        level: 1,
+        name: /Sharing Insights with People Everyday/,
+      }),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('heading', {
+        level: 2,
+        name: '개발자들이 함께 교류하며 성장하는 IT 커뮤니티',
+      }),
+    ).toBeInTheDocument();
+    expect(screen.getByAltText('배경 이미지')).toHaveAttribute(
+      'src',
+      '/assets/home-bg.png',
+    );
+    expect(screen.getByText('모집 상태와 지원 버튼')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/pages/Home/index.tsx b/src/components/pages/Home/index.tsx
index 5b55997..2158467 100644
--- a/src/components/pages/Home/index.tsx
+++ b/src/components/pages/Home/index.tsx
@@ -12,7 +12,7 @@ function Home() {
       align="center"
       className={styles.wrapper}
       direction="column"
-      gap="16px"
+      gap={{ sm: 0, md: '16px' }}
       justify="center"
     >
       <Image
diff --git a/src/components/pages/People/index.module.scss b/src/components/pages/People/index.module.scss
index 7fe9edb..24fb899 100644
--- a/src/components/pages/People/index.module.scss
+++ b/src/components/pages/People/index.module.scss
@@ -19,13 +19,8 @@
 
 .periodsWrapper {
   margin-bottom: 40px;
-  gap: 16px;
 
   &.button {
     height: 40px;
   }
-
-  @include mobile {
-    gap: 8px;
-  }
 }
diff --git a/src/components/pages/People/index.tsx b/src/components/pages/People/index.tsx
index 048e4fb..c43364e 100644
--- a/src/components/pages/People/index.tsx
+++ b/src/components/pages/People/index.tsx
@@ -23,7 +23,7 @@ function People({
   return (
     <Layout>
       <ContentWithTitle title="사이퍼 소개">
-        <Flex className={styles.periodsWrapper}>
+        <Flex className={styles.periodsWrapper} gap={{ sm: '8px', md: '16px' }}>
           {peopleGenerations.map((generation) => (
             <Button
               key={generation}

From 6b6813191f2cdf43eabfe0c3b48c4fa63909056c Mon Sep 17 00:00:00 2001
From: KYBee <kyb3634@naver.com>
Date: Fri, 24 Jul 2026 16:56:12 +0900
Subject: [PATCH 5/7] test: enforce responsive Flex migration contract

---
 src/styles/flexMigration.test.ts | 124 +++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 src/styles/flexMigration.test.ts

diff --git a/src/styles/flexMigration.test.ts b/src/styles/flexMigration.test.ts
new file mode 100644
index 0000000..92588f0
--- /dev/null
+++ b/src/styles/flexMigration.test.ts
@@ -0,0 +1,124 @@
+import { readdirSync, readFileSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+
+const allowedDeclarations: Record<string, string[]> = {
+  'src/components/global/Navigation/index.module.scss': [
+    'display: flex',
+    'justify-content: space-between',
+  ],
+  'src/components/molecules/Table/index.module.scss': ['flex: 1 1 0'],
+  'src/components/organisms/about/ActivitiesSection/index.module.scss': [
+    'align-self: stretch',
+    'align-self: stretch',
+  ],
+  'src/components/organisms/about/SponsorSection/index.module.scss': [
+    'gap: 16px',
+    'gap: 16px',
+    'gap: 32px',
+  ],
+  'src/components/organisms/recruit/ScheduleCard/index.module.scss': [
+    'align-self: stretch',
+    'align-self: stretch',
+    'flex: 1 1 0',
+    'align-self: stretch',
+  ],
+  'src/components/pages/Activity/index.module.scss': ['gap: 32px', 'gap: 16px'],
+  'src/components/pages/People/index.module.scss': ['gap: 32px', 'gap: 16px'],
+};
+
+const responsiveFlexContracts: Record<string, string[]> = {
+  'src/components/global/Footer/index.tsx': [
+    "direction={{ sm: 'column-reverse', lg: 'row' }}",
+    "gap={{ sm: '16px', lg: 0 }}",
+    "justify={{ sm: 'center', lg: 'space-between' }}",
+  ],
+  'src/components/global/Navigation/index.tsx': [
+    "direction={{ sm: 'column', lg: 'row' }}",
+    "justify={{ lg: 'center' }}",
+  ],
+  'src/components/molecules/Card/index.tsx': [
+    "direction={{ sm: 'column', lg: reverse ? 'row-reverse' : 'row' }}",
+  ],
+  'src/components/molecules/Table/index.tsx': [
+    "gap={{ sm: '16px', md: '32px' }}",
+    "align={isApplicant ? 'center' : { sm: 'flex-start', md: 'center' }}",
+    "direction={isApplicant ? 'row' : { sm: 'column', md: 'row' }}",
+  ],
+  'src/components/organisms/Faq/index.tsx': [
+    "gap={{ sm: '16px', md: '32px' }}",
+  ],
+  'src/components/organisms/about/ActivitiesSection/index.tsx': [
+    "gap={{ sm: '8px', md: '16px' }}",
+    "justify={{ sm: 'flex-start', md: 'center' }}",
+  ],
+  'src/components/organisms/about/ContactSection/index.tsx': [
+    "direction={{ sm: 'column', md: 'row' }} gap=\"20px\"",
+  ],
+  'src/components/organisms/activity/ActiveCard/index.tsx': [
+    "asChild direction={{ sm: 'column', md: 'row' }}",
+  ],
+  'src/components/organisms/home/RecruitmentStatusSection/index.tsx': [
+    "justify={{ sm: 'center', md: 'normal' }}",
+    "gap={{ sm: '12px', md: '24px' }}",
+  ],
+  'src/components/organisms/home/SummaryCards/index.tsx': [
+    "gap={{ sm: '12px', md: '24px' }}",
+    "gap={{ sm: '6px', md: '12px' }}",
+  ],
+  'src/components/pages/Activity/index.tsx': [
+    "gap={{ sm: '8px', md: '16px' }}",
+    "gap={{ sm: '16px', md: '32px' }}",
+  ],
+  'src/components/pages/Home/index.tsx': ["gap={{ sm: 0, md: '16px' }}"],
+  'src/components/pages/People/index.tsx': ["gap={{ sm: '8px', md: '16px' }}"],
+};
+
+const legacyFlexDeclaration =
+  /^\s*(display:\s*(?:inline-)?flex|flex-direction:\s*[^;]+|justify-content:\s*[^;]+|align-items:\s*[^;]+|flex-wrap:\s*[^;]+|gap:\s*[^;]+|align-self:\s*[^;]+|order:\s*[^;]+|flex:\s*[^;]+);?\s*$/gm;
+
+function getFiles(directory: string, extension: string): string[] {
+  return readdirSync(resolve(process.cwd(), directory), {
+    withFileTypes: true,
+  }).flatMap((entry) => {
+    const file = join(directory, entry.name);
+
+    if (entry.isDirectory()) return getFiles(file, extension);
+    return entry.name.endsWith(extension) ? [file] : [];
+  });
+}
+
+function readSource(file: string) {
+  return readFileSync(resolve(process.cwd(), file), 'utf8');
+}
+
+function normalizeWhitespace(value: string) {
+  return value.replace(/\s+/g, ' ').trim();
+}
+
+function getLegacyFlexDeclarations(file: string) {
+  return [...readSource(file).matchAll(legacyFlexDeclaration)].map((match) =>
+    normalizeWhitespace(match[1]),
+  );
+}
+
+describe('responsive Flex migration contract', () => {
+  it.each(Object.entries(responsiveFlexContracts))(
+    'keeps the responsive prop mapping in %s',
+    (file, expectedProps) => {
+      const source = normalizeWhitespace(readSource(file));
+
+      expectedProps.forEach((expectedProp) => {
+        expect(source).toContain(normalizeWhitespace(expectedProp));
+      });
+    },
+  );
+
+  it.each(getFiles('src', '.module.scss'))(
+    'keeps only explicitly unsupported legacy declarations in %s',
+    (file) => {
+      expect(getLegacyFlexDeclarations(file)).toEqual(
+        allowedDeclarations[file] ?? [],
+      );
+    },
+  );
+});

From d75d8e5d3d9b116635b28a3668a3ba52d91ef202 Mon Sep 17 00:00:00 2001
From: KYBee <kyb3634@naver.com>
Date: Tue, 28 Jul 2026 01:33:04 +0900
Subject: [PATCH 6/7] test: align component test mocks

---
 src/components/global/Navigation/index.test.tsx | 9 +++------
 src/components/molecules/Table/index.test.tsx   | 4 +++-
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/global/Navigation/index.test.tsx b/src/components/global/Navigation/index.test.tsx
index e018f9c..187a921 100644
--- a/src/components/global/Navigation/index.test.tsx
+++ b/src/components/global/Navigation/index.test.tsx
@@ -1,13 +1,10 @@
 import type { ReactNode } from 'react';
 
+import { sendGAEvent } from '@next/third-parties/google';
 import { fireEvent, render, screen } from '@testing-library/react';
 
 import Navigation from './index';
 
-const { sendGAEvent } = vi.hoisted(() => ({
-  sendGAEvent: vi.fn(),
-}));
-
 vi.mock('next/link', () => ({
   default: ({ children, href }: { children: ReactNode; href: string }) => (
     <a href={href}>{children}</a>
@@ -19,7 +16,7 @@ vi.mock('next/navigation', () => ({
 }));
 
 vi.mock('@next/third-parties/google', () => ({
-  sendGAEvent,
+  sendGAEvent: vi.fn(),
 }));
 
 vi.mock('@/components/atoms/Layout', () => ({
@@ -90,7 +87,7 @@ vi.mock('@/libs/utils/recruit', () => ({
 
 describe('Navigation', () => {
   beforeEach(() => {
-    sendGAEvent.mockClear();
+    vi.mocked(sendGAEvent).mockClear();
   });
 
   it('renders the current menu, navigation links, and application link', () => {
diff --git a/src/components/molecules/Table/index.test.tsx b/src/components/molecules/Table/index.test.tsx
index 1c55cda..bc877de 100644
--- a/src/components/molecules/Table/index.test.tsx
+++ b/src/components/molecules/Table/index.test.tsx
@@ -1,3 +1,5 @@
+import type { ReactNode } from 'react';
+
 import { render, screen } from '@testing-library/react';
 
 import Table from './index';
@@ -7,7 +9,7 @@ vi.mock('@/components/atoms/Badge', () => ({
 }));
 
 vi.mock('@/components/molecules/GlowArea', () => ({
-  default: ({ children }: { children: React.ReactNode }) => (
+  default: ({ children }: { children: ReactNode }) => (
     <div data-testid="glow-area">{children}</div>
   ),
 }));

From 20e43ae1a07520b4fcaaa341ac103dc1e32838ce Mon Sep 17 00:00:00 2001
From: KYBee <kyb3634@naver.com>
Date: Tue, 28 Jul 2026 01:33:13 +0900
Subject: [PATCH 7/7] test: remove brittle Flex migration contract

---
 src/styles/flexMigration.test.ts | 124 -------------------------------
 1 file changed, 124 deletions(-)
 delete mode 100644 src/styles/flexMigration.test.ts

diff --git a/src/styles/flexMigration.test.ts b/src/styles/flexMigration.test.ts
deleted file mode 100644
index 92588f0..0000000
--- a/src/styles/flexMigration.test.ts
+++ /dev/null
@@ -1,124 +0,0 @@
-import { readdirSync, readFileSync } from 'node:fs';
-import { join, resolve } from 'node:path';
-
-const allowedDeclarations: Record<string, string[]> = {
-  'src/components/global/Navigation/index.module.scss': [
-    'display: flex',
-    'justify-content: space-between',
-  ],
-  'src/components/molecules/Table/index.module.scss': ['flex: 1 1 0'],
-  'src/components/organisms/about/ActivitiesSection/index.module.scss': [
-    'align-self: stretch',
-    'align-self: stretch',
-  ],
-  'src/components/organisms/about/SponsorSection/index.module.scss': [
-    'gap: 16px',
-    'gap: 16px',
-    'gap: 32px',
-  ],
-  'src/components/organisms/recruit/ScheduleCard/index.module.scss': [
-    'align-self: stretch',
-    'align-self: stretch',
-    'flex: 1 1 0',
-    'align-self: stretch',
-  ],
-  'src/components/pages/Activity/index.module.scss': ['gap: 32px', 'gap: 16px'],
-  'src/components/pages/People/index.module.scss': ['gap: 32px', 'gap: 16px'],
-};
-
-const responsiveFlexContracts: Record<string, string[]> = {
-  'src/components/global/Footer/index.tsx': [
-    "direction={{ sm: 'column-reverse', lg: 'row' }}",
-    "gap={{ sm: '16px', lg: 0 }}",
-    "justify={{ sm: 'center', lg: 'space-between' }}",
-  ],
-  'src/components/global/Navigation/index.tsx': [
-    "direction={{ sm: 'column', lg: 'row' }}",
-    "justify={{ lg: 'center' }}",
-  ],
-  'src/components/molecules/Card/index.tsx': [
-    "direction={{ sm: 'column', lg: reverse ? 'row-reverse' : 'row' }}",
-  ],
-  'src/components/molecules/Table/index.tsx': [
-    "gap={{ sm: '16px', md: '32px' }}",
-    "align={isApplicant ? 'center' : { sm: 'flex-start', md: 'center' }}",
-    "direction={isApplicant ? 'row' : { sm: 'column', md: 'row' }}",
-  ],
-  'src/components/organisms/Faq/index.tsx': [
-    "gap={{ sm: '16px', md: '32px' }}",
-  ],
-  'src/components/organisms/about/ActivitiesSection/index.tsx': [
-    "gap={{ sm: '8px', md: '16px' }}",
-    "justify={{ sm: 'flex-start', md: 'center' }}",
-  ],
-  'src/components/organisms/about/ContactSection/index.tsx': [
-    "direction={{ sm: 'column', md: 'row' }} gap=\"20px\"",
-  ],
-  'src/components/organisms/activity/ActiveCard/index.tsx': [
-    "asChild direction={{ sm: 'column', md: 'row' }}",
-  ],
-  'src/components/organisms/home/RecruitmentStatusSection/index.tsx': [
-    "justify={{ sm: 'center', md: 'normal' }}",
-    "gap={{ sm: '12px', md: '24px' }}",
-  ],
-  'src/components/organisms/home/SummaryCards/index.tsx': [
-    "gap={{ sm: '12px', md: '24px' }}",
-    "gap={{ sm: '6px', md: '12px' }}",
-  ],
-  'src/components/pages/Activity/index.tsx': [
-    "gap={{ sm: '8px', md: '16px' }}",
-    "gap={{ sm: '16px', md: '32px' }}",
-  ],
-  'src/components/pages/Home/index.tsx': ["gap={{ sm: 0, md: '16px' }}"],
-  'src/components/pages/People/index.tsx': ["gap={{ sm: '8px', md: '16px' }}"],
-};
-
-const legacyFlexDeclaration =
-  /^\s*(display:\s*(?:inline-)?flex|flex-direction:\s*[^;]+|justify-content:\s*[^;]+|align-items:\s*[^;]+|flex-wrap:\s*[^;]+|gap:\s*[^;]+|align-self:\s*[^;]+|order:\s*[^;]+|flex:\s*[^;]+);?\s*$/gm;
-
-function getFiles(directory: string, extension: string): string[] {
-  return readdirSync(resolve(process.cwd(), directory), {
-    withFileTypes: true,
-  }).flatMap((entry) => {
-    const file = join(directory, entry.name);
-
-    if (entry.isDirectory()) return getFiles(file, extension);
-    return entry.name.endsWith(extension) ? [file] : [];
-  });
-}
-
-function readSource(file: string) {
-  return readFileSync(resolve(process.cwd(), file), 'utf8');
-}
-
-function normalizeWhitespace(value: string) {
-  return value.replace(/\s+/g, ' ').trim();
-}
-
-function getLegacyFlexDeclarations(file: string) {
-  return [...readSource(file).matchAll(legacyFlexDeclaration)].map((match) =>
-    normalizeWhitespace(match[1]),
-  );
-}
-
-describe('responsive Flex migration contract', () => {
-  it.each(Object.entries(responsiveFlexContracts))(
-    'keeps the responsive prop mapping in %s',
-    (file, expectedProps) => {
-      const source = normalizeWhitespace(readSource(file));
-
-      expectedProps.forEach((expectedProp) => {
-        expect(source).toContain(normalizeWhitespace(expectedProp));
-      });
-    },
-  );
-
-  it.each(getFiles('src', '.module.scss'))(
-    'keeps only explicitly unsupported legacy declarations in %s',
-    (file) => {
-      expect(getLegacyFlexDeclarations(file)).toEqual(
-        allowedDeclarations[file] ?? [],
-      );
-    },
-  );
-});