= {
title: "components/SidebarDropdown",
component: SidebarDropdown,
tags: ["autodocs"],
- args: {
- isOpen: false,
- onToggle: () => alert("드롭다운 닫기"),
- },
- argTypes: {
- isOpen: {
- control: "boolean",
- description: "드롭다운 열림 상태",
- },
- onToggle: {
- action: "onClose",
- description: "드롭다운 닫기 함수",
- },
- },
decorators: [
(Story) => (
-
-
-
+
+
+
+
+
),
],
+ args: {
+ isSidebarOpen: true,
+ currentTeamId: "1",
+ setIsOpen: () => console.log("사이드바 열림"),
+ onToggle: () => console.log("드롭다운 열림"),
+ },
+ parameters: {
+ nextjs: {
+ appDirectory: true,
+ },
+ },
};
+export default meta;
type Story = StoryObj
;
export const Default: Story = {
render: (args) => {
const [isOpen, setIsOpen] = useState(args.isOpen);
+ const handleToggle = () => {
+ setIsOpen(!isOpen);
+ args.onToggle?.();
+ };
+
return (
setIsOpen(!isOpen)}
+ setIsOpen={setIsOpen}
+ onToggle={handleToggle}
/>
);
},
@@ -51,8 +96,27 @@ export const Default: Story = {
export const InitialOpen: Story = {
...Default,
args: {
+ ...Default.args,
isOpen: true,
},
};
-export default meta;
+export const SidebarClosed: Story = {
+ render: (args) => {
+ return ;
+ },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+ args: {
+ isSidebarOpen: false,
+ isOpen: false,
+ currentTeamId: "1",
+ },
+};
diff --git a/src/components/gnb/sidebar/_components/sidebar-footer/sidebar-footer.stories.tsx b/src/components/gnb/sidebar/_components/sidebar-footer/sidebar-footer.stories.tsx
new file mode 100644
index 00000000..666d7175
--- /dev/null
+++ b/src/components/gnb/sidebar/_components/sidebar-footer/sidebar-footer.stories.tsx
@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SidebarFooter from "./sidebar-footer";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+
+const MOCK_USER_DATA = {
+ id: 1,
+ email: "test@example.com",
+ nickname: "가상의 유저",
+ image: "",
+ memberships: [
+ {
+ group: {
+ id: 1,
+ name: "코드잇 팀",
+ },
+ },
+ {
+ group: {
+ id: 2,
+ name: "코워커스 팀",
+ },
+ },
+ ],
+};
+
+const loggedInClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ staleTime: Infinity,
+ },
+ },
+});
+
+const QUERY_KEY = ["userInfo"];
+
+loggedInClient.setQueryData(QUERY_KEY, MOCK_USER_DATA);
+
+const loggedOutClient = new QueryClient({
+ defaultOptions: {
+ queries: {
+ retry: false,
+ },
+ },
+});
+
+const meta = {
+ title: "components/SidebarFooter",
+ component: SidebarFooter,
+ tags: ["autodocs"],
+ decorators: [(Story) => ],
+ args: {
+ currentTeamId: "1",
+ },
+ parameters: {
+ nextjs: {
+ appDirectory: true,
+ },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const FooterOpenLoggedIn: Story = {
+ args: {
+ isSidebarOpen: true,
+ },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export const FooterOpenLoggedOut: Story = {
+ args: {
+ isSidebarOpen: true,
+ },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export const FooterClosedLoggedIn: Story = {
+ args: {
+ isSidebarOpen: false,
+ },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export const FooterClosedLoggedOut: Story = {
+ args: {
+ isSidebarOpen: false,
+ },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
diff --git a/src/components/gnb/sidebar/_components/sidebar-footer/sidebar-footer.tsx b/src/components/gnb/sidebar/_components/sidebar-footer/sidebar-footer.tsx
index 30e5047a..23e6d5d8 100644
--- a/src/components/gnb/sidebar/_components/sidebar-footer/sidebar-footer.tsx
+++ b/src/components/gnb/sidebar/_components/sidebar-footer/sidebar-footer.tsx
@@ -42,7 +42,7 @@ const SidebarFooter = ({
/>
}
items={[
- { label: "계정 설정", onClick: () => router.replace("/mypage") },
+ { label: "계정 설정", onClick: () => router.push("/mypage") },
{
label: "로그아웃",
onClick: handleLogout,
@@ -66,7 +66,7 @@ const SidebarFooter = ({
{userInfo.nickname}
- {userInfo?.memberships?.[currentTeamIndex || 0]?.group.name ||
+ {userInfo?.memberships?.[currentTeamIndex || 0]?.group?.name ||
null}
diff --git a/src/components/gnb/sidebar/_components/sidebar-header/sidebar-header.stories.tsx b/src/components/gnb/sidebar/_components/sidebar-header/sidebar-header.stories.tsx
new file mode 100644
index 00000000..731dc175
--- /dev/null
+++ b/src/components/gnb/sidebar/_components/sidebar-header/sidebar-header.stories.tsx
@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import SidebarHeader from "./sidebar-header";
+import { useState } from "react";
+
+const meta = {
+ title: "components/SidebarHeader",
+ component: SidebarHeader,
+ tags: ["autodocs"],
+
+ args: {
+ setIsSidebarOpen: () => console.log("상태 변경"),
+ },
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Open: Story = {
+ args: {
+ isSidebarOpen: true,
+ },
+};
+
+export const Closed: Story = {
+ args: {
+ isSidebarOpen: false,
+ },
+ render(args) {
+ return (
+
+
+
+ );
+ },
+};
+
+export const Interactive: Story = {
+ args: {
+ isSidebarOpen: true,
+ },
+
+ render: (args) => {
+ const [isOpen, setIsOpen] = useState(args.isSidebarOpen);
+
+ return (
+
+
+
+ 현재 상태: {isOpen ? "열림" : "닫힘"}
+
+
COWORKERS
)}
-