From 983ecc2ccb7ae06b8d7f47522225e10d3451429a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A0=95=EC=9B=90?= <jwon133@gmail.com>
Date: Wed, 4 Feb 2026 19:15:39 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=EC=82=AC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=EB=B0=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sidebar/MobileDrawer.stories.tsx          |  50 ++++++++
 src/components/sidebar/MobileDrawer.tsx       |  96 ++++++++++++++++
 .../sidebar/MobileHeader.stories.tsx          |  37 ++++++
 src/components/sidebar/MobileHeader.tsx       |  68 +++++++++++
 src/components/sidebar/Sidebar.stories.tsx    |  95 +++++++++++++++
 src/components/sidebar/Sidebar.tsx            |  81 +++++++++++++
 .../sidebar/SidebarAddButton.stories.tsx      |  30 +++++
 src/components/sidebar/SidebarAddButton.tsx   |  26 +++++
 .../sidebar/SidebarButton.stories.tsx         |  79 +++++++++++++
 src/components/sidebar/SidebarButton.tsx      |  29 +++++
 .../sidebar/SidebarTeamSelect.stories.tsx     |  64 +++++++++++
 src/components/sidebar/SidebarTeamSelect.tsx  |  51 +++++++++
 src/components/sidebar/index.ts               |   7 ++
 .../sidebar/styles/MobileDrawer.module.css    |  57 +++++++++
 .../sidebar/styles/MobileHeader.module.css    |  54 +++++++++
 .../sidebar/styles/Sidebar.module.css         | 108 ++++++++++++++++++
 .../styles/SidebarAddButton.module.css        |  24 ++++
 .../sidebar/styles/SidebarButton.module.css   |  56 +++++++++
 .../styles/SidebarTeamSelect.module.css       |  50 ++++++++
 src/components/sidebar/types/types.ts         |  14 +++
 20 files changed, 1076 insertions(+)
 create mode 100644 src/components/sidebar/MobileDrawer.stories.tsx
 create mode 100644 src/components/sidebar/MobileDrawer.tsx
 create mode 100644 src/components/sidebar/MobileHeader.stories.tsx
 create mode 100644 src/components/sidebar/MobileHeader.tsx
 create mode 100644 src/components/sidebar/Sidebar.stories.tsx
 create mode 100644 src/components/sidebar/Sidebar.tsx
 create mode 100644 src/components/sidebar/SidebarAddButton.stories.tsx
 create mode 100644 src/components/sidebar/SidebarAddButton.tsx
 create mode 100644 src/components/sidebar/SidebarButton.stories.tsx
 create mode 100644 src/components/sidebar/SidebarButton.tsx
 create mode 100644 src/components/sidebar/SidebarTeamSelect.stories.tsx
 create mode 100644 src/components/sidebar/SidebarTeamSelect.tsx
 create mode 100644 src/components/sidebar/index.ts
 create mode 100644 src/components/sidebar/styles/MobileDrawer.module.css
 create mode 100644 src/components/sidebar/styles/MobileHeader.module.css
 create mode 100644 src/components/sidebar/styles/Sidebar.module.css
 create mode 100644 src/components/sidebar/styles/SidebarAddButton.module.css
 create mode 100644 src/components/sidebar/styles/SidebarButton.module.css
 create mode 100644 src/components/sidebar/styles/SidebarTeamSelect.module.css
 create mode 100644 src/components/sidebar/types/types.ts

