사이드바 모션 추가 및 Gnb 버튼 사용

package.json

@@ -18,6 +18,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "clsx": "^2.1.1",
+    "framer-motion": "^12.34.0",
     "next": "16.1.3",
     "react": "19.2.3",
     "react-calendar": "^6.0.0",
@@ -26,31 +27,31 @@
     "zod": "^4.3.5"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^5.0.0",
     "@commitlint/cli": "^20.3.1",
     "@commitlint/config-conventional": "^20.3.1",
+    "@storybook/addon-a11y": "^10.2.3",
+    "@storybook/addon-docs": "^10.2.3",
+    "@storybook/addon-vitest": "^10.2.3",
+    "@storybook/nextjs-vite": "^10.2.3",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
     "eslint": "^9",
     "eslint-config-next": "16.1.3",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-storybook": "^10.2.3",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.7",
+    "playwright": "^1.58.1",
     "prettier": "^3.8.0",
-    "typescript": "^5",
     "storybook": "^10.2.3",
-    "@storybook/nextjs-vite": "^10.2.3",
-    "@chromatic-com/storybook": "^5.0.0",
-    "@storybook/addon-vitest": "^10.2.3",
-    "@storybook/addon-a11y": "^10.2.3",
-    "@storybook/addon-docs": "^10.2.3",
+    "typescript": "^5",
     "vite": "^7.3.1",
-    "eslint-plugin-storybook": "^10.2.3",
-    "vitest": "^4.0.18",
-    "playwright": "^1.58.1",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18"
+    "vitest": "^4.0.18"
   },
   "lint-staged": {
     "*.{ts,tsx,js,jsx}": [

src/components/input/AccountInput.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import AccountInput from './AccountInput';
+
+const meta = {
+  title: 'Components/AccountInput',
+  component: AccountInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    email: 'user@example.com',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 460 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof AccountInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithButton: Story = {
+  args: {
+    email: 'user@example.com',
+    children: (
+      <button
+        type="button"
+        style={{
+          padding: '8px 16px',
+          background: '#3b82f6',
+          color: 'white',
+          border: 'none',
+          borderRadius: 8,
+          cursor: 'pointer',
+        }}
+      >
+        변경하기
+      </button>
+    ),
+  },
+};
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 24, width: 460 }}>
+      <AccountInput email="user@example.com" />
+      <AccountInput email="user@example.com">
+        <button
+          type="button"
+          style={{
+            padding: '8px 16px',
+            background: '#3b82f6',
+            color: 'white',
+            border: 'none',
+            borderRadius: 8,
+            cursor: 'pointer',
+          }}
+        >
+          변경하기
+        </button>
+      </AccountInput>
+    </div>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};

src/components/input/ActionTextArea.stories.tsx

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+
+import ActionTextArea from './ActionTextArea';
+
+const meta = {
+  title: 'Components/ActionTextArea',
+  component: ActionTextArea,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    placeholder: '텍스트를 입력해 주세요.',
+    onSubmit: fn(),
+    onChange: fn(),
+  },
+  argTypes: {
+    disabled: {
+      control: 'boolean',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 460 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ActionTextArea>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const WithPlaceholder: Story = {
+  args: {
+    placeholder: '댓글을 입력해 주세요.',
+  },
+};
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 16, width: 460 }}>
+      <ActionTextArea placeholder="기본 ActionTextArea" />
+      <ActionTextArea placeholder="댓글을 입력해 주세요." />
+    </div>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};

src/components/input/ChangePassword.stories.tsx

@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+
+import ChangePassword from './ChangePassword';
+
+const meta = {
+  title: 'Components/ChangePassword',
+  component: ChangePassword,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  args: {
+    isEditing: false,
+    newPasswordProps: {
+      onChange: fn(),
+    },
+    confirmPasswordProps: {
+      onChange: fn(),
+    },
+  },
+  argTypes: {
+    isEditing: {
+      control: 'boolean',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 460 }}>
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof ChangePassword>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Editing: Story = {
+  args: {
+    isEditing: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    isEditing: true,
+    confirmPasswordProps: {
+      errorMessage: '비밀번호가 일치하지 않습니다.',
+    },
+  },
+};
+
+export const WithButtons: Story = {
+  args: {
+    isEditing: true,
+    children: (
+      <div style={{ display: 'flex', gap: 8 }}>
+        <button
+          type="button"
+          style={{
+            padding: '8px 16px',
+            background: '#e2e8f0',
+            color: '#0f172a',
+            border: 'none',
+            borderRadius: 8,
+            cursor: 'pointer',
+          }}
+        >
+          취소
+        </button>
+        <button
+          type="button"
+          style={{
+            padding: '8px 16px',
+            background: '#3b82f6',
+            color: 'white',
+            border: 'none',
+            borderRadius: 8,
+            cursor: 'pointer',
+          }}
+        >
+          변경하기
+        </button>
+      </div>
+    ),
+  },
+};
+
+export const Overview: Story = {
+  render: () => (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, width: 460 }}>
+      <div>
+        <p style={{ marginBottom: 8, fontWeight: 600 }}>비활성 상태</p>
+        <ChangePassword isEditing={false} />
+      </div>
+      <div>
+        <p style={{ marginBottom: 8, fontWeight: 600 }}>편집 상태</p>
+        <ChangePassword isEditing />
+      </div>
+      <div>
+        <p style={{ marginBottom: 8, fontWeight: 600 }}>에러 상태</p>
+        <ChangePassword
+          isEditing
+          confirmPasswordProps={{ errorMessage: '비밀번호가 일치하지 않습니다.' }}
+        />
+      </div>
+    </div>
+  ),
+  parameters: {
+    controls: { disable: true },
+  },
+};