diff --git a/src/components/molecules/Button/index.module.scss b/src/components/molecules/Button/index.module.scss
index 6762201..7c26d5c 100644
--- a/src/components/molecules/Button/index.module.scss
+++ b/src/components/molecules/Button/index.module.scss
@@ -1,7 +1,4 @@
 .button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   border-radius: 8px;
   height: 40px;
   font-weight: bold;
@@ -16,7 +13,6 @@
     border-color 0.3s ease-in-out,
     opacity 0.3s ease-in-out;
   white-space: nowrap;
-  flex-direction: row;
   text-align: center;
 
   &.menu {
diff --git a/src/components/molecules/Button/index.test.tsx b/src/components/molecules/Button/index.test.tsx
new file mode 100644
index 0000000..8ebfb2c
--- /dev/null
+++ b/src/components/molecules/Button/index.test.tsx
@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+
+import Button from './index';
+
+describe('Button', () => {
+  it('renders a native button with disabled state', () => {
+    render(
+      <Button buttonType="apply" disabled>
+        지원하기
+      </Button>,
+    );
+
+    const button = screen.getByRole('button', { name: '지원하기' });
+
+    expect(button).toBeDisabled();
+    expect(button).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('renders an external link with safe link attributes', () => {
+    render(
+      <Button
+        buttonType="apply"
+        href="https://example.com/apply"
+        isExternalLink
+      >
+        지원하기
+      </Button>,
+    );
+
+    const link = screen.getByRole('link', { name: '지원하기' });
+
+    expect(link).toHaveAttribute('href', 'https://example.com/apply');
+    expect(link).toHaveAttribute('target', '_blank');
+    expect(link).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+});
diff --git a/src/components/molecules/Button/index.tsx b/src/components/molecules/Button/index.tsx
index ddd7654..3fbfe98 100644
--- a/src/components/molecules/Button/index.tsx
+++ b/src/components/molecules/Button/index.tsx
@@ -3,6 +3,7 @@ import { ComponentProps, ReactNode } from 'react';
 import { Route } from 'next';
 import Link, { LinkProps } from 'next/link';
 
+import { Flex } from '@sipe-team/side';
 import clsx from 'clsx';
 
 import styles from './index.module.scss';
@@ -62,24 +63,28 @@ function Button<
     >;
 
     return (
-      <Link
-        href={href as Route}
-        className={commonClassName}
-        aria-disabled={disabled}
-        rel={isExternalLink ? 'noopener noreferrer' : undefined}
-        target={isExternalLink ? '_blank' : undefined}
-        {...linkRest}
-      />
+      <Flex asChild align="center" direction="row" justify="center">
+        <Link
+          href={href as Route}
+          className={commonClassName}
+          aria-disabled={disabled}
+          rel={isExternalLink ? 'noopener noreferrer' : undefined}
+          target={isExternalLink ? '_blank' : undefined}
+          {...linkRest}
+        />
+      </Flex>
     );
   }
 
   return (
-    <button
-      className={commonClassName}
-      disabled={disabled}
-      aria-disabled={disabled}
-      {...(rest as ComponentProps<'button'>)}
-    />
+    <Flex asChild align="center" direction="row" justify="center">
+      <button
+        className={commonClassName}
+        disabled={disabled}
+        aria-disabled={disabled}
+        {...(rest as ComponentProps<'button'>)}
+      />
+    </Flex>
   );
 }
 
diff --git a/src/components/organisms/about/SponsorSection/SponsorImage.test.tsx b/src/components/organisms/about/SponsorSection/SponsorImage.test.tsx
new file mode 100644
index 0000000..6bf20ca
--- /dev/null
+++ b/src/components/organisms/about/SponsorSection/SponsorImage.test.tsx
@@ -0,0 +1,41 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import SponsorImage from './SponsorImage';
+
+vi.mock('next/image', () => ({
+  default: ({
+    alt,
+    onError,
+    src,
+  }: {
+    alt: string;
+    onError?: () => void;
+    src: string;
+  }) => (
+    // Tests only need an element with alt text semantics.
+    // eslint-disable-next-line @next/next/no-img-element
+    <img alt={alt} onError={onError} src={src} />
+  ),
+}));
+
+describe('SponsorImage', () => {
+  it('renders the sponsor image with the provided alt text', () => {
+    render(<SponsorImage src="/sponsor.png" alt="후원사" />);
+
+    expect(screen.getByAltText('후원사')).toHaveAttribute(
+      'src',
+      '/sponsor.png',
+    );
+  });
+
+  it('renders the fallback image when the sponsor image fails to load', () => {
+    render(<SponsorImage src="/broken.png" alt="후원사" />);
+
+    fireEvent.error(screen.getByAltText('후원사'));
+
+    expect(screen.getByAltText('Image not available')).toHaveAttribute(
+      'src',
+      '/assets/empty_image.png',
+    );
+  });
+});
diff --git a/src/components/organisms/about/SponsorSection/SponsorImage.tsx b/src/components/organisms/about/SponsorSection/SponsorImage.tsx
index aa601aa..3b7601c 100644
--- a/src/components/organisms/about/SponsorSection/SponsorImage.tsx
+++ b/src/components/organisms/about/SponsorSection/SponsorImage.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react';
 
 import Image from 'next/image';
 
+import { Flex } from '@sipe-team/side';
 import clsx from 'clsx';
 
 import styles from './index.module.scss';
@@ -37,9 +38,13 @@ function SponsorImage({ src, alt }: SponsorImageProps) {
       };
 
   return (
-    <div className={clsx(styles.imageWrapper, hasError && styles.errorWrapper)}>
+    <Flex
+      align="center"
+      className={clsx(styles.imageWrapper, hasError && styles.errorWrapper)}
+      justify="center"
+    >
       <Image {...imageProperties} />
-    </div>
+    </Flex>
   );
 }
 
diff --git a/src/components/organisms/about/SponsorSection/index.module.scss b/src/components/organisms/about/SponsorSection/index.module.scss
index b6cd420..39bce6c 100644
--- a/src/components/organisms/about/SponsorSection/index.module.scss
+++ b/src/components/organisms/about/SponsorSection/index.module.scss
@@ -21,9 +21,6 @@
     background-color: white;
     border-radius: 12px;
     padding: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 
     &.errorWrapper {
       background-color: #2d3748; // empty_image.png 배경색과 매칭
diff --git a/src/components/organisms/activity/ActiveCard/index.module.scss b/src/components/organisms/activity/ActiveCard/index.module.scss
index b64e51b..a5c0f01 100644
--- a/src/components/organisms/activity/ActiveCard/index.module.scss
+++ b/src/components/organisms/activity/ActiveCard/index.module.scss
@@ -29,9 +29,6 @@
   width: 100%;
   margin-left: 24px;
   padding: 16px;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
 
   @include mobile {
     margin-left: 0;
@@ -60,17 +57,9 @@
   }
 
   .posterUserInfo {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
     margin-top: 16px;
 
     .userWrapper {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      gap: 12px;
-
       .userIcon {
         border-radius: 50%;
       }
diff --git a/src/components/organisms/activity/ActiveCard/index.test.tsx b/src/components/organisms/activity/ActiveCard/index.test.tsx
new file mode 100644
index 0000000..1145403
--- /dev/null
+++ b/src/components/organisms/activity/ActiveCard/index.test.tsx
@@ -0,0 +1,66 @@
+import { render, screen } from '@testing-library/react';
+
+import ActiveCard from './index';
+
+vi.mock('@/components/molecules/Image', () => ({
+  default: ({ alt, src }: { alt: string; src?: string }) => (
+    // Tests only need an element with alt text semantics.
+    // eslint-disable-next-line @next/next/no-img-element
+    <img alt={alt} src={src} />
+  ),
+}));
+
+vi.mock('@/libs/assets/icons', () => ({
+  UserIcon: (props: React.SVGProps<SVGSVGElement>) => <svg {...props} />,
+}));
+
+describe('ActiveCard', () => {
+  it('renders the post thumbnail, content, profile, metadata, and outbound link', () => {
+    render(
+      <ActiveCard
+        thumbnail="/activity-post.png"
+        profile="/profile.png"
+        contentTitle="사이프 블로그 글"
+        contentBody="사이프 활동을 정리한 글입니다"
+        userName="김사이퍼"
+        createDate="2026.06.22"
+        link="https://example.com/post"
+      />,
+    );
+
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      'https://example.com/post',
+    );
+    expect(screen.getByAltText('thumbnail')).toHaveAttribute(
+      'src',
+      '/activity-post.png',
+    );
+    expect(screen.getByAltText('user profile')).toHaveAttribute(
+      'src',
+      '/profile.png',
+    );
+    expect(screen.getByText('사이프 블로그 글')).toBeInTheDocument();
+    expect(
+      screen.getByText('사이프 활동을 정리한 글입니다'),
+    ).toBeInTheDocument();
+    expect(screen.getByText('김사이퍼')).toBeInTheDocument();
+    expect(screen.getByText('2026.06.22')).toBeInTheDocument();
+  });
+
+  it('renders the default user icon when profile is omitted', () => {
+    render(
+      <ActiveCard
+        thumbnail="/activity-post.png"
+        contentTitle="프로필 없는 글"
+        contentBody="기본 아이콘 확인"
+        userName="박사이퍼"
+        createDate="2026.06.23"
+        link="https://example.com/no-profile"
+      />,
+    );
+
+    expect(screen.getByLabelText('default user profile')).toBeInTheDocument();
+    expect(screen.queryByAltText('user profile')).not.toBeInTheDocument();
+  });
+});
diff --git a/src/components/organisms/activity/ActiveCard/index.tsx b/src/components/organisms/activity/ActiveCard/index.tsx
index 9c8285e..920ebc4 100644
--- a/src/components/organisms/activity/ActiveCard/index.tsx
+++ b/src/components/organisms/activity/ActiveCard/index.tsx
@@ -1,4 +1,4 @@
-import { color, Typography } from '@sipe-team/side';
+import { color, Flex, Typography } from '@sipe-team/side';
 
 import ExternalLink from '@/components/atoms/ExternalLink';
 import Image from '@/components/molecules/Image';
@@ -40,42 +40,65 @@ function ActiveCard({
         alt="thumbnail"
         sizes="(max-width: 1060px) 50vw, 33vw"
       />
-      <article className={styles.contentsWrapper}>
-        <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>
-        <section className={styles.posterUserInfo}>
-          <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}
+      <Flex
+        asChild
+        className={styles.contentsWrapper}
+        direction="column"
+        justify="space-between"
+      >
+        <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>
-          </div>
-          <Typography className={styles.createDate} size={12} weight="semiBold">
-            {createDate}
-          </Typography>
-        </section>
-      </article>
+          </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
+                      aria-label="default user profile"
+                      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>
   );
 }
diff --git a/src/components/organisms/activity/ActiveVideoCard/index.module.scss b/src/components/organisms/activity/ActiveVideoCard/index.module.scss
index aa11950..49cf8d7 100644
--- a/src/components/organisms/activity/ActiveVideoCard/index.module.scss
+++ b/src/components/organisms/activity/ActiveVideoCard/index.module.scss
@@ -28,18 +28,12 @@
   left: 0;
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
   opacity: 0;
   background-color: rgba(0, 0, 0, 0.8);
   padding: 16px;
   transition: opacity 0.3s;
 
   .contentsInfo {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
     font-size: 14px;
     font-weight: 500;
 
@@ -50,19 +44,9 @@
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
     }
-
-    .body {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      gap: 10px;
-    }
   }
 
   .linkButton {
-    display: flex;
-    justify-content: center;
-    align-items: center;
     width: 100%;
     height: 37px;
     border-radius: 8px;
diff --git a/src/components/organisms/activity/ActiveVideoCard/index.test.tsx b/src/components/organisms/activity/ActiveVideoCard/index.test.tsx
new file mode 100644
index 0000000..138cbc8
--- /dev/null
+++ b/src/components/organisms/activity/ActiveVideoCard/index.test.tsx
@@ -0,0 +1,37 @@
+import { render, screen } from '@testing-library/react';
+
+import ActiveVideoCard from './index';
+
+vi.mock('@/components/molecules/Image', () => ({
+  default: ({ alt, src }: { alt: string; src?: string }) => (
+    // Tests only need an element with alt text semantics.
+    // eslint-disable-next-line @next/next/no-img-element
+    <img alt={alt} src={src} />
+  ),
+}));
+
+describe('ActiveVideoCard', () => {
+  it('renders the video thumbnail, metadata, and outbound link', () => {
+    render(
+      <ActiveVideoCard
+        thumbnail="/activity-video.png"
+        contentTitle="사이프 세션 발표"
+        userName="김사이퍼"
+        createDate="2026.06.21"
+        link="https://youtube.com/watch?v=sipe"
+      />,
+    );
+
+    expect(screen.getByAltText('사이프 세션 발표')).toHaveAttribute(
+      'src',
+      '/activity-video.png',
+    );
+    expect(screen.getByText('사이프 세션 발표')).toBeInTheDocument();
+    expect(screen.getByText('김사이퍼')).toBeInTheDocument();
+    expect(screen.getByText('2026.06.21')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: '보러가기' })).toHaveAttribute(
+      'href',
+      'https://youtube.com/watch?v=sipe',
+    );
+  });
+});
diff --git a/src/components/organisms/activity/ActiveVideoCard/index.tsx b/src/components/organisms/activity/ActiveVideoCard/index.tsx
index 5957a33..6976f53 100644
--- a/src/components/organisms/activity/ActiveVideoCard/index.tsx
+++ b/src/components/organisms/activity/ActiveVideoCard/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { color, Typography } from '@sipe-team/side';
+import { color, Flex, Typography } from '@sipe-team/side';
 import clsx from 'clsx';
 
 import ExternalLink from '@/components/atoms/ExternalLink';
@@ -33,32 +33,58 @@ function ActiveVideoCard({
         alt={contentTitle}
         src={thumbnail}
       />
-      <section className={styles.contentsWrapper}>
-        <section className={styles.contentsInfo}>
-          <Typography className={styles.title} color={color.white} size={16}>
-            {contentTitle}
-          </Typography>
-          <div className={styles.body}>
-            <Typography
-              className={styles.username}
-              color={color.white}
-              size={14}
+      <Flex
+        asChild
+        className={styles.contentsWrapper}
+        direction="column"
+        justify="space-between"
+      >
+        <section>
+          <Flex
+            asChild
+            className={styles.contentsInfo}
+            direction="column"
+            gap="12px"
+          >
+            <section>
+              <Typography
+                className={styles.title}
+                color={color.white}
+                size={16}
+              >
+                {contentTitle}
+              </Typography>
+              <Flex asChild align="center" gap="10px">
+                <div>
+                  <Typography
+                    className={styles.username}
+                    color={color.white}
+                    size={14}
+                  >
+                    {userName}
+                  </Typography>
+                  <Typography
+                    className={styles.date}
+                    color={color.white}
+                    size={14}
+                  >
+                    {createDate}
+                  </Typography>
+                </div>
+              </Flex>
+            </section>
+          </Flex>
+          <Flex asChild align="center" justify="center">
+            <ExternalLink
+              className={styles.linkButton}
+              href={link}
+              withTextUnderline={false}
             >
-              {userName}
-            </Typography>
-            <Typography className={styles.date} color={color.white} size={14}>
-              {createDate}
-            </Typography>
-          </div>
+              보러가기
+            </ExternalLink>
+          </Flex>
         </section>
-        <ExternalLink
-          className={styles.linkButton}
-          href={link}
-          withTextUnderline={false}
-        >
-          보러가기
-        </ExternalLink>
-      </section>
+      </Flex>
     </article>
   );
 }
diff --git a/src/components/organisms/people/UserCard/index.module.scss b/src/components/organisms/people/UserCard/index.module.scss
index 8630383..788a133 100644
--- a/src/components/organisms/people/UserCard/index.module.scss
+++ b/src/components/organisms/people/UserCard/index.module.scss
@@ -1,5 +1,4 @@
 .userInfo {
-  display: flex;
   height: 70px;
   margin-bottom: 20px;
 
@@ -12,15 +11,11 @@
   }
 
   .info {
-    display: flex;
-    flex-direction: column;
     width: 100%;
     margin: 8.5px 0 8.5px 16px;
   }
 
   .mainInfo {
-    display: flex;
-    justify-content: space-between;
     height: 100%;
 
     .name {
@@ -30,17 +25,9 @@
       line-height: 137%;
       color: color('white');
     }
-
-    .links {
-      display: flex;
-      gap: 12px;
-    }
   }
 
   .subInfo {
-    display: flex;
-    justify-content: space-between;
-
     .part {
       font-size: 12px;
       font-weight: 500;
@@ -51,9 +38,6 @@
     }
 
     .organizer {
-      display: flex;
-      justify-content: center;
-      align-items: center;
       color: color('primary');
     }
 
diff --git a/src/components/organisms/people/UserCard/index.test.tsx b/src/components/organisms/people/UserCard/index.test.tsx
new file mode 100644
index 0000000..6648b71
--- /dev/null
+++ b/src/components/organisms/people/UserCard/index.test.tsx
@@ -0,0 +1,93 @@
+import { render, screen } from '@testing-library/react';
+
+import UserCard from './index';
+
+vi.mock('@/components/molecules/Image', () => ({
+  default: ({ alt, src }: { alt: string; src?: string }) => (
+    // Tests only need an element with alt text semantics.
+    // eslint-disable-next-line @next/next/no-img-element
+    <img alt={alt} src={src} />
+  ),
+}));
+
+vi.mock('@/components/molecules/SocialIconLink', () => ({
+  default: ({
+    type,
+    url,
+  }: {
+    type: string;
+    url?: string;
+    size?: 'small' | 'middle';
+  }) => (
+    <a href={url} aria-label={type} data-testid="social-icon-link">
+      {type}
+    </a>
+  ),
+}));
+
+vi.mock('@/libs/assets/icons', () => ({
+  OrganizerIcon: ({ 'aria-label': ariaLabel }: { 'aria-label'?: string }) => (
+    <svg aria-label={ariaLabel ?? 'organizer'} />
+  ),
+}));
+
+describe('UserCard', () => {
+  it('renders profile, user information, social links, and review', () => {
+    render(
+      <UserCard
+        img="/profile.png"
+        name="김사이퍼"
+        part="Frontend"
+        links={[
+          ['GITHUB', 'https://github.com/sipe-team'],
+          ['LINKEDIN', 'https://linkedin.com/company/sipe.team'],
+        ]}
+        introduce="함께 성장하고 있습니다"
+        review="미션과 활동이 좋았습니다"
+        isOrganizer
+      />,
+    );
+
+    expect(screen.getByAltText('user image')).toHaveAttribute(
+      'src',
+      '/profile.png',
+    );
+    expect(
+      screen.getByRole('heading', { level: 3, name: '김사이퍼' }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('Frontend')).toBeInTheDocument();
+    expect(screen.getByText('함께 성장하고 있습니다')).toBeInTheDocument();
+    expect(screen.getByText('Organizer')).toBeInTheDocument();
+    expect(screen.getAllByTestId('social-icon-link')).toHaveLength(2);
+    expect(screen.getByRole('link', { name: 'GITHUB' })).toHaveAttribute(
+      'href',
+      'https://github.com/sipe-team',
+    );
+    expect(screen.getByRole('link', { name: 'LINKEDIN' })).toHaveAttribute(
+      'href',
+      'https://linkedin.com/company/sipe.team',
+    );
+    expect(
+      screen.getByRole('heading', { level: 3, name: '활동후기' }),
+    ).toBeInTheDocument();
+    expect(screen.getByText('미션과 활동이 좋았습니다')).toBeInTheDocument();
+  });
+
+  it('omits optional organizer and review content when not provided', () => {
+    render(
+      <UserCard
+        name="박사이퍼"
+        part="Backend"
+        introduce="백엔드 미션 참여"
+        links={[]}
+      />,
+    );
+
+    expect(screen.getByText('박사이퍼')).toBeInTheDocument();
+    expect(screen.getByText('Backend')).toBeInTheDocument();
+    expect(screen.getByText('백엔드 미션 참여')).toBeInTheDocument();
+    expect(screen.queryByText('Organizer')).not.toBeInTheDocument();
+    expect(screen.queryByText('활동후기')).not.toBeInTheDocument();
+    expect(screen.queryAllByTestId('social-icon-link')).toHaveLength(0);
+  });
+});
diff --git a/src/components/organisms/people/UserCard/index.tsx b/src/components/organisms/people/UserCard/index.tsx
index 1441a86..13db8b5 100644
--- a/src/components/organisms/people/UserCard/index.tsx
+++ b/src/components/organisms/people/UserCard/index.tsx
@@ -1,5 +1,7 @@
 import { ComponentProps } from 'react';
 
+import { Flex } from '@sipe-team/side';
+
 import CardWrapper from '@/components/atoms/CardWrapper';
 import Image from '@/components/molecules/Image';
 import SocialIconLink, {
@@ -11,7 +13,6 @@ import type { Entries, RequiredNonNullableObject } from '@/libs/utils';
 import styles from './index.module.scss';
 
 type UserCardProps = ComponentProps<'div'> & {
-  period: string;
   img?: string;
   name: string;
   links?: Entries<
@@ -24,7 +25,6 @@ type UserCardProps = ComponentProps<'div'> & {
 };
 
 function UserCard({
-  period,
   img,
   name,
   links,
@@ -35,42 +35,59 @@ function UserCard({
 }: UserCardProps) {
   return (
     <CardWrapper type="CONTENT" className="people-box" minHeight={270}>
-      <section className={styles.userInfo}>
-        <Image
-          className={styles.profile}
-          alt="user image"
-          src={img}
-          width={70}
-          height={70}
-        />
-        <section className={styles.info}>
-          <section className={styles.mainInfo}>
-            <h3 className={styles.name}>{name}</h3>
-            <article className={styles.links}>
-              {links?.map(([type, link]) => (
-                <SocialIconLink
-                  type={type}
-                  url={link}
-                  key={type}
-                  size="small"
-                />
-              ))}
-            </article>
-          </section>
-          <section className={styles.subInfo}>
-            <p className={styles.part}>{part}</p>
-            {isOrganizer && (
-              <p className={styles.organizer}>
-                Organizer{' '}
-                <OrganizerIcon
-                  className={styles.organizerMark}
-                  style={{ color: 'var(--primary)' }}
-                />
-              </p>
-            )}
-          </section>
+      <Flex asChild className={styles.userInfo}>
+        <section>
+          <Image
+            className={styles.profile}
+            alt="user image"
+            src={img}
+            width={70}
+            height={70}
+          />
+          <Flex asChild className={styles.info} direction="column">
+            <section>
+              <Flex asChild className={styles.mainInfo} justify="space-between">
+                <section>
+                  <h3 className={styles.name}>{name}</h3>
+                  <Flex asChild gap="12px">
+                    <article>
+                      {links?.map(([type, link]) => (
+                        <SocialIconLink
+                          type={type}
+                          url={link}
+                          key={type}
+                          size="small"
+                        />
+                      ))}
+                    </article>
+                  </Flex>
+                </section>
+              </Flex>
+              <Flex asChild className={styles.subInfo} justify="space-between">
+                <section>
+                  <p className={styles.part}>{part}</p>
+                  {isOrganizer && (
+                    <Flex
+                      align="center"
+                      asChild
+                      className={styles.organizer}
+                      justify="center"
+                    >
+                      <p>
+                        Organizer{' '}
+                        <OrganizerIcon
+                          className={styles.organizerMark}
+                          style={{ color: 'var(--primary)' }}
+                        />
+                      </p>
+                    </Flex>
+                  )}
+                </section>
+              </Flex>
+            </section>
+          </Flex>
         </section>
-      </section>
+      </Flex>
       <section className={styles.introduceWrapper}>{introduce}</section>
       {review && (
         <section className={styles.reviewWrapper}>
diff --git a/src/components/organisms/recruit/RecruitBarChart/index.module.scss b/src/components/organisms/recruit/RecruitBarChart/index.module.scss
index 6ae483f..7ed09e8 100644
--- a/src/components/organisms/recruit/RecruitBarChart/index.module.scss
+++ b/src/components/organisms/recruit/RecruitBarChart/index.module.scss
@@ -73,9 +73,6 @@
   pointer-events: none;
   min-width: 200px;
   max-width: 320px;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
 }
 
 .tooltipLabel {
diff --git a/src/components/organisms/recruit/RecruitBarChart/index.test.tsx b/src/components/organisms/recruit/RecruitBarChart/index.test.tsx
index 604c6c8..1fab4a0 100644
--- a/src/components/organisms/recruit/RecruitBarChart/index.test.tsx
+++ b/src/components/organisms/recruit/RecruitBarChart/index.test.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import RecruitBarChart from './index';
 
@@ -47,4 +47,25 @@ describe('RecruitBarChart', () => {
     ).toBeInTheDocument();
     expect(screen.getAllByText('10명')).toHaveLength(2);
   });
+
+  it('renders the tooltip when a bar item is hovered', () => {
+    render(
+      <RecruitBarChart
+        title="지원 현황"
+        data={[
+          {
+            name: 'Backend',
+            value: 10,
+            percentage: 50,
+            examples: 'Java, Kotlin',
+          },
+        ]}
+      />,
+    );
+
+    fireEvent.mouseEnter(screen.getByLabelText('Backend: 10명, 50퍼센트'));
+
+    expect(screen.getByText('10명 (50%)')).toBeInTheDocument();
+    expect(screen.getByText('Java, Kotlin')).toBeInTheDocument();
+  });
 });
diff --git a/src/components/organisms/recruit/RecruitBarChart/index.tsx b/src/components/organisms/recruit/RecruitBarChart/index.tsx
index ed965b6..637af62 100644
--- a/src/components/organisms/recruit/RecruitBarChart/index.tsx
+++ b/src/components/organisms/recruit/RecruitBarChart/index.tsx
@@ -83,8 +83,10 @@ function BarItem({
         <span className={styles.value}>{displayValue}명</span>
       </Flex>
       {isHovered && (
-        <div
+        <Flex
           className={styles.tooltip}
+          direction="column"
+          gap="3px"
           style={{
             left: `${mousePosition.x + 12}px`,
             top: `${mousePosition.y + 12}px`,
@@ -97,7 +99,7 @@ function BarItem({
           {item.examples && (
             <p className={styles.tooltipExamples}>{item.examples}</p>
           )}
-        </div>
+        </Flex>
       )}
     </div>
   );
diff --git a/src/components/pages/People/index.tsx b/src/components/pages/People/index.tsx
index 048e4fb..2f6f771 100644
--- a/src/components/pages/People/index.tsx
+++ b/src/components/pages/People/index.tsx
@@ -50,7 +50,6 @@ function People({
               return (
                 <UserCard
                   key={person.id}
-                  period={person.period}
                   img={person.thumbnail}
                   name={person.name}
                   part={person.part}
diff --git a/src/components/pages/Recruit/index.module.scss b/src/components/pages/Recruit/index.module.scss
index af71876..04620c1 100644
--- a/src/components/pages/Recruit/index.module.scss
+++ b/src/components/pages/Recruit/index.module.scss
@@ -11,10 +11,7 @@
 }
 
 .chartsWrapper {
-  display: flex;
-  flex-wrap: wrap;
   width: 100%;
-  gap: 32px;
 }
 
 .chartSection {
diff --git a/src/components/pages/Recruit/index.test.tsx b/src/components/pages/Recruit/index.test.tsx
new file mode 100644
index 0000000..da3fe81
--- /dev/null
+++ b/src/components/pages/Recruit/index.test.tsx
@@ -0,0 +1,86 @@
+import type { ReactNode } from 'react';
+
+import { render, screen } from '@testing-library/react';
+
+import Recruit from './index';
+
+vi.mock('@/components/atoms/Layout', () => ({
+  default: ({ children }: { children: ReactNode }) => (
+    <div data-testid="layout">{children}</div>
+  ),
+}));
+
+vi.mock('@/components/atoms/ContentWithTitle', () => ({
+  default: ({ children, title }: { children: ReactNode; title: string }) => (
+    <section>
+      <h1>{title}</h1>
+      {children}
+    </section>
+  ),
+}));
+
+vi.mock('@/components/atoms/DraggableContainer', () => ({
+  default: ({
+    ariaLabel,
+    children,
+  }: {
+    ariaLabel?: string;
+    children: ReactNode;
+  }) => (
+    <div aria-label={ariaLabel} role="region">
+      {children}
+    </div>
+  ),
+}));
+
+vi.mock('@/components/molecules/Table', () => ({
+  default: ({ isApplicant }: { isApplicant: boolean }) => (
+    <div data-testid={isApplicant ? 'applicant-table' : 'activity-table'} />
+  ),
+}));
+
+vi.mock('@/components/organisms/Faq', () => ({
+  default: () => <section data-testid="faq" />,
+}));
+
+vi.mock('@/components/organisms/recruit/CompanyChart', () => ({
+  default: () => <article data-testid="company-chart" />,
+}));
+
+vi.mock('@/components/organisms/recruit/ExperienceChart', () => ({
+  default: () => <article data-testid="experience-chart" />,
+}));
+
+vi.mock('@/components/organisms/recruit/JobRoleChart', () => ({
+  default: () => <article data-testid="job-role-chart" />,
+}));
+
+vi.mock('@/components/organisms/recruit/ScheduleCard', () => ({
+  default: ({ title }: { title: string }) => (
+    <article data-testid="schedule-card">{title}</article>
+  ),
+}));
+
+vi.mock('@/db', () => ({
+  getFaq: () => ({
+    recruit: [{ id: 'faq-1', question: '질문', answer: '답변' }],
+  }),
+}));
+
+describe('Recruit page', () => {
+  it('renders the recruit sections, schedule cards, and member charts', () => {
+    render(<Recruit />);
+
+    expect(screen.getByText('지원자격')).toBeInTheDocument();
+    expect(screen.getByText('모집 일정')).toBeInTheDocument();
+    expect(screen.getByText('활동안내')).toBeInTheDocument();
+    expect(screen.getByText('이전 기수 구성원 현황')).toBeInTheDocument();
+    expect(screen.getAllByTestId('schedule-card')).toHaveLength(5);
+    expect(screen.getAllByTestId('schedule-card')[0].parentElement).toHaveStyle(
+      '--flex-justify: stretch',
+    );
+    expect(screen.getByTestId('experience-chart')).toBeInTheDocument();
+    expect(screen.getByTestId('company-chart')).toBeInTheDocument();
+    expect(screen.getByTestId('job-role-chart')).toBeInTheDocument();
+  });
+});
diff --git a/src/components/pages/Recruit/index.tsx b/src/components/pages/Recruit/index.tsx
index a339123..829dd3a 100644
--- a/src/components/pages/Recruit/index.tsx
+++ b/src/components/pages/Recruit/index.tsx
@@ -51,7 +51,12 @@ function Recruit() {
         <Table dataList={InActivity} isApplicant={false} />
       </ContentWithTitle>
       <ContentWithTitle title="이전 기수 구성원 현황">
-        <div className={styles.chartsWrapper}>
+        <Flex
+          className={styles.chartsWrapper}
+          direction="row"
+          gap="32px"
+          wrap="wrap"
+        >
           <div className={styles.chartSection}>
             <ExperienceChart />
           </div>
@@ -61,7 +66,7 @@ function Recruit() {
           <div className={styles.jobRoleChartSection}>
             <JobRoleChart />
           </div>
-        </div>
+        </Flex>
       </ContentWithTitle>
       <Faq faqs={faq.recruit} />
     </Layout>