diff --git a/src/components/sidebar/MobileDrawer.stories.tsx b/src/components/sidebar/MobileDrawer.stories.tsx
new file mode 100644
index 0000000..13c710f
--- /dev/null
+++ b/src/components/sidebar/MobileDrawer.stories.tsx
@@ -0,0 +1,50 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+import Image from 'next/image';
+
+import MobileDrawer from './MobileDrawer';
+import SidebarButton from './SidebarButton';
+import SidebarAddButton from './SidebarAddButton';
+import chessSmall from '@/assets/icons/chess/chessSmall.svg';
+import boardSmall from '@/assets/icons/board/boardSmall.svg';
+
+const TEAMS = ['경영관리팀', '프로덕트팀', '마케팅팀', '콘텐츠팀'];
+
+const meta = {
+  title: 'Components/MobileDrawer',
+  component: MobileDrawer,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: { defaultViewport: 'mobile1' },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof MobileDrawer>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Open: Story = {
+  args: {
+    isOpen: true,
+    onClose: fn(),
+    children: (
+      <>
+        {TEAMS.map((team) => (
+          <SidebarButton
+            key={team}
+            icon={<Image src={chessSmall} alt="" width={20} height={20} />}
+            label={team}
+            isActive={team === '경영관리팀'}
+          />
+        ))}
+        <SidebarAddButton label="팀 추가하기" />
+        <hr style={{ border: 'none', borderTop: '1px solid #e2e8f0', margin: '8px 0' }} />
+        <SidebarButton
+          icon={<Image src={boardSmall} alt="" width={20} height={20} />}
+          label="자유게시판"
+        />
+      </>
+    ),
+  },
+};
diff --git a/src/components/sidebar/MobileDrawer.tsx b/src/components/sidebar/MobileDrawer.tsx
new file mode 100644
index 0000000..4cf0ec5
--- /dev/null
+++ b/src/components/sidebar/MobileDrawer.tsx
@@ -0,0 +1,96 @@
+'use client';
+
+import { useEffect, useRef, type ReactNode } from 'react';
+import Image from 'next/image';
+
+import styles from './styles/MobileDrawer.module.css';
+import xMarkBig from '@/assets/icons/xMark/xMarkBig.svg';
+
+type MobileDrawerProps = {
+  /** 드로어 열림/닫힘 상태 */
+  isOpen: boolean;
+  /** 드로어 내부에 표시할 콘텐츠 */
+  children: ReactNode;
+  /** 닫기 시 호출되는 콜백 (오버레이 클릭, X 버튼, ESC 키) */
+  onClose: () => void;
+};
+
+/**
+ * 모바일 사이드 드로어 (슬라이드 패널).
+ * 오버레이 클릭, X 버튼, ESC 키로 닫을 수 있으며 포커스 트랩이 적용됩니다.
+ * children에 사이드바 메뉴 등 원하는 콘텐츠를 주입할 수 있습니다.
+ */
+const FOCUSABLE_SELECTOR =
+  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+export default function MobileDrawer({ isOpen, children, onClose }: MobileDrawerProps) {
+  const drawerRef = useRef<HTMLElement>(null);
+  const focusableRef = useRef<HTMLElement[]>([]);
+
+  useEffect(() => {
+    if (!isOpen || !drawerRef.current) return;
+
+    focusableRef.current = Array.from(
+      drawerRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),
+    );
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+        return;
+      }
+
+      if (e.key !== 'Tab') return;
+
+      const items = focusableRef.current;
+      if (items.length === 0) return;
+
+      const first = items[0];
+      const last = items[items.length - 1];
+
+      if (e.shiftKey && document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, onClose]);
+
+  useEffect(() => {
+    if (isOpen) {
+      drawerRef.current?.querySelector<HTMLElement>('button')?.focus();
+    }
+  }, [isOpen]);
+
+  if (!isOpen) return null;
+
+  return (
+    <>
+      <div className={styles.overlay} onClick={onClose} aria-hidden="true" />
+      <aside
+        ref={drawerRef}
+        className={styles.drawer}
+        role="dialog"
+        aria-modal="true"
+        aria-label="메뉴"
+      >
+        <div className={styles.header}>
+          <button
+            type="button"
+            className={styles.closeButton}
+            onClick={onClose}
+            aria-label="메뉴 닫기"
+          >
+            <Image src={xMarkBig} alt="" width={18} height={18} />
+          </button>
+        </div>
+        <div className={styles.content}>{children}</div>
+      </aside>
+    </>
+  );
+}
diff --git a/src/components/sidebar/MobileHeader.stories.tsx b/src/components/sidebar/MobileHeader.stories.tsx
new file mode 100644
index 0000000..eacd23d
--- /dev/null
+++ b/src/components/sidebar/MobileHeader.stories.tsx
@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+
+import MobileHeader from './MobileHeader';
+import { ProfileImage } from '@/components/profile-img';
+
+const meta = {
+  title: 'Components/MobileHeader',
+  component: MobileHeader,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: { defaultViewport: 'mobile1' },
+  },
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <div style={{ maxWidth: 375 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof MobileHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedOut: Story = {};
+
+export const LoggedIn: Story = {
+  args: {
+    isLoggedIn: true,
+    profileImage: <ProfileImage size="md" showBorder />,
+    onMenuClick: fn(),
+    onProfileClick: fn(),
+  },
+};
diff --git a/src/components/sidebar/MobileHeader.tsx b/src/components/sidebar/MobileHeader.tsx
new file mode 100644
index 0000000..6c04084
--- /dev/null
+++ b/src/components/sidebar/MobileHeader.tsx
@@ -0,0 +1,68 @@
+import type { ReactNode } from 'react';
+import Image from 'next/image';
+import clsx from 'clsx';
+
+import styles from './styles/MobileHeader.module.css';
+import logoSmall from '@/assets/logos/logoSmall.svg';
+import logoIcon from '@/assets/logos/logoIcon.svg';
+import hamburger from '@/assets/buttons/hamburger/hamburger.svg';
+import humanBig from '@/assets/buttons/human/humanBig.svg';
+
+type MobileHeaderProps = {
+  /** 로그인 여부 (false면 로고만 표시) */
+  isLoggedIn?: boolean;
+  /** 프로필 이미지 (ReactNode로 자유롭게 주입, 미전달 시 기본 아이콘) */
+  profileImage?: ReactNode;
+  /** 햄버거 메뉴 버튼 클릭 시 호출되는 콜백 */
+  onMenuClick?: () => void;
+  /** 프로필 버튼 클릭 시 호출되는 콜백 */
+  onProfileClick?: () => void;
+};
+
+/**
+ * 모바일 상단 헤더 컴포넌트.
+ * 비로그인 시 로고만 표시하고, 로그인 시 햄버거 메뉴 + 프로필 버튼을 함께 표시합니다.
+ * profileImage 슬롯에 커스텀 프로필 이미지를 주입할 수 있습니다.
+ */
+export default function MobileHeader({
+  isLoggedIn,
+  profileImage,
+  onMenuClick,
+  onProfileClick,
+}: MobileHeaderProps) {
+  if (!isLoggedIn) {
+    return (
+      <header className={styles.header}>
+        <div className={styles.logo}>
+          <Image src={logoSmall} alt="COWORKERS" width={102} height={20} />
+        </div>
+      </header>
+    );
+  }
+
+  return (
+    <header className={clsx(styles.header, styles.loggedIn)}>
+      <div className={styles.left}>
+        <button
+          type="button"
+          className={styles.menuButton}
+          onClick={onMenuClick}
+          aria-label="메뉴 열기"
+        >
+          <Image src={hamburger} alt="" width={24} height={24} />
+        </button>
+        <div className={styles.logo}>
+          <Image src={logoIcon} alt="COWORKERS" width={24} height={24} />
+        </div>
+      </div>
+      <button
+        type="button"
+        className={styles.profileButton}
+        onClick={onProfileClick}
+        aria-label="프로필"
+      >
+        {profileImage ?? <Image src={humanBig} alt="" width={32} height={32} />}
+      </button>
+    </header>
+  );
+}
diff --git a/src/components/sidebar/Sidebar.stories.tsx b/src/components/sidebar/Sidebar.stories.tsx
new file mode 100644
index 0000000..d4b44f8
--- /dev/null
+++ b/src/components/sidebar/Sidebar.stories.tsx
@@ -0,0 +1,95 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import Image from 'next/image';
+import Sidebar from './Sidebar';
+import SidebarButton from './SidebarButton';
+import SidebarTeamSelect from './SidebarTeamSelect';
+import SidebarAddButton from './SidebarAddButton';
+import { ProfileImage } from '@/components/profile-img';
+import chessSmall from '@/assets/icons/chess/chessSmall.svg';
+import chessBig from '@/assets/icons/chess/chessBig.svg';
+import boardSmall from '@/assets/icons/board/boardSmall.svg';
+import boardLarge from '@/assets/icons/board/boardLarge.svg';
+
+const TEAMS = ['경영관리팀', '프로덕트팀', '마케팅팀', '콘텐츠팀'];
+
+const meta = {
+  title: 'Components/Sidebar',
+  component: Sidebar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Sidebar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoggedIn: Story = {
+  args: {
+    profileImage: <ProfileImage size="md" showBorder />,
+    profileName: '안해나',
+    profileTeam: '경영관리팀',
+    teamSelect: (isCollapsed: boolean) =>
+      !isCollapsed && (
+        <SidebarTeamSelect
+          icon={<Image src={chessSmall} alt="" width={20} height={20} />}
+          label="경영관리팀"
+          isSelected
+        />
+      ),
+    addButton: (isCollapsed: boolean) => (
+      <>
+        {!isCollapsed && <SidebarAddButton label="팀 추가하기" />}
+        <hr style={{ border: 'none', borderTop: '1px solid #e2e8f0', margin: '8px 0' }} />
+        <SidebarButton
+          icon={
+            <Image
+              src={isCollapsed ? boardLarge : boardSmall}
+              alt=""
+              width={isCollapsed ? 24 : 20}
+              height={isCollapsed ? 24 : 20}
+            />
+          }
+          label="자유게시판"
+          iconOnly={isCollapsed}
+        />
+      </>
+    ),
+    children: (isCollapsed: boolean) => (
+      <>
+        {!isCollapsed &&
+          TEAMS.map((team) => (
+            <SidebarButton
+              key={team}
+              icon={<Image src={chessSmall} alt="" width={20} height={20} />}
+              label={team}
+              isActive={team === '경영관리팀'}
+            />
+          ))}
+        {isCollapsed && (
+          <SidebarButton
+            icon={<Image src={chessBig} alt="" width={24} height={24} />}
+            label="경영관리팀"
+            isActive
+            iconOnly
+          />
+        )}
+      </>
+    ),
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    footer: (isCollapsed: boolean) =>
+      isCollapsed ? (
+        <span style={{ fontSize: 12, fontWeight: 600, color: '#0f172a' }}>로그인</span>
+      ) : (
+        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
+          <ProfileImage size="md" showBorder />
+          <span style={{ fontSize: 14, fontWeight: 600, color: '#0f172a' }}>로그인</span>
+        </div>
+      ),
+  },
+};
diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx
new file mode 100644
index 0000000..1da2e7c
--- /dev/null
+++ b/src/components/sidebar/Sidebar.tsx
@@ -0,0 +1,81 @@
+'use client';
+
+import type { ReactNode } from 'react';
+import { useState } from 'react';
+import Image from 'next/image';
+import clsx from 'clsx';
+
+import styles from './styles/Sidebar.module.css';
+import logoLarge from '@/assets/logos/logoLarge.svg';
+import logoIcon from '@/assets/logos/logoIcon.svg';
+import foldLeftLarge from '@/assets/icons/fold/foldLeftLarge.svg';
+import foldRightLarge from '@/assets/icons/fold/foldRightLarge.svg';
+
+type SidebarProps = {
+  teamSelect?: ReactNode | ((isCollapsed: boolean) => ReactNode);
+  addButton?: ReactNode | ((isCollapsed: boolean) => ReactNode);
+  children?: ReactNode | ((isCollapsed: boolean) => ReactNode);
+  footer?: ReactNode | ((isCollapsed: boolean) => ReactNode);
+  profileImage?: ReactNode;
+  profileName?: string;
+  profileTeam?: string;
+};
+
+/**
+ * 데스크탑 사이드바 레이아웃 컨테이너.
+ * 접기/펼치기를 지원하며, teamSelect·children·addButton·footer 슬롯으로 구성됩니다.
+ * 각 슬롯에 함수를 전달하면 `(isCollapsed: boolean) => ReactNode` 형태로 접힘 상태를 받을 수 있습니다.
+ */
+export default function Sidebar({
+  teamSelect,
+  addButton,
+  children,
+  footer,
+  profileImage,
+  profileName,
+  profileTeam,
+}: SidebarProps) {
+  const [isCollapsed, setIsCollapsed] = useState(false);
+
+  return (
+    <aside className={clsx(styles.sidebar, isCollapsed && styles.collapsed)}>
+      <div className={styles.header}>
+        <div className={styles.logo}>
+          {isCollapsed ? (
+            <Image src={logoIcon} alt="COWORKERS" width={24} height={24} />
+          ) : (
+            <Image src={logoLarge} alt="COWORKERS" width={158} height={32} />
+          )}
+        </div>
+        <button
+          type="button"
+          className={styles.foldButton}
+          onClick={() => setIsCollapsed((prev) => !prev)}
+          aria-label={isCollapsed ? '사이드바 열기' : '사이드바 닫기'}
+        >
+          <Image src={isCollapsed ? foldRightLarge : foldLeftLarge} alt="" width={28} height={28} />
+        </button>
+      </div>
+      <div className={styles.content}>
+        {teamSelect && (typeof teamSelect === 'function' ? teamSelect(isCollapsed) : teamSelect)}
+        {typeof children === 'function' ? children(isCollapsed) : children}
+        {addButton && (typeof addButton === 'function' ? addButton(isCollapsed) : addButton)}
+      </div>
+      {footer ? (
+        <div className={styles.footer}>
+          {typeof footer === 'function' ? footer(isCollapsed) : footer}
+        </div>
+      ) : profileImage ? (
+        <div className={styles.footer}>
+          <div className={styles.profileImage}>{profileImage}</div>
+          {!isCollapsed && (
+            <div className={styles.profileInfo}>
+              <span className={styles.profileName}>{profileName}</span>
+              <span className={styles.profileTeam}>{profileTeam}</span>
+            </div>
+          )}
+        </div>
+      ) : null}
+    </aside>
+  );
+}
diff --git a/src/components/sidebar/SidebarAddButton.stories.tsx b/src/components/sidebar/SidebarAddButton.stories.tsx
new file mode 100644
index 0000000..f8795e9
--- /dev/null
+++ b/src/components/sidebar/SidebarAddButton.stories.tsx
@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+
+import SidebarAddButton from './SidebarAddButton';
+
+const meta = {
+  title: 'Components/SidebarAddButton',
+  component: SidebarAddButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    label: '팀 추가하기',
+    onClick: fn(),
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 240 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SidebarAddButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
diff --git a/src/components/sidebar/SidebarAddButton.tsx b/src/components/sidebar/SidebarAddButton.tsx
new file mode 100644
index 0000000..0be7dfe
--- /dev/null
+++ b/src/components/sidebar/SidebarAddButton.tsx
@@ -0,0 +1,26 @@
+import Image from 'next/image';
+
+import styles from './styles/SidebarAddButton.module.css';
+import plusBig from '@/assets/icons/plus/plusBig.svg';
+
+type SidebarAddButtonProps = {
+  /** 버튼에 표시할 텍스트 (예: "팀 추가하기") */
+  label: string;
+  /** 클릭 시 호출되는 콜백 */
+  onClick?: () => void;
+};
+
+/**
+ * 사이드바 하단의 항목 추가 버튼.
+ * + 아이콘과 텍스트로 구성되며, 팀 추가 등의 액션에 사용합니다.
+ */
+export default function SidebarAddButton({ label, onClick }: SidebarAddButtonProps) {
+  return (
+    <button type="button" className={styles.button} onClick={onClick}>
+      <span className={styles.icon}>
+        <Image src={plusBig} alt="" width={16} height={16} />
+      </span>
+      {label}
+    </button>
+  );
+}
diff --git a/src/components/sidebar/SidebarButton.stories.tsx b/src/components/sidebar/SidebarButton.stories.tsx
new file mode 100644
index 0000000..e19419f
--- /dev/null
+++ b/src/components/sidebar/SidebarButton.stories.tsx
@@ -0,0 +1,79 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+import Image from 'next/image';
+
+import SidebarButton from './SidebarButton';
+import chessSmall from '@/assets/icons/chess/chessSmall.svg';
+import chessBig from '@/assets/icons/chess/chessBig.svg';
+
+const meta = {
+  title: 'Components/SidebarButton',
+  component: SidebarButton,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    icon: <Image src={chessSmall} alt="" width={20} height={20} />,
+    label: '경영관리팀',
+    onClick: fn(),
+  },
+  argTypes: {
+    isActive: {
+      control: 'boolean',
+    },
+    iconOnly: {
+      control: 'boolean',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 240 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SidebarButton>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Active: Story = {
+  args: {
+    isActive: true,
+  },
+};
+
+export const IconOnly: Story = {
+  args: {
+    icon: <Image src={chessBig} alt="" width={24} height={24} />,
+    iconOnly: true,
+  },
+};
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 240 }}>
+      <SidebarButton
+        icon={<Image src={chessSmall} alt="" width={20} height={20} />}
+        label="경영관리팀"
+      />
+      <SidebarButton
+        icon={<Image src={chessSmall} alt="" width={20} height={20} />}
+        label="경영관리팀"
+        isActive
+      />
+      <SidebarButton
+        icon={<Image src={chessBig} alt="" width={24} height={24} />}
+        label="경영관리팀"
+        iconOnly
+      />
+    </div>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};
diff --git a/src/components/sidebar/SidebarButton.tsx b/src/components/sidebar/SidebarButton.tsx
new file mode 100644
index 0000000..9793f07
--- /dev/null
+++ b/src/components/sidebar/SidebarButton.tsx
@@ -0,0 +1,29 @@
+import clsx from 'clsx';
+
+import styles from './styles/SidebarButton.module.css';
+import type { SidebarButtonProps } from './types/types';
+
+/**
+ * 사이드바 내 메뉴 항목 버튼.
+ * iconOnly가 true이면 아이콘만 표시하고 라벨은 aria-label로 전환됩니다.
+ * 사이드바 접힘 상태에서 사용할 수 있습니다.
+ */
+export default function SidebarButton({
+  icon,
+  label,
+  isActive,
+  iconOnly,
+  onClick,
+}: SidebarButtonProps) {
+  return (
+    <button
+      type="button"
+      className={clsx(styles.button, isActive && styles.active, iconOnly && styles.iconOnly)}
+      onClick={onClick}
+      aria-label={iconOnly ? label : undefined}
+    >
+      <span className={styles.icon}>{icon}</span>
+      {!iconOnly && label}
+    </button>
+  );
+}
diff --git a/src/components/sidebar/SidebarTeamSelect.stories.tsx b/src/components/sidebar/SidebarTeamSelect.stories.tsx
new file mode 100644
index 0000000..8173cbf
--- /dev/null
+++ b/src/components/sidebar/SidebarTeamSelect.stories.tsx
@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+import Image from 'next/image';
+
+import SidebarTeamSelect from './SidebarTeamSelect';
+import chessSmall from '@/assets/icons/chess/chessSmall.svg';
+
+const meta = {
+  title: 'Components/SidebarTeamSelect',
+  component: SidebarTeamSelect,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    icon: <Image src={chessSmall} alt="" width={20} height={20} />,
+    label: '팀 선택',
+    onClick: fn(),
+  },
+  argTypes: {
+    isSelected: {
+      control: 'boolean',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 240 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof SidebarTeamSelect>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Selected: Story = {
+  args: {
+    label: '경영관리팀',
+    isSelected: true,
+  },
+};
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 8, width: 240 }}>
+      <SidebarTeamSelect
+        icon={<Image src={chessSmall} alt="" width={20} height={20} />}
+        label="팀 선택"
+      />
+      <SidebarTeamSelect
+        icon={<Image src={chessSmall} alt="" width={20} height={20} />}
+        label="경영관리팀"
+        isSelected
+      />
+    </div>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};
diff --git a/src/components/sidebar/SidebarTeamSelect.tsx b/src/components/sidebar/SidebarTeamSelect.tsx
new file mode 100644
index 0000000..a19c3a2
--- /dev/null
+++ b/src/components/sidebar/SidebarTeamSelect.tsx
@@ -0,0 +1,51 @@
+import type { ReactNode } from 'react';
+import Image from 'next/image';
+import clsx from 'clsx';
+
+import styles from './styles/SidebarTeamSelect.module.css';
+import downArrowLarge from '@/assets/icons/arrow/downArrowLarge.svg';
+
+type SidebarTeamSelectProps = {
+  /** 좌측 아이콘 (ReactNode로 자유롭게 주입, 예: 팀 로고 이미지) */
+  icon: ReactNode;
+  /** 표시 텍스트 ("팀 선택" 또는 선택된 팀 이름) */
+  label: string;
+  /** 팀이 선택된 상태인지 여부 */
+  isSelected?: boolean;
+  /** 드롭다운이 열려 있는지 여부 (aria-expanded에 반영) */
+  isOpen?: boolean;
+  /** 클릭 시 호출되는 콜백 (드롭다운 토글 등) */
+  onClick?: () => void;
+};
+
+/**
+ * 사이드바 팀 선택 드롭다운 트리거 버튼.
+ * 클릭하면 팀 목록 드롭다운을 여는 용도로, 드롭다운 패널 자체는 별도 구현이 필요합니다.
+ * icon 슬롯에 팀 로고 이미지를 주입할 수 있습니다.
+ */
+export default function SidebarTeamSelect({
+  icon,
+  label,
+  isSelected,
+  isOpen = false,
+  onClick,
+}: SidebarTeamSelectProps) {
+  return (
+    <button
+      type="button"
+      className={clsx(styles.trigger, isSelected && styles.selected)}
+      onClick={onClick}
+      aria-haspopup="listbox"
+      aria-expanded={isOpen}
+      aria-label={`팀 선택: ${label}`}
+    >
+      <span className={styles.left}>
+        <span className={styles.icon}>{icon}</span>
+        {label}
+      </span>
+      <span className={styles.arrow}>
+        <Image src={downArrowLarge} alt="" width={24} height={24} />
+      </span>
+    </button>
+  );
+}
diff --git a/src/components/sidebar/index.ts b/src/components/sidebar/index.ts
new file mode 100644
index 0000000..bddd994
--- /dev/null
+++ b/src/components/sidebar/index.ts
@@ -0,0 +1,7 @@
+export { default as MobileDrawer } from './MobileDrawer';
+export { default as MobileHeader } from './MobileHeader';
+export { default as Sidebar } from './Sidebar';
+export { default as SidebarAddButton } from './SidebarAddButton';
+export { default as SidebarButton } from './SidebarButton';
+export { default as SidebarTeamSelect } from './SidebarTeamSelect';
+export type { SidebarButtonProps } from './types/types';
diff --git a/src/components/sidebar/styles/MobileDrawer.module.css b/src/components/sidebar/styles/MobileDrawer.module.css
new file mode 100644
index 0000000..4a347c5
--- /dev/null
+++ b/src/components/sidebar/styles/MobileDrawer.module.css
@@ -0,0 +1,57 @@
+.overlay {
+  display: none;
+}
+
+.drawer {
+  display: none;
+}
+
+@media (max-width: 767px) {
+  .overlay {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 100;
+  }
+
+  .drawer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 204px;
+    height: 100%;
+    background: var(--color-background-inverse);
+    z-index: 101;
+    display: flex;
+    flex-direction: column;
+  }
+}
+
+.header {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 16px 8px;
+  flex-shrink: 0;
+}
+
+.closeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  gap: 8px;
+  flex: 1;
+}
diff --git a/src/components/sidebar/styles/MobileHeader.module.css b/src/components/sidebar/styles/MobileHeader.module.css
new file mode 100644
index 0000000..ac0c030
--- /dev/null
+++ b/src/components/sidebar/styles/MobileHeader.module.css
@@ -0,0 +1,54 @@
+.header {
+  display: none;
+  align-items: center;
+  height: 60px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--color-background-tertiary);
+  background: var(--color-background-inverse);
+}
+
+@media (max-width: 767px) {
+  .header {
+    display: flex;
+  }
+}
+
+.loggedIn {
+  justify-content: space-between;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.menuButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.profileButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: var(--color-background-tertiary);
+  cursor: pointer;
+  padding: 0;
+  overflow: hidden;
+}
diff --git a/src/components/sidebar/styles/Sidebar.module.css b/src/components/sidebar/styles/Sidebar.module.css
new file mode 100644
index 0000000..7d29474
--- /dev/null
+++ b/src/components/sidebar/styles/Sidebar.module.css
@@ -0,0 +1,108 @@
+.sidebar {
+  width: 270px;
+  height: 100vh;
+  border-right: 1px solid var(--color-background-tertiary);
+  display: flex;
+  flex-direction: column;
+  background: var(--color-background-inverse);
+}
+
+@media (max-width: 767px) {
+  .sidebar {
+    display: none;
+  }
+}
+
+.collapsed {
+  width: 72px;
+  position: relative;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32px 24px 32px 28px;
+  gap: 10px;
+  flex-shrink: 0;
+}
+
+.collapsed .header {
+  justify-content: center;
+  padding: 32px 0;
+}
+
+.logo {
+  flex-shrink: 0;
+}
+
+.foldButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  flex-shrink: 0;
+}
+
+.collapsed .foldButton {
+  position: absolute;
+  right: -25px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--color-background-inverse);
+  border: 1px solid var(--color-background-tertiary);
+  box-shadow: 2px 0 4px rgba(0, 0, 0, 0.05);
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  gap: 8px;
+  flex: 1;
+}
+
+.collapsed .content {
+  padding: 0 10px;
+  align-items: center;
+}
+
+.footer {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  margin: 0 16px;
+  padding: 16px 0;
+  border-top: 1px solid var(--color-background-tertiary);
+  flex-shrink: 0;
+}
+
+.collapsed .footer {
+  justify-content: center;
+  margin: 0 10px;
+}
+
+.profileImage {
+  flex-shrink: 0;
+}
+
+.profileInfo {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.profileName {
+  font-weight: 600;
+  font-size: 14px;
+  color: var(--color-text-tertiary);
+}
+
+.profileTeam {
+  font-size: 12px;
+  color: var(--color-text-disabled);
+}
diff --git a/src/components/sidebar/styles/SidebarAddButton.module.css b/src/components/sidebar/styles/SidebarAddButton.module.css
new file mode 100644
index 0000000..11e6f84
--- /dev/null
+++ b/src/components/sidebar/styles/SidebarAddButton.module.css
@@ -0,0 +1,24 @@
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 100%;
+  height: 33px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  border: 1px solid var(--color-brand-primary);
+  background: transparent;
+  cursor: pointer;
+  font-family: Pretendard, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--color-brand-primary);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(1500%) hue-rotate(208deg)
+    brightness(102%) contrast(97%);
+}
diff --git a/src/components/sidebar/styles/SidebarButton.module.css b/src/components/sidebar/styles/SidebarButton.module.css
new file mode 100644
index 0000000..0820fa9
--- /dev/null
+++ b/src/components/sidebar/styles/SidebarButton.module.css
@@ -0,0 +1,56 @@
+.button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  height: 52px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 12px;
+  background: transparent;
+  font-family: Pretendard, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+}
+
+.button:hover {
+  background: var(--color-brand-secondary);
+}
+
+.active {
+  background: var(--color-brand-secondary);
+  color: var(--color-brand-primary);
+  font-weight: 600;
+}
+
+.active:hover {
+  background: var(--color-brand-secondary);
+}
+
+.active .icon {
+  filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(1500%) hue-rotate(208deg)
+    brightness(102%) contrast(97%);
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.iconOnly {
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  justify-content: center;
+}
+
+@media (max-width: 767px) {
+  .button {
+    height: 44px;
+  }
+}
diff --git a/src/components/sidebar/styles/SidebarTeamSelect.module.css b/src/components/sidebar/styles/SidebarTeamSelect.module.css
new file mode 100644
index 0000000..5dedb8a
--- /dev/null
+++ b/src/components/sidebar/styles/SidebarTeamSelect.module.css
@@ -0,0 +1,50 @@
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 238px;
+  height: 36px;
+  padding: 8px 16px;
+  border-radius: 12px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: Pretendard, sans-serif;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 17px;
+  color: var(--color-text-secondary);
+}
+
+.trigger:hover {
+  background: var(--color-brand-secondary);
+}
+
+.selected {
+  color: var(--color-brand-primary);
+  font-weight: 600;
+}
+
+.left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.selected .icon {
+  filter: brightness(0) saturate(100%) invert(45%) sepia(85%) saturate(1500%) hue-rotate(208deg)
+    brightness(102%) contrast(97%);
+}
+
+.arrow {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
diff --git a/src/components/sidebar/types/types.ts b/src/components/sidebar/types/types.ts
new file mode 100644
index 0000000..7cea58c
--- /dev/null
+++ b/src/components/sidebar/types/types.ts
@@ -0,0 +1,14 @@
+import type { ReactNode } from 'react';
+
+export type SidebarButtonProps = {
+  /** 버튼 좌측 아이콘 (ReactNode로 자유롭게 주입) */
+  icon: ReactNode;
+  /** 버튼 텍스트 */
+  label: string;
+  /** 현재 활성(선택) 상태 여부 */
+  isActive?: boolean;
+  /** true이면 아이콘만 표시하고 라벨 숨김 (사이드바 접힘 시 사용) */
+  iconOnly?: boolean;
+  /** 클릭 시 호출되는 콜백 */
+  onClick?: () => void;
+};

From 58b3d5a8a0009b8ea0f942106a680ead7458dc53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A0=95=EC=9B=90?= <jwon133@gmail.com>
Date: Wed, 4 Feb 2026 19:32:43 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81?=
 =?UTF-8?q?=20=EC=98=A4=EB=A5=98=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sidebar/MobileHeader.stories.tsx |  5 +++--
 src/components/sidebar/Sidebar.stories.tsx      | 15 ++++++++++++---
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/sidebar/MobileHeader.stories.tsx b/src/components/sidebar/MobileHeader.stories.tsx
index eacd23d..8e579e4 100644
--- a/src/components/sidebar/MobileHeader.stories.tsx
+++ b/src/components/sidebar/MobileHeader.stories.tsx
@@ -3,7 +3,6 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite';
 import { fn } from 'storybook/test';
 
 import MobileHeader from './MobileHeader';
-import { ProfileImage } from '@/components/profile-img';
 
 const meta = {
   title: 'Components/MobileHeader',
@@ -30,7 +29,9 @@ export const LoggedOut: Story = {};
 export const LoggedIn: Story = {
   args: {
     isLoggedIn: true,
-    profileImage: <ProfileImage size="md" showBorder />,
+    profileImage: (
+      <div style={{ width: 32, height: 32, borderRadius: 12, background: '#cbd5e1' }} />
+    ),
     onMenuClick: fn(),
     onProfileClick: fn(),
   },
diff --git a/src/components/sidebar/Sidebar.stories.tsx b/src/components/sidebar/Sidebar.stories.tsx
index d4b44f8..e4b0a3a 100644
--- a/src/components/sidebar/Sidebar.stories.tsx
+++ b/src/components/sidebar/Sidebar.stories.tsx
@@ -5,7 +5,6 @@ import Sidebar from './Sidebar';
 import SidebarButton from './SidebarButton';
 import SidebarTeamSelect from './SidebarTeamSelect';
 import SidebarAddButton from './SidebarAddButton';
-import { ProfileImage } from '@/components/profile-img';
 import chessSmall from '@/assets/icons/chess/chessSmall.svg';
 import chessBig from '@/assets/icons/chess/chessBig.svg';
 import boardSmall from '@/assets/icons/board/boardSmall.svg';
@@ -27,7 +26,9 @@ type Story = StoryObj<typeof meta>;
 
 export const LoggedIn: Story = {
   args: {
-    profileImage: <ProfileImage size="md" showBorder />,
+    profileImage: (
+      <div style={{ width: 40, height: 40, borderRadius: 12, background: '#cbd5e1' }} />
+    ),
     profileName: '안해나',
     profileTeam: '경영관리팀',
     teamSelect: (isCollapsed: boolean) =>
@@ -87,7 +88,15 @@ export const LoggedOut: Story = {
         <span style={{ fontSize: 12, fontWeight: 600, color: '#0f172a' }}>로그인</span>
       ) : (
         <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
-          <ProfileImage size="md" showBorder />
+          <div
+            style={{
+              width: 40,
+              height: 40,
+              borderRadius: 12,
+              background: '#e2e8f0',
+              flexShrink: 0,
+            }}
+          />
           <span style={{ fontSize: 14, fontWeight: 600, color: '#0f172a' }}>로그인</span>
         </div>
       ),

From 29f81ac6390da8359e3bd175661f0fd79ba5b574 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=A0=95=EC=9B=90?= <jwon133@gmail.com>
Date: Wed, 4 Feb 2026 19:42:59 +0900
Subject: [PATCH 3/3] =?UTF-8?q?chore:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?=
 =?UTF-8?q?=EB=B2=84=EC=A0=84=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/logos/logoIcon.svg | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/assets/logos/logoIcon.svg

diff --git a/src/assets/logos/logoIcon.svg b/src/assets/logos/logoIcon.svg
new file mode 100644
index 0000000..fb21871
--- /dev/null
+++ b/src/assets/logos/logoIcon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0047 4.89415C13.9573 2.94153 17.1234 2.94153 19.076 4.89415C21.0284 6.84673 21.0284 10.0119 19.076 11.9645L19.074 11.9654C21.0262 13.918 21.0263 17.0832 19.074 19.0358C17.1215 20.9882 13.9564 20.988 12.0037 19.0358C10.0511 20.9878 6.88682 20.9881 4.93438 19.0358C2.9821 17.0835 2.98084 13.9181 4.93242 11.9654L4.93145 11.9645C2.97924 10.0119 2.97922 6.84669 4.93145 4.89415C6.88407 2.94153 10.0501 2.94153 12.0027 4.89415H12.0047Z" fill="#5189FA"/>
+</svg>