feat: step1 of atom components stories (#113)

components/atoms/Profile/ProfileIcon.tsx

@@ -17,8 +17,7 @@ import {
 
 interface IProfileIcon {
   user: IUser | IUserRegisterForm | "guest" | "ABOUT";
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  size: any;
+  size: keyof typeof ICON_SIZE;
   isMember?: boolean;
   isImagePriority?: boolean;
 }

components/atoms/skeleton/Skeleton.tsx

@@ -1,17 +1,15 @@
-import { Skeleton as ChakraSkeleton } from "@chakra-ui/react";
+import { Skeleton as ChakraSkeleton, SkeletonProps } from "@chakra-ui/react";
+import { PropsWithChildren } from "react";
 
-interface ISkeleton {
-  children: React.ReactNode;
-  isLoad?: boolean;
-}
+interface ISkeleton extends Pick<SkeletonProps, "isLoaded"> {}
 
-function Skeleton({ children, isLoad }: ISkeleton) {
+function Skeleton({ children, isLoaded = false }: PropsWithChildren<ISkeleton>) {
   return (
     <ChakraSkeleton
       borderRadius="8px"
       startColor="RGB(227, 230, 235)"
       endColor="rgb(246,247,249)"
-      isLoaded={isLoad}
+      isLoaded={isLoaded}
       height="100%"
       width="100%"
     >

modals/aboutHeader/promotionModal/PromotionModalDetail.tsx

@@ -23,7 +23,7 @@ function PromotionModalDetail() {
       <div>
         <span>현재 참여 수</span>
         <VoteNum>
-          <Skeleton isLoad={!isLoading}>
+          <Skeleton isLoaded={!isLoading}>
             {applyCnt || ""}명<Temp>(중복 포함)</Temp>
           </Skeleton>
         </VoteNum>

stories/atoms/badges/Badge.stories.ts

@@ -3,16 +3,13 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { Badge } from "../../../components/atoms/badges/Badges";
 
 const meta = {
-  title: "ATOMS/Button/Badge",
+  title: "Atoms/Badge/Badge",
   component: Badge,
-  parameters: {},
   tags: ["autodocs"],
-  argTypes: {},
-
-  args: {},
 } satisfies Meta<typeof Badge>;
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {

stories/atoms/badges/OutlineBadge.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import OutlineBadge from "../../../components/atoms/badges/OutlineBadge";
+
+const meta = {
+  title: "Atoms/Badge/OutlineBadge",
+  component: OutlineBadge,
+  tags: ["autodocs"],
+} satisfies Meta<typeof OutlineBadge>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    colorScheme: "mintTheme",
+    text: "OutlineBadge",
+  },
+};
+
+export const PrimarySizeSmall: Story = {
+  args: {
+    ...Primary.args,
+    size: "sm",
+  },
+};

stories/atoms/blocks/IconButtonColBlock.stories.tsx

@@ -0,0 +1,39 @@
+import { faLock } from "@fortawesome/pro-light-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import IconButtonColBlock from "../../../components/atoms/blocks/IconButtonColBlock";
+
+const meta = {
+  title: "Atoms/Blocks/IconButtonColBlock",
+  component: IconButtonColBlock,
+  tags: ["autodocs"],
+} satisfies Meta<typeof IconButtonColBlock>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    props: {
+      icon: <FontAwesomeIcon icon={faLock} color="var(--gray-3)" />,
+      title: "I'm title prop",
+      buttonProp: {
+        text: "I'm Button's text prop",
+        func: () => {},
+      },
+      disabled: false,
+    },
+  },
+};
+
+export const PrimaryDisabled: Story = {
+  args: {
+    ...Primary.args,
+    props: {
+      ...Primary.args.props,
+      disabled: true,
+    },
+  },
+};

stories/atoms/buttons/ArrowBackButton.stories.ts

@@ -5,14 +5,11 @@ import { ArrowBackButtonUI } from "../../../components/atoms/buttons/ArrowBackBu
 const meta = {
   title: "ATOMS/Button/ArrowBackButton",
   component: ArrowBackButtonUI,
-  parameters: {},
   tags: ["autodocs"],
-  argTypes: {},
-
-  args: {},
 } satisfies Meta<typeof ArrowBackButtonUI>;
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {

stories/atoms/buttons/ArrowTextButton.stories.ts

@@ -5,14 +5,11 @@ import ArrowTextButton from "../../../components/atoms/buttons/ArrowTextButton";
 const meta = {
   title: "ATOMS/Button/ArrowTextButton",
   component: ArrowTextButton,
-  parameters: {},
   tags: ["autodocs"],
-  argTypes: {},
-
-  args: {},
 } satisfies Meta<typeof ArrowTextButton>;
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {

stories/atoms/buttons/BasicButton.stories.ts

@@ -6,7 +6,6 @@ import { BasicButton } from "../../../components/atoms/buttons/BasicButton";
 const meta = {
   title: "ATOMS/Button/BasicButton",
   component: BasicButton,
-  parameters: {},
   tags: ["autodocs"],
   argTypes: {
     backgroundColor: { control: "color" },
@@ -16,6 +15,7 @@ const meta = {
 } satisfies Meta<typeof BasicButton>;
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {

stories/atoms/buttons/HighlightedTextButton.stories.ts

@@ -5,14 +5,11 @@ import HighlightedTextButton from "../../../components/atoms/buttons/Highlighted
 const meta = {
   title: "ATOMS/Button/HighlightedTextButton",
   component: HighlightedTextButton,
-  parameters: {},
   tags: ["autodocs"],
-  argTypes: {},
-
-  args: {},
 } satisfies Meta<typeof HighlightedTextButton>;
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {

stories/atoms/buttons/ShadowBlockButton.stories.ts

@@ -5,14 +5,11 @@ import ShadowBlockButton from "../../../components/atoms/buttons/ShadowBlockButt
 const meta = {
   title: "ATOMS/Button/ShadowBlockButton",
   component: ShadowBlockButton,
-  parameters: {},
   tags: ["autodocs"],
-  argTypes: {},
-
-  args: {},
 } satisfies Meta<typeof ShadowBlockButton>;
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {

stories/atoms/buttons/ShadowCircleButton.stories.ts

@@ -5,14 +5,11 @@ import ShadowCircleButton from "../../../components/atoms/buttons/ShadowCircleBu
 const meta = {
   title: "ATOMS/Button/ShadowCircleButton",
   component: ShadowCircleButton,
-  parameters: {},
   tags: ["autodocs"],
-  argTypes: {},
-
-  args: {},
 } satisfies Meta<typeof ShadowCircleButton>;
 
 export default meta;
+
 type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {

stories/atoms/loaders/MainLoading.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { MainLoading } from "../../../components/atoms/loaders/MainLoading";
+
+const meta = {
+  title: "Atoms/Loaders/MainLoading",
+  component: MainLoading,
+  tags: ["autodocs"],
+} satisfies Meta<typeof MainLoading>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {},
+};

stories/atoms/profile/ProfileIcon.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import ProfileIcon from "../../../components/atoms/Profile/ProfileIcon";
+
+const meta = {
+  title: "Atoms/Profile/ProfileIcon",
+  component: ProfileIcon,
+  tags: ["autodocs"],
+} satisfies Meta<typeof ProfileIcon>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    user: "ABOUT",
+    size: "md",
+  },
+};

stories/atoms/skeletons/Skeleton.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import Skeleton from "../../../components/atoms/skeleton/Skeleton";
+
+const meta = {
+  title: "Atoms/skeleton/Skeleton",
+  component: Skeleton,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    children: "I'm Skeleton's children",
+  },
+};