feat: Popover Story

src/components/popover/action-button-popover.tsx

@@ -21,7 +21,7 @@ export default function ActionButtonPopover({
                 <RadixPopOver.Content
                     onCloseAutoFocus={(e) => e.preventDefault()}
                     onOpenAutoFocus={(e) => e.preventDefault()}
-                    className="z-10 mr-[40px] w-fit rounded-[8px] border-none bg-[#fff] p-3 shadow-2xl"
+                    className="z-10 mr-[10px] w-fit rounded-[8px] border-none bg-[#fff] p-3 shadow-2xl"
                 >
                     <ul>
                         <li>

src/components/stories/character-detail.stories.tsx

@@ -5,7 +5,7 @@ import CharacterDetail from '../new-character-detail';
 const IMG_STORAGE_BASE_URL = 'https://kr.object.ncloudstorage.com/kekeche-character';
 
 export default {
-    title: 'Compounds/캐릭터 상세',
+    title: 'Compounds/Character',
     args: {
         name: '캐릭터 이름',
         shape: 1,
@@ -51,7 +51,7 @@ export default {
 
 type Story = StoryObj;
 
-export const Basic: Story = {
+export const Detail: Story = {
     render: ({ hasBubble, shape, level, name, color, item }: Args) => {
         return (
             <PageContainer>

src/components/stories/cta-button.stories.tsx

@@ -4,7 +4,7 @@ import { PageContainer } from '@/components/ui';
 import FixedBottomArea from '@/components/fixed-bottom-area';
 
 export default {
-    title: 'Components/CTA 버튼', // story 이름
+    title: 'Components/CTAButton', // story 이름
     component: CtaButton,
 } as Meta<typeof CtaButton>;
 
@@ -27,9 +27,11 @@ export const BottomFixed: Story = {
     argTypes,
     render: (props) => (
         <PageContainer>
-            <FixedBottomArea>
-                <CtaButton {...props} className="mb-[31px]" />
-            </FixedBottomArea>
+            <div className="h-screen w-full gradation-bg">
+                <FixedBottomArea>
+                    <CtaButton {...props} className="mb-[31px]" />
+                </FixedBottomArea>
+            </div>
         </PageContainer>
     ),
 };

src/components/stories/dialog.stories.tsx

@@ -6,51 +6,83 @@ import Dialog from '../dialog';
 import AlertDialog from '../dialog/alert-dialog';
 
 export default {
-    title: 'Components/다이얼로그', // story 이름
+    title: 'Components/Dialog', // story 이름
     component: Dialog,
 } as Meta<typeof Dialog>;
 
 type Story = StoryObj<typeof Dialog>;
 
-export const Basic_Large: Story = {
+export const Confirm: Story = {
     render: () => {
-        const [isOpen, setIsOpen] = useState(false);
+        const [isLargeOpen, setIsLargeOpen] = useState(false);
+        const [isSmallOpen, setIsSmallOpen] = useState(false);
         return (
             <PageContainer>
-                <div style={{ height: '1000vh', width: '100%' }}>
-                    <CTAButton onClick={() => setIsOpen(true)}>다이얼로그 띄우기</CTAButton>
+                <div className="flex h-screen w-full justify-center gradation-bg">
+                    <div
+                        style={{ height: '1000vh', marginTop: '40px', width: '100%' }}
+                        className="flex flex-col items-center gap-[40px]"
+                    >
+                        <CTAButton onClick={() => setIsLargeOpen(true)}>Large</CTAButton>
+                        <CTAButton onClick={() => setIsSmallOpen(true)}>Small</CTAButton>
+                    </div>
+                    <Dialog
+                        size="large"
+                        open={isLargeOpen}
+                        onOpenChange={setIsLargeOpen}
+                        title="다이얼로그"
+                        description="다이얼로그를 띄웁니다."
+                        leftText="취소"
+                        rightText="완료"
+                        contents={<div className="mx-auto my-[24px] w-full">컨펌 다이얼로그 컨텐츠 내용...</div>}
+                    />
+                    <Dialog
+                        open={isSmallOpen}
+                        onOpenChange={setIsSmallOpen}
+                        title="다이얼로그"
+                        description="다이얼로그를 띄웁니다."
+                        leftText="취소"
+                        rightText="완료"
+                        contents={<div className="mx-auto my-[24px] w-full">컨펌 다이얼로그 컨텐츠 내용...</div>}
+                    />
                 </div>
-                <Dialog
-                    size="large"
-                    open={isOpen}
-                    onOpenChange={setIsOpen}
-                    title="다이얼로그"
-                    description="다이얼로그를 띄웁니다."
-                    leftText="취소"
-                    rightText="완료"
-                    contents={<div className="mx-auto my-[24px] w-full">컨텐츠 내용...</div>}
-                />
             </PageContainer>
         );
     },
 };
 
-export const Alert_Small: Story = {
+export const Alert: Story = {
     render: () => {
-        const [isOpen, setIsOpen] = useState(false);
+        const [isLargeOpen, setIsLargeOpen] = useState(false);
+        const [isSmallOpen, setIsSmallOpen] = useState(false);
         return (
             <PageContainer>
-                <div style={{ height: '1000vh', width: '100%' }}>
-                    <CTAButton onClick={() => setIsOpen(true)}>다이얼로그 띄우기</CTAButton>
+                <div className="flex h-screen w-full justify-center gradation-bg">
+                    <div
+                        style={{ height: '1000vh', marginTop: '40px', width: '100%' }}
+                        className="flex flex-col items-center gap-[40px]"
+                    >
+                        <CTAButton onClick={() => setIsLargeOpen(true)}>Large</CTAButton>
+                        <CTAButton onClick={() => setIsSmallOpen(true)}>Small</CTAButton>
+                    </div>
+                    <AlertDialog
+                        size="large"
+                        open={isLargeOpen}
+                        onOpenChange={setIsLargeOpen}
+                        title="다이얼로그"
+                        description="다이얼로그를 띄웁니다."
+                        leftText="취소"
+                        rightText="삭제"
+                    />
+                    <AlertDialog
+                        open={isSmallOpen}
+                        onOpenChange={setIsSmallOpen}
+                        title="다이얼로그"
+                        description="다이얼로그를 띄웁니다."
+                        leftText="취소"
+                        rightText="삭제"
+                    />
                 </div>
-                <AlertDialog
-                    open={isOpen}
-                    onOpenChange={setIsOpen}
-                    title="다이얼로그"
-                    description="다이얼로그를 띄웁니다."
-                    leftText="취소"
-                    rightText="삭제"
-                />
             </PageContainer>
         );
     },

src/components/stories/popover.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PageContainer } from '@/components/ui';
+import ActionButtonPopover from '../popover/action-button-popover';
+
+export default {
+    title: 'Components/Popover', // story 이름
+    component: ActionButtonPopover,
+} as Meta<typeof ActionButtonPopover>;
+
+type Story = StoryObj<typeof ActionButtonPopover>;
+
+export const ActionButton: Story = {
+    render: () => (
+        <PageContainer>
+            <h2 className="mx-auto mt-[40px] text-[20px] font-[700]">아래 클릭하세요</h2>
+            <div className="mx-auto">
+                <ActionButtonPopover onClick={() => {}} onEdit={() => {}} />
+            </div>
+        </PageContainer>
+    ),
+};

src/components/stories/toast.stories.tsx

@@ -16,15 +16,17 @@ const Toast = (props: Props) => {
     return (
         <>
             <PageContainer>
-                <button onClick={handleClick}>토스트 띄우기</button>
+                <button className="mx-auto mt-[40px] text-[20px] font-[700]" onClick={handleClick}>
+                    토스트 띄우기
+                </button>
             </PageContainer>
             <Toaster />
         </>
     );
 };
 
 export default {
-    title: 'Components/토스트', // story 이름
+    title: 'Components/Toast', // story 이름
     component: Toast,
 } as Meta<typeof Toast>